Sunday, August 22, 2010

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.

No comments: