How to implement the selectOneButton (or) Tabs in the UI using ADF Mobile.

To implement the Tab functionality we need to use the “selectOneButton” component as below

<amx:selectOneButton value=”#{preferenceScope.application.Customers.perfCustomerDefaultPanel}”

simple=”true” inlineStyle=”width:100%;” >

<amx:selectItem label=”#{viewcontrollerBundle.BY_Value1}” value=”P” />

<amx:selectItem label=”#{viewcontrollerBundle.BY_Value2}” value=”N“/>

</amx:selectOneButton>

With the above component the tab will appear in the UI as

select_button1

Based on the selection the content in the UI will be changed. This is configured using the Preferences tab in the adfmf-application.xml file.

select_button2

The Preference is referred in the “selectOneButton” component and each selection value is defined in the “selectItem” within the “selectOneButton” component as

<amx:selectItem label=”#{viewcontrollerBundle.BY_Value1}” value=”P” />

So we have defined the default tab as “P” in the Preferences tab in the adfmf-application.xml file. So when we accessed the UI the “Value 1” tab is selected and the corresponding contents are displayed. If we do not set the default tab option in the Preferences, when we access the UI no contents will be displayed. Only when we select any Tab the corresponding contents are displayed.

To display the contents we need to provide the Rendered condition for the component as below –

<amx:panelFormLayout id=”pfl1″  rendered=”#{preferenceScope.application.Customers.perfCustomerDefaultPanel eq ‘P‘}”></amx:panelFormLayout>

 

 

Advertisements
This entry was posted in ADF Mobile and tagged , , , , . Bookmark the permalink.

One Response to How to implement the selectOneButton (or) Tabs in the UI using ADF Mobile.

  1. shekhar says:

    Hi sir
    Please share your demo app for that..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s