Getting Started

1. Create the new JSP file

   

2. Open with JSF Visual Page Designer

   

3. Generate the Backing Bean

   At first, you have to generate the Backing Bean for this page. Choose [Right Click]->[Create Backing Bean] in the visual page designer.

   

   Then the Backing Bean code is generated and it is registered to the faces-config.xml as <managed-bean>.

4. Edit page design using the Visual Page Designer

   Drag and drop components from the component palette. You can relocate and resize components in the page designer. And you can also edit component properties in the Properties view.

   

   Components are binded to the Backing Bean's property automatically. Here is the code which generated by the Visual Page Designer

   package pages;
   
   public class IndexPage {
   
   	private javax.faces.component.UIOutput label1;
   	private javax.faces.component.UIOutput label2;
   	private javax.faces.component.UIInput text1;
   	private javax.faces.component.UIInput text2;
   	private javax.faces.component.UICommand command1;
   
   	public void setLabel1(javax.faces.component.UIOutput label1){
   		this.label1 = label1;
   	}
   
   	public javax.faces.component.UIOutput getLabel1(){
   		return this.label1;
   	}
   
   	public void setLabel2(javax.faces.component.UIOutput label2){
   		this.label2 = label2;
   	}
   
   	public javax.faces.component.UIOutput getLabel2(){
   		return this.label2;
   	}
   
   	public void setText1(javax.faces.component.UIInput text1){
   		this.text1 = text1;
   	}
   
   	public javax.faces.component.UIInput getText1(){
   		return this.text1;
   	}
   
   	public void setText2(javax.faces.component.UIInput text2){
   		this.text2 = text2;
   	}
   
   	public javax.faces.component.UIInput getText2(){
   		return this.text2;
   	}
   
   	public void setCommand1(javax.faces.component.UICommand command1){
   		this.command1 = command1;
   	}
   
   	public javax.faces.component.UICommand getCommand1(){
   		return this.command1;
   	}
   
   }
   

5. Add action handler method

   Right click the button and choose [buttonName_Clicked]. The page designer generates the action method.