The last post I wrote here was 6 February, 2013 – more than two years ago!
Unfortunately, I have decided to retire this site and will be blogging at my website.
What this means is
Thanks to all of you who have read and commented on my posts.
I learnt a lot listening to podcasts. Basically, I listen to them when I am doing house chores, feeding/cleaning the pets, driving alone, running errands, on long commutes, travelling, at work writing codes/scripts, etc. The podcasts’ topics vary, but they are mainly about IT security, software development, open source softwares, business, comedy, etc.
I subscribe and tag the Podcasts via Google Reader. I sync and copy them to my ipod and also some to my phone’s memory card.
I listen to quite a number of podcasts. Here is a list of some of my favourite podcasts (in no particular order).
What interesting podcasts do you listen to?
Currently I am working on a prototype program, building a CRUD program using JSF together with PrimeFaces. Being totally new in both, I started to get my hands dirty in code without properly going through the tutorials. I am still at the beginning chapters of the Java EE 6 tutorial.
In this program, I have a layout with 4 main sections – top, left, center and bottom. This is done using PrimeFaces layout component. In this component, there are three sub-components whereby its position are defined as “North”, “West”, “Center” and “South”.
For the purpose of this demo, the program has been simplified to best describe the scenario.
Lets have an overview of the file hierarchy first. There is an “index.html”, which is the screen capture above. And in the same directory, there are “documentA.xhtml” and “documentB.xhtml”. The contents of these two documents will be displayed on the center section of the layout.
On the left section, there are two buttons – “Search Document A” and “Search Document B”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?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://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head><title>Test Layout Include</title></h:head> <h:body> <p:layout fullPage="true"> <p:layoutUnit position="north" size="60">NORTH</p:layoutUnit> <p:layoutUnit position="west" size="200"> <h:form> <h:panelGroup> <p:commandButton id="btnPoSearch" value="Search Document A" /> <p:commandButton id="btnList" value="Search DocumentB" /> </h:panelGroup> </h:form> </p:layoutUnit> <p:layoutUnit position="center"> <h:form id="frmContent"> <p:panel id="pnlContent"> <ui:include src="documentA.xhtml" /> </p:panel> </h:form> </p:layoutUnit> <p:layoutUnit position="south" size="60">SOUTH</p:layoutUnit> </p:layout> </h:body> </html> |
And in “documentA.xhtml”, we should not use any of the <html />, <head />, <body /> and <form /> tags. The code for “documentA.xhtml” is as below.
1 2 3 4 5 6 7 8 |
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> <h3>Document A</h3> <p:commandButton id="btnSearch" value="Search" type="submit" action="#{documentAController.doSearch}" /> </ui:composition> |
With this, the contents of “documentA.xhtml” could be displayed in the “index.xhtml”. So, we come to my second problem. I want the contents on the center section to be dynamic i.e. clicking on the “Search Document A” button will display contents from “documentA.xhtml” and clicking on the “Search Document B” button will display contents from “documentB.xhtml”.
To do this, we have to use JSF’s managed beans. It is a type of Java Bean. If you are familiar with the MVC pattern, managed bean is the controller.
In the managed bean, I need to declare a property “page” of String type and also its getters and setters.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** === Getter / Setter === **/ public String getPage() { return page; } public void setPage(String page) { this.page = page; } /** === Properties === **/ private String page = "documentA"; |
I have also set “documentA.xhtml” as my default page i.e. when “index.xhtml” loads in the browser, it will always display contents from “documentA.xhtml”.
In the “index.xhtml”, I make the below change.
1 |
<ui:include src="#{menuController.page}.xhtml" /> |
The value in the src attribute is using an Expression Language, or commonly called EL. By using EL, it makes it possible to easily access application data stored in the JavaBean component. In this context, we are getting the value of the page property instantiated in the managed bean.
We need to add two attributes to the two buttons in the left section – action and update.
1 2 3 4 |
<p:commandButton id="btnPoSearch" value="Search Document A" action="#{menuController.doViewDocumentA()}" update=":frmContent:pnlContent" /> <p:commandButton id="btnList" value="Search DocumentB" update=":frmContent:pnlContent" action="#{menuController.doViewDocumentB()}" /> |
In the action attribute, we use EL to have it call method doViewDocumentA() in the managed bean. In the managed bean, the method is as below.
1 2 3 |
public void doViewDocumentA() { this.page = "documentA"; } |
So, by clicking on the button “Search Document A”, it is calling a method which sets the page property to “document A”. And by clicking the “Search Document B” button, it changes the page property to “document B”. The content in the center section will also be changed based on the page property value.
But how does the content get changed? This is where the button’s update attribute comes into play. If you look at the value, it is :frmContent:pnlContent. This means that upon clicking on the button, whatever happens, it should update the contents of the panel which is in the form with the id of “frmContent” and panel with the id of “pnlContent”.
1 2 3 4 5 6 7 |
<p:layoutUnit position="center"> <h:form id="frmContent"> <p:panel id="pnlContent"> <ui:include src="#{menuController.page}.xhtml" /> </p:panel> </h:form> </p:layoutUnit> |
One final thing to note. The managed beans for both “documentA.xhtml” and “documentB.xhtml” must be set to use either RequestScoped, SessionScoped or ApplicationScoped. Initially I had it set to ViewScoped and upon change the content to “documentB.xhtml”, the “Search” button’s action which calls a managed bean’s method was not called at all. For more details on each scope, you can refer to BalusC’s explanation.
I have uploaded the source code to my bitbucket account. Do feel free to fork and comment. The intention of this post is basically for Java EE Developers who are starting to use JSF and PrimeFaces that they understand the correct way to dynamically include JSF contents. I had a hard time scoring through internet and asking in forums trying to fix these problems which I faced.
Thanks.
Yes, a simple HTTP Server does exists.. as a Python module. If you really need to test your website which contains HTML, JavaScript and/or CSS files, you can use this instead of installing and configuring Apache Web Server or Lighttpd. But as a pre-requisite, you do need to have Python install in your machine, first.
Before starting the Simple HTTP Server, change the current director’s path to one which has an HTML file.
$ cd ~/www/test/
Run the command below:
$ python –m SimpleHTTPServer 8000
* The last option (‘8000’) is the port the HTTP Server is to listen to.
Open your favourite web browser and now open the URL http://localhost:8000/mytest.html. If the directory has a index.html file, you can just remove the file name from the URL, as so http://localhost:8000/.
For more information, you can refer to the python documentation.
Update #1
As of python version 3, the SimpleHTTPServer module has been merged into http.server. So, the change in the command to start a HTTP Server is as below
$ python -m http.server 8000
Linux Box (192.168.1.99)
AIX Box (192.168.1.100)
