2 Getting Started with ADF Faces

2.2.1 How to Create an Application Workspace

You create an application workspace using the Create Application wizard.

To create an application:

1. In the JDeveloper menu, choose File > New.

   The New Gallery opens, where you can select different application components to create.

2. In the Categories tree, under the General node, select Applications. In the Items pane, select Java EE Web Application and click OK.

   This template provides the building blocks you need to create a web application that uses JSF for the view and Enterprise JavaBean (EJB) session beans and Java Persistence API (JPA) entities for business services. All the files and directories for the business layer of your application will be stored in a project that by default is named Model. All the files and directories for your view layer will be stored in a project that by default is named ViewController.

   Note:

   This document covers only how to create the ADF Faces project in an application, without regard to the business services used or the binding to those services. For information about how to use ADF Faces with the ADF Model layer, the ADF Controller, and ADF Business Components, see Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

3. In the Create Java EE Web Application dialog, set a name, location, and package prefix of your choice and click Next.

4. In the Name your project page, you can optionally change the name and location for your web project. On the Project Technologies tab, double-click ADF Faces to move that technology to the Selected pane. This automatically adds the necessary libraries and metadata files to your web project. Click Next.

5. In the Configure Java settings page, optionally change the package name, Java source path, and output directory for your view layer. Click Next.

6. In the Name your project page, you can optionally change the name and location for your Java project. By default, the necessary libraries and metadata files for Java EE are already added to your model project. Click Next.

7. In the Configure Java settings for the project page, optionally change the package name, Java source path, and output directory for your model layer. Click Next.

8. Configure the EJB settings as needed. For help on this page, click Help or press F1. Click Finish.

2.2.2 What Happens When You Create an Application Workspace

When you create an application workspace using the Java EE Web Application template, JDeveloper creates a project named Model that will contain all the source files related to the business services in your application. JDeveloper automatically adds the libraries needed for your EJB project. For example, if you kept the default EJB settings, JDeveloper adds the following libraries:

• Toplink

• Oracle XML Parser v2

• EJB 3.0

JDeveloper also creates a project named ViewController that will contain all the source files for your ADF Faces view layer. JDeveloper automatically creates the JSF and ADF configuration files needed for the application. Additionally, JDeveloper adds the following libraries to your view project:

• JSF 1.2

• JSTL 1.2

• JSP Runtime

The ADF Faces and other runtime libraries are added when you create a JSF page in your project.

Once the projects are created for you, you can rename them. Figure 2-1 shows the workspace for a new Java EE Web application.

Figure 2-1 New Workspace for an ADF Application.

JDeveloper also sets configuration parameters in the configuration files based on the options chosen when creating the application. In the web.xml file, these are configurations needed to run a JSF application (settings specific to ADF Faces are added when you create a JSF page with ADF Faces components). Example 2-1 shows the web.xml file generated by JDeveloper when you create a new Java EE application.

<?xml version = '1.0' encoding = 'windows-1252'?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee">
  <description>Empty web.xml file for Web Application</description>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  <session-config>
    <session-timeout>35</session-timeout>
  </session-config>
  <mime-mapping>
    <extension>html</extension>
    <mime-type>text/html</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>txt</extension>
    <mime-type>text/plain</mime-type>
  </mime-mapping>
</web-app>

In the faces-config.xml file, when you create a JSF page with ADF Faces components, JDeveloper creates an entry that defines the default render kit (used to display the components in an HTML client) for ADF Faces, as shown in Example 2-2.

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee">
  <application>
    <default-render-kit-id>oracle.adf.rich</default-render-kit-id>
  </application>
</faces-config>

An entry in the trinidad-config.xml file defines the default skin used by the user interface (UI) components in the application, as shown in Example 2-3.

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>blafplus-rich</skin-family>
</trinidad-config>

