1 2 Previous Next 16 Replies Latest reply on Nov 20, 2003 7:22 PM by jrstephe-Oracle Go to original post
      • 16. Re: UIX choice component event handling
        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

        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

        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

        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