Adf Mobile Pinch To Zoom

Pinch To Zoom is very important to implement in some mobile application and it’s a must in others, as ADF Mobile application is a HTML, Javascript, CSS,Java Framework, so i took advantage of the power of Javascript and implemented the pinch to zoom in below example.

Javascript plugin  used is iScroll 5 and you can download it from here.

You can download the full sample project from here

 

ADF Mobile Localization & Internationalization

1-      Create a new ADF Mobile Application

By default two projects created (ApplicationController – ViewController)

1

2-      We will do all our work on the ViewController Project as it’s the one responsible for the user interface(UI), so right  Click on ViewController project -> project Properties

Under Resource bundle -> basic Configuration we will find two choices

  1. One Bundle Per Project (Default)
    It means that for the whole project there will only be one bundle holding all our keys and values.
  2. One Bundle per File
    Means a bundle file will be created for each amx page(view).

2

For simplicity I will choose the first option

Note: you will also find that the only Resource Bundle Type available for ADF Mobile project is Xliff.

3-      Create a new feature

ViewController -> Application Sources -> META-INF ->adfmf-feature.xml

3

4-      Under content tab create a new ADF Mobile AMX Page

4

5-      An AMX Page will be created , add “Output Text” component by dragging it from “Component Palete” to the page structure

5

6-      Select the “Output Text” and under “Property Inspector” click the right arrow beside “Value” property and click “Select Text Resource”

6

7-      The “Select Text Resource” window will appear contains

  1. Resource Bundle Name: in our case “ViewControllerBundle” as we choose to create one bundle for the whole project.
  2. Display Value: the value that we want to view in our “Output Text”
  3. Key: represent the key that holds the display value in the ResourceBundle (created automatically and can be modified )
  4. Matching Text Resource: If we created keys before it will appear in this part and can be selected to be used again anywhere in the project so no need to create new key if the value already exists in a previously created one.

7

Enter a value in Display value “Welcome To Egypt” a key will be created automatically “WELCOME_TO_EGYPT” then click the button “Save and Select”

 

As soon as we click “Save and Select” we will notice two things created

  1. “ViewControllerBundle.xlf’ file is created under ViewController project default package.8
  2. A “load Bundle” component added to our AMX Page that refers to the created ResourceBundle.9
  3. Also notice the value of the “Output Text” component10

 

8-      Now if we opened the created “ViewControllerBundle” we will notice that the default language for this bundle is “en” and we will find the Key and it’s display value we created

11

9-      Our second language will be Arabic so we will create a new bundle file with the same name of “ViewControllerBundle.xlf” but we will add “_ar” at the end of it just before “.xlf” , so our file name will be “ViewControllerBundle_ar.xlf”

  1. Right click on ViewController project default package and select new.12
  2. Under General-> XML choose XML Localization File (XLIFF)13
  3. Add file name “ViewControllerBundle_ar.xlf” and make sure it’s in the same directory as the main “ViewControllerBundle.xlf” and click “OK”14

10-   You will notice the file name “ViewControllerBundle_ar.xlf” created open it then copy the content of file “ViewControllerBundle.xlf” into it but do below modifications

  1. Change file encoding to “UTF-8” to accept Arabic language
  2. Change the file source-language to “ar”
  3. Change the source (display value) of the created key to “مرحباُ في مصر”

So it would look like below

15

11-   Right click on ViewController Project-> Project Properties-> Resource Bundle -> Bundle Search and add “ViewControllerBundle_ar.xlf”

16

12-   Create a deployment profile and change character encoding to “UTF-8” to allow Arabic language

This is how the application looks in English

17

This is how it looks in Arabic

18

 

 

NOTE: ADF Mobile will automatically get current language setting from phone, you cannot override it with code, or at least that’s what I know till now.

For more information about ADF Mobile Localization & Internationalization visit ADF Mobile Developers Guide

AMX Activity Indicator

I struggled lately with AMX Activity indicator as i wanted to control it so below you will find my results after investigating it:

Activity Indicator

Styling:

Thanks to Frank on OTN, The css class for the activity indicator can be found in amx.css file as below:

.amx-loading {

background-image: url(‘images/activityIndicator.gif’);
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 75px 75px; /* Note: the actual image is 150×150 */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;

}

So you can modify the style of it by

  • Modifying that class (not recommended).
  • Override it in you custom css file(recommended).

Programming:

The default time out for the Activity indicator is 10 seconds, so the loading container will disappear after 10 seconds even if the event is not finished (e.g. calling a web service took longer than 10 seconds).

  • In order to control the default time out you will need to override the time out var in Javascript as below:

clearTimeout(adf.mf.internal.amx._failSafeTimer);

adf.mf.internal.amx._failSafeTimer=

window.setTimeout(adf.mf.internal.amx.killLoadingIndicator,1E4);

Change the 1E4 with any number you want note that 1000 = 1 second (please note that this is not tested yet).

Note that you have to add those two lines after each call of “adf.mf.api.amx.showLoadingIndicator();”

  • In order to display the Activity indicator use one of the below code:

Javascript:

adf.mf.api.amx.showLoadingIndicator();

Java:

AdfmfContainerUtilities.invokeContainerJavaScriptFunction(“featureId”,

“adf.mf.api.amx.showLoadingIndicator”, new Object[] {});

  • In order to hide the Activity indicator use one of the below code:

Javascript:

adf.mf.api.amx.hideLoadingIndicator();

Java:

AdfmfContainerUtilities.invokeContainerJavaScriptFunction(“featureId”,

“adf.mf.api.amx.hideLoadingIndicator”, new Object[] {});

Java VS Javascript

In #ADFMOBILE you can use both java and javascripts APIs as it’s a HTML5/JAVA platform:

for example to get a binding attribute value:

Java

ValueExpression ve = AdfmfJavaUtilities.getValueExpression(“#{pageFlowScope.myBean.myVariable}”, String.class);

String val = (String)ve.getValue(AdfmfJavaUtilities.getAdfELContext());

You can do the same using Javascript:

adf.mf.el.getValue(“#{pageFlowScope.myBean.myVariable}”, function(req, res) {
val= res[0][‘value’];
}, function(req, res) {
alert(“Get ValueFailed” + adf.mf.util.stringify(res));
});

Deploy ADF Mobile Application

In order to deploy your #ADFMobile App to android you need to
create deployment profile for android device by followingApplication Menu->Deploy->New Deployment Profile

Choose: ADF Mobile for Android

then enter profile name and press ok

to deploy the App click on

Application Menu-> Deploy then Choose the deployment profile you have just created

you will find three choices as in the image:

Deploy application to device — To deploy to attached Android Device

Deploy application to emulator — To deploy to running Android emulator

Deploy application to package — Will just create the .apk file

you can then get you .apk file by following

<project folder>-> deploy -> <Deployment profile name>

you will find the created .apk file

Deployment Profile

Go To Feature

You can use below function to navigate to feature by sending feature Id
public void gotoFeature(String featureId) {
AdfmfContainerUtilities.resetFeature(featureId);  // reset feature to start from first default page
AdfmfContainerUtilities.gotoFeature(featureId); // goto feature
}
Go To Feature