Configuration required for specific ADF Faces features are covered in the respective sections of this guide. For example, any configuration needed in order to use the Change Persistence framework is covered in Chapter 31, "Allowing User Customization on JSF Pages". For comprehensive information about configuring an ADF Faces application, see Appendix A, "ADF Faces Configuration".

2.3.1 How to Define a Page Flow

In JDeveloper, you use the navigation diagrammer to declaratively create a page flow. When you use the diagrammer, JDeveloper creates the XML metadata needed for navigation to work in your application in the faces-config.xml file.

To create a page flow:

1. Open the faces-config.xml file for your application. By default, this is in the Web Content/WEB-INF node.

2. Click the Diagram tab to open the navigation diagrammer.

3. If the Component Palette is not displayed in JDeveloper, from the main menu choose View > Component Palette. By default, the Component Palette is displayed in the upper right-hand corner of JDeveloper.

4. In the Component Palette, use the dropdown menu to choose JSF Diagram Objects.

   The components are contained in two accordion panels: Components and Diagram Annotations. Figure 2-3 shows the Component Palette displaying JSF navigation components.

   Figure 2-3 Component Palette in JDeveloper

   
   

5. Select the component you wish to use and drag it onto the diagram.

   JDeveloper redraws the diagram with the newly added component.

Once the navigation for your application is defined, you can create the pages and add the components that will execute the navigation. For more information about using navigation components on a page, see Chapter 18, "Working with Navigation Components".

2.3.2 What Happens When You Use the Diagrammer to Create a Page Flow

When you use the diagrammer to create a page flow, JDeveloper creates the associated XML entries in the faces-config.xml file. Example 2-4 shows the XML generated for the navigation rules displayed in Figure 2-2.

<navigation-rule>
  <from-view-id>/DisplayCustomer</from-view-id>
  <navigation-case>
    <from-outcome>edit</from-outcome>
    <to-view-id>/EditCustomer</to-view-id>
  </navigation-case>
</navigation-rule>
<navigation-rule>
  <from-view-id>/EditCustomer</from-view-id>
    <navigation-case>
      <from-outcome>back</from-outcome>
      <to-view-id>/DisplayCustomer</to-view-id>
    </navigation-case>
</navigation-rule>

2.4.1 How to Create JSF Pages

You create JSF pages using the Create JSF Page dialog.

To create a JSF page:

1. In the Application Navigator, right-click the directory where you would like the page to be saved, and choose New to open the New Gallery. In the Categories tree, under the Web Tier node, select JSF. In the Items panel, select JSF Page.

   OR

   From a navigation diagram, double-click a page icon for a page that has not yet been created.

2. Complete the Create JSF Page dialog. For help, click Help in the dialog. For more information about the Page Implementation option, which can be used to automatically create a backing bean and associated bindings, see Section 2.4.3, "What You May Need to Know About Automatic Component Binding".

2.4.2 What Happens When You Create a JSF Page

When you use the Create JSF Page dialog to create a JSF page, JDeveloper creates the physical file and adds the code necessary to import the component libraries and display a page. The code created depends on whether or not you chose to create a .jspx document. Example 2-5 shows a .jspx page when it is first created by JDeveloper.

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=windows-1252"/>
  <f:view>
    <af:document id="d1">
      <af:form id="f1"></af:form>
    </af:document>
  </f:view>
</jsp:root>

If you chose to use one of the quick layouts, then JDeveloper also adds the components necessary do display the layout. Example 2-6 shows the generated code when you choose a two-column layout, where the first column is locked and the second column stretches to fill up available browser space.

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=windows-1252"/>
  <f:view>
    <af:document id="d1">
      <af:form id="f1">
        <af:panelStretchLayout startWidth="100px" id="psl1">
          <f:facet name="start"/>
          <f:facet name="center"/>
        </af:panelStretchLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

If you chose to automatically create a backing bean using the Page Implementation section of the dialog, JDeveloper also creates and registers a backing bean for the page, and binds any existing components to the bean. Example 2-7 shows the code created for a backing bean for a page.

package view.backing;
 
