JSF page design using drag and drop feature

JSF is a standard specification for building user interfaces. In this specification, drag and drop feature is also useful. In this feature, you can use existing beans for designing the web page. Through drag and drop feature, we can design our page very fast. For designing, we will use ‘page data’ option of RAD which will available in ‘web’ perspective.

First, you need to create a bean in which you can use two fields username and address. Codes for bean are,

public class UserInfo {
    private String userName;
    private String address;
    public String getAddress() { return address;     }
    public void setAddress(String address) { this.address = address; }
    public String getUserName() { return userName; }
    public void setUserName(String userName) { this.userName = userName;     }
}

Now, you will need to use Page Data (lower left portion of the RAD) option of RAD in ‘web’ perspective. You would need to create a new ‘Page Bean’ using existing bean named ‘UserInfo’. You can create new ‘Page Bean’ once you right click on ‘Page Bean’ option and come into New>Java Bean option and click on ‘Java Bean’ option. You can see the picture below,

You can see ‘Add JavaBean’ window where you can provide a new name (name starts with first lower case character) and add existing java-bean class. Also, if you want to make this bean class as managed bean, you can check the checkbox and select the scope of bean and press finish button.

Now, you need to drag the ‘userInfo’ Page Bean and drop it into cursor location of JSP page.

You will see ‘Insert JavaBean’ wizard in picture below. Here you will see java bean entries as input field of JSP page.

You can add submit button also using ‘options’ button. When you click on options button, you will get following window. Provide label name and press OK button.

You can see additional JSP code in picture below,

The preview of JSP page as,

In this way, we can implement drag and drop feature using java-bean classes. Apart from this, JSF provides lots of components in palette which you can drag and drop it in JSP file for designing your page vary efficiently. For each page, JSF automatically creates java-code which you can find in pagecode package.

JSF portlet application directory structure and required JAR files

You can see directory structure of basic JSF portlet application in picture below,

In this diagram, you can see ‘src’ folder which contains all the source code and WebContent folder which contains the web pages and WEB-INF directory. In WEB-INF directory, we do have three required files these are,

1) faces-config.xml file
2) portlet.xml file
3) web.xml file

and we do have four required JAR files. These are,

1) icu4j_3_4_1.jar
2) jsf-ibm.jar
3) jsf-impl-messages.jar
4) jsf-portletbridge.jar

JSF portlet development using RAD 7.0

IBM RAD 7.0 provides integrated feature for developing JSF based portlets.

Through RAD, you can develop basic JSF portlet.

Let’s see, how can we develop JSF portlet using RAD 7.0? First you need to open the RAD 7.0 and come into File>New>Project option. You can see the picture below.

 While creating new project, please select portlet project option and press Next button.

 You will get ‘New Portlet Project’ wizard where you need to mention project name, portal server version, portlet API and portlet type. Press Next once you fill all the required information.

 Now you need to add portlet modes and press finish button and you will get a basic JSF portlet application with required JAR file and configuration files.