1. From the File menu, select New.
2. In the New dialog, select JSF under Web Tier node, and select ADF Task Flow under Items.
3. Click OK.
4. In the Create Task Flow dialog, click OK to create a task flow definition file by accepting the default values.
5. From the ADF Task Flow tag library in the Component Palette, drop two view elements, view1 and view2, onto the task flow definition file.
6. Drop a Control Flow Case from view1 to view2.
7. Click the first view element and then click the second view element to draw the control flow line.

   Name this control flow case next.

8. Similarly, drop a Control Flow Case from view2 back to view1 and name it prev.
9. Create a backing bean called BackingBean.java to contain values for two variables view1 and view2.

   view1 and view2 are initialized with initialValue1 and initialValue2 respectively. Ensure that the code of the bean is as shown in the following example:

   package view;
   
   public class BackingBean {
       public BackingBean() {
       }
       
       private String view2 ="initial Value1";
       private String view1 = "initial Value2";
   
       public void setView2(String view2) {
           this.view2 = view2;
       }
   
       public String getView2() {
           return view2;
       }
   
       public void setView1(String view1) {
           this.view1 = view1;
       }
   
       public String getView1() {
           return view1;
       }
   }
   

10. In the task flow definition file, double-click view1 to create the page fragment (view1.jsff) for that element.
11. Add a Panel Group Layout and two Output Text components to view1.jsff.
12. Specify the Value for the first Output Text component to be #{backingBean.view1}, and specify the Value for the second Output Text component to be #{backingBean.view2}.
13. Save view1.jsff, and close it.
14. In the task flow definition file, double-click view2 to create the page fragment (view2.jsff) for that element.
15. Add just one Output Text component to view2.jsff, and specify Value to be #{backingBean.view2}.
16. Save view2.jsff, and close it.

1. Create a JSF page, Page1.jspx, with a Panel Customizable component and a nested Show Detail Frame component.
2. Add two more Show Detail Frame components, above and below the existing Show Detail Frame component.

   The purpose of adding three Show Detail Frame components is to enable the display of Move Up and Move Down actions along with the additional action on the first Show Detail Frame component, showDetailFrame1.

3. Add the task flow definition file that you created in the previous step inside showDetailFrame1.
4. Right-click the first Show Detail Frame in the Structure window, and select Facets - Show Detail Frame.
5. Click the arrow to the right of this option, and from the list of supported facets, select Additional Actions.

   The f:facet-additionalActions element for that facet is inserted in the page.

6. Add a Panel Group Layout inside the Additional Actions facet, and add a Button component inside the Panel Group Layout component.
7. Set the Text attribute for the Button to Customize, and specify customize as the Action value.

   The page in the structure navigator should appear as shown in Figure 17-2.

   Figure 17-2 Page1.jspx in Structure Navigator

   
   Description of "Figure 17-2 Page1.jspx in Structure Navigator"
8. Save the page.

1. Create a JSF page called Page2.jspx, and add two Input Text components and a Button component.
2. Specify the Value for the first Input Text component to #{backingBean.view2}, and set the Value attribute for the second Input Text component to #{backingBean.view1}.

   The purpose of adding Input Text components with references to the backing bean is to enable the passing of a user's input to the bean so that it can be reflected in the Output Text components on Page1.jspx.

3. On the Button component, set the Text attribute to OK and specify back as the Action value.
4. Save the page.

   You can now enable switching between the two pages by defining navigation rules.

1. In the Application Navigator, under the project's WEB-INF folder, double-click the faces-config.xml file to open it.
2. Click the Overview tab to view the file in Overview mode.
3. Click the Add icon in the Managed Beans section.
4. In the Create Managed Bean dialog, specify backingBean as the name.
5. For the Class Name field, click the Browse button adjacent to it and browse to the BackingBean Java class that you created earlier. Click OK.
6. Click OK.
7. From the Scope list, select session and click OK.
8. Select the Navigation Rules tab on the page.
9. In the From Views table, select Page1.jspx.
10. Under Navigation Cases, select Page2.jspx in the To View ID column, customize in the From Outcome column, and true in the Redirect column.
11. In the From Views table, select Page2.jspx.
12. Under Navigation Cases, select Page1.jspx in the To View ID column, back in the From Outcome column, and true in the Redirect column.

    In Source view, these entries appear as follows:

    <managed-bean>
        <managed-bean-name>backingBean</managed-bean-name>
        <managed-bean-class>view.BackingBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
      </managed-bean>
      <navigation-rule>
      <from-view-id>/Page1.jspx</from-view-id>
      <navigation-case>
        <from-outcome>customize</from-outcome>
        <to-view-id>/Page2.jspx</to-view-id>
          <redirect/>
        </navigation-case>
      </navigation-rule>
      <navigation-rule>
        <from-view-id>/Page2.jspx</from-view-id>
      <navigation-case>
        <from-outcome>back</from-outcome>
        <to-view-id>/Page1.jspx</to-view-id>
          <redirect/>
        </navigation-case>
    </navigation-rule>
    

