Pages

Monday, 12 May 2014

Setting application and feature level preferences in ADF Mobile

Usecase:
In this use case, I will demonstrate how application-level and feature-level preferences can be set in ADF Mobile.
For this, let us assume that we have a mobile application consisting of two features –
  • Employee feature showing employee information with his/her address details and 
  • Department Feature showing details for a department.

At the application level, I will demonstrate how the user can select font preferences and reflect the changes throughout the app.

To demonstrate feature preferences, I have focused on the Employee feature. Here, the user can select whether he would like to see address details or not for the employee records. Address details are specific to Employee feature and hence implemented as feature specific preference.This is an example I have used for demo purposes, but it should give you an idea on how to work with preferences.
When I was looking around to figure out how application preferences work, I didn't find much information. So, beware, this may not be the only/best approach, but it worked well for me :)

Steps:
First, let us see how application preferences can be set. In this sample, I let the user select a font style of his choice and then set it across the application. To set application level preferences, under Application Resources, go to Descriptors -> ADF META-INF-> adfmf-application.xml


Go to Preferences tab and click on the plus icon to insert a new preference group. Provide an Id and a Label, which is a human understandable title. Click Ok to close the dialog.


Next, we want to provide the user with a list of fonts from which he can select the font of his choice. To create this list, insert a preference List inside the preference group as shown:

Again, provide an Id for this preference list and a Label such as ‘Fonts’.


Now, add preference values as below:

Name
Value
Courier New - Italic
font-family:"Courier New";font-style:italic;
Courier New - Normal
font-family:"Courier New";font-style:normal;
Arial - Italic
font-family:"Arial";font-style:italic;
Arial - Normal
font-family:"Arial";font-style:normal;

Mark Arial – Normal as the default font.
Now, since we want the font preference is an application preference, we want the user selected choice to be reflected all through the app. For this, go to Employee page. Select panelPage component and through PI, select the arrow associated with Inline Style. Select Expression Builder.




What we are doing here is that, we are pointing to the application preference variable. So, any changes to the application preference value will be reflected here.  Do the same in Department page too.

That’s it. Our application level preferences are set. Now, if user changes the font selection, the corresponding changes will be reflected uniformly throughout the application.
Now, let us set a feature level preference. Feature level preferences are feature specific. Here, we will be setting feature level preference for the Employee Feature. Here, we will be giving the user the choice to view/not view address details for employees.
To add feature level preference, open adfmf-feature.xml. Select the feature corresponding to Employee feature – EmpFeature in my case, from the list of features and navigate to Preferences tab. Click the plus icon and add a preference group by providing Id and Label.


Let us add a Boolean preference inside this as shown.


Again, provide and Id and Label such as ‘showAddr’ and ‘Show Address? ’ Mark it as true by default. This will show the address details by default.


Based on the user selection, address details need to be shown/hidden. For this, in Employee AMX page, look for the main Address component and associate Rendered property with this feature preference variable. So, when user selects the checkbox to show address, the Boolean variable will be set to true, in turn setting rendered to true and displaying address details.


Lastly, when the user changes preferences and comes back to the feature, we want the changes to be reflected immediately. For this, let us create a class which implements LifeCyleListener class and associate it with the features.
In ViewController project, create a java class. In the Create Java class wizard, click plus icon associated with Implements and select LifeCycleListener(oracle.adfmf.feature). Clcik Ok to create the class. That’s it. There is no need to edit this class.


Now, we need to add  a reference to this class in the feature. Go to adfmf-feature.xml and select Employee feature, EmpFeature in my case. Go to General tab and select magnifier associated with Lifecycle Event Listener. Search for this newly created class.


Similarly, create another java class called ‘DeptFeatureLifeCycleListener’ which also implements LifeCycleListener and add a reference for it in Department Feature, DepFeature as above.


Now, you can deploy the app.
Snippets from my app:
After app loads, click Menu - > Preferences.


Select Fonts -> font of your choice. Here, I selected Courier New – Italic.

Click back button and you can see the changes.

If you move to DeptFeature, you will see the font changes there as well. Hope it helps!


No comments:

Post a Comment