Creating Address Book Detail Panel
From the Components palette, insert a Panel Tabbed component into the center facet of the outer Panel Stretch Layout.
On the Create Panel Tabbed form, set the Text column to Address Book and select the Selected radio button in the grid row.
Click the OK button to create the component.
From the Data Controls panel, drag the addressBookDetail member into the Show Detail Item of the Panel Tabbed component.
When prompted to specify the type of component to add, select ADF Form.
On the Create Form window, arrange the order of the fields and set the display labels as follows:
- addressNumber: Address Number
- alphaName: Name
- searchType: Search Type
- taxId: Tax Id
- businessUnit: Business Unit
- mailingName: Mailing Name
- address: Address
- city: City
- state: State
- zipCode: Zip Code
Click the OK button to add the component.
Set focus on the Panel Form Layout component and then select the Edit option next to the PartialTriggers property in the Properties panel.
On the Edit Property: PartialTriggers form, expand the start facet of the outer Panel Stretch Layout, expand the top facet and panel group layout components of the inner Panel Stretch Layout, and double-click button - b1 from the Available panel to move it to the Selected panel. Click the OK button to set the attribute value.
Set the following attribute:
binding='#{addressBookListenerBean.form}'Set the Alta skin following the instructions in Skinning.
The AddressBookList.jsff page fragment should look like the following:
<?xml version='1.0' encoding='UTF-8'?> <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core"> <af:panelStretchLayout id="psl1" startWidth="350px" dimensionsFrom="parent" inlineStyle="margin:10px;"> <f:facet name="bottom"/> <f:facet name="center"> <af:panelTabbed position="above" id="pt1"> <af:showDetailItem id="tab1" text="Address Book" disclosed="true"> <af:panelFormLayout id="pfl1" partialTriggers="b1" binding="#{addressBookListenerBean.form}"> <af:inputText value="#{bindings.addressNumber.inputValue}" label="Address Number" required="#{bindings.addressNumber.hints.mandatory}" columns="#{bindings.addressNumber.hints.displayWidth}" maximumLength="#{bindings.addressNumber.hints.precision}" shortDesc="#{bindings.addressNumber.hints.tooltip}" id="it2"> <f:validator binding="#{bindings.addressNumber.validator}"/> </af:inputText> <af:inputText value="#{bindings.alphaName.inputValue}" label="Name" required="#{bindings.alphaName.hints.mandatory}" columns="#{bindings.alphaName.hints.displayWidth}" maximumLength="#{bindings.alphaName.hints.precision}" shortDesc="#{bindings.alphaName.hints.tooltip}" id="it3"> <f:validator binding="#{bindings.alphaName.validator}"/> </af:inputText> <af:inputText value="#{bindings.searchType.inputValue}" label="Search Type" required="#{bindings.searchType.hints.mandatory}" columns="#{bindings.searchType.hints.displayWidth}" maximumLength="#{bindings.searchType.hints.precision}" shortDesc="#{bindings.searchType.hints.tooltip}" id="it4"> <f:validator binding="#{bindings.searchType.validator}"/> </af:inputText> <af:inputText value="#{bindings.taxId.inputValue}" label="Tax Id" required="#{bindings.taxId.hints.mandatory}" columns="#{bindings.taxId.hints.displayWidth}" maximumLength="#{bindings.taxId.hints.precision}" shortDesc="#{bindings.taxId.hints.tooltip}" id="it5"> <f:validator binding="#{bindings.taxId.validator}"/> </af:inputText> <af:inputText value="#{bindings.businessUnit.inputValue}" label="Business Unit" required="#{bindings.businessUnit.hints.mandatory}" columns="#{bindings.businessUnit.hints.displayWidth}" maximumLength="#{bindings.businessUnit.hints.precision}" shortDesc="#{bindings.businessUnit.hints.tooltip}" id="it6"> <f:validator binding="#{bindings.businessUnit.validator}"/> </af:inputText> <af:inputText value="#{bindings.mailingName.inputValue}" label="Mailing Name" required="#{bindings.mailingName.hints.mandatory}" columns="#{bindings.mailingName.hints.displayWidth}" maximumLength="#{bindings.mailingName.hints.precision}" shortDesc="#{bindings.mailingName.hints.tooltip}" id="it7"> <f:validator binding="#{bindings.mailingName.validator}"/> </af:inputText> <af:inputText value="#{bindings.address.inputValue}" label="Address" required="#{bindings.address.hints.mandatory}" columns="#{bindings.address.hints.displayWidth}" maximumLength="#{bindings.address.hints.precision}" shortDesc="#{bindings.address.hints.tooltip}" id="it8"> <f:validator binding="#{bindings.address.validator}"/> </af:inputText> <af:inputText value="#{bindings.city.inputValue}" label="City" required="#{bindings.city.hints.mandatory}" columns="#{bindings.city.hints.displayWidth}" maximumLength="#{bindings.city.hints.precision}" shortDesc="#{bindings.city.hints.tooltip}" id="it9"> <f:validator binding="#{bindings.city.validator}"/> </af:inputText> <af:inputText value="#{bindings.state.inputValue}" label="State" required="#{bindings.state.hints.mandatory}" columns="#{bindings.state.hints.displayWidth}" maximumLength="#{bindings.state.hints.precision}" shortDesc="#{bindings.state.hints.tooltip}" id="it10"> <f:validator binding="#{bindings.state.validator}"/> </af:inputText> <af:inputText value="#{bindings.zipCode.inputValue}" label="Zip Code" required="#{bindings.zipCode.hints.mandatory}" columns="#{bindings.zipCode.hints.displayWidth}" maximumLength="#{bindings.zipCode.hints.precision}" shortDesc="#{bindings.zipCode.hints.tooltip}" id="it11"> <f:validator binding="#{bindings.zipCode.validator}"/> </af:inputText> </af:panelFormLayout> </af:showDetailItem> </af:panelTabbed> </f:facet> <f:facet name="start"> <af:panelStretchLayout id="psl2" topHeight="40px"> <f:facet name="bottom"/> <f:facet name="center"> <af:listView value="#{bindings.rowset.collectionModel}" var="item" emptyText="#{bindings.rowset.viewable ? 'No data to display.' : 'Access Denied.'}" fetchSize="#{bindings.rowset.rangeSize}" id="lv1" selectionListener="#{addressBookListenerBean.addressRecordSelected}" selection="single" binding="#{addressBookListenerBean.listView}" partialTriggers="::b1"> <af:listItem id="li1"> <af:panelGroupLayout layout="horizontal" id="pgl2"> <af:outputText value="#{item.mnAddressNumber_19.bindings.value.inputValue} - #{item.SAlphaName_20.bindings.value.inputValue}" id="ot1"/> </af:panelGroupLayout> </af:listItem> </af:listView> </f:facet> <f:facet name="start"/> <f:facet name="end"/> <f:facet name="top"> <af:panelGroupLayout id="pgl1" layout="horizontal"> <af:inputText label="Name" id="it1" value="#{pageFlowScope.alphaNameFilter}"/> <af:spacer width="12px" height="10" id="s1"/> <af:button actionListener="#{addressBookListenerBean.searchAddressBook}" text="Search" id="b1"/> <af:spacer width="8px" height="10" id="s2"/> <af:button text="Close" action="exit" id="b2" rendered="#{!pageFlowScope.pageEmbedded}"/> </af:panelGroupLayout> </f:facet> </af:panelStretchLayout> </f:facet> <f:facet name="end"/> <f:facet name="top"/> </af:panelStretchLayout> </ui:composition>