|
|
Conforming to the JSF standards, ADF Faces lets you concentrate on the application and layout rather than markup language and tags. Due to the integration of ADF Faces and ADF Business Components, you can easily change the default field labels for the user interface from within ADF Business Components. In the next few steps, you create an ADF Faces application based on the ADF BC model that you just built. You also modify some of the ADF BC default settings to help enhance the default UI.
Now that you have built your new ADF Faces application, you need to test it. JDeveloper makes it easy to test JSF through a built-in OC4J server. The server is automatically launched when you test a page from within JDeveloper. The next few steps take you through the testing process.
Now that you have a working version of a JSF application, let's spend a moment to customize some of the labels on the page. You created the page using default values for all of the layout components. This is a good way to start, but you will probably want to have more control over the complete page. The field labels on your page are not hard-coded, but rather are derived at runtime. The values for those fields are retrieved from ADF Business Components definitions at runtime. ADF BC provides a way to customize those runtime properties. One of the properties you can modify is called Control Hints. These Control Hints allow you to create display properties such as label, field size, and format mask that will be rendered at runtime by ADF Faces. In the next few steps, you will modify the Control Hints for the CustomersView object and retest your application to see those changes applied.
In this part of the tutorial, you add business components
to the existing data model to add view objects to the application module's data In the next few steps, you add business components in the data model.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1. |
In the Applications Navigator, right-click the Model project and select New from the context menu.
|
| 2. |
In the New Gallery, expand Business Tier and select ADF Business Components in the Categories list. Select View Object in the Item pane.
Click OK.
|
| 3. |
Click Next to skip the Welcome page of the Create View Object wizard. In Step 1 name the view PromotionsLOV. Check the Rows Populated by a SQL Query option and choose Read-Only Access.
Click Next to continue.
|
| 4. |
In Step 2 enter the following Query Statement: SELECT Promotions.PROMO_ID,
Promotions.PROMO_NAME Click the Test button to validate the SQL statement. Then Next and Finish.
|
| 5. |
The Applications Navigator should now look like this:
|
In this section, you create a read-only View Component based on a SQL statement that makes up the authorized values for the Mode column of the Orders table. These values will be used as a Drop Down list in an Edit page.
| 1. |
In the Applications Navigator, right-click the Model project and select New from the context menu.
|
| 2. |
In the New Gallery, expand Business Tier and select Business Components in the Categories list. Select View Object in the Item pane.
Click OK.
|
| 3. |
Click Next to skip the Welcome page of the Create View Object wizard. In Step 1 name the view ModelLOV, check the Rows Populated by a SQL query option and choose Read-Only Access.
Click Next to continue.
|
| 4. |
In Step 2 enter the following Query Statement: select 'direct' as
modevalue from dual Click the Test button to validate the SQL statement. Then click Next twice and Finish.
|
| 5. |
The Applications Navigator should now look like this:
|
In the following steps, you create a view object to present data from both the Customer and Orders entity objects. The wizard will automatically create the appropriate join query between their underlying database tables.
| 1. |
In the Applications Navigator, right-click the Model node and select New from the context Menu.
|
||||||||||||
| 2. |
In the New Gallery, expand Business Tier and select Business Components in the Categories list. Select View Object in the Item pane.
Then OK.
|
||||||||||||
| 3. |
Click Next to skip the Welcome page of the Create View Object wizard. In Step 1 name the view SearchOrders Check the Rows Populated by a SQL Query option, and choose Updatable Access through Entity Objects access.
Click Next
|
||||||||||||
| 4. |
In Step 2 Select the Orders Entity object and click
the Add button Note: it is important to follow the above order for shuttling the selected entities.
Click Next
|
||||||||||||
| 5. |
In Step 3, click the Attributes node and select the following attributes: Orders.OrderId
then Next
|
||||||||||||
| 6. |
In Step 4, select the OrderId attribute, note that
it is automatically marked as a Key Attribute because it is the key Select the CustomerId attribute from the dropdown list and uncheck the Key Attribute check box.
Click Next
|
||||||||||||
| 7. |
Now we want to provide a search page that allows the end user to search on a customer's first name or last name in a case-insensitive way, as well as search for orders whose order total falls in a given range. In this step, you will add a custom WHERE clause to the view object that references named bind variables for the parameters we'd like the user to be able to supply at runtime. You will reference the bind variables here, and then formally define the bind variables names, data types, and default values, in the next step of the wizard. In Step 5 click the ExpertMode check Box and in the query statement dialog, add the following code at the end of the statement: AND ORDER_TOTAL BETWEEN :TotalLow AND :TotalHigh AND (UPPER(CUST_FIRST_NAME) LIKE UPPER(:CustName) ||'%' OR UPPER(CUST_LAST_NAME) LIKE UPPER(:CustName)||'%') Click the Test button to make sure the SQL statement is valid. Click Next twice.
|
||||||||||||
| 8. |
In Step 7 use the new button to create create three named bind variables with the following properties:
|
||||||||||||
| 9. |
You can define control hints for the named bind variables as you did earlier for view object attributes. Select the CustName variable and click the Control Hints tab. Type Customer Name in the label text field
|
||||||||||||
| 10. |
For TotalLow type Order Total Greater Than in the label text field
|
||||||||||||
| 11. |
For TotalHigh type Order Total Lower Than in the label text field
Click Finish
|
||||||||||||
| 12. |
The Applications Navigator now looks like this:
|
Refining the View Objects and Updating the Application Module
| 1. |
Right click the SearchOrders node in the Applications Navigator and select the Edit option from the context menu.
|
| 2. |
Next, you add a format mask so that the OrderTotal displays as a currency value. Expand the Attributes node, select OrderTotal and In the Control Hints tab set the Format Type to Currency.
Click OK Note: Since the format is specified at the view object level, only components using this specific view definition will inherit this Format definition.
|
| 3. |
Right click the Orders Entity Object node in the Applications Navigator, and select the Edit option from the context menu.
|
| 4. |
Expand the Attributes node, select OrderDate and in the Control Hints tab set the Format Type to Simple Date and specify the following format: dd-MMM-yyyy
Click OK Note: Since the format is specified at the entity object level, all views based on this entity definition will inherit this Format definition. |
| 5. |
In the Applications Navigator, right click the OrderEntryAM and select Edit from the context menu.
|
| 6. |
You need to include instances of the new view object components in the application module's data model. In the Application Module Editor, select the Data Model
node and in the list of available objects, select ModelLOV.
Click the Add button Repeat the shuttle operation for SearchOrders, and PromotionsLOV.
Then click OK. Note: the Instance Name field can be used to change the name of the selected view object instance in the data model.
|
| 7. |
Click the Save All
|
| 8. |
You have now customized the SearchOrders view to meet the specific needs of your application. The next step is to create JSF pages that use this data model.
|
In the next few steps, you create an ADF Faces page based on the ADF BC model using the SearchOrders view that you just defined.
| 1. |
In the Applications Navigator, collapse the Model project and expand the View one. Double click the faces-config.xml node to open a diagram.
Note: Alternatively, you can right click the ViewController node and select the Open JSF Navigation option from the context menu.
|
| 2. | From the component palette,drag and drop a JSF page
icon onto the diagram.
|
| 3. |
Rename the page Search.
Double click the JSF page icon to launch the page creation wizard.
|
| 4. |
Selecting a new JSF opens the Create JSF JSP Wizard. Click Next to skip the Welcome page (if it appears) of the JSF JSP Wizard.
|
| 5. |
Select JSP Page (*.JSP) as the type for the Search.jsp. Accept the other defaults.
Click Next to continue.
|
| 6. |
On the new page, Component Binding, select the Do Not Automatically Expose UI Components option. Leave other values to their defaults.
Click Next.
|
| 7. |
Select libraries in the Available Libraries window and use the Add
button
Click Next to accept these libraries.
|
| 8. |
Click Finish to accept the default HTML options and create the new JSP. You now have an empty Search.jsp page.
In the next few steps, you add data-bound ADF Faces components to the page. These components display search criteria for retrieving the rows that match the selection criteria.
|
| 9. |
In the Data Control palette, expand the following nodes OrderEntryAMDataControl > SearchOrders1 > Operations and select the ExecuteWithParams action.
|
| 10. |
Drag and Drop the ExecuteWithParams onto the page and in the context menu, select Create > Parameters > ADF Parameter Forms...
The Edit Form Fields dialog opens.
Click OK. The page displays in the editor.
|
| 11. |
In the Data Control palette, select SearchOrders1 and Drag and Drop it below the parameters form.
|
| 12. |
In the new dialog, select Create > Tables > ADF Read Only Table
|
| 13. |
In the Edit Table Columns dialog, click the Enable Selection and Enable Sorting boxes
then click OK.
You now have a complete JSF Page that is databound to your ADF BC business services.
|
| 14. | Click the Green Arrow 
in the toolbar to run the Search page. |
| 15. |
Experiment with the Search page, specifying values for Customer Name, Total Low and Total High fields, then click the ExecuteWithParams button.
Note: the search on the customer name is case-insensitive and matches either in the first name or the last name, based on how we specified our WHERE clause in the underlying view object. In a real application you could easily rename the ExecuteWithParams button to "Find" or "Search" using the property inspector.
|
| 16. | Try various Search combinations. Test the sorting facility by clicking in the header of any column. A second click in the header switches the order from ascending to descending and vice versa. Close the browser window when finished. |
In the next few steps, you create an ADF Faces page based on the ADF BC model using the Orders , PromotionsLOV and ModelLOV views that you just built.
| 1. | In the Applications Navigator, double click the faces-config.xmlnode
to open a diagram.
|
| 2. | From the component palette, drag and drop a JSF page
icon on the diagram.
|
| 3. |
Rename the page EditOrder.
Double click the EditOrder JSF page icon to launch the wizard.
|
| 4. |
Selecting a new JSF opens the Create JSF JSP Wizard. Click Next to skip the Welcome page of the JSF JSP Wizard.
|
| 5. |
The JSP standard supports creating pages that are well-formed XML documents. These can be especially handy because they allow the page's source to be easily parsed using XML tools, and they encourage the best practice of not mixing code into your page. JDeveloper supports working with either *.jsp pages or these XML-based *.jspx pages. In this step, you will build the edit page using a so-called JSP Document, the XML-based style of a JSP page. Select JSP Document (*.JSPX) as the type for the EditOrder.jspx. Accept other defaults
click Next to continue.
|
| 6. |
On the next page, Component Binding, select the Do Not Automatically Expose UI Components option. Leave other values to default.
click Next.
|
| 7. |
Select libraries in the Available Libraries window and use the Add
button
Click Next to accept these libraries. Click Finish to accept the default HTML options and create the new JSPX.
|
| 8. |
You now have an empty EditOrder.jspx page. In the next few steps, you add data-bound ADF Faces components to the page. These components display Orders information using various UI representation.
|
| 9. |
In the Data Control palette, expand the OrderEntryAMDataControl node and Drag and Drop the OrdersView1 on the empty page.
|
| 10. |
in the new dialog, select Create > Forms > ADF Form...
|
| 11. |
In the Edit Form Fields, delete the OrderMode and PromotionId attributes, and check the Include Submit Button.
Click OK.
|
| 12. |
From the Data Controls palette, expand the OrdersView1 and drag and drop the OrderMode attribute on the page after the Order Total.label field.
In the context menu, select Create > Single Selections > ADF Select One Choice...
|
| 13. |
In the List Binding Editor, select the Dynamic List option. Notice that in this specific case, because the number of values is small, you could also use the Fixed List option and then specify the list of allowed values.
Set the Base Data Source to OrderMode and List DataSource
Attribute to Modevalue.
Then click OK.
|
| 14. |
From the Data Controls palette, select the PromotionId column and drag and drop the PromotionId attribute on the page after the OrderMode.label field.
From the context menu, select Create > Single Selections > ADF Select One Choice...
|
| 15. |
In the List Binding Editor, select the Dynamic List option.
In the List Data Source, click the Add button and in the Add Data Source Editor, select the PromotionsLOV1 data control, and click OK.
Click OK.
|
| 16. |
Reopen the faces-config diagram, and in the component palette select the JSF Navigation Case. Click the Search page and draw a line to the EditOrder page.
|
| 17. |
In the Property pane, set the From Outcome to edit to rename the navigation.
|
| 18. |
In the component palette select the JSF Navigation Case. Click the EditOrder page and draw a line to the Search page.
|
| 19. |
On the diagram, select the success label for the outcome and change its value to search, to rename the outcome navigation.
|
| 20. |
Reopen the EditOrder page and in the Data Control palette, scroll down to the bottom, open the Operations node and drag and drop the Commit action on the existing Submit button.
In the context menu, choose the Bind Existing CommandButton option.
In the property pane, for the Commit
button, set the action value to search
from the drop down list. Then select the Disabled
property and click the Reset to Default
|
| 21. |
In the Data Controls palette in the Operations node, drag and drop the Rollback action next to the Commit button.
In the context menu, choose the ADF Command Button option
In the property pane, for the Rollback button, set
the action value to search from the
drop down list. Then select the Disabled property and
click the Reset to Default
|
| 22. |
Double click the Search icon on the diagram to open the Search page, then select the Submit button.
|
| 23. |
In the property pane, type Edit as the Text value and for the Action select edit from the drop down list.
|
| 24. |
Reopen the faces-config, then select and run the Search page.
|
| 25. |
In the Search Page, select one of the rows, then click the Edit button
|
| 26. |
Notice that the Edit page is called, but is not displaying the selected row from the search page. Had the Search page and the Edit page both been based on the same view object, the selected row in the Search page would also be the current row in the Edit page. However, since the Search page and the Edit page are based on different view objects, the current row in one is independent of the current row in the other. In the next section you will configure the declarative steps to synchronize the current, selected row in the Search page with the current row to edit in the Edit page. Test the drop down lists on the OrderMode and PromotionId attributes
Note that the Orderdate is displayed according to the format you specified earlier at the Entity object level, but OrderTotal does not display the currency format as in the Search page because the format was defined on the SearchOrders view and not on the OrdersV1 view.
|
| 27. | Close the browser to return to JDeveloper. |
Now you have to synchronize the information selected in the Search page with that displayed in the Edit page.
You accomplish the synchronization by having the Edit button, in the search page, assign the key of the currently selected row to a variable that the edit page will then consult to set it's current row before displaying the page.
The next few steps take you through this process.
| 1. |
Open the Search page in the Design editor and select the Edit button.
|
||||||||
| 2. |
ADF Faces makes it simple and declarative to have the clicking of a link or a button automatically set the value of some application variable. In this step, we'll add a SetActionListener component to the Edit button in the search page to set a variable to the value of the currently selected row's key which uniquely identifies the row. In the Structure pane, right click the edit commandButton and from the context menu select Insert Inside > ADF Faces Core > SetActionListener
|
||||||||
| 3. |
In the Insert SetActionListener dialog, enter the following values:
Click OK Note: We use the standard JSF expression language
(EL) syntax to specify that From and the To properties of the The #{row.rowKeyStr} expression refers to the property named rowKeyStr on the current row of the table. Its value will be a unique key representing that row. The #{processScope.orderKey} expression refers to an attribute named
'orderKey' in the ADF Faces process scope. The process scope holds attributes
whose values need to last longer than a single request -- as might be
the case when one page navigates to another using a redirect instead
of a forward -- and whose values should
|
||||||||
| 4. |
In the following steps, you will configure the Edit page to declaratively set the current row to edit when the page is first displayed by using the built-in setCurrentRowWithKey action provided for any by the ADF Model layer. This is configured in the page's data binding metadata that is stored in the ADF page definition for each page. In the Applications Navigator, right click the EditOrder page node. From the context menu, select Go to Page Definition option
|
||||||||
| 5. |
Next, you add a setCurrentRowWithKey action binding for the OrdersView1Iterator. This iterator was created automatically in the page definition when we initially dropped the ADF Form from the Data Control palette. The iterator keeps track of the current row in the underlying datasource, and provides numerous built-in operations that are useful while building user interfaces like Next, Previous, setCurrentRowWithKey, and others. Right click the bindings node. From the context menu, choose Insert Inside bindings > action
|
||||||||
| 6. |
In the Action Binding Editor, in the Select an Iterator field, select the OrdersView1Iterator from the drop down list at the bottom of the dialog.
|
||||||||
| 7. |
In the Select an Action, choose setCurrentRowWithKey
from the drop down list and double click within the Value
field. Then enter the following value:
Then click OK Note: The built-in setCurrentRowWithKey action takes
one parameter named 'rowKey that represents the key of the row you want
to make current. Recall in a previous step, we configured the Search
page's (Edit) button to store the current row's key in an attribute
named 'orderKey' in the ADF Faces process scope. So here, we need to
pass that row key value as the parameter to the setCurrentRowWithKey
action. To do this, we simply use the same EL
|
||||||||
| 8. |
Click the Save All
|
||||||||
| 9. |
In the Structure pane, right click the executables node and select Insert inside executables > invokeAction option from the context menu
|
||||||||
| 10. |
On it's own, an action binding in the page definition will not perform its action until it's instructed to. The action binding can be invoked in one of three ways: 1. It can be invoked programmatically by code you would write, In the Insert InvokeAction dialog, enter the following values:
Note: Id name can be any meaningful name the developer wants. Click the Advanced Properties tab. Note: By default, the "invokeAction" will execute each time the page is rendered. This includes both when the page is initially rendered, as well as when it is rendered after handling subsequent "postback" events, such as when the user interacts with buttons or links on the page. We can declaratively configure when the invokeAction should "fire" by specifying an optional RefreshCondition using a boolean-valued EL expression. When the expression evaluates to true, the invokeAction will invoke its related action binding. When the expression evaluates to false, the invokeAction is skipped and the related action binding is not invoked. Since we want the setCurrentRowWithKey action binding to trigger only when the page is initially rendered, but not when it handles postback events later, we can use the EL expression #{adfFacesContext.postback == false} to accomplish the job. When the page is initially rendered, this postback property will be false. Enter the following values:
Click OK |
||||||||
| 11. |
Select the Search page and Run it
|
||||||||
| 12. |
Specify search parameters in the Search page and execute the query, clicking the ExecuteWithParams button. In the detail list, select a row and click the Edit button to call the EditOrder page.
|
||||||||
| 13. |
In the EditOrder page, change the OrderTotal value and commit your changes.
|
||||||||
| 14. |
The Search page now redisplays the rows of your original search request. The update previously made is also reflected in the page.
|
||||||||
| Well done! You've successfully completed this OBE. |
In this tutorial, you created an end-to-end application by using Oracle JDeveloper, ADF Business Components, and ADF Faces. You learned how to:
 |
Create an ADF Business Components model | |
|
Create a JavaServer Faces page with ADF Faces components | |
|
Use ADF Business Components to customize elements of the UI | |
|
Run and test the ADF Faces application | |
|
Use Business Components Control Hints to customize your application | |
|
Create new Business Components for LOVs and Validation control | |
|
Create a Search page base on a join operation | |
|
Create an Edit page | |
|
Synchronize the Edit page with the Search
Page when they are based on different view objects |
|
Place the cursor over this icon to hide all screenshots.
|
|
|
|
|
|
to shuttle both tables to the Selected list.
to shuttle the selected attributes from the Selected list.
icon on the JDeveloper menu bar, or select File > Save All
from the menu.
icon to populate the false value. This makes the commit
button always selectable.
