DataTable Row Selection: Update other parts of the page when a DataTable Row is selected - PrimeFaces 4.0

Before you start on anything, make sure you are using PrimeFaces 4.0. or higher, otherwise RowSelecction is a mystery, you can see here.

If you are reading this post, you are probably having a dataTable that does Row selection either using checkbox, Radio button or non of these but selectable, but if you just want to know how to achieve Row selection, then click here. You wish to display something on the same page based on the selected row, you have tried but it seems not to work. It seems to work for a dialog but not for other sections of the page that are not in the dialog. I suffered for about three days trying out different things, but on the 4th day I got it right. So here it is....

When you have a dataTable with row selection, there are 3 scenarios;

1. You have checkboxes : multiple Selection
2. You have Radio Buttons: Single Selection
3. You neither have Checkboxes nor Radio buttons, but your Rows are selectable. 

 Make sure you are using scenario 3.

If you are using scenario 1 or 2 (If you must have checkboxes, or Radio buttons), refer to this page.

If you want to update another section of the page, there are two scenarios;

1. The section you wish to update is in the same form with the dataTable and on the same page
2. The section you wish to update is in another form and on the same page. If you are using this option, you just need to know how to call the id of the component e.g :form:Container:idOfComponent

Any of 1 or 2 is ok. 

<p:dataTable>
      <p:event="rowSelect" update="Id of component you wish to update" listener="a method that you wish to execute when you select a row"
</p:dataTable


If you want a more descriptive example, look at this

The reason why I had to suffer for 3 days was, I didn't know that I had to use scenario 3 for things to work. This was all I had to find out.

Getting started with primefaces 3.4 in NetBeans 7.3.

Question: How do I get started with PrimeFaces in NetBeans?

Response: First of all, PrimeFaces is a JSF(Java Server Faces) Framework. JSF is a UI framework created to ease User Interface creation in Java Web Application development. There are a number of JSF frameworks e.g PrimeFaces, ICE Faces, Rich Faces, Oracle ADF e.t.c.

We shall Use NetBeans 7.3 to get a hello world application with PrimeFaces 3.4. Note that PrimeFaces 3.4 is already part of NetBeans 7.3. You might only need to download PrimeFaces if you want a different version from that already provided in NetBeans. If you have a higher version of NetBeans, then you might have a higher or similar version of PrimeFaces which is fine.

Requirements: You only need to have NetBeans 7.3  up and running on your computer. 

Step 1: Choose Project. Open netbeans and Go to File->New Project. A New Project window will pop up. Choose Java Web-> WebApplication . If you are running NetBeans for the first time after Installation, you might see some extra step as NetBeans tries to activate the Java  web environment, so don't worry. Click Next.

Step 2: Name and Location. In the ProjectName put PrimeFacesHelloWorld. Click Next. ProjectName is the name of your project, so it can be anything. Location is where it will be stored on your computer, so you can change the location by clicking browse if you want.

Step 3: Server and Settings. On the Server, Choose GlassFish Server 3.1.2., Java EE version is Java EE 6 Web, Optionally tick "Enable Contexts and Dependency Injection". Click Next.  If you are using another version of NetBeans, you  might have a different version of GlassFish. Its fine. You are free to use another Java EE server if you know how to, but since GlassFish  is the default for NetBeans, we use that for this tutorial. For a hello word application like this, Contexts and Dependency Injection (CDI) might not count but later if you are to do a bigger application, you might need it. So, Its no problem if you don't tick it for now. 

Step 4: Frameworks.On Frameworks,  tick Java Server Faces. Below, on Java Server Faces Configuration, select PrimeFaces. If you want to see the version of PrimeFaces you have, Click more. This also helps if you have more than one versions of PrimeFaces installed. NetBeans 7.3 has PrimeFaces 3.4 already installed. So, all you have to do is just tick it and your application will automatically be configured to use PrimeFaces. After all this, click Next

Step 5: Run. Right Click PrimeFacesHelloWord(with a blue round Icon) and Click Run. At this point, your application is already created. The application already has 2 Webpages. i.e index.xhtml and welcomePrimefaces.xhtml. If you notice under libraries, you can see primeFaces 3.4.jar. You can also right click index.xhtml and Run.

Step 6: You have arunning application in the browser. The Index page has a link(PrimeFaces  welcome Page ). Click this link and you will see a PrimeFaces page.

This note is optional. You don't have to read it to get the application to run but the information might be helpful.

If you want to use another version of PrimeFaces say PrimeFaces 3.5, just download the jar and after creating the Java web Project with JSF activated, right click libraries and add the Jar. 

Or Go to Tools-> Ant Libraries->New Library ->Library Name(The name for the library you are adding-your own naming)->Add JAR/Folder->Browse for the Jar you downloaded and add it(The jar will be added under the library name you just created). When you add a library here, It will be globally available so whenever you wish to add it in the project, you will always find it on the list of jars(after creating the project right click libraries ->Add library->you will see a list of global libraries and the library you added in ant libraries will be on the list), and also for PrimeFaces You will find it on the List when you are creating a PrimePaces application under more in the NetBeans Wizard.

Note: Images are coming soon. But if you follow well, you can have your helloworld program running. Let me know if you have any issues or any questions or even suppliments. Thanx.

Using selectOneMenu in Primefaces

Question:
I had two tables. Staff and Department. Staff is related to Department by manyToOne respectively. On the Staff form, I have a dropdown(selectOneMenu) which has all the departments. For each shown department I want to get the primary key which I can Insert into the Staff table as the foreign key.
So I had two things to cater for here. First, displaying the list of Departments in the drop down, Second, Obtaining the primary key of the selected department for the purposes of Staff-department Forein key.

Response.
After days of hutsle in trying to use selectOneMenu, today i finally get it. I tried a number of things but this is what finally worked.



The first argument will be the value, and the second will be the displayed label
 Step 1: selectOneMenu in primeFaces page.
<p:selectOneMenu value="#{staffBacking.deptId}">
       <f:selectItem itemValue="#{null}" itemLabel="Select">
        <f:selectItems value="#{staffBacking.selectItems}" >
</p:selectOneMenu>

Step 2: The backing bean for the page contained this method
//Static data
public List<SelectItem> getSelectItems() {
        selectItems.add(new SelectItem(1, "Development"));
        selectItems.add(new SelectItem(2, "Administrative"));
        return selectItems;
    }
//data From database
public List<SelectItem> getSelectItems() {
        for(int i = 0; i < getDf().findAll().size(); i++){
            selectItems.add(new SelectItem(getDf().findAll().get(i).getDeptId(), getDf().findAll().get(i).getDeptName()));
        }
        return selectItems;
    }

The was also a setter and a getter for deptId i.e. getDeptId(), setDeptId(String departmentId). This will hold the value from the value attribute of selectOneMenu

Step 3:  Set the department id value to the current object of Department and then add the staff. Below is the method that persists the staff.

public void addStaff(){
        getDept().setDeptId(Integer.parseInt(getDeptname()));
        getStaff().setDepartmentdeptId(dept);
        getSf().create(staff);
    }