13. Save the file.

In JDeveloper, run Page1.jspx. The Actions menu on the showDetailFrame1 component displays the Customize action, as shown in Figure 17-3.

Figure 17-3 Customize Action on the Actions Menu

Description of "Figure 17-3 Customize Action on the Actions Menu "

Clicking Customize takes you to Page2.jspx (Figure 17-4), where you can update the values for Label1 and Label2.

Figure 17-4 Page with Option to Edit Text

Description of "Figure 17-4 Page with Option to Edit Text"

Clicking OK takes you back to Page1.jspx, which reflects the recent text changes.

1. From the Component Palette, select Composer.
2. Drag a Custom Action and drop it on the page inside the Show Detail Frame component, below the af:region element.

   Add one Custom Action component for each internal task flow action you want to display as a custom action on the Show Detail Frame Actions menu.

   Note:

   Add Custom Action components below the af:region element. You may face problems if the region is not the first child component of the Show Detail Frame.

3. Define attributes for the Custom Action by referring to

   Ensure that you populate the Action attribute of each Custom Action with the correct ADFc outcomes of the associated task flow. The code should be similar to the following:

   <cust:showDetailFrame text="showDetailFrame 1" id="sdf1">
     <af:region value="#{bindings.taskflowdefinition1.regionModel}"
                id="r1"/>
     <cust:customAction action="navigatefromview1" id="ca1"
                        location="both" icon="/Logo1.JPG"
                        text="View1 Action"
                        shortDesc="Custom View1 Action"/>
     <cust:customAction action="navigatefromview2"
                        location="both" id="ca2"
                        icon="/Logo2.JPG" text="View2 Action"
                        shortDesc="Custom View2 Action"/>
   </cust:showDetailFrame>
   

   Note:

   You can add custom actions for all of the task flow's ADFc outcomes, but depending on the task flow view that is displayed, several or none of the custom actions are available at runtime.

   If you define a custom action without a corresponding task flow action, then the custom action is not rendered on the Show Detail Frame header at runtime.

   See Also:

   Creating a Task Flow in Developing Fusion Web Applications with Oracle Application Development Framework

4. Save and run the page.

1. Open the application's adf-config.xml file, located in the ADF META-INF folder under Descriptors in the Application Resources panel.
2. Define custom actions using the <customActions> element with nested <customAction> tags for each action, as follows:

   Tip:

   To render a custom action only in page Edit mode, you can set the rendered attribute on the <customAction> tag to #{composerContext.inEditMode}. This returns a value of true if the page is in Edit mode.

   <cust:adf-config-child xmlns="http://xmlns.oracle.com/adf/faces/customizable/config">
     <enableSecurity value="true" />
     <customActions>
       <cust:customAction action="forward" displayName="Move Forward"
                          location="menu" rendered="true"
                          icon="/move_forward.png"/>
       <cust:customAction action="backward" tooltip="Move Backward" 
                          location="chrome" rendered="true"
                          icon="/move_backward.png"/>
     </customActions>
   </cust:adf-config-child>
   

   Note:

   • If you implemented restrictions on the Show Detail Frame component's actions by performing the steps in ??? you already have a cust:customizableComponentsSecurity section in the adf-config.xml file. You can define custom actions in that section itself instead of the cust:adf-config-child section shown in the example.

   • If you are defining an icon for the custom action, you must ensure that the image you specify is available in the project root folder.

   • You can define custom actions for the internal actions defined in all task flows on your page; however, at runtime, the header of any Show Detail Frame displays only those custom actions that correspond to the ADFc outcomes of the current view of the task flow.

3. Save the adf-config.xml file.

1. From the File menu, choose New.
2. In the New Gallery dialog, expand General, select Java, then Java Class, and click OK.
3. In the Create Java Class dialog, enter BackingBean in the Name field and click OK.

   The BackingBean.java file displays in Source view.

4. Import the required libraries as follows:

   import javax.faces.application.FacesMessage;
   import javax.faces.context.FacesContext;
   import javax.faces.event.ActionEvent;
   import oracle.adf.view.page.editor.sourceview.ComponentInfo;
   

5. Add the following code:

   public class BackingBean {
     public BackingBean() {
     }
   
     public void action(ActionEvent actionEvent) {
         FacesContext context = FacesContext.getCurrentInstance();
         context.addMessage(null,
                            new FacesMessage(FacesMessage.SEVERITY_INFO, "Sample message to test whether the custom action works.",
                                             null));
     }
   
     public boolean isRendered() {
         return ComponentInfo.isRegion();
     }
   
     public String getZoomText() {
         return ComponentInfo.isRootNode() ? "Close" : "Edit Task Flow";
     }
   }
   

   With this logic, the sample message you defined is displayed when a user clicks the custom action link against a task flow region.

   Use the isRegion() API to ensure that the custom action link is displayed only against task flow regions on the page. Use the isRootNode() API to ensure that the Edit Task Flow or Close link is displayed against the root component of the task flow.

6. Save the bean.