Nov 21

Dynamic Columns For TreeTable

Nowadays we are implementing the most requested features by the PrimeFaces Community, one hot request was dynamic columns support for TreeTable via p:columns just like DataTable has.

Static p:column and Dynamic p:columns can be used together and sorting is also supported using a dynamic column. Live demo is available at PrimeFaces Showcase.

This enhancement is coming up next week to Elite and PRO users via 5.1.5 and to community users in 5.2.

Posted in PrimeFaces | Leave a comment
Nov 20

Shared OverlayPanel

OverlayPanel is positioned relative to its target based on a one-to-one relationship, this causes limitations when used inside a data iteration because every row needs an overlaypanel which is far from ideal, requires client side memory and slows down page performance.

Since Elite 5.1.3, OverlayPanel can be shared just like a Dialog. Assume you have buttons on each datatable row and clicking this button displays the details in an overlayPanel displayed next to the button. Trick is to call the show() method by passing the client id of the caller. Live Demo is available at Showcase.

Posted in PrimeFaces | 3 Comments
Nov 18

OrderList Events

Due to popular community demand, we’ve added 3 events to OrderList component to bring the flexibility of callbacks. These are;

  • select
  • unselect
  • reorder

Usage is simple, in case you’d like to get notified whenever one of these events occur, hook-in via p:ajax;

<p:orderList value="#{orderListView.cities}" var="city" controlsLocation="none" itemLabel="#{city}" itemValue="#{city}">
        <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
        <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
        <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>
</p:orderList>
public void onSelect(SelectEvent event) {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Selected", event.getObject().toString()));
    }

    public void onUnselect(UnselectEvent event) {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Unselected", event.getObject().toString()));
    }

    public void onReorder() {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "List Reordered", null));
    }

These events are coming soon for 5.1.5, check out the live demo to see it in action.

Posted in Java | 2 Comments
Nov 17

PrimeFaces Elite Triple Release

PrimeFaces Elite versions are updated with 3 new releases; 5.1.4, 5.0.13 and 4.0.24. Highlight of this release cycle is the major improvement for the hidden container support which has been an ongoing limitation in the past.

Hidden Container Support

The problem is well described at here along with our first solution which turned out to be limitations with the nested containers and initialization time mismatch. For 5.1.4, we’ve taken another approach and we’re glad to announce that new implementation solves all the cases we can think of. In the past, page authors had to initialize the widgets manually which is tricky most of the time, starting with 5.1.4, everything should just work.

Paginator for Mobile DataList

There is an ongoing effort in PrimeFaces Mobile, we’ve recently added a DataTable and DataGrid renderer and with 5.1.4, DataList also gets a paginator and lazy loading.

Here are the changelog for each version;

5.1.4

New Features and Enhancements

Defect Fixes

5.0.13

New Features and Enhancements

Defect Fixes

4.0.24

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.

Roadmap

4.0.24 is the last release for the 4.0.x line, it has been over a year since 4.0 and support is now discontinued. 5.0.x will be supported until the end of 2014. We strongly suggest upgrading to latest 5.1.x release to get the best PrimeFaces Experience.

Posted in PrimeFaces | Comments Off
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