Nov 11

PrimeFaces Elite 5.1.3 Released

PrimeFaces 5.1.3 brings handy new features such as DataGrid for PrimeFaces Mobile, keyboard navigation support for tree component, p:columns support inside p:columnGroup, core improvements to p:columnToggler and ability to use overlayPanel as standalone just like dialog.

Mobile DataGrid

Mobile DataTable has been added in 5.1.2 and our next target was a mobile renderer for DataGrid. Mobile DataGrid is responsive by nature and usage is same as the standard one. See the live demo to checkout the DataGrid in action.

Sortable and Filterable for Columns

Column and Columns components get two new attributes; sortable and filterable. These attributes are mainly added for dynamic columns where a dynamic column can be configured as sortable or filterable on demand. In the past, all dynamic columns are sortable and filterable since we were only checking the presence sortBy and filterBy expressions limiting the flexibility. Of course the change is backward compatible, these attributes are consulted only if sortBy and filterBy expressions are present.

Accessibility for Tree

Accessibility is constantly improved in PrimeFaces, 5.1.3 provides keyboard navigation support for tree component where nodes can be navigated through arrow keys and selection can be made with enter or space. Accordion and TabView will get keyboard navigation support very soon as well.

ColumnToggler Improvements

Columns can now be defined as invisible by using the new visible attribute, this also enables a Stateful ColumnToggler easily.

New Features and Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | 1 Comment
Nov 07

Stateful Column Toggler

Column toggler component is stateless by nature, that means changes are client side only. When visibility of a column gets hidden, the th and td elements get invisible at client side and the server side column instance is not notified. Design decision is to leave the state management to the page author at backing bean because we prefer avoiding using JSF viewstate as much as we can because to reset the changes, manual cleanup is required by the page author by accessing the component at backing bean which means coupling the bean with UI apis. So although in some cases this behavior is preferred, synchronization issues might occur on filtering and sorting because the column will pop-in again after filter or sort.

Implementing a stateful toggler is very easy thanks to the flexible PrimeFaces callbacks, for this one we’ll use the toggle ajax behavior and a list of booleans bound to the visible property of the column where we’ll change the visibility on toggle event. This is a modified version of the live demo;

 <h:form>
            <p:dataTable id="cars" var="car" value="#{dtBasicView.cars}">
                <f:facet name="header">
                    List of Cars

                    <p:commandButton id="toggler" type="button" value="Columns" style="float:right" icon="ui-icon-calculator" />
                    <p:columnToggler datasource="cars" trigger="toggler">
                        <p:ajax event="toggle" listener="#{dtBasicView.onToggle}" />
                    </p:columnToggler>
                </f:facet>

                <p:column headerText="Id" visible="#{dtBasicView.list[0]}">
                    <h:outputText value="#{car.id}" />
                </p:column>

                <p:column headerText="Year" visible="#{dtBasicView.list[1]}">
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column headerText="Brand" visible="#{dtBasicView.list[2]}">
                    <h:outputText value="#{car.brand}" />
                </p:column>

                <p:column headerText="Color" visible="#{dtBasicView.list[3]}">
                    <h:outputText value="#{car.color}" />
                </p:column>

                <p:column headerText="Price" visible="#{dtBasicView.list[4]}">
                    <h:outputText value="#{car.price}">
                        <f:convertNumber type="currency" currencySymbol="$" />
                    </h:outputText>
                </p:column>
            </p:dataTable>

            <p:commandButton value="Refresh" ajax="false" />

        </h:form>
@ManagedBean(name="dtBasicView")
@ViewScoped
public class BasicView implements Serializable {

    private List<Car> cars;

    private List<Boolean> list;

    @ManagedProperty("#{carService}")
    private CarService service;

    @PostConstruct
    public void init() {
        cars = service.createCars(10);
        list = Arrays.asList(true, true, true, true, true);
    }

    public List<Car> getCars() {
        return cars;
    }

    public void setService(CarService service) {
        this.service = service;
    }

    public List<Boolean> getList() {
        return list;
    }

    public void onToggle(ToggleEvent e) {
        list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE);
    }
}

That is it, you just need to add a list of booleans to keep the state bound to the column’s visible attribute and just onToggle event. Please note that visible attribute is recently added for 5.1.3 and 5.2 to control the visibility of the column initially.

Posted in PrimeFaces | Comments Off
Nov 05

Geocoding with Map Component

Geocoding support has been a popular feature request with over 70 watchers, as of 5.1.2 this feature is implemented by Map component using Google Geocoding service. There are two new methods added to the widget;

  • geocode(address)
  • reverseGeocode(lat, lng)