import oracle.adf.view.rich.component.rich.RichDocument;
import oracle.adf.view.rich.component.rich.RichForm;
 
public class MyFile {
    private RichForm f1;
    private RichDocument d1;
 
    public void setF1(RichForm f1) {
        this.f1 = f1;
    }
 
    public RichForm getF1() {
        return f1;
    }
 
    public void setD1(RichDocument d1) {
        this.document1 = d1;
    }
 
    public RichDocument getD1() {
        return d1;
    }
}

Additionally, JDeveloper adds the following libraries to the view project:

• ADF Faces Runtime 11

• ADF Common Runtime

• ADF DVT Faces Runtime

• Oracle JEWT

When the page is first displayed in JDeveloper, it is displayed in the visual editor (accessed by clicking the Design tab), which allows you to view the page in a WYSIWYG environment. You can also view the source for the page in the source editor by clicking the Source tab. The Structure window located in the lower left-hand corner of JDeveloper, provides a hierarchical view of the page.

2.4.3 What You May Need to Know About Automatic Component Binding

Backing beans are managed beans that contain logic and properties for UI components on a JSP page (for more information about managed beans, see Section 2.6, "Creating and Using Managed Beans"). If when you create your JSF page you choose to automatically expose UI components by selecting one of the choices in the Page Implementation of the Create JSF Page dialog, JDeveloper automatically creates a backing bean (or uses a managed bean of your choice) for the page. For each component you add to the page, JDeveloper then inserts a bean property for that component, and uses the binding attribute to bind component instances to those properties, allowing the bean to accept and return component instances.

Specifically, JDeveloper does the following when you use automatic component binding:

• Creates a Java bean using the same name as the JSP or JSPX file, and places it in the view.backing package (if you elect to have JDeveloper create a backing bean).

• Creates a managed bean entry in the faces-config.xml file for the backing bean. By default, the managed bean name is backing_<page_name> and the bean uses the request scope.

  Note:

  JDeveloper does not create managed bean property entries in the faces-config.xml file. If you wish the bean to be instantiated with certain property values, you must perform this configuration in the faces-config.xml file manually. For more information, see Section A.3.1, "How to Configure for ADF Faces in faces-config.xml".

• On the newly created or selected bean, adds a property and accessor methods for each component tag you place on the JSP. JDeveloper binds the component tag to that property using an EL expression as the value for its binding attribute.

• Deletes properties and methods for any components deleted from the page.

Once the page is created and components added, you can then declaratively add method binding expressions to components that use them by double-clicking the component in the visual editor. Doing so launches an editor through which you can select the managed bean and method to which you want to bind the attribute. When automatic component binding is used on a JSF page and you double-click the component, skeleton methods to which the component may be bound are automatically created for you in the page's backing bean. For example, if you add a command button component and then double-click it in the visual editor, the Bind Action Property dialog displays the page's backing bean along with a new skeleton action method, as shown in Figure 2-6.

Figure 2-6 Bind Action Property Dialog in JDeveloper

You can select from one these methods, or if you enter a new method name, JDeveloper automatically creates the new skeleton method in the page's backing bean. You must then add the logic to the method.

For example, suppose you created a JSF page with the file name myfile.jspx. If you chose to let JDeveloper automatically create a default backing bean, then JDeveloper creates the backing bean as view.backing.MyFile.java, and places it in the \src directory of the ViewController project. The backing bean is configured as a managed bean in the faces-config.xml file, and the default managed bean name is backing_myfile.

Example 2-8 shows the code on a JSF page that uses automatic component binding, and contains form, inputText, and commandButton components.

<f:view>
  <af:document id="d1" binding="#{backing_myfile.d1}">
    <af:form id="f1" binding="#{backing_myfile.f1}">
      <af:inputText label="Label 1" binding="#{backing_MyFile.inputText1}"
                    id="inputText1"/>
      <af:commandButton text="commandButton 1"
                        binding="#{backing_MyFile.commandButton1}"
                        id="commandButton1"/>
    </af:form>
  </af:document>
