Thursday, August 28, 2014

JavaOne 2014 Sessions

I am delighted to be presenting on Java EE topics this year at JavaOne.  In particular, I will be presenting on Concurrency Utilities for Java EE, as well as presenting recipes covering some of the new features in Java EE 7.

I want to thank Geertjan Wielenga, who has asked me to present a lightning talk for NetBeans Day (September 28), where I will be covering some of the great NetBeans support for the PrimeFaces JSF Framework.  Looking forward to it!

Session Details:

Session ID: UGF8906
Session Title: Lightning Talks: Even More Productivity with Free Java Tools
Venue / Room: Moscone South - 200
Date and Time:  9/28/14, 17:30 - 18:15

Session ID: CON2038
Session Title: Java EE 7 Recipes
Venue / Room: Parc 55 - Cyril Magnin I
Date and Time: 9/29/14, 14:30 - 15:30

Session ID: CON2258
Session Title: Java EE 7 Recipes for Concurrency
Venue / Room: Parc 55 - Cyril Magnin I
Date and Time: 10/1/14, 16:30 - 17:30


David Heffelfinger and Mark Heckler will be hosting the Java EE Hands On Lab for JavaOne.  I want to thank them for asking me to be on-hand to help out, as needed.  Looking forward to helping promote Java EE.  I will update this post to provide the date and time for the HOL when it becomes available.


Friday, August 22, 2014

Getting Started with PrimeFaces Mobile


Introduction

If you have developed an application that utilizes PrimeFaces, or if you are planning to develop a web application for use on desktop and mobile devices, then consider PrimeFaces Mobile for your mobile implementation. This blog post will cover some basics to help you get started developing a mobile interface for an existing PrimeFaces application. However, the same procedures can be applied to an application that is being written from scratch. This article is a precursor to an article that I am currently writing for OTN, which will cover the PrimeFaces Mobile API in more detail.  That article will be published later this year.

Getting in the Mobile Mindset

One of the most important pieces of a mobile project is getting into the mobile mindset.  While you may have a set of components that you are comfortable using on standard web applications, these components may not provide the best experience when transferred to the smaller screen.  For that reason, you need to think about how your user is going to be interacting with your application on the small screen, and provide them with the most convenient user interface as possible.  Some things to consider are the amount of text that you will want your users to be typing.  If they are on a small device, it may be cumbersome to type lots of text, so we will want to provide them with easy to use components, allowing them to type as little as possible, and even selecting from lists instead.  We also need to consider real estate (no not the housing market).  Adding a menu to the top or bottom of the screen may not be beneficial to the user if they do not have enough screen left to easily navigate an application.

These are just a couple of the issues tat are presented when developing applications for a mobile device.  PrimeFaces Mobile is well suited to assist in these areas since it is built upon one of the leading mobile HTML5 based UI frameworks.  PrimeFaces Mobile consists of many UI components that can enable users to be highly productive on a mobile device.  If you take a look at the PrimeFaces Showcase, you can see many of these mobile components in action.  This enables you to get an idea of how these components look, and how they react for the user.  It is recommended to visit the PrimeFaces mobile showcase on a mobile device such as a smartphone or tablet gain the best understanding of how they'll react.

Creating a Mobile Root

Now that you have a basic understanding of some mobile design concepts, let's take a look at how easy it is to get started creating mobile views using PrimeFaces mobile.  Before PrimeFaces 5, mobile was a separate download that needed to be included in your project.  Now it is easier than ever to get going with PrimeFaces Mobile, as it is packaged as part of PrimeFaces 5.  This makes it easy to build enterprise web applications on PrimeFaces for the standard browser, and then build separate views for use on mobile devices, oftentimes utilizing the same back-end business methods for each.  I recommend creating a view that is dedicated as a starting point or "root" for mobile device users.  I also recommend creating a separate MobileNavigationController class to handle navigation throughout the mobile views, as needed.  We can utilize the mobile root view to set the hook for using the MobileNavigationController vs. the standard web application navigation.

For the purposes of this article, let's simply call our mobile root mobileRoot.xhtml.  In this case, mobleRoot.xhtml may look something like the following:
<html xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns="http://www.w3.org/1999/xhtml">


    <f:metadata>
        <f:viewaction action="#{mobileNavigationController.doMobile()}" id="useMobile">
    </f:viewaction>
    </f:metadata>

    <h:head>
        <h:outputscript library="js" name="addtohomescreen.js">
        <h:outputstylesheet library="css" name="addtohomescreen.css">
        <script>
            addToHomescreen();
        </script>
    </h:outputstylesheet></h:outputscript></h:head>
    <h:body>

    </h:body>
</html>