Usage is simple, these methods are invoked from the widget instance and corresponding ajax behavior events are called passing the response from Google back to the backing beans. Geocode event provides the query and the list of addresses with coordinates whereas ReverseGeocodeEvent gives the list of formatted addresses for a given coordinate.

Live demo and source code are available at PrimeFaces Showcase.

 

Posted in PrimeFaces | 1 Comment
Nov 03

PrimeFaces Elite 5.1.2 and 5.0.12 Released

PrimeFaces Team is pleased to announce the two new updates for the 5.1 and 5.0 series. There are useful new features and significant amount of maintenance to improve overall quality.

Mobile DataTable

DataTable presents a collection of data in a responsive tabular layout. Columns can be given priority to define visibility depending on screen size and optional reflow mode enables stacking on smaller screens. Most important features including pagination, sorting, lazy loading, dynamic columns, grouping and single-multiple selection are provided as well. In addition four touch events are available to interact with the table; swipeleft, swiperight, tap and taphold. In the live demo, it is possible to see the details of a record in a growl with swipeleft and delete the record with swiperight.

Partial Submit Filter

PartialSubmit is a handy feature of PrimeFaces that is not available in core JSF where only the input values related to the partially executed component are sent over the network in an ajax request. PartialSubmit filter takes this one step further and allows customization of the data to be sent. It is basically a jquery selector with “:input” as the default value. There are various use cases, for example you have a datatable with input controls in body and when you do paging, sorting or row selection, the input values will be sent to the server which is unncessary, in this case you can use the following filter to avoid sending the inputs inside columns. This speeds up page performance and reduces the amount of data transfer in network.

<p:ajax event="page" partialSubmit="true" partialSubmitFilter=":not(:input)" />

Geocoding

Geocoding support has been a popular request from the community and we’ve provided geocode and reverse geocode utility integrated as ajax behaviors so that you are able to get the geocode results at backing bean easily.

New Features and Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle. Next Elite Releases 5.1.3 and 5.0.13 are planned for mid november.

Posted in PrimeFaces | 1 Comment
Oct 27

PrimeFaces Mobile DataTable

DataTable has been a missing component in PrimeFaces Mobile and requested by many of PrimeFaces users. PrimeFaces 5.2 focuses on mobile enhancements and the first thing we’ve done is creating a touch optimized responsive datatable for PFM.

Responsive Modes

There are two responsive modes provided, one is the ColumnToggle mode where columns are given priority from 1 to 6 and depending on screen sizes, visibility is toggled based on this value.

Other option is the Reflow mode, with this setting, in smaller screens a list layout is used instead of a tabular layout.

Core Features

Most important features including pagination, sorting, lazy loading, dynamic columns, grouping and single-multiple selection are provided as well. In future, we plan to bring more from the core, however this first batch of features should cover most of the requirements.

Touch Events

Four touch events are available to interact with the table; swipeleft, swiperight, tap and taphold. In the live demo, it is possible to see the details of a record in a growl with swipeleft and delete the record with swiperight.

Online Demo

Early preview demo is available at PrimeFaces Showcase.

Availability

Mobile DataTable will be available next week for Elite Subscribers via 5.1.2 and for Community Users in 5.2.

Posted in Uncategorized | Comments Off
Oct 20

PrimeFaces Elite 5.1.1 Released

PrimeFaces 5.1 is updated with its first Elite Release featuring 19 improvements. Highlight of 5.1.1 is the FontAwesome integration, Skin for simple uploader, implementations of a couple of requests from our PRO users and maintenance to provide a batch of defect fixes.

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. PrimeFaces now bundles FontAwesome and provides the CSS tuning of components for the icons. Any component that provides an icon attribute such as buttons or menuitems can accept one of the 479 icons of Font Awesome. In order to enable this feature, a context param is required to be enabled.

<context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

Usage is simple as;

<p:commandButton value="Edit" icon="fa fa-edit" type="button"/>

See the live demo.

Please note that, ThemeRoller icons are still supported as the default iconset whereas FontAwesome icons are provided out of the box as alternative. PrimeFaces components who use icons like accordion panel, tree, menuButton still use ThemeRoller icons and depending on feedback we currently consider using FontAwesome counterparts for the default icons as well for replacement since FontAwesome icons are superior.

Simple Uploader Skin

Simple file uploader received a facelift to be aligned with the rest of the suite.

New Features and Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle. Next Elite Release 5.1.2 is planned for first week of November.

Posted in PrimeFaces | 3 Comments
Oct 15

PrimeFaces 5.0.11 and 4.0.23 Released

PrimeFaces 5.0.x and 4.0.x series are updated with brand new Elite Releases. Focus is on maintenance with a new nice feature to add skinning to simple file uploader aligning the component with the rest of the suite.

New Features

Enhancements

Defect Fixes

Roadmap

Next week, we plan to release 5.1.1, the first Elite release for 5.1 series featuring most of the improvements above and more.

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | Comments Off
Oct 06

PrimeFaces 5.1 Released

!It is PrimeTime! PrimeTek is proud to announce the fully featured 5.1 community release. There are over 240 improvements in general, new components, regular maintenance work, accessibility enhancements, responsive design features and more.

New Components

Ribbon is a set of toolbars grouped in different tabs.

InputSwitch is a new addition to the suite, used to provide a boolean value with a switch UI.

Barcode component generates various types of barcodes easily. SVG (default) and PNG are the supported export formats where PNG is used by default for browsers that does not support SVG like IE8.

Grid CSS

Grid CSS is a lightweight responsive layout utility optimized for mobile devices, tablets and desktops. Up to 12 columns are supported based on fluid and fixed modes. It can be used as standalone and built-in integration is available for DataGrid and PanelGrid components.

Other Highlights

  • Improved scrollable datatable implementation
  • Grouping for AutoComplete
  • Toggleable Menu
  • ui:repeat support for columns and rows in PanelGrid and DataTable header
  • Custom content support for paginator
  • Improvements to DataTable Lazy Loading
  • Better cross browser support

Quality

There are over 140 defect fixes improving the overall quality of the framework. Please note that these fixes were already available to ELITE and PRO users bi-weekly. Now they are available to our community users as well.

Accessibility

Accessibility is not usually the first priority in web application development and unfortunately many tools ignore it. Since PrimeFaces 3.5 we have been working on it a lot across our suite and constantly improve various aspects with each release. Considering the complexity of the rich UI components, special care needs to be taken in addition to the core functionality. With 5.1, various component got improved keyboard support like datatable sort headers and screen reader compatibility is provided for components such as autocomplete.

PrimeFaces Push and PrimeFaces Mobile

There are no major changes for the submodules except maintenance. Special thanks to Async-IO for the defect fixes in Push module.

Full Changelog

Here is the full changelog documenting the changes.

Documentation

User Guide is updated to cover 5.1. In addition api and vdl docs are available online at documentation homepage as well.

Migration Guide

Please refer to the migration guide, there are no breaking changes and 5.1 should be a drop-in replacement from 5.0. Some of the deprecated features are removed.

Download

5.1 is available maven central repository and as a standalone download as well, refer to the downloads page for details.

Thank You

Thanks to my teammates Thomas Andrashcko, Mert Sincan and Sudheer Jonna for their contributions in this release. Special thanks to Jeanfrancois Arcand for his great work on Atmosphere Integration for Push and last but not least our great community who kept providing feedback to help us improve PrimeFaces.

Roadmap

Next release 5.2 is planned for late Q1 of 2015. Elite Releases for 5.1 will be initiated in 2 weeks with the 5.1.1 release and 4.0.x will still continue to be supported by Elite for a little while. There are cool features coming up, keep an eye on this blog to keep updated.

Posted in PrimeFaces | 6 Comments
Sep 30

PrimeFaces Elite 5.0.10 Released

PrimeFaces 5.0.x is updated with a new release featuring regular maintenance and a couple of feature requests from PRO users.

Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | Comments Off
Sep 22

PrimeFaces 5.1.RC1 Released

PrimeFaces Team is pleased to announce the first release candidate of PrimeFaces 5.1. It has been over 4 months since 5.0 and our team has put a lot of effort in improving the framework.

There are 225 filed improvements. We’ll do a detailed post of these when 5.1 final is released however here is a short overview of the notable changes;

  • 3 new components (ribbon, inputSwitch and barcode)
  • Responsive Grid CSS
  • Responsive layout modes for DataGrid and PanelGrid
  • Accessibility enhancements (ARIA) to various components with keyboard and screenreader support
  • Improved scrollable datatable implementation
  • Grouping for AutoComplete
  • Toggleable Menu
  • ui:repeat support for columns and rows in PanelGrid and DataTable header
  • Custom content support for paginator
  • Improvements to DataTable Lazy Loading
  • Better cross browser support
  • 140+ Defect Fixes (already available to Elite Users bi-weekly)

Download

Please visit PrimeFaces Downloads page to download the jar and take it for a test run.

Migration

5.1 is a drop-in replacement for 5.0, we’ll update the migration guide with some minor points to note as well.

Roadmap

5.1 Final is planned for 6th of October, in the meantime we’d be happy if you can test the RC and report any issues.

Posted in PrimeFaces | 1 Comment