</f:view>

Example 2-9 shows the corresponding code on the backing bean.

package view.backing;
 
import oracle.adf.view.rich.component.rich.RichDocument;
import oracle.adf.view.rich.component.rich.RichForm;
import oracle.adf.view.rich.component.rich.input.RichInputText;
import oracle.adf.view.rich.component.rich.nav.RichCommandButton;
 
public class MyFile {
    private RichForm f1;
    private RichDocument d1;
    private RichInputText inputText1;
    private RichCommandButton commandButton1;
 
    public void setForm1(RichForm f1) {
        this.form1 = f1;
    }
 
    public RichForm getF1() {
        return f1;
    }
 
    public void setD1(RichDocument d1) {
        this.d1 = d1;
    }
 
    public RichDocument getD1() {
        return d1;
    }
 
    public void setIt1(RichInputText inputText1) {
        this.inputText1 = inputText1;
    }
 
    public RichInputText getInputText1() {
        return inputText1;
    }
 
    public void setCommandButton1(RichCommandButton commandButton1) {
        this.commandButton1 = commandButton1;
    }
 
    public RichCommandButton getCommandButton1() {
        return commandButton1;
    }
 
    public String commandButton1_action() {
        // Add event code here...
        return null;
    }
}

Example 2-10 shows the code added to the faces-config.xml file to register the page's backing bean as a managed bean.

<managed-bean>
  <managed-bean-name>backing_MyFile</managed-bean-name>
  <managed-bean-class>view.backing.MyFile</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

In addition, when you edit a Java file that is a backing bean for a JSF page, a method binding toolbar appears in the Java Source Editor for you to bind appropriate methods quickly and easily to selected components in the page. When you select an event, JDeveloper creates the skeleton method for the event, as shown in Figure 2-7.

Figure 2-7 You Can Declaratively Create Skeleton Methods in the Java Source Editor

Once you create a page, you can turn automatic component binding off or on, and you can also change the backing bean to a different Java class. Open the page in the visual Editor and from the JDeveloper menu, choose Design > Page Properties. Here you can select or deselect the Auto Bind option, and change the managed bean class. Click Help for more information about using the dialog.

You can always access the backing bean for a page from the page editor by right-clicking the page and choosing Go to and then choosing the bean from the list of beans associated with the page.

2.4.4 How to Add ADF Faces Components to JSF Pages

Once you have created a page, you can use the Component Palette to drag and drop components onto the page. JDeveloper then declaratively adds the necessary page code and sets certain values for component attributes.

To add ADF Faces components to a page:

1. Open a JSF page in the visual editor.

2. If the Component Palette is not displayed in JDeveloper, from the menu choose View > Component Palette. By default, the Component Palette is displayed in the upper right-hand corner of JDeveloper.

3. In the Component Palette, use the dropdown menu to choose ADF Faces.

   The components are contained in three accordion panels: Common Components, Layout, and Operations. Figure 2-8 shows the Component Palette displaying the Common Components for ADF Faces.

   Figure 2-8 Component Palette in JDeveloper

   
   

4. Select the component you wish to use and drag it onto the page.

   JDeveloper redraws the page in the visual editor with the newly added component. In the visual editor, you can directly select components on the page and use the resulting context menu to add more components. Figure 2-9 shows a page in the visual editor.

   Figure 2-9 Page Displayed in the Design Tab

   
   

2.4.5 What Happens When You Add Components to a Page

When you drag and drop components from the Component Palette onto a JSF page, JDeveloper adds the corresponding code to the JSF page. This code includes the tag necessary to render the component, as well as values for some of the component attributes. Example 2-11 shows the code when you drop an Input Text and a Button component from the palette.

<af:inputText label="Label 1" id="it1"/>
<af:commandButton text="commandButton 1" id="cb"/>

