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