In the view above, a JSF viewAction is used to initiate the MobileNavigationController doMobile() method, which sets the mobile UI into motion.  From this point, the navigation can take the user to the primary movile view of the application, and it can also set any other necessary configurations.  The addtohomescreen.js script (http://cubiq.org/add-to-home-screen) can be also be used to supply a nice button to recommend mobile device users to add the mobile application to their homescreen for a more rich experience.  I will address some additional custom configurations for full screen web applications in a future post or the upcoming OTN article.

Creating a Simple Mobile View

Once we've provided our users with a clear path to access the mobile views, we need to ensure that the PrimeFaces mobile render kit is being used to display the mobile views.  To flag a view for use with PrimeFaces Mobile, supply the "renderKitId" attribute in the <f:view> tag of your view, and apply PRIMEFACES_MOBILE as the value.

<f:view renderKitId="PRIMEFACES_MOBILE">


Another requirement or building a PrimeFaces Mobile view is to add the mobile namespace (xmlns:pm="http://primefaces.org/mobile"), as it will be used for each of the PrimeFaces Mobile specific components.  It is also a good idea to include the JSF passthrough (xmlns:pt="http://xmlns.jcp.org/jsf/passthrough") namespace, as we may wish to make use of some HTML5-specific features.

A mobile page consists of a header, content, and a footer.  Each mobile page is enclosed within the <pm:page> tag.  A mobile view can consist of a single page enclosed in <pm:page>, or multiple pages, each with their own identifiers.  In this example, we will create two views that constitute two mobile pages, the second page is accessed via a link on the first page.  It is possible to utilize Facelets templates to build an entire mobile application solution, but in this example we will create each view separately.  It is also possible to develop using the "single page" application strategy that is currently quite popular...we will cover more on that in the OTN article.

The PrimeFaces Mobile example in this post and also the upcoming OTN article builds upon the Acme Pools example that was used in my "PrimeFaces in the Enterprise" article for OTN (http://www.oracle.com/technetwork/articles/java/java-primefaces-2191907.html).  In the full web version, the root view includes a listing of Acme Pool customers in a table view (Figure 1).  We would like to transform this view (and the others) to work better on a mobile device, and also allow selection of each row, which will take us to more information on the selected customer.

Figure 1:  Standard Acme Pools View

For the purposes of this post, we will work with the initial customer view to convert it into a mobile view.  The view will contain a list of customers, and if you select a particular row in the view, then more information on the selected customer will be displayed.  To display a table using PrimeFaces mobile, you must make use of the DataList component, which provides a convenient "clickable" link or button for each row of data.  The DataList differs from a DataTable in that there are no columns in a DataList, but rather, there is one group of related data for each row of data.  The group of data should be wrapped with a clickable link, which will then provide navigation for the user to the second view displaying more details on the selected item.  The following code is used to develop the mobile UI for the customer data list.

Listing 1:  Mobile View (mobile/index.xhtml)
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pm="http://primefaces.org/mobile"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <f:view renderKitId="PRIMEFACES_MOBILE">
        <h:head></h:head>
        <h:body>
            <pm:page id="customerListing">
                <pm:header>
                    Acme Pools
                </pm:header>
                <pm:content>
                    <h:form id="indexForm">
                        <p:panel header="Acme Pools Customer Listing">
                            <p:dataList id="datalist"
                                 value="#{customerController.items}"
                                 var="item"    
                                 paginator="true"
                                 pt:data-role="listview" pt:data-filter="true"
                                 rows="10"
                                 rowsPerPageTemplate="10,20,30,40,50"
                                        >
                                
                                <p:commandLink
                                   action="#{customerController.loadCustomer}">
                                  <f:param name="customer" value="#{item.customerId}"/>
                                    <h:panelGroup>

                                    <h:outputText value="#{item.customerId} - #{item.name}"/>

                                    <br/>
                                    <h:outputText value="#{item.email}"/>


                                    </h:panelGroup>
                                </p:commandLink>
                            </p:dataList>
                        </p:panel>
                    </h:form>
                </pm:content>
                <pm:footer>
                    Author: Josh Juneau
                </pm:footer>
            </pm:page>
 
        </h:body>
    </f:view>
</html>

As you can see, we flag the view for PrimeFaces Mobile use via the specification in the <f:view> tag.  We then create a <pm:page>, and inside of the page we have sections for <pm:header>, <pm:content>, and <pm:footer>.  The main content consists of a PrimeFaces mobile DataList that displays customer data, and the data is wrapped in a p:commandLink component.  When the link is clicked, the #{customerController.loadCustomer} method is invoked, passing the ID of the selected customer.  Note that the DataList component uses passthrough attributes to specify the data-role and data-filter HTML5 attributes.  These are used to provide the user with a more rich experience.  The filter makes it easy for the user to begin typing a value into a filter textbox, and have the list shortened to contain only the records that contain the typed text.  The resulting view looks like Figure 2.
Figure 2:  Mobile View

The code in Listing 2 contains the implementation for loadCustomer().  The customer ID is passed to the find() method of the EJB, which then returns the selected customer data.

Listing 2:  CustomerController loadCustomer()


    public String loadCustomer() {

        Map requestMap = FacesContext.getCurrentInstance().

                getExternalContext().getRequestParameterMap();

        String customer = (String) requestMap.get("customer");

        selected = ejbFacade.find(Integer.valueOf(customer));

        return "customerInfo";


    }

When a customer is selected in the DataList, the loadCustomer() method is invoked, and it results in the navigation to our second mobile view, customerInfo.xhtml (Figure 3).  The second mobile view basically displays customer details, and provides a link to go back to the DataList of customers.  The code for customerInfo looks like that in Listing 3.

Listing 3:  customerInfo.xhtml View


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pm="http://primefaces.org/mobile">
    <f:view renderKitId="PRIMEFACES_MOBILE">
        <h:head></h:head>
        <h:body>
           
            <pm:page id="customerInfo">
                <pm:header>
                    Acme Pools
                </pm:header>
                <pm:content>
                    <h:form>
                        <p:panel header="Acme Pools Customer Information">
                           
                            #{customerController.selected.name}
                            <br/>
                            #{customerController.selected.addressline1}
                            <br/>
                            #{customerController.selected.addressline2}
                            <br/>
                            #{customerController.selected.phone}
                            
                        </p:panel>
                    <p:commandLink action="index?transition=slide" value="Go Back"/>
                    </h:form>
                </pm:content>
                <pm:footer>
                    Author: Josh Juneau
                </pm:footer>
            </pm:page>
        </h:body>
    </f:view>
</html>


As you can see, the customerInfo view contains the same structure as the original mobile view.  There are no special mobile components added, but as you can see from Figure 3, the standard PrimeFaces panel is styled to display nicely on the mobile device.
Figure 3:  Mobile View Selection
Conclusion

That wraps it up for this brief look into using PrimeFaces mobile.  As you can see, it is easy to develop a mobile interface for your applications.  The PrimeFaces mobile suite also includes custom frameworks for navigation, events, and more, making it easy to provide a nice mobile experience.  For instance, the events framework includes some swipe events, as well as taphold.  It is even possible to hook into the JQuery Mobile framework to provide even more mobile events to your application.  

The PrimeFaces mobile navigation framework consists of transitions, which ultimately provide your application with a smoother feel.  For instance, one can provide a transition of "slide" to a button navigation, which will result in a UI view that slides into focus when the button is clicked.  All of this can be tested using the PrimeFaces Showcase.

For more information on these and other important features of PrimeFaces mobile, please watch for my upcoming OTN article.

Resources


JQuery Mobile:  http://jquerymobile.com/

Saturday, August 02, 2014

Chicago Coder Conference Trip Report

The Chicago Coder Conference was held on Friday, August 5th.  The conference venue was a sleek downtown facility on Wacker Drive.  There were breakfast bagels and great coffee to start the day, along with some good networking opportunity.  The keynote began at 8:30 am, where JUG member Scott Kramer spoke about the events of the day, and introduced the keynote speakers.  The keynote included two speakers, each of which were executives from Chicago based companies.  The cars.com executive got into some technical detail covering Hadoop, and how it works, which was quite interesting.

The sessions I attended were led by excellent speakers.  Oracle’s own John Clingan spoke to Java EE 7 and Java EE 8 in his first session.  His talk detailed how Java EE has evolved over the years, and he discussed some of the ideas for the future of Java EE.  Those ideas encompassed a JSON-B API, incremental enhancements to many of the other APIs, continued focus on HTML5, more focus on the cloud, and some key enhancements to Java EE security.  Some of the security concepts looked quite interesting, as it may be possible in the future to utilize annotation based security, rather than configuration.

Next, I attended a session by Davinder Kohli entitled “Unclouding the Cloud”.  In this session, we learned the inner workings of several private and public cloud infrastructures.  He and his colleague then gave a demo of OpenStack, which was interesting, as we learned how easy it was to start and deploy new WordPress sites.

The lunch was great…good food and more great networking.  I then gave a talk on Java EE 7 entitled “Java EE 7 Recipes”.  The talk was well received, and I had quite a few people come and ask questions after the session.  I learned that many people are still not very familiar with the new Java EE, but they remember how difficult J2EE was in the past.  I will be giving a similar presentation at JavaOne...what would you like for me to cover??

The next session was an excellent presentation by Simon Maple entitled “Guide to JVM Languages”.  In this session, he demoed Java 8 lambdas, functional interfaces, and default methods in a live-coding demonstration.  He then covered how to use some similar features in Groovy, Scala, Kotlin, Ceylon, and Xtend.  This session was great, as Simon is an excellent speaker who involved the audience throughout the session.  We were able to compare each of the different languages, and learn a bit about each one.  The overall concept was that the JVM has many great languages…we should try to learn a few of them.

The last session I attended was presented by John Clingan, and it was covering Project Avatar.  Avatar.js is meant to be a node.js solution for the JVM.  In fact, most node.js applications can now be run on the JVM using Avatar.js.  John talked to the reasons why Oracle wanted to develop this solution, and why it was important for the community.  Node.js users could port their applications, and make use of all Java libraries since they are on the JVM with Avatar.js.  Many of the Java EE APIs are being wrapped in JavaScript so that they are accessible to clients using 100% JavaScript.  Oracle knows that Knockout JS and Angular JS are leading the way in single page application frameworks…and they want to enable easy development against Java EE and other JVM technologies for these front end technologies.

Overall, this was an excellent conference.  Kudos go out to the Chicago Java Users Group, and the Illinois Java Users Group for doing such a great job.  Big thanks to Scott Kramer for nudging me to submit a presentation for this conference…it was a great time.

Tuesday, July 22, 2014

JSF 2.3 on the Horizon

Work on the JavaServer Faces 2.3 Specification has begun.  According to the specification summary:

This JSR aims to improve the clarity of the existing JavaServer Faces
(JSF) specification and introduce a small, targeted set of new features
as directed by community contribution.

To summarize, JSF 2.3 will target small scale new features, community driven improvements, and platform integration.

Summary of features from the JSR text:

- Ajax method invocation:  Ability to make direct CDI method invocations from Ajax
- Multi-field validation
- Ability to @Inject FacesContext
- EL Performance Optimizations
- Cross-form Ajax Clarifications
- Platform Integration:  Ability to leverage platform features from Java EE 8 and Java SE 8

Proposed Timeline

Q3 2014  Expert Group formed
Q1 2015  Early Draft
Q3 2015  Public Review
Q4 2015  Proposed Final Draft
Q3 2016  Final Release

Specification leads:  Edward Burns and Manfred Riem

JSR Text:  https://java.net/downloads/javaserverfaces-spec-public/JSF_2_3/PreJsrFiling/20140706-jsf23-jsr.txt

Follow @jsf_spec on Twitter for JSF 2.3 updates.

Wednesday, June 11, 2014

JavaOne 2014 On the Horizon

This year, I submitted three proposals for the JavaOne conference, which takes place September 28 - October 2nd in San Francisco.  I am thrilled that two of them were accepted, and I am looking forward to presenting.  Here are a few details on the selected submissions:

Session ID: CON2038
Session Title: Java EE 7 Recipes
Abstract:
Learn important features of Java EE 7 through a number of examples, using a hands on approach, including working code demonstrations.  The examples are presented in a Problem, Solution, and How it Works recipe-style format, correlating usage of the APIs to real-life scenarios.  The presentation introduces topics using an easy-to-understand approach, and the examples showcase new features of Java EE 7, as well as mature Java EE features.  Recipes cover a variety of APIs from JSF to JPA to WebSockets, providing an overview of Java EE 7, along with examples using APIs together.  The talk explains server-side resources using GlassFish 4.
Attendees will walk away with a solid understanding of some of the most important features of Java EE 7.


Session ID: CON2258
Session Title: Java EE 7 Recipes for Concurrency
Abstract:
This session will demonstrate how to make use of the Concurrency Utilities for Java EE using a hands on approach, including working code demonstrations.  The examples will be presented in a Problem, Solution, and How it Works recipe-style format, which will correlate usage of the API to real-life scenarios.  Attendees will learn how to make use of ManagedExecutorService, ManagedScheduledExecutorService, ContextService, and ManagedThreadFactory resources via practical examples.  The talk will explain server-side resources and configuration via GlassFish, submitting tasks for asynchronous processing, and handling results.  In the end, attendees will be able to go back to the office and start making use of the Concurrency Utilities.

I want to thank all of the JavaOne content reviewers for their hard work, and I appreciate the opportunity to present!  I've seen lots of Twitter posts mentioning excellent sessions that have been selected from very prominent speakers.  I am grateful to be included as a presenter at one of the best Java conferences in the world, and I am looking forward to seeing all of the great presentations from others.  

See you in San Francisco this September!

Thursday, May 22, 2014

Developing a Data Export Utility with PrimeFaces

My day job involves heavy use of data.  We use relational databases to store everything, because we rely on enterprise level data management.  Sometimes it is useful to have the ability to extract the data into a simple format, such as a spreadsheet, so that we can manipulate it as-needed.  This post outlines the steps that I've taken to produce a effective and easy-to-use JSF-based data export utility using PrimeFaces 5.0.  The export utility produces a spreadsheet, including column headers.  The user has the ability to select which database fields to export, and in which order they should be exported.

We want to ensure that we have a clean user interface that is intuitive.  For that reason, I chose not to display any data on the screen.  Rather, the user interface contains a PrimeFaces PickList component that lists the different data fields to choose from, along with a button to produce the export.  Let's begin by setting up the database infrastructure to make this export utility possible.

For this post, I've enhanced the AcmePools application, which was developed via my article that was posted on OTN entitled PrimeFaces in the Enterprise.  The export utility allows one to export customer data into a spreadsheet.  The customer data is included in the sample database which is installed within Apache Derby by NetBeans, or you can use the SQL script for this post.  To follow along with the creation of this export utility, please download or create the AcmePools project within your environment.

There are two parts to the data export utility, the first part being a PrimeFaces PickList component for the user to select which fields to export, and the second being an export button which will extract the selected field contents into a spreadsheet.  The end result will resemble a user interface that looks like Figure 1.
Figure 1:  Data Export Utility


Developing the PickList Component

To begin, create the data infrastructure to support the PickList component.  This consists of a single database table to hold column names and labels for the entity data you wish to export, and optionally a database sequence to populate the primary key for that table.  In this case, the database table is named COLUMN_MODEL, and we populate the table with the entity field names that correspond to the database column names for the CUSTOMER database table.

-- Add support for data export
create table column_model(
id                  int primary key,
column_name         varchar(30),
column_label        varchar(150));
-- Optional sequence for primary key generation
create sequence column_model_s
start with 1
increment by 1;


-- Load with field (database column) names
insert into column_model values(
1,
'addressline1',
'Address Line 1');

insert into column_model values(
2,
'addressline2',
'Address Line 2');

insert into column_model values(
3,
'city',
'City');

insert into column_model values(
4,
'creditLimit',
'Credit Limit');

insert into column_model values(
5,
'customerId',
'Customer Id');

insert into column_model values(
6,
'discountCode',
'Discount Code');

insert into column_model values(
7,
'email',
'Email');

insert into column_model values(
8,
'fax',
'Fax');

insert into column_model values(
9,
'name',
'Name');

insert into column_model values(
10,
'phone',
'Phone');

insert into column_model values(
11,
'state',
'State');

insert into column_model values(
12,
'zip',
'Zip');


Next, create an entity class that can be used for accessing the column data from within the component.  If you use an IDE such as NetBeans, this can be done very easily via a wizard.  If using NetBeans, right click on the com.acme.acmepools.entity package, and select "New"-> "Entity Classes from Database", and then choose the data source for our sample database.  When the list of tables populates, select the COLUMN_MODEL table, as shown in Figure 2.  Lastly, choose "Next" and "Finish" to create the entity class.

Figure 2.  NetBeans IDE New Entity Classes from Database

Once completed, the entity class entitled ColumnModel should look as follows:

package com.acme.acmepools.entity;

import java.io.Serializable;
import java.math.BigDecimal;
import javax.persistence.Basic;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.Table;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import javax.xml.bind.annotation.XmlRootElement;

/**
 *
 * @author Juneau
 */
@Entity
@Table(name = "COLUMN_MODEL")
@XmlRootElement
@NamedQueries({
    @NamedQuery(name = "ColumnModel.findAll", query = "SELECT c FROM ColumnModel c"),
    @NamedQuery(name = "ColumnModel.findById", query = "SELECT c FROM ColumnModel c WHERE c.id = :id"),
    @NamedQuery(name = "ColumnModel.findByColumnName", query = "SELECT c FROM ColumnModel c WHERE c.columnName = :columnName"),
    @NamedQuery(name = "ColumnModel.findByColumnLabel", query = "SELECT c FROM ColumnModel c WHERE c.columnLabel = :columnLabel")})
public class ColumnModel implements Serializable {
    private static final long serialVersionUID = 1L;
    @Id
    @Basic(optional = false)
    @NotNull
    @Column(name = "ID")
    private BigDecimal id;
    @Size(max = 30)
    @Column(name = "COLUMN_NAME")
    private String columnName;
    @Size(max = 150)
    @Column(name = "COLUMN_LABEL")
    private String columnLabel;

    public ColumnModel() {
    }

    public ColumnModel(BigDecimal id) {
        this.id = id;
    }

    public BigDecimal getId() {
        return id;
    }

    public void setId(BigDecimal id) {
        this.id = id;
    }

    public String getColumnName() {
        return columnName;
    }

    public void setColumnName(String columnName) {
        this.columnName = columnName;
    }

    public String getColumnLabel() {
        return columnLabel;
    }

    public void setColumnLabel(String columnLabel) {
        this.columnLabel = columnLabel;
    }

    @Override
    public int hashCode() {
        int hash = 0;
        hash += (id != null ? id.hashCode() : 0);
        return hash;
    }

    @Override
    public boolean equals(Object object) {
        // TODO: Warning - this method won't work in the case the id fields are not set
        if (!(object instanceof ColumnModel)) {
            return false;
        }
        ColumnModel other = (ColumnModel) object;
        if ((this.id == null && other.id != null) || (this.id != null && !this.id.equals(other.id))) {
            return false;
        }
        return true;
    }

    @Override
    public String toString() {
        return "com.acme.acmepools.entity.ColumnModel[ id=" + id + " ]";
    }
    
}


Next, create an EJB session bean for the newly generated entity class so that the component can query the column data.  You can use your IDE for this as well if you'd like.  If using NetBeans, right-click on the com.acme.acmepools.session package, and select "New"->"Session Beans for Entity Classes".  Once the dialog opens, select the entity class "com.acme.acmepools.entity.ColumnModel" from the left-hand list, and click "Finish" (Figure 3).

Figure 3:  NetBeans IDE Session Beans for Entity Classes Dialog

After the session bean has been created, add a method named findId(), which can be used for returning the column id value based upon a specified column name.  The full sources for the ColumnModelFacade should look as follows:
package com.acme.acmepools.session;

import com.acme.acmepools.entity.ColumnModel;
import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;

/**
 *
 * @author Juneau
 */
@Stateless
public class ColumnModelFacade extends AbstractFacade {
    @PersistenceContext(unitName = "com.acme_AcmePools_war_AcmePools-1.0-SNAPSHOTPU")
    private EntityManager em;

    @Override
    protected EntityManager getEntityManager() {
        return em;
    }

    public ColumnModelFacade() {
        super(ColumnModel.class);
    }

    public ColumnModel findId(String columnName){
        return (ColumnModel) em.createQuery("select object(o) from ColumnModel as o " +
                              "where o.columnName = :columnName")
                              .setParameter("columnName", columnName)
                              .getSingleResult();
    }
    
}
Next, create a some helper classes that will be utilized for loading and managing the data within the PickList component. The first class is named ColumnBean, and it is used to store the entity data, which is later passed off to the PickList for use. The code for ColumnBean is a simple POJO:<
package com.acme.acmepools.bean;

import java.math.BigDecimal;

/**
 *
 * @author juneau
 */
public class ColumnBean {

    private BigDecimal id;
    private String columnName;
    private String columnLabel;

    public ColumnBean(BigDecimal id, String columnName, String columnLabel){
        this.id = id;
        this.columnName = columnName;
        this.columnLabel = columnLabel;
    }

    /**
     * @return the id
     */
    public BigDecimal getId() {
        return id;
    }

    /**
     * @param id the id to set
     */
    public void setId(BigDecimal id) {
        this.id = id;
    }

    /**
     * @return the columnName
     */
    public String getColumnName() {
        return columnName;
    }

    /**
     * @param columnName the columnName to set
     */
    public void setColumnName(String columnName) {
        this.columnName = columnName;
    }

    /**
     * @return the columnLabel
     */
    public String getColumnLabel() {
        return columnLabel;
    }

    /**
     * @param columnLabel the columnLabel to set
     */
    public void setColumnLabel(String columnLabel) {
        this.columnLabel = columnLabel;
    }

}
The PickList component needs to use a PrimeFaces DualListModel for accessing and updating the data. Therefore, we must implement a class that can be used for coercing the entity data into our ColumnBean POJO, and then storing it into the DualListModel so that it can be utilized by the PickList component. In the following class, entitled PickListBean, the constructor accepts a List<ColumnModel>, which is the entity data as an argument, performs the coercion, and then stores it into a DualListModel<ColumnBean> collection for use by the component.
package com.acme.acmepools.bean;

/**
 *
 * @author juneau
 */

import java.util.ArrayList;
import java.util.List;
import com.acme.acmepools.entity.ColumnModel;

import org.primefaces.model.DualListModel;

public class PickListBean {

    private DualListModel<ColumnBean> columns;

    private List<ColumnBean> source = null;
    private List<ColumnBean> target = null;


    public PickListBean(List<ColumnModel> columnModelList) {
        //Columns  
        source = new ArrayList<ColumnBean>();
        target = new ArrayList<ColumnBean>();
   
        for(ColumnModel column:columnModelList){
            ColumnBean bean = new ColumnBean(column.getId(), column.getColumnName(), column.getColumnLabel());
            source.add(bean);
        }
        

        columns = new DualListModel<ColumnBean>(source, target);

    }

    public DualListModel<ColumnBean> getColumns() {
        return columns;
    }

    public void setColumns(DualListModel<ColumnBean> columns) {
        this.columns = columns;
    }

   
}


Lastly, we need to create a controller class to access all of this data. To do so, create a class named ColumnModelController within the com.acme.acmepools.jsf package, and make it a CDI managed bean by annotating it with @Named and @SessionScoped. Make the class implement Serializable. The initial controller class should look as follows (we will be updating it later to include methods to facilitate the export):
@Named
@SessionScoped
public class ColumnModelController implements Serializable {

    @EJB
    ColumnModelFacade ejbFacade;

    private PickListBean pickListBean;
    private List<ColumnModel> columns;

    public DualListModel<ColumnBean> getColumns() {
        pickListBean = new PickListBean(ejbFacade.findAll());

        return pickListBean.getColumns();
    }
    
    public void setColumns(DualListModel<ColumnBean> columns) {
        pickListBean.setColumns(columns);
    }
}
As you can see, the getColumns() method queries the ColumnModel entity, which populates the DualListModel<ColumnBean> via the PickListBean constructor.

That takes care of the database infrastructure and business logic...now let's look at the PrimeFaces component that is used for the PickList.  The following excerpt, taken from the WebPages/poolCustomer/CustomerExport.xhtml view, contains the markup for the PickList component:

 <p:panel header="Choose Columns for Export">
                    <p:picklist effect="bounce" itemlabel="#{column.columnLabel}" itemvalue="#{column.columnName}" showsourcecontrols="true" showtargetcontrols="true" value="#{columnModelController.columns}" var="column">
                        <f:facet name="sourceCaption">Columns</f:facet>
                        <f:facet name="targetCaption">Selected</f:facet>
                    </p:picklist>
             </p:panel>

As you can see, the PickList is using columnModelController.columns for the data, which then uses the columnLabel field for displaying the names of the entity fields for export.  The titles for the source and target PickList windows are customizable via a facet.

Adding the Export Functionality

Now that we've developed a functional pick list, we need to do something with the data that is selected.  In this exercise, we will use a PrimeFaces DataExporter component to extract the data and store it into an Excel spreadsheet.  In reality, we need to incorporate a DataTable into the view to display the data first, and then we can use the DataExporter component to export the data which resides in the table.

To construct the DataTable that will be used for displaying the data, we need to add a few methods to the ColumnModelController class.  These methods will allow us to process the DataTable dynamically, so that we can construct columns based upon those that are chosen within the PickList.  In reality, the DataTable will query all of the Customer data, and then it will only display those columns of data that are selected within the PickList.  (We could modify this query by adding a filter, but that is beyond the scope of this post).  To load the table with data, we simply call upon the com.acme.acmepools.jsf.CustomerController getItems() method to return all of the data.

...
    public List<Customer> getItems() {
        if (items == null) {
            items = getFacade().findAll();
        }
        return items;
    }
...

Now let's add the necessary methods to the ColumnModelController so that we can dynamically construct the table.  First, add a method that will be invoked when we click the "Export" button.  This method will be responsible for building the currently selected column list:
public void preProcess(Object document) {

        System.out.println("starting preprocess");

        updateColumns();

    }

Next, let's take a look at the code for updateColumns(), which is invoked by the preProcess() method:
/**

     * Called as preprocessor to export (after clicking Excel icon) to capture

     * the table component and call upon createDynamicColumns()

     */

    public void updateColumns() {

        //reset table state

        UIComponent table = FacesContext.getCurrentInstance().getViewRoot().findComponent(":customerExportForm:customerTable");

        table.setValueExpression("sortBy", null);



        //update columns

        createDynamicColumns();

    }

The updateColumns() method binds a UIComponent to the table within the JSF view.  It then has the capability of providing sorting, if elected.  Subsequently, lets now look at the createDynamicColumns() method that is called upon.
    private void createDynamicColumns() {

        String[] columnKeys = this.getIncludedColumnsByName().split(",");

        columns = new ArrayList<>();

        for (String columnKey : columnKeys) {

            String key = columnKey.trim();

            columns.add(new ColumnModel(getColumnLabel(key), key));



        }

    }

The createDynamicColumns() method does a few things.  First, it captures all of the selected columns from the PickList, and stores them into a String[] named columnKeys.  To do this we use the helper method named getIncludedColumnsByName(), and split the results by comma.  The sources for this method are as follows, and it basically grabs the currently selected columns from the PickListBean and appends each of them to a String, which is then returned to the caller.
    public String getIncludedColumnsByName() {

        String tempIncludedColString = null;



        System.out.println("Number of included columns:" + pickListBean.getColumns().getTarget().size());

        List localSource = pickListBean.getColumns().getTarget();

        for (int x = 0; x <= localSource.size() - 1; x++) {

            String tempModel = (String) localSource.get(x);

            if (tempIncludedColString == null) {

                tempIncludedColString = tempModel;

            } else {

                tempIncludedColString = tempIncludedColString + "," + tempModel;

            }

        }



        return tempIncludedColString;

    }

Next, the createDynamicColumns() method then uses a loop to parse through each of the selected columns within the String[], and add them to the columnList, which going to be used to construct the DataTable with the appropriate columns.

Now let's take a look at the markup that is used to construct the DataExport utility:
<p:datatable id="customerTable" rendered="false" value="#{customerController.items}" var="item" widgetvar="customerTable">                    
                    <p:columns columnindexvar="colIndex" value="#{columnModelController.dynamicColumns}" var="column">
                        <f:facet name="header">
                            <h:outputtext value="#{column.header}">
                        </h:outputtext></f:facet>
                        <h:outputtext value="#{item[column.property]}">
                    </h:outputtext></p:columns>
                </p:datatable>
                

<hr />
<h:outputtext value="Type of file to export: ">
                <h:commandlink>

                    <p:graphicimage value="/faces/resources/images/excel.png">
                    <p:dataexporter filename="customers" id="propertyXlsExport" preprocessor="#{columnModelController.preProcess}" target="customerTable" type="xls">
                </p:dataexporter></p:graphicimage></h:commandlink>
</h:outputtext>
As you can see, the DataTable is set to not render, because we really do not wish to display it. Instead, we wish to export its contents using the DataExporter component. To construct the DataTable dynamically, the columns call upon the columnModelController.dynamicColumns method to return the dynamic column list. This method looks as follows:

    public List<ColumnModel> getDynamicColumns() {
        return columns;
    }
Within the DataExporter utility component, the columnModelController.preProcess method is assigned to the preprocessor attribute to initiate the dynamic column list. The target is set to the customerTable widget, which is the DataTable that we've dynamically constructed based upon the selected columns. In order to export this to an xls spreadsheet, you must add the org.apache.poi dependency within the Maven POM for the project, as follows:

<dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.7</version>
        </dependency>

That's it...now you should have a fully functional data export utility using PrimeFaces components.  The complete sources are available on GitHub using the link below.  This code has been written in NetBeans IDE 8.0, and deployed to GlassFish 4.0.  I utilized PrimeFaces 5.0 for this project.

GitHub Sources:  https://github.com/juneau001/AcmePools

Thursday, May 01, 2014

PrimeFaces 5.0 DataTable Column Toggler

I have had an opportunity to work a bit with the PrimeFaces 5.0 DataTable, and the enhancements are great.  Today, I wanted to show just one of the new features...the DataTable column toggler.  This feature enables one to choose which columns are displayed via a list of checkboxes.

To use a column toggler, simply add a commandButton to display picklist of column choices into the header of the table, as follows:
<p:commandButton icon="ui-icon-calculator" 
   id="toggler" style="float: right;" type="button" value="Columns"/>

Next, add a columnToggler component to the table header, and specify the DataTable ID as the data source. In this case, the DataTable ID is "datalist":
<p:columnToggler datasource="datalist" trigger="toggler"/>

That's it! In the end, a button is added to the header of the table, which allows the user to specify which columns are displayed (Figure 1).

Figure 1:  Column Toggler in Action
The full source listing for the DataTable in this example is as follows:
<p:dataTable id="datalist" paginator="true" rowkey="#{item.id}"
     rows="10" rowsperpagetemplate="10,20,30,40,50" 
     selection="#{poolController.selected}" selectionmode="single"
     value="#{poolController.items}" var="item" widgetvar="poolTable">

    <p:ajax event="rowSelect"
      update="createButton viewButton editButton deleteButton"/>

    <p:ajax event="rowUnselect"
      update="createButton viewButton editButton deleteButton"/>

    <f:facet name="header">
       <p:commandButton icon="ui-icon-calculator" id="toggler"
           style="float: right;" type="button" value="Columns"/>
       <p:columnToggler datasource="datalist" trigger="toggler"/>
       <div style="clear:both" />
    </f:facet>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_id}"/>
        </f:facet>
        <h:outputText value="#{item.id}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_style}"/>
        </f:facet>
        <h:outputText value="#{item.style}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_shape}"/>
        </f:facet>
        <h:outputText value="#{item.shape}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_length}"/>
        </f:facet>
        <h:outputText value="#{item.length}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_width}"/>
        </f:facet>
        <h:outputText value="#{item.width}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_radius}"/>
        </f:facet>
        <h:outputText value="#{item.radius}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_gallons}"/>
        </f:facet>
        <h:outputText value="#{item.gallons}"/>
    </p:column>
    <f:facet name="footer">
        <p:commandButton id="createButton" icon="ui-icon-plus"
            value="#{bundle.Create}"
            actionListener="#{poolController.prepareCreate}"
            update=":PoolCreateForm"
            oncomplete="PF('PoolCreateDialog').show()"/>
        <p:commandButton id="viewButton"   icon="ui-icon-search"
            value="#{bundle.View}" update=":PoolViewForm"
            oncomplete="PF('PoolViewDialog').show()"
            disabled="#{empty poolController.selected}"/>
        <p:commandButton id="editButton"   icon="ui-icon-pencil" 
            value="#{bundle.Edit}" update=":PoolEditForm"
            oncomplete="PF('PoolEditDialog').show()"
            disabled="#{empty poolController.selected}"/>
        <p:commandButton id="deleteButton" icon="ui-icon-trash" 
            value="#{bundle.Delete}"
            actionListener="#{poolController.destroy}"
            update=":growl,datalist"
            disabled="#{empty poolController.selected}"/>
    </f:facet>
</p:dataTable>
Happy coding with PrimeFaces 5.0!  This example was generated using PrimeFaces 5.0 RC 2.  The final release should be out soon!