2010年11月14日星期日

Create a Detail-Master based Form-Table page in traditional JSF technology

In this tutorial, a simple page will be created using JSF technology involving backing bean, ADF faces, partial trigger.

In the next tutorial, the same scenario will be implemented by complex ADF faces technology involving JSF fragment/region, bounded task flow, contextual event framework and partial trigger.

The scenario is illustrated as the below picture.

simple-scenario

At first, the table will list all the names in the system by two columns.  The user can add new names into the system by input first name and last name in the above form and click the Confirm button.  After the Confirm button, the new name is added into the system, then the table will refresh itself to display all the names including the new added one.

Here goes the tutorial:

Step 1. Create an application named KnowledgeShareApp to host the model and the view.  The model project’s name is Model and the view project’s name is ViewController-weblog. The Model project’s package prefix is:

oracle.share.model

Step 2. In order to simply the demonstration, we just imitate the database operations with a Database class. Download the source Database.java.

Also the logic is very simple, the database record can be represented by the java class: SimpleName.java.

Step 3. Layout out the page.

3.1 Drag and drop a Panel Stretch Layout Component from the component palette to the page.  Set the start and end facets’ width to 0, then set the top and bottom facets’ height to 0.

3.2 Drag and drop a Panel Group Layout Component from the palette to the center facet of the stretch layout. Set the group layout component’s layout attribute ‘scroll’.

3.3 Drag and drop a Panel Form Layout into the group layout component in step

    • 3.3.1. Then insert a Separator after the Form Layout. Finally, insert a table component after the Separator component.
    • 3.3.2. Drag and drop a Button component after the second Input Text component.

3.4 Drag and drop two Input Text components into the Form Layout component in the above step. 

3.5 The table is composed of two columns. The OutputText component’s value in first column’s value is set as the following EL:

<af:outputText value="#{row.firstName}" id="ot1"/>

The ‘row’ is specified in the table’s ‘var’ attribute.

The second column’s value is set as the following EL:

<af:outputText value="#{row.lastName}" id="ot2"/>

3.6 Save all the changes, the layout of the page is finished.

Step 4. Create the backing bean. Download the backing bean’s java source.

The backing bean’s skeleton code is as below:

public class BackingBean_SimpleDemo {
    private RichInputText inputText_FirstName;
    private RichInputText inputText_LastName;   
    private RichTable table_FullNames;
    private List<SimpleName> simpleNames = DataBase.findAllSimpleNames();
    public String addFullName() {
        DataBase.registerEntity(new SimpleName(this.inputText_FirstName.getValue().toString(),
                                               this.inputText_LastName.getValue().toString()));
        this.table_FullNames.setValue(DataBase.findAllSimpleNames());
        return "confirm";
    }   
}

The inputText_FirstName and inputText_LastName binds to the two input text in the page specifically. 

The table_FullNames binds to the table in the page. The simple Names list binds to the table’s value attribute.  This is a value binding, which would not cause the partial refreshment of the table on the page.

The addFullName binds to the action attribute of the Confirm button.  At the end of the method, the table_FullNames refreshes its value which will make the view handler partial refresh the table component on the JSF page. This is because the table now is a component binding, refreshment of the RichTable component in the backing bean would automatically partial refresh the table on the page.

Step 5. register the backing bean in the adfc-config.xml file.

Now you can test your project by run the page. 

In the next session, I will implement the same scenario in an ADF way by using page fragment and contextual event framework, which makes the page fragments be reused among the application.

All the source code of the this session and the next can be downloaded at this url below:

Knowledge Share Demo Code