| Oracle® Fusion Applications Developer's Guide 11g Release 1 (11.1.1.5) Part Number E15524-01 |
|
|
View PDF |
| Oracle® Fusion Applications Developer's Guide 11g Release 1 (11.1.1.5) Part Number E15524-01 |
|
|
View PDF |
This chapter discusses the Applications Panels, Master-Detail, Hover and Dialog Details components used to implement user interface features in JDeveloper.
This chapter includes the following sections:
For basic information, see:
Applications panels help you create the following user interface (UI) components as part of the UI Applications patterns:
Page title
Form title
Page button bar (including navigation bar)
Facets for page-specific UI components
You must use Applications panels to standardize layout and appearance for all your page forms and buttons, including read-only pages.
Before you begin:
Before you can use Applications panels, you must be familiar with JDeveloper and be able to create JavaServer Faces (JSF) pages.
Applications panels provide a button bar containing these buttons:
Canceling processes: Cancel, Revert
Data-saving processes: Save, Submit, Save and Continue, Save and Next, Save and Create Another, Continue, Create Another, Save and Close
Navigational processes: Next, Previous, Back
The buttons are organized into four slots, as shown in Figure 16-7.
All panel buttons have attributes, and some buttons have facets. Button attributes include button qualities, such as the title string and the button name. Button facets are locations that contain panel data, such as content locations and button information locations.
Table 16-1 contains attributes that are exposed for the buttons.
Table 16-1 Attributes of Standard Panel Buttons
| Property | Description | Data Type |
|---|---|---|
|
|
Unique identification number for the panel. |
|
|
|
Whether the panel is rendered (that is, converted from an object-based description into a graphical image for display). |
|
|
|
Panel title. |
|
|
|
Type of navigation for that panel. |
Navigation types:
|
|
For example: |
Whether the button is visible in the UI. |
|
|
For example: |
Whether the button is rendered in the UI (that is, converted from an object-based description into a graphical image for display). |
|
|
|
Type of action that the button performs. |
|
|
For example: |
ID of the popup that appears when users press the button. |
|
|
For example: |
Tooltip text for the button. |
|
|
For example: |
Next and Previous buttons only: Whether the button should be disabled in the UI. |
|
|
|
Submit button text: Text associated with the OK button. |
|
|
|
Sets to true when scroll bar needs to be enabled. When scrollable is set to true, it sets |
|
|
|
Sets the appearance of the Save button. The Save button can be rendered as a normal button, or as a drop button, depending on the value of this attribute. When it is set to |
|
|
|
The instructionText attribute places instruction text for the Applications Panel title. This instruction text appears right below the title if the |
The instructionText="#{adfFacesContext.helpProvider'helpTopicId'].instructions}"
or
instructionText="#{adfFacesContext.helpProvider['helpTopicId'].definition}"
or
instructionText="#{adfFacesContext.helpProvider['helpTopicId'].externalUrl}"
|
|
|
If no default buttons that are provided by the Applications Panel are used, set this value to false to avoid displaying unnecessary separators. |
Boolean |
|
|
Sets the immediate attribute on the Revert button. Sets whether or not data validation - client-side or server-side - should take place when events are generated by this component. When immediate is true, the default ActionListener provided by the JavaServer Faces implementation should be executed during the Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase. |
Boolean. Default is false. |
|
|
Sets the appearance of the Submit button. The Submit button can be rendered as a normal button, or as a drop button, depending on the value of this attribute. When it's set to |
String. The two values are button (the default) and dropButton. |
|
|
Sets the |
True or false (default) |
|
|
Sets the |
True or false (default) |
|
|
Sets the text that is displayed on the saveAndCreateAnother button. |
String |
|
|
Sets the text that displays on the createAnother button. |
String |
|
|
Sets the action attribute on the button with <button_name>. Users must provide their own action; there is no default action. |
String or EL Expression. |
|
|
Sets the actionListener attribute on the button with <button_name>. Users must provide their own |
EL Expression. |
|
For example: |
|
String or EL Expression. Important: The
|
By default, a managed bean that ships with the Applications Panel enables certain actions when certain conditions exist. For example, default actions occur when users click buttons, and when developers set certain Applications Property values. These default actions are overridden if you change the value of the default button action property.
Table 16-2 contains facets that are exposed for each panel button.
Table 16-2 Facets of Standard Panel Buttons
| Facet | Description | Allowed Children |
|---|---|---|
|
|
Facet for holding developer-defined content or content generated at design time. |
Any ADF component. |
|
|
Facet for holding the navigation choice list if the chosen Record Navigation Type is non-linear. |
|
|
|
Facet for holding custom action buttons. |
|
|
|
Facet for holding the custom menu and menu items for the Save button. |
|
|
|
Facet for holding the custom menu and menu items of the Submit button. |
None |
|
|
Facet for holding any popups required for any of the buttons. |
Applications popups under some ADF layout components. |
|
|
Facet for displaying legend information on the header. |
|
|
|
Facet for displaying context information next to the header. The contextual information is displayed next to the header text. |
|
|
|
Facet for adding custom Save drop button. |
|
|
|
Facet for adding content into local context region. |
|
|
|
Facet for adding a task stamp. There are three styles: one applied to the right side of the data, one to the left, and one to the container having these values. ( Example: <af:panelGroupLayout
layout="vertical"
valign="top"
styleClass="AFStampContainer" id="ptpgl5">
<af:panelGroupLayout
layout="horizontal"
halign="end" id="ptpgl6">
<af:outputText
value="Last Updated"
styleClass="TaskStampTextLabel" id="ptot8"/>
<af:outputText
value="08-Nov-2007"
styleClass="AFTaskStampTextValue" id="ptot9"/>
</af:panelGroupLayout>
<af:panelGroupLayout
layout="horizontal"
halign="right" id="ptpgl7">
<af:outputText
value="Budget Remaining"
styleClass="TaskStampTextLabel" id="ptot10"/>
<af:outputText
value="$20,000.00"
styleClass="AFTaskStampTextValue" id="ptot11"/>
</af:panelGroupLayout>
</af:panelGroupLayout>
|
|
|
|
Facet for adding collaboration toolbar buttons. |
Example: <f:facet name="collaborationToolbar">
<af:toolbox>
<af:toolbar>
< af:commandImageLink text="One" icon="/image1" id="mycmd1"/>
< af:commandImageLink text="Two" icon="/image2" id="mycmd2"/>
< af:commandImageLink text="Three" icon="/image3" id="mycmd3"/>
</af:toolbar>
</af:toolbox>
</f:facet>
|
|
|
Facet for adding scaling information. |
Example: <af:panelGroupLayout layout="vertical"
styleClass="AFStampContainer" id="pgl3">
<af:outputText value="AUD = Australian Dollar" id="ot5"/>
</af:panelGroupLayout>
Example for scalingInfo with more than one value: <af:panelGroupLayout layout="vertical" styleClass="AFStampContainer" id="pgl3"> <af:outputText value="AUD = Australian Dollar | Amounts in thousands" id="ot5"/> </af:panelGroupLayout> |
|
|
Facet for holding the custom menu and menu items for the Submit button. |
af: |
|
|
The contents facet is a child of the The Note: The Applications Panel can be stretched by placing it in the center facet of an ADF To use this facet, place your components inside the A switcher reads the Example: <fnd:applicationsPanel id="AP1"
title="#{viewcontrollerBundle.APPLICATIONS_PANEL__STRETCH_FA}"
scrollable="true" navigationType="none"
cancelVisible="true" cancelRendered="true"
submitVisible="true" submitRendered="true" contentsFacet="stretch">
<f:facet name="contentsStretch">
<af:panelStretchLayout id="psl1">
<f:facet name="bottom"/>
<f:facet name="center">
<fnd:applicationsTable tableId="ATt2" id="AT2"
deleteEnabled="true"
createPatternType="inline"
duplicatePatternType="inline"
editPatternType="inline"
createText=
"#{viewcontrollerBundle.NEW}">
|
Scroll (the default) or Stretch. |
|
|
Facet for adding a horizontal train above header. |
|
|
|
This can be either |
Model
The Applications panel does not expose any bindings to the model. However, components within the panel can be bound to the model.
Controller
The Applications Panel component ships with a default managed bean (internal to the Oracle Fusion Middleware Extensions for Applications team) that performs the following functions:
Default event handlers for all button action events. Event handler delegates to custom action method if set on the button action property. Each button event handler simply returns a standard outcome which is the name of the button clicked. For example, clicking the Cancel button will return an outcome "cancel".
If popup ID is set for any button, selecting the button invokes the popup.
To allow developers access to some of the implementation, the Applications Panel exposes a public class oracle.apps.fnd.applcore.patterns.ApplicationsPanelEventHandler that contains default event handlers for all the buttons. The button methods are named as process<buttonName> such as processSave and processCancel. Application developers writing custom action handlers can also use the default implementation by calling these methods.
Custom Button Handling
Follow these steps to attach a custom button handler to the Cancel button.
Define the managed bean class, as shown in Example 16-1.
Example 16-1 Example of Attaching a Custom Handler to a Button
import oracle.apps.fnd.applcore.patterns.ui.ApplicationsPanelEventHandler;
import oracle.apps.fnd.applcore.patterns.ui.util.PatternUtils;
public class CustomEventHandler
{
public String processCancel()
{
// Custom code
...
// Call default event handler if required. It will return a standard outcome
// for this button click.
ApplicationsPanelEventHandler appPanelEventHandler = ApplicationsPanelEventHandler.getInstance();
String outcome = appPanelEventHandler.processCancel();
// If popup is required to be invoked after event handling
PatternUtils.invokePopup(popupId);
return outcome;
}
}
Register the managed bean in your project's faces-config file.
Open the Property Inspector for the Applications panel and choose the Cancel Action property. As shown in the example in Figure 16-1, set #{CustomeEventHandler.processCancel} as the expression for the property.
Click the Create tab.
In the Create Action expression field, enter the following expression:
#{CustomEventHandler.processCreate}
Click Set.
You create Applications panels in the Applications Panel wizard, which is displayed when you add panels to your JSF pages (or page fragments) from the Component Palette or the Data Controls panel.
To Add an Applications Panel Using the Component Palette:
Open the Component Palette.
In the list, choose Applications.
In the list, click Panel. JDeveloper will attempt to place the panel at the current cursor location. If the current location is not appropriate, an error message displays. You also can drag the Panel icon to the page in either the Design or the Source view. A plus (+) sign will be added to the arrow when it is over a location in which a panel can be inserted.
The Applications Panel wizard is displayed.
To Add an Applications Panel Using the Data Control Dialog:
In the Application Navigator, open the Data Control panel.
Navigate to the data source that you want to bind to the Applications panel.
Drag and drop the data control to the JSF page.
In the Create context menu that is displayed, choose Applications > Panel.
The Applications Panel wizard is displayed.
This section explains how to use the Applications Panel wizard to add panels to your page.
In the Applications Panel wizard you can:
Specify panel titles and subsections
Select panel components
Bind a data source to the panel
Arrange panel components
Select panel buttons
In any Applications Panel wizard dialog, click Cancel to cancel your actions and exit the wizard. Click Finish on any dialog to accept the defaults and exit the wizard.
To Add an Applications Table Using the Applications Panel Wizard:
When the Applications Panel wizard is launched, the Title and Subsections dialog is displayed, as shown in Figure 16-2.
In the dialog:
Enter the panel title. In the example, LABEL should be predefined in a bundle as "Edit Journal: ID {OBJ_ID}".
The title is prepopulated with the Oracle Fusion Applications Standard for the title, which is a combination of the action of the task, the type of object, and the specific object name:
[Action] [Object Type]: [Object Name]
The Object Name usually is something specific so you can identify a specific object. For instance, if you were dealing with part numbers, the Object Name could be a specific part number; if you were dealing with customer information, it could be the customer's name.
The title should be a reference to a single message with appropriate tokens, because, according to Oracle internationalization standards, you should not concatenate translatable messages in the code. See "Internationalizing and Localizing Pages" in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
Click the Add icon (+) to add Panel Subsections, or click the Delete icon (X) to delete the highlighted subsection.
Each subsection has editable title fields, panel type fields (Panel Header for a basic view or Show Detail Header for a more detailed view), and number of columns (1-3) fields.
The Panel Subsections is used to divide the Applications Panel facet (contents) with other layout components, such as panelHeader, show detail header, and panelGroupLayout. This lets the developer decide the layout during Design Time without needing to add each of these layouts manually after the panel creation. Of course, the user can add more or new layouts as needed after the panel is created.
Use the up or down arrows to change row order.
Click Next.
The Select an initial set of panel components dialog is displayed, as shown in Figure 16-3.
In the Panel Components dialog:
Click Read-only Form to create a read-only form. (optional) If you select Read-only, the choices in the Component to Use column will change from Input Text to Output Text types.
If you have added the panel from the Component Palette, the Bind Data Now field displays. To bind a data source to the panel component:
Select Bind Data Now.
Click Browse to display the Data Source dialog, shown in Figure 16-4.
Select the data source, then click OK to add it to the component. Optionally, you can bind the component to a data source at a later time.
When you choose a data source, the component fields in the dialog are automatically populated with the data source fields, which contain panel-component information.
To reorder component fields, click the up and down arrows. To delete component fields, click the Delete icon (X). You will be able to add more component fields later. See Section 16.1.3.4, "Adding a Data Source to an Existing Panel."
Display Label: In general, the labels defined in the selected Data Control will be what you want and you can leave this value at the default <Default> setting. Otherwise, enter a new label name.
Value Binding: In general, the label and the Value Binding will match and you can accept the displayed value. Otherwise, you can click in the field to display a drop-down list of the values available in the selected Data Control.
Component To Use: Data in Dialog Details can be read-only or updatable. Component to Use is similar to what Component does while creating a table. Clicking it reveals a choice list of values, and the dialog details popup would then at runtime show that particular column from the datacontrol as the selected component to use. The choice list is changed according to whether or not you choose read-only. If you selected Read-only, the choices will change from Input Text to Output Text types.
Click Next. The Components Layout dialog is displayed, as shown in Figure 16-5.
Drag components from their default locations to your previously defined subsections. The result will appear similar to Figure 16-6.
Click Next. The Page Buttons dialog is displayed, as shown in Figure 16-7.
In the Page Level Buttons dialog:
To enable panel navigation (optional):
Select Enable Navigation.
Choose a navigation type (Linear or Non-Linear).
Linear sends users to an adjacent or contiguous window. This commonly is used when a series of actions or steps need to be followed in a sequential order.
Non-Linear sends users to a non-adjacent or non-contiguous window. This is used when an action does not need to take place in a specific sequence.
To disable editing of panel contents, select View Only Content.
To enable editing of panel contents:
Select Editable Content.
Choose the transactional buttons to display in each panel slot from the respective slot dropdown menus.
You can create a Save or Submit pull down menu. When you choose Save in slot 2, or Save and Close in slot 3, an Add Menu option will appear. Click it to display a list similar to Figure 16-8.
These are options that can appear in a pull down menu at runtime under Save. To select, click the option you want. To add more than one, select Add Menu again and choose a second option. As they are chosen, check marks will appear next to each selected item, shown in Figure 16-9.
If an option is chosen in Add Menu of slot 2, it will be grayed-out as an option for slot 3 to prevent you from making the same choice multiple times, shown in Figure 16-10.
Click Next. The Summary dialog is displayed, as shown in Figure 16-11.
Check to make sure your panel choices are correct.
Click Finish to create the panel. When you run this page, it will appear similar to Figure 16-12.
This section describes how to edit Applications Panel properties and components, how to add a data source to the panel, and how to add more UI content.
The Applications Panel can be stretched by placing it in the center facet of an ADF panelStretchLayout component. Do not set the width using the inlineStyle attribute on either Applications Panel or panelStretchLayout. For more information about basic page layout and the inlineStyle attribute, see "Organizing Content on Web Pages" and "Customizing the Appearance Using Styles and Skins" in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
Before you can edit the panel properties and components or bind the panel to a data source, you must access the panel in the Property Inspector section of your JSF page.
To access the panel on a JSF page:
Make the JSF page the active file.
Access the panel by double-clicking one of the following on the JSF page:
Applications Panel component in the Design view.
Applications Panel line in the Source view:
fnd:applicationsPanel...
Applications Panel entry in the Structure view hierarchy:
fnd:applicationsPanel
When you select the panel as described in this section, the Applications Panel - Property Inspector is displayed.
This section describes how to edit Applications Panel properties and components.
To edit an application panel property:
Access the panel as described in Section 16.1.3.2, "Accessing the Applications Panel on a JSF Page."
Select the Applications Panel to display the Property Inspector.
Follow the instructions in the Property Inspector to modify the panel property.
To edit an application panel component:
Access the panel as described in Section 16.1.3.2, "Accessing the Applications Panel on a JSF Page."
Select, then double-click the component or subsection. For example, to select a panel header, select af:panelHeader in the Source view.
When you double-click the component, the Property Inspector for the component is displayed. Edit the component in the Inspector.
For example, to edit a subsection display name, select the subsection and edit the Text property in the Property Inspector for that subsection.
This section describes how to add a data source after you create a panel in the Application Panel wizard.
To add a data source to an existing panel:
In the Application Navigator, open the Data Control panel.
Navigate to the data source to bind to the Applications panel.
Drag and drop the data source itself (or its individual fields) to the JSF page in Design mode.
Data-source fields are bound to panel components. Components are stored in the contents facet as af:panelFormLayout components, and in the various subsections.
For example, Figure 16-13 shows a panel's Structure view, which contains added components.
To create an additional field in a subsection, drag an attribute from the data source to the corresponding container. For example, drag the attribute to fnd:applicationsPanel > f:facet - contents > af:panelGroupLayout > af:panelFormLayout. When prompted for the component to associate with the attribute, choose ADF Input Text w/Label.
Although Applications panels already provide common layout components, your JSF page might require additional UI elements, such as additional action buttons. When you add new components to a panel, you drop the new components into facets.
To add UI content to existing panels:
Open the Components Palette.
Drag and drop the button component on to the appropriate popup facet.
For example, to add a new button, drag and drop the button to the actionButtonBar facet.
For more information on facets, see Table 16-2, "Facets of Standard Panel Buttons".
Note:
Master-Detail refers to the interaction of selecting an object from a master list, and refreshing the details in an adjacent area. It is not the relationship of the data.The Master-Detail composite is used in situations where the information is too large, dynamic or complex to show in a flat table. The user can see the Master, or summary, information in one area, and the corresponding details in a separate area. This can be achieved using different master and detail components, such as table, tree table, and tree.
For instance, when the user selects an Employee from the master table, the corresponding employee details are displayed in the region below in a label/data format.
For more information, see the "Displaying Master-Detail Data" section in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.
You should review and understand the Applications Table before proceeding to implement the Applications Master-Detail in your development pages.
Facets
Table 16-3 shows the facets that are exposed on the Applications Master-Detail.
Table 16-3 Applications Master-Detail Facets
| Facet | Description | Allowed Children |
|---|---|---|
|
|
facet for holding the Applications table |
formLayout and Applications Table |
|
|
facet for holding the Applications Table |
Applications Table |
View Properties
See Table 15-2, "Applications Table Properties" in Section 15.1, "Implementing Applications Tables" for a list of properties exposed on the Applications Table. These properties can be used to configure the Applications Table under either the Master or Detail section of the Applications Master-Detail component.
Model
The Applications Master-Detail does not expose any bindings to the model on its own, but the ADF tables or formLayout components that are encapsulated within the Applications Table under the master or detail section will be bound to the model.
Controller
The Applications Master-Detail ships a default managed-bean (internal to the Oracle Fusion Middleware Extensions for Applications (Applications Core) team) that currently supports translation functions. You can access the implementation of the Applications Table managed bean which will be exposed as either the Master or the Detail section of the component. For use and implementation information, see Controller in Section 15.1, "Implementing Applications Tables."
The Master-Detail can exist at the page level, or at the subheader level in a page. The Master-Detail component will support these layouts:
Panel over FormLayout
Panel over TreeTable
Panel over Heterogeneous
Panel over Subtabs
Panel over Table
Tree over LevelSpecific
Table over Table
Table over Form Layout
Table over sub tabs
Table over Heterogeneous (every row can have a different detail section)
Table over Tree (available via Table over Heterogeneous)
Form Layout over Table
Form Layout over Form Layout
Form Layout over sub tabs
Form Layout over Heterogeneous
Form Layout over Tree (available via Form Layout over Heterogeneous)
Table over Tree Table
Tree Table over Table
Tree Table over Sub tabs
Tree Table over Form Layout
Tables are the most common master component. When a table row is selected, the details appear in the area below the table. A table is also a very common detail component.
A Tree Table is a layout option in a Master-Detail composite for either a Master or a Detail (not both). When a Tree Table row is selected, the details appear in the area below the Tree Table.
Sub tabs are a detail layout option in a Master-Detail composite.
Form Layout is a detail layout option in a Master-Detail composite.
The Applications Master-Detail can be added to a page or page fragment using the Data First approach. Valid drop locations in the page or page fragment include ADF Form, and ADF Layout components and the Applications Panel (jsp:root, af:form, af:root, fnd:applicationsPanel, af:group, af:panelBorderLayout, af:panelBox, af:panelCollection, af:panelFormLayout, af:panelGroupLayout, af:panelHeader, af:showDetailItem, af:panelWindow, af:popup, af:showDetail, af:subform, f:facet, f:panelGrid, f:panelGroup, af:pageTemplateDef, af:pageTemplate#<localArea_Facet>.
For more information on creating a JSF page, see the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
Be sure to save your work after you create each component.
You create a Master-Detail in the Applications Master-Detail wizard, which is displayed when you add the details to your JSF pages (or page fragments) from the Data Controls panel.
To add a Master-Detail from the Data Control panel:
For Master-Detail to work, you need to define the model-layer such that the Master and Detail are linked by a ViewLink that establishes a relationship from the Master to the Detail.
In the Application Navigator, open the Data Control panel.
Navigate to the data source that you want to bind to the Master-Detail.
Drag the detail data-source onto the page.
In the Create context menu that is displayed, choose Applications > Master-Detail. Figure 16-14 shows the parent-child relationship of the selected Data Control, how the child is dragged to the page, and the Master-Detail option on the Create menu.
The Applications Master-Detail wizard is displayed.
This section explains how to use the Applications Master-Detail wizard to add Master-Details to your pages.
All mandatory fields in the wizard contain default values, allowing you to accept the defaults and work through the steps quickly. Clicking Cancel on any of the dialogs cancels the creation of the Master-Detail and does not save the values you entered.
When you click Finish on any of the dialogs, the software:
Displays a preview of the Master-Detail.
Creates the Master-Detail with the values you provided on that screen and any previous screens, and default values for the remaining screens. However, not all wizards have a Finish button, or they only appear in a wizard once you have enough information to default the rest of the steps. For example, in almost all wizards, the last step is the Summary. This step often is omitted, so there is almost always a Finish button on the step before the Summary step.
Caution:
Each wizard dialog contains a Messages field that displays errors for that step. Do not proceed to the next wizard step without correcting any errors in the present step.Creating a Master-Detail Using Tables
When the Create Applications Master-Detail wizard launches, the Select Pattern Type dialog displays, shown in Figure 16-15.
Enclose Master Detail in
If the Pattern Type supports either the Panel Splitter or the Master Header Label, this option becomes active and a list, shown in Figure 16-16,offers these choices.
<none>: This is the default selection. No special action will be performed.
Panel Splitter: Select this option to activate the Splitter Position field and set the position, in pixels, of the horizontal position of the split. Figure 16-17 shows an example of a Splitter in use at the default position.
Panel Header / Show Detail Header: Select one of these options to activate the Master Header Label field to enclose the Master-Detail with a header. There are basically two types of headers:
with a hide/show icon
without the hide/show icon
In the example in Figure 16-18, the Edit Element Entries text is the Panel Header and the Basic Information text with the expand/collapse icon is the Show Detail Header. The picture, Name and Social Security Number are the content, which is enclosed by the Show Detail Header. Then everything is enclosed by the Panel Header, shown in Figure 16-18.
Master Header Label: Enter the label to be used by either the Panel Header or the Show Detail Header.
Select the Pattern Type (the example uses Table/Table) and any options and click Next.
The Configure Master dialog displays, shown in Figure 16-19.
To create your Master-Detail for your Master table columns:
Click Read-only Table to create a read-only Master table. (optional) If you select Read-only, the choices in the Component to Use column will change from Input Text to Output Text types.
In the Enable ADF Behavior section, choose whether to allow users to Select, Sort, and Filter rows.
In the Columns field:
Click the Display Label field to enter a column label.
Click the menu arrow to select value bindings for each value.
Choose what component to associate with the column.
After selecting a component, click the Delete icon (X) to delete it, the Add icon (+) to edit it, and the Reorder icons to change its position in the field.
Click Next to display the Configure Master Table Patterns dialog, shown in Figure 16-20.
Choose the patterns to be enabled in your table.
Click Next to display the Configure Detail Header dialog, shown in Figure 16-21.
Enter a Detail header name and choose a corresponding attribute.
Click Next to display the Configure Details dialog:
Configuring the Details table is the same as configuring the Master table; see Figure 16-19 and steps 1 through 4.
Click Next to display the Configure Detail Table Patterns dialog.
Configuring the Details Table Patterns is the same as configuring the Master Table Patterns; see Figure 16-20 and step 5.
Click Next to display the Review panel configuration dialog, shown in Figure 16-22.
When you click Finish, the Table/Table Master-Detail is added to the editor, and appears similar to Figure 16-23 in Design mode.
Creating a Master-Detail Using Forms
When the Create Applications Master-Detail wizard launches, the Select Pattern Type dialog displays, shown in Figure 16-15.
To create your Master-Detail for your Master form fields or Detail table columns:
To create a Master-Detail consisting of two forms, select FormLayout/FormLayout and click Next to display the Configure Master dialog, shown in Figure 16-24.
This configure dialog is the same as the one for creating a Table, except that it does not have the Enable ADF Behavior settings, as shown in Figure 16-19.
Click Next to display the Configure Navigation Buttons dialog, shown in Figure 16-25.
Select the navigation buttons you want to appear on the Main form.
Click Next to display the Detail Header dialog, shown in Figure 16-21 for details.
Click Next to display the Configure Details dialog, shown in Figure 16-26.
Use this dialog to create as many tabs on the Details form as you need. To create a new tab, enter a name in the Name field and click the Add icon. The tab is added in the area beneath the Name field.
Each tab is the same as the dialog for creating a Table, except that it does not have the Enable ADF Behavior settings, shown in Figure 16-19.
Click Next to display the Configure Navigation Buttons for the Detail section dialog, shown in Figure 16-25.
Click Next to display the Summary dialog.
Click Finish to save your changes.
Your new Master-Detail displays in the JSF Page editor, shown in Figure 16-27.
Developers should follow these guidelines to use the updatable Master-Detail task flow and to investigate some solutions for creating a detail record for a newly-created master record. Several cases have been identified for using Master-Detail. The master and the detail can be a form, table, tree, or tree table.
If you have a Master-Detail in your page and the primary key for the master is not generated using a sequence, the best way to create a detail row for a freshly-created master row is to have a page-level Submit or Save button that needs to be clicked to save the master data before creating detail data.
In this case there are two solutions:
Have a page-level Submit or Save button that would save the newly-created master record before creating a detail record.
Set the autoSubmit property on all the elements (components) of the master to true. For example, if the master is a table, set autoSubmit="true" on all the components inside the af:column.
In this case, you need to provide a page-level Submit or Save button and click it to commit the master record before creating a detail record.
Hover is a subset of Detail On Demand that presents the same information when the user hovers over a link.
This is a Design Time (DT) only pattern, no component has been created. For this reason there is no UI First creation option.
The Design Time works when dragging a collection from the Component palette onto an allowed drop component, shown in Figure 16-28.
The allowed drop components are:
af:commandLink
af:commandImageLink
af:commandToolbarButton
The DT will check to see whether the component is in a table already bound, and if that binding is for the collection being dropped.
If so, it will create additional table bindings for the attributes selected.
If not, it will create form bindings for the collection.
If it is not dragged into an allowed table component, it will create additional bindings for that collection.
If the allowed component already has a showPopupBehavior component child, the menu option will not show. This behavior helps prevent double adding of hovers.
A dialog displays so you can select the attributes to see in the hover popup, and the alignment of the popup over the "hovered" component, shown in Figure 16-29.
The valid values for alignment are:
afterEnd
afterStart (default value)
beforeEnd
beforeStart
endAfter
endBefore
startAfter
startBefore
All JSF components created in the popup will be read-only.
When the OK button is clicked:
The drop component will be given an Id if it does not have one already, and have the clientComponent attribute set to true.
The drop component will have a <af:showPopupBehavior> component added as a child.
A popup (<af:popup>) will be added as the previous sibling of the drop component, shown in Example 16-2 for the sample markup, and Figure 16-30 for a sample of the result.
Example 16-2 Example Markup for a Form-based Layout
<af:popup id="popup1">
<af:panelFormLayout labelAlignment="start">
<af:panelLabelAndMessage label="#{bindings.MasterId.hints.label}">
<af:outputText value="#{bindings.MasterId.inputValue}">
<af:convertNumber pattern="#{applCorePrefs.numberFormatPattern}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Col1.hints.label}">
<af:outputText value="#{bindings.Col1.inputValue}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Col2.hints.label}">
<af:outputText value="#{bindings.Col2.inputValue}">
<af:convertDateTime pattern="#{applCorePrefs.dateFormatPattern}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Col3.hints.label}">
<af:outputText value="#{bindings.Col3.inputValue}">
<af:convertNumber pattern="#{applCorePrefs.numberFormatPattern}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:popup>
<af:commandLink actionListener="#{bindings.Last.execute}"
text="#{applcoreBundle.LAST}"
disabled="#{!bindings.Last.enabled}"
id="rolloverComponent2" clientComponent="true">
<af:showPopupBehavior triggerType="mouseOver" popupId="popup1"
alignId="rolloverComponent2"
align="afterStart"/>
</af:commandLink>
Example 16-3 shows the sample markup for a table-based layout and Figure 16-31 shows an example of how the result appears.
Example 16-3 Example Markup for a Table-based Layout
<af:table value="#{bindings.Master1.collectionModel}" var="row"
rows="#{bindings.Master1.rangeSize}"
emptyText="#{bindings.Master1.viewable ? applcoreBundle.TABLE_EMPTY_TEXT_NO_ROWS_YET : applcoreBundle.TABLE_EMPTY_TEXT_ACCESS_DENIED}"
fetchSize="#{bindings.Master1.rangeSize}">
<af:column sortProperty="MasterId" sortable="false"
headerText="#{bindings.Master1.hints.MasterId.label}">
<af:outputText value="#{row.MasterId}">
<af:convertNumber pattern="#{applCorePrefs.numberFormatPattern}"/>
</af:outputText>
<af:popup id="popup1">
<af:panelFormLayout>
<af:panelLabelAndMessage label="#{bindings.Master1.hints.MasterId.label}">
<af:outputText value="#{row.MasterId}">
<af:convertNumber pattern="#{applCorePrefs.numberFormatPattern}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Master1.hints.Col1.label}">
<af:outputText value="#{row.Col1}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Master1.hints.Col2.label}">
<af:outputText value="#{row.Col2}">
<af:convertDateTime pattern="#{applCorePrefs.dateFormatPattern}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Master1.hints.Col3.label}">
<af:outputText value="#{row.Col3}">
<af:convertNumber pattern="#{applCorePrefs.numberFormatPattern}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:popup>
<af:commandLink ="hover over me" id="rolloverComponent2"
clientComponent="true">
<af:showPopupBehavior triggerType="mouseOver" popupId="popup1"
alignId="rolloverComponent2"
align="afterStart"/>
</af:commandLink>
</af:column>
Links in the Popup
It is possible to add command links / buttons into the popup so the user can navigate to a separate page/page flow. Adding these links is up to the developer, because it is not a valid option in the Design Time, as command links are not an available component in any binder GUI. The developer must ensure the popup is closed after navigation in this case, although the default behavior may do this.
The Applications Dialog Details component provides a user interface for launching a popup that contains detail information. The UI can be a detail icon, a link, or a button.
You can add the Applications Dialog Details to your page in two ways:
Select the Applications Dialog Details from the Applications component palette and drag and drop it on your page.
Drag and drop a data control to your page and select the Applications Dialog Details from the list of available UI components.
View
Table 16-4 shows the properties that are exposed on the Applications Dialog Details.
Table 16-4 Applications Dialog Details Properties
| Property | Description | Allowed Values |
|---|---|---|
|
|
The unique ID for this Applications Table |
string |
|
|
Whether the Applications Table is rendered or not |
boolean / expression |
|
|
Detail pattern type |
image, link or button |
|
|
ID of the popup to be invoked when Detail image/link/button is clicked |
string |
|
|
Overrides default label for Detail button, or defines link text for Detail link |
expression |
|
|
Overrides default roll-over text for detail image/button |
expression |
|
|
Sets whether the component needs to be disabled |
boolean / expression |
Model
The Applications Dialog Details does not expose any bindings to the model. However, components within the Applications Dialog Details, like the layout inside ADF popup, will be bound to the model.
Controller
The Applications Dialog Details component does not ship a default managed bean.
The Applications Dialog Details can be added to a page or page fragment using either the Component First or the Data First approach. Valid drop locations in the page or page fragment include ADF Form, and ADF Layout components and the Applications Panel (jsp:root, af:form, af:root, fnd:applicationsPanel, af:column, af:form, af:group, af:panelBox, af:panelFormLayout, af:panelGroupLayout, af:panelHeader, af:showDetailItem, af:panelWindow, af:showDetail, f:facet, f:panelGrid, f:panelGroup, af:pageTemplateDef, af:pageTemplate#<localArea_Facet>).
The Applications Dialog Details can be added to a page or page fragment using either the Component First or the Data First approach. Both approaches launch a wizard which helps you to quickly define the appropriate attribute values. Once you complete this wizard, you can further refine the dialog details definition by editing the resulting component as needed.
Component First
Navigate to the Component Palette. Click the list of libraries and select Applications. Drag the Applications Dialog Details from the list of components and drop it onto the page. The wizard will launch after dropping the Applications Dialog Details on the page.
Data First
Navigate to the Data Controls panel of the Application Navigator. Open the panel by clicking its bar, then navigate through the hierarchy to locate the data source that you would like to include in the Applications Dialog Details. Select that data source and drag it on to the page. A context menu will appear with a list of components. Move the mouse over the Applications category list. Select Applications > Dialog Details to launch the Applications Dialog Details wizard, shown in Figure 16-32.
Applications Dialog Details Create Wizard
The Applications Dialog Details Create wizard consists of only one panel.
Create Applications Dialog Details Panel
The Create Applications Dialog Details Panel will vary depending on the approach used to launch the Applications Dialog Details creation process.
Using the Data First approach, the Bind Data Now and Data Source properties are hidden. The selected data source is automatically bound to the components in the formLayout of the popup.
Using the Component First approach, it is up to the developer to decide whether to bind a Data Source to the dialog details component, shown in Figure 16-33.
You can skip the data control binding step when creating the Applications Dialog Details. In this case, the Applications Dialog Details will create several default placeholder outputText fields that you can use for layout purposes in the popup. You can decide how many placeholder columns you wish to display. Once you have selected the appropriate number of fields, click OK to finish the creation process.
If you wish to bind a data control to the table component using the Component First approach, check the Bind Data Now checkbox. This will enable the Browse button for the Data Source property. Click the Browse button to display a list of data sources available for binding. Navigate through the list, select the desired data source, and click OK.
Once the Data Source is selected, the developer can enter the title for the popup and choose the Detail Pattern Type.
When link is selected for the Detail Pattern Type, you will need to select an attribute of the data source that binds to the Text attribute. This is the displayed text of the link. When image or button is selected for Detail Pattern Type, choosing an attribute is not needed, as shown in Figure 16-34.
Title
If the dialog will be read-only:
The format should be <Object Type> <Object Name> (such as Expense Report WBJ3008D)
If the dialog contains editable fields:
The format should be <Action> <Object Type>: <Object Name> (such as Approve Expense Report: WBJ3008D)
If you want a new Title, enter the string here. The string will be converted to a text resource and added to the default resource bundle.
If you already have a Title defined in a resource bundle, click the ellipsis and choose from the list, as shown in Figure 16-35.
Resource Bundle: Select the bundle containing the string you want to use. You can select a single bundle or all available bundles. The strings will display in the Matching Text Resources field.
Display Value: You can enter a new string for a title here.
Key: Each resource must have a unique Key. This generally is, in all upper-case characters, the words of the Display Value separated by an underscore character.
Description: This is an optional entry.
Matching Text Resources: This field displays the entries of the selected resource bundle. Select an existing title from the list.
When a title is selected from the list, the Title field will appear similar to Figure 16-36.
Detail Pattern Type
The Detail Pattern Type is how the data control is shown; it can be an image, a link or a button.
Image: Shows the Dialog Details component as an image. The image is the same as in the component palette. Clicking the image will open the Dialog Details popup.
Button: Shows the Dialog Details component as a button that opens the Dialog Details popup when clicked.
Link: In this case, you will need to select the Text Attribute, which is a list of columns in the Data Control you have selected (or dragged). This column data is used as the link text.
Use of a specific pattern type is your choice and does not affect the way Dialog Details behaves.
To display what the popup would show, you can choose a link that shows data from the selected data control, such as a column in a table. For instance, in the Employee table, to show more employee data, you can use the employee name as the text attribute. Clicking an employee name then would open more data about that employee.
A button can be used if there is only one Dialog Details popup for the page. Clicking it gives more information about the data on the page.
Image could be used the same way as button, or on pages with form data.
Text Attribute
This setting is available only if the Detail Pattern Type is link. The text entered here is shown as the Dialog Details link. This helps give the user an idea about the data contained in the popup.
Read-only Form
If content in the dialog is read-only, the window should be non-modal.
If content in the dialog contains editable fields, the window should be modal.
If you select Read-only, the choices in the Component to Use column will change from Input Text to Output Text types.
If this option is not selected; that is, the form can be edited by the user, two buttons automatically are added to the form: Save and Close, and Cancel. Figure 16-37 shows the default buttons in the form in the JDeveloper Design view.
If this option is selected; that is, the form cannot be edited by the user, only an OK button automatically is added to the form, as shown inFigure 16-38.
Fields
Display Label: This value will be displayed for the column heading. The default value is the text that is displayed in the Value Binding field.
Value Binding: This field lists the names of the columns from the selected data control. Clicking an entry opens a list of the columns so you change the order in which they appear.
Component To Use: Data in Dialog Details can be read-only or updatable. Component to Use is similar to what Component does while creating a table. Clicking it reveals a choice list of values, and the dialog details popup would then at runtime show that particular column from the datacontrol as the selected component to use. The choice list is changed according to whether or not you choose read-only. If you selected Read-only, the choices will change from Input Text to Output Text types.
This section discusses how to edit Dialog Details properties.
Editing - Properties
Once you have created the Applications Dialog Details, you can modify the property values by using the Property Inspector. There are three ways to select the Applications Dialog Details:
Select the component in the Design view of the page.
Select the <fnd:applicationsDialogDetails ... > line in the Source view of the page.
Select fnd:applicationDialogDetails from the hierarchy in the Structure View.
All components created as part of the Applications Dialog Details are editable using this same approach, shown in Figure 16-39.
Adding a Data Source
Once you have created the Applications Dialog Details, you can see that an af:popup has also been created above fnd:applicationsDialogDetails. You can add data controls to the facets / content containers within that popup using the following steps:
Navigate to the Data Controls panel of the Application Navigator.
Open the hierarchy to find the data source.
Drag and drop either the entire data source or individual fields into the correct location on the page. The correct location is dependent on the component.
For example, inside the popup that the Applications Dialog Details wizard generates, the fields of the data source are bound to components. Figure 16-40 shows the Structure view of a page with components already added.
To add a field from a data source to the af:panelFormLayout inside the popup, drag the field from the data source to the following path: up > af:dialog > af:panelFormLayout. As is the case with the data first approach, you will be prompted to choose which ADF component to use for this attribute.
Note:
This example uses the Structure view because it provides an efficient overview of the page. The field could also be dropped onto the page in Design or Source view to achieve the same result.Adding UI Content
To achieve the final goals for a page design, you will likely need to add other components to the af:dialog inside af:popup.
A product team's task flow must include the OK and Cancel buttons that are used to launch a dynamic tab and dismiss the popup, respectively. Once the buttons have been added, create a managed bean to set each button's action listener. Use the method in Example 16-4 as the Cancel button's action listener.
Example 16-4 Example Method to Create a Managed Bean to Be the Cancel Button's Action Listener
import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;
import javax.faces.component.UIComponent;
public void closePopup(ActionEvent actionEvent)
{
UIComponent source = (UIComponent) actionEvent.getSource();
String sourceId =
source.getClientId(FacesContext.getCurrentInstance());
ExtendedRenderKitService service =
Service.getRenderKitService(FacesContext.getCurrentInstance(),
ExtendedRenderKitService.class);
String popup =
"AdfPage.PAGE.findComponent('" + sourceId + "').findComponent('::TaskPopup').hide();";
service.addScript(FacesContext.getCurrentInstance(), popup);
}
Note:
Although theclosePopup() implementation shown in Example 16-4 closes the popup properly, if you reopen the popup by clicking the tasklist link, it shows the previously-entered values. If you do not want to show previously-entered values, you need to add a taskflow return activity, navigate to it, and then close the popup. However, after adding this taskflow return activity to the example closePopup() implementation, the popup is closed only partially. This is a side effect of the Javascript hide that is used. A solution is to use this closePopup() method, which works whether or not you have the taskflow return activity.
public void closePopup()
{
FacesContext facesCtx = FacesContext.getCurrentInstance();
String taskPopupId = PatternsUtil.findComponentById(facesCtx.getViewRoot(), "TaskPopup").getClientId(facesCtx);
PatternsPublicUtil.hidePopup(taskPopupId);
}
Create another method for the OK button that calls the method in Example 16-4, and any additional processing logic. The common use case would be opening a new task in the Main Area by using the openMainTask API. For example, you can bind the OK button to a managed bean and add your own action listeners, as shown in Example 16-5.
Example 16-5 Example Method to Create a Managed Bean to Be the OK Button's Action Listener
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.faces.event.MethodExpressionActionListener;
public void setOkButton(RichCommandButton okButton) {
this.okButton = okButton;
if(okButton.getActionListeners().length==0){
FacesContext context = FacesContext.getCurrentInstance();
ExpressionFactory ef = context.getApplication().getExpressionFactory();
String methodLink = "#{bindings.openMainTask.execute}";
MethodExpression me =
ef.createMethodExpression(context.getELContext(), methodLink,
null, new Class[]
{ ActionEvent.class });
MethodExpressionActionListener methodActionListener =
new MethodExpressionActionListener(me);
okButton.addActionListener(methodActionListener);
methodLink = "#{pageFlowScope.PopupBean.closePopup}";
me =
ef.createMethodExpression(context.getELContext(), methodLink,
null, new Class[]
{ ActionEvent.class });
methodActionListener =
new MethodExpressionActionListener(me);
okButton.addActionListener(methodActionListener);
}
}
|
 Copyright © 2011, Oracle and/or its affiliates. All rights reserved. Legal Notices |
|