When you drop a component that contains mandatory child components (for example a table or a list), JDeveloper launches a wizard where you define the parent and also each of the child components. For example, Figure 2-10 shows the Table wizard used to create a table component and the table's child column components.

Figure 2-10 Table Wizard in JDeveloper

Example 2-12 shows the code created when you use the wizard to create a table with three columns, each of which uses an outputText component to display data.

<af:table var="row" id="t1">
  <af:column sortable="false" headerText="col1" id="c1">
    <af:outputText value="#{row.col1}" id="ot1"/>
  </af:column>
  <af:column sortable="false" headerText="col2" id="c2">
    <af:outputText value="#{row.col2}" id="it2"/>
  </af:column>
  <af:column sortable="false" headerText="col3" id="c3">
    <af:outputText value="#{row.col3}" id="ot3"/>
  </af:column>
</af:table>

2.4.6 How to Set Component Attributes

Once you drop components onto a page you can use the Property Inspector (displayed by default at the bottom right of JDeveloper) to set attribute values for each component.

Figure 2-11 shows the Property Inspector displaying the attributes for an inputText component.

Figure 2-11 JDeveloper Property Inspector

The Property Inspector has sections that group similar properties together. For example, the Property Inspector groups commonly used attributes for the inputText component in the Common section, while properties that affect how the component behaves are grouped together in the Behavior section. Figure 2-12 shows the Behavior section of the Property Inspector for an inputText component.

Figure 2-12 Behavior Section of the Property Inspector

To set component attributes:

1. Select the component, either in the visual editor, the Structure window, or by selecting the tag directly in the source editor.

2. In the Property Inspector, expand the section that contains the attribute you wish to set.

   Tip:

   Some attributes are displayed in more than one section. Entering or changing the value in one section will also change it in any other sections. You can search for an attribute by entering the attribute name in the search field at the top of the inspector.

3. Either enter values directly into the fields, or if the field contains a dropdown list, use that list to select a value. You can also use the dropdown menu to the right of the field to use tools to set the value. These tools are either specific property editors (opened by choosing Edit from the menu) or the Expression Builder, which you can use to create EL expressions for the value (opened by choosing Expression Builder). For more information about using the Expression Builder, see Section 2.5, "Creating EL Expressions".

2.4.7 What Happens When You Use the Property Inspector

When you use the Property Inspector to set or change attribute values, JDeveloper automatically changes the page source for the attribute to match the entered value.

2.5.1 How to Create an EL Expression

You can create EL expressions declaratively using the JDeveloper Expression Builder. You can access the builder from the Property Inspector.

To use the Expression Builder:

1. In the Property Inspector, locate the attribute you wish to modify and use the right-most dropdown menu to choose Expression Builder.

2. Create expressions using the following features:

   • Use the Variables tree to select items that you want to include in the expression. The tree contains a hierarchical representation of the binding objects. Each icon in the tree represents various types of binding objects that you can use in an expression.

     To narrow down the tree, you can either use the dropdown filter or enter search criteria in the search field. The EL accessible objects exposed by ADF Faces are located under the adfFacesContext node, which is under the JSF Managed Bean node, as shown in Figure 2-13.

     Figure 2-13 adfFacesContext Objects in the Expression Builder

     
     

     Tip:

     Refer to the ADF Faces Javadoc for more information about these objects.

     Selecting an item in the tree causes it to be moved to the Expression box within an EL expression. You can also type the expression directly in the Expression box.

   • Use the operator buttons to add logical or mathematical operators to the expression.

   Figure 2-14 shows the Expression Builder dialog being used to create an expression that binds to the value of a label for a component to the label property of the explorer managed bean.

   Figure 2-14 The Expression Builder Dialog

   
   

2.5.2 How to Use EL Expressions Within Managed Beans

While JDeveloper creates many needed EL expressions for you, and you can use the Expression Builder to create those not built for you, there may be times when you need to access, set, or invoke EL expressions within a managed bean.

Example 2-13 shows how you can get a reference to an EL expression and return (or create) the matching object.

public static Object resolveExpression(String expression) {
  FacesContext facesContext = getFacesContext();
  Application app = facesContext.getApplication();
  ExpressionFactory elFactory = app.getExpressionFactory();
  ELContext elContext = facesContext.getELContext();
  ValueExpression valueExp = 
     elFactory.createValueExpression(elContext, expression, 
                                            Object.class);
     return valueExp.getValue(elContext);
 }

Example 2-14 shows how you can resolve a method expression.

public static Object resloveMethodExpression(String expression, 
                                             Class returnType, 
                                             Class[] argTypes, 
                                             Object[] argValues) {
  FacesContext facesContext = getFacesContext();
  Application app = facesContext.getApplication();
  ExpressionFactory elFactory = app.getExpressionFactory();
  ELContext elContext = facesContext.getELContext();
  MethodExpression methodExpression = 
            elFactory.createMethodExpression(elContext, expression, returnType, 
                                             argTypes);
    return methodExpression.invoke(elContext, argValues);
  }

Example 2-15 shows how you can set a new object on managed bean.

public static void      (String expression, Object newValue) {
  FacesContext facesContext = getFacesContext();
  Application app = facesContext.getApplication();
  ExpressionFactory elFactory = app.getExpressionFactory();
  ELContext elContext = facesContext.getELContext();
  ValueExpression valueExp = 
     elFactory.createValueExpression(elContext, expression, 
                                     Object.class);

  //Check that the input newValue can be cast to the property type
  //expected by the managed bean.
  //Rely on Auto-Unboxing if the managed Bean expects a primitive
  Class bindClass = valueExp.getType(elContext);
 if (bindClass.isPrimitive() || bindClass.isInstance(newValue)) {
      valueExp.setValue(elContext, newValue);
  }
}

2.6.1 How to Create a Managed Bean in JDeveloper

You can create a managed bean and register it with the JSF application at the same time using the overview editor for the faces-config.xml file.

To create and register a managed bean:

1. In the Application Navigator, open the faces-config.xml file.

2. At the bottom of the window, click the Overview tab.

3. Click the Managed Beans tab. Figure 2-15 shows the editor for the faces-config.xml file used by the ADF Faces demo that contains the File Explorer application.

   Figure 2-15 Managed Beans in the faces-config.xml File

   
   

4. Click the Add icon to add a row to the Managed Bean table.

5. In the Create Managed Bean dialog, enter values. Click Help for more information about using the dialog. Select the Generate Class If It Does Not Exist option if you want JDeveloper to create the class file for you.

6. You can optionally add managed properties for the bean. When the bean is instantiated, any managed properties will be set with the provided value. With the bean selected in the Managed Bean table, click the New icon to add a row to the Managed Properties table. In the Property Inspector, enter a property name (other fields are optional).

   Note:

   While you can declare managed properties using this editor, the corresponding code is not generated on the Java class. You must add that code by creating private member fields of the appropriate type, and then by choosing the Generate Accessors... menu item on the context menu of the code editor to generate the corresponding get and set methods for these bean properties.

2.6.2 What Happens When You Use JDeveloper to Create a Managed Bean

When you create a managed bean and elect to generate the Java file, JDeveloper creates a stub class with the given name and a default constructor. Example 2-16 shows the code added to the MyBean class stored in the view package.

package view;
 
public class MyBean {
    public MyBean() {
    }
}

You now must add the logic required by your page. You can then refer to that logic using an EL expression that refers to the managed-bean-name given to the managed bean. For example, to access the myInfo property on the my_bean managed bean, the EL expression would be:

#{my_bean.myInfo}

JDeveloper also adds a managed-bean element to the faces-config.xml file. Example 2-17 shows the managed-bean element created for the MyBean class.

<managed-bean>
  <managed-bean-name>my_bean</managed-bean-name>
  <managed-bean-class>view.MyBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>