2010年11月14日星期日

Using Task Flow as a Popup Dialog

Technorati Tags: ,,,

In this post, I will demonstrate how to use a task flow as a popup.

The scenario is as below picture:

task-flow-as-popup

First, the table will list all the records in the table.

With an Insert button, a cleared popup will display to ask the user input new record.  

With an Edit button, a filled-form popup will display to ask the user to edit the current record.

With a Delete button, the current record will be deleted from the table.

With a Save button (not included in the picture above), all the changes will be committed to the database.

With an Undo button (not included in the picture above), all the changes will be rollback.

We are using the Suppliers table in the Order Demo schema.

First, create an ADF application. Name it PopupDemo and using the Model and ViewController as the name of the model project and the view project specifically.

Step 1. in the Model project, create EO, VO and AM from the table Suppliers;

   1.1. Set the WHO columns for the EO: SupplierEO.

   1.2. Set the supplierId column the type as DBSequence, with updateable = ‘Never’ and Refresh after attribute = ‘Insert’

    1.3. Set the labels and tip text.

Step 2. layout and create the page. Index.jspx as the following picture:

 index-layout

Step 3. Create the edit page—edit.jspx, with the layout as the following picture:

  edit-layout

Step 4. Create the unbounded task flow for navigation and the bounded task flow for edit;

   4.1. The edit bounded task flow as below: task-flow-edit

edit-flow

The SupplierEditView’s page is the edit.jspx.

   4.2. The unbounded task flow as below:

unbounded-task-flow 

The CreateInsert is a method call with the following configuration:

method-call

Step 5. binds the buttons and construct the backing bean.

5.1. in the Edit.jsfx page, set the ‘Save’ button’s action to ‘return’ (the same as the navigation case in the bounded task flow).

5.2  in the unbounded task flow, select the called ‘bounded task flow’, and set the attribute of ‘run as dialog’ and ‘display type’ as below:

runasdialog-config

5.3. Create a backing bean for the Index.jspx page. Name it backingBean_Index. The class is BackingBean_IndexPage.

5.3 in the Index.jspx page.

5.3.1 set the ‘Insert’ button’s properties as below:

insert_1

action: insert ; useWindow: true; WindowEmbedStyle: inlineDocument; WindowModalityStyle: modeless; returnListener:

#{backingBean_Index.onEditReturnListener}

5.3.2 For the Edit button, only the action changes to ‘edit’.

5.3.3 For the Commit button, set the following properties:

commit-binding

the partialSubmit = true and the ActionListener = #{bindings.Commit.execute}

5.3.4 For the Undo button, change the ActionListener to ‘#{bindings.Rollback.execute}’

5.3.5 For the Delete button, change the ActionListener to ‘#{bindings.Delete.execute}’

5.3.6 binding the table to the table_Suppliers property in the backing bean. set the row select as single.  set the partial trigger to button_undo and button_commit

Step 6. Coding the backing beans’ listeners.

add the partial trigger code in the backing bean’s onEditReturnListener method

public void onEditReturnListener(ReturnEvent returnEvent) {
    AdfFacesContext context = AdfFacesContext.getCurrentInstance();
    context.addPartialTarget(this.table_Suppliers);
}

Step 6. run the page and test the application.

Source Code Download

.