X

The Mobile & Digital Assistant Blog covers the latest in mobile and conversational AI development and engagement

How-to create a select one choice list-of-values bound to the AMX binding layer

Frank Nimphius
Master Principal Product Manager

MAF Version 2.1

Problem Statement

Oracle Mobile Application Framework (MAF) allows you to declaratively build list of values. To create a list of values, you need a list binding that provides the list of selectable values and a iterator that holds the object to update. Though the list is created and configured declaratively in MAF using collections exposed on the MAF data control, there is something you need to know before adding the select list component: How to expose the list source collection through the binding layer?

Solution

To create a list of values in MAF using the AMX binding layer you need to create an Accessor Iterator for the list source collection before dragging the attribute to update as a select one choice to the AMX page.

Implementation

The image below shows the data control panel of the sample workspace you can download. The CustomerDC data control, which is a JavaBean data control, exposes two collections: countries and customers. The countries collection is the list source. The customer collection exposes customer row objects to update in a MAF input form. 

Data Control Panel

To build an input form from a collection, customers in this case, you

 

  1. Select the collection in the data controls panel
  2. Drag the collection to the AMX page
  3. Drop the collection as a MAF input form
The sample workspace that is available for download has the edit form added in its EditCustomer.amx page. A previous page, SelectOneChoice.amx contains a list view created from the same customer collection. At runtime, selecting a customer on the first page automatically navigates to the edit form page. When you create a MAF input form, the MAF binding layer (PageDef file) is created and populated with bindings for each property of the customer object. To access the bindings you click the "Bindings" tab at the bottom of the AMX page editor.  

Switch the MAF editor view to the "Bindings" tab to create a new Accessor Iterator binding. In the binding editor, click the green plus icon above the "Executable" section and select the "accessorIterator" binding item. Then click OK.

Create Accessor Iterator

Select the data control that holds the collection with the values you want to show in the list of values. In the sample, the data control is the same as for the customer collection, but the collection is "countries". Click OK to create the iterator and switch back to the source view of the MAF page editor.

Configure Accessor Iterator with List Source collection

In the MAF page source editor, select the complete markup (af:inputText) for the customer property that you want to create a list of values for ("countryId" in the sample) and hit the delete key. Then, expand the collection (customers in the sample) and drag the property for which you deleted the markup to the AMX page (countryId in this example). The context aware popup shows the "Single Selection" menu item, which hosts the "MAF Select One Choice" sub item. Select the MAF Select One Choice item in the menu to bring up the MAF list binding dialog.

Add amx:selectOneChoice to AMX page

In the "Edit List Binding" dialog, keep the default settings for the Base Data Source and the Dynamic List and change the "List Data Source"  configuration to <data control>.root.<collection name>, which in the sample is CustomersDc.root.countries. The target attribute that will be updated through the list of value is selected automatically and all you need to do is to select the list attribute that provides the value for it.

Configure List

 

Note the "Display Attribute" property that can be set to any of the list collection attribute or a combination of attribute. In the sample, the display was changed to show the countryId and the country name as you can see in the following screen shots.

Note: the list edit dialog allows you to map multiple properties for update. This however is not yet supported in MAF and only the first mapping will be used at runtime. If you need to update multiple form properties then you do this programmatically. Have a look at this previous blog entry to get an idea of how to do this.

 

After you downloaded the sample application and opened it in JDeveloper 12.1.3, select the SelectOneChoice.amx page and choose "Run" from the  context menu. This will bring up the iOS simulator or Android Emulator (you may have to configure the deployment profile as it is set to iOS). On the first page, shown below, select a customer entry to edit.

Select Customer at Runtime

This leads you to the form page where you now can change the country ID field using the select one choice component (the screen shot shows the iOS simulator rendering, if you run this on Android the list of values may look different)

Select Country in ChoiceList

Summary

This blog article stepped you through creating a single select choice list of values based on the AMX binding layer in MAF. To build such a list declaratively you need to create the accessor iterator manually in the binding, which needs to be done before you create the list component. This article showed you how.

Sample Download

The sample is pretty simple and is focussed on the list only. The data it displayed is saved in a JavaBean so that there is no need for you to configure a web service connection or use the local SQLite database. 

MAF 2.1 Workspace

--------------

Disclaimer

The sample explained in the blog and provided for this blog entry
is provided as is. The sample will not be upgraded automatically to
newer versions of MAF and is also not supported by Oracle world wide
customer support. Samples are community efforts that we support in a
community effort: If you experience problems or have questions, please
post a note to the MAF community forum on OTN:
https://community.oracle.com/community/oracle-mobile/oraclemaf/content?customTheme=otn

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.