This discussion is archived
1 2 Previous Next 16 Replies Latest reply: Nov 20, 2003 11:22 AM by 178710 Go to original post RSS
  • 15. Re: UIX choice component event handling
    405015 Newbie
    Currently Being Moderated
    REPOST
  • 16. Re: UIX choice component event handling
    178710 Newbie
    Currently Being Moderated
    Yesterday, I sent McKell the examples. For anyone else who is interested here's what I did:

    The example
    shows two UIX choice boxes, one showing departments
    and one showing employees for the selected department.
    Selecting a department in the department choice box
    will result in a partial page render that updates
    the employee choice box to show the employees for
    that department.

    In the model project, I created standard business components for the EMP and DEPT tables in scott/tiger.

    I created a top level Java bean (ApplicationBean) to be my
    ADF data control and another Java bean (ChoiceBean) to which
    has accessors for the selectedDepartment and selectedEmployee.
    We will later bind the choice boxes to these attributes of
    the ChoiceBean. When the form is submitted, ADF will post
    back the values into the ChoiceBean (by calling
    setSelectedDepartment() and setSelectedEmployee()).

    I had to store the selectedDepartment (the Deptno attribute) as a generic Object
    in ChoiceBean instead of a oracle.jbo.domain.Number. This is
    because an error in the preview release where oracle.jbo.domain.Number
    is not treated as a primitive type (which is what is needed in this
    scenario).

    Once I completed the beans, I right clicked on the ApplicationBean and
    selected "Create Data Control" to create the ADF bindings to this
    JavaBean. After doing this, the ApplicationBean (and the ChoiceBean
    inside of it) show up in the Data Control Palette and are therefore
    available to bind to from UIX.

    Now, we go to the ViewController project, and open up the StrutsPageFlow
    diagram. First, I dropped a DataAction from the component palette, and then
    I dropped a PageForward and linked the DataAction to the PageForward. I
    renamed the PageForward to /choicePage and then double clicked on it
    to create choicePage.uix.

    On choicePage.uix, I used the visual editor to add a labeledFieldLayout.

    Using the Data Control Palette, I highlighted the "selectedDepartment"
    property of the ChoiceBean in the Data Control Palette, then
    used the Drop As choice box to select "messageChoice" and
    then dragged the selectedDepartment onto the labeledField
    layout to creating a UIX messageChoice bound to selectedDepartment.
    I repeated this procedure with "selectedEmployee".

    So, now we have UIX messageChoice objects that are bound to our
    ChoiceBean. What we need to do now, is editing the ADF bindings
    to specify that the options that populate the choices should come
    from DeptView and EmpView.

    To do this, I opened the choicePageUIModel.xml file in the ViewController
    project. In the structure pane, I clicked on the selectedDepartment
    binding to display the list binding editor.

    At first glance this dialog is confusing, but here is how to use it.
    I used the drop down at the top to change into "LOV Mode". For the
    source data collection, I clicked on DeptView1. In the target data
    collection, I made sure that ChoiceBean was selected. Then I clicked
    on the "Add" button and made sure that the sourceAttribute is Deptno
    in the DeptView and the target attribute is selectedDepartment in the
    choiceBean. Then I clicked on the LOV Display Attributes tab, selected
    Deptno and Dname to be displayed in the choice options.

    What this does is populate the choice box by iterating over DeptView,
    and displaying for each row the department number and department name.
    Selecting a value in the choice and submitting the form will set the
    selectedDepartment attribute of ChoiceBean to be the user selected
    Deptno.

    I followed the same process for selectedEmployee, except using EmpView1
    and mapping the Ename attribute of EmpView1 to the selectedEmployee
    attribute of choiceBean. For the display attribute, I chose only Ename.

    Now our messageChoice components are bound like we want. We need to
    make sure that when the user changes the department messageChoice a
    partial page request is made (which submits the selected department).
    So, I add a primaryClientAction to the messageChoice component that
    will fire a partial page event named "deptSelected", and I listed the
    id for the employee messageChoice component as a target of the event.
    I did this in the code editor, I recommend looking at the UIX code
    for this if you are following along.

    I added a <null> handler for the "deptSelected" event in the
    page. In the production release, this is where you could invoke
    a method to take the selected department and use it to filter
    the rows returned by EmpView. However, you can't invoke an
    arbitrary method from UIX in the Preview release. So, instead
    we'll add a <null> handler here and workaround this limitation
    by doing the work elsewhere.

    So I went back to the StrutsPageFlow, and double clicked the
    DataAction to create a DataAction subclass.

    I used the Tools Menu -> Override Methods dialog to add an
    override of the processComponentEvents() method in the DataAction
    subclass.

    This method is called after the DataAction has processed the form
    submission and posted back the selected values in the messageChoice
    components into the ChoiceBean.

    I added code in the processComponentEvents() method
    of the DataAction subclass. I show you how to get
    the ApplicationModule and the ChoiceBean. I take the value for
    the selectedDepartment out of the ChoiceBean and use it to set
    a structured where clause (ViewCriteria) on the EmpView to restrict
    the rows that come back to the selected department.

    When the data action completes, the page is rendered and the
    employee messageChoice contains only the employees for the
    selected department.

    So there we have it, a set of ADF Model bound dependent UIX messageChoice
    components that are populated from BC4J data. When the user selects
    a department, a partial page action submits the form, the DataAction
    code is called to set the where clause on the EmpView, and the HTML
    for the updated employee choice is sent to the browser.

    I used employees and departments, but you should be able to follow
    the same process for your ViewObjects.
1 2 Previous Next