Using Ripple to emulate Apache Cordova / Phonegap applications.

Apache Ripple

After somegap I had to use Ripple emulator when I was trying to upgrade GWTPhonegap to support Apache Cordova 3.3. Apache Ripple is a browser agnostic mobile emulator. This will enable rapid development of Hybrid mobile applications using frameworks like Apache Cordova and Blackberry webworks. Ripple was initially developed by Blackberry and then donated to Apache open source community. Similar to Apache Cordova, Apache Ripple is a free and Open sourced under the Apache License, Version 2.0

Installation

The latest version of Ripple is distributed using nodejs and so you need to install nodejs first. The instructions to install nodejs are available here.

After installing nodejs, open the command prompt/terminal and run the below command to install ripple emulator.

npm install -g ripple-emulator

And since you will be emulating Apache Cordova applications, you need to install Cordova and create a Apache Cordova application.The instructions to install Apache Cordova are available here.

Running Ripple

Once you create a Apache Cordova project, make changes to the code, add the platform, prepare the project running the below command.

cordova prepare

The above command needs to be run every time you make changes to your project.

Run the below command from the root of your project to start the Ripple emulator.

ripple emulate

Once you run the above command, ripple will launch the default browser on the system. Your application will be emulated in the browser launched.

Some times you may see the below error page after Ripple launches the browser.

Just click on 'Wait' button or refresh to resolve the error.

Device

The devices section highlighted below provides options to emulate the application on different devices.

There is a option to select the device which we need to emulate. There are several Blackberry, Android and iOS devices available which can be emulated.

Also there is an option to simulate the vertical and horizontal orientation also.Just click on the vertical or horizontal  icon against Orientation label to simulate Vertical or Horizontal orientation.

Platform

The platform section provides options to choose the platform and version to be used for emulation.

The platform drop-down provides options to select a platform among WebWorks, Phonegap to emulate.

You can also select the version you want to emulate.Apache Cordova provides versions 1, 2 & 3. I believe all the versions between 1 and  2 can select 1 and so on.

Information

The information section provides information about the environment that is being emulated.The description of  the information displayed is below.

Version: version of the application
Platform: The framework that is being emulated.
Device: The device that is being emulated.
OS: Operating system of emulated device.
Manufacturer: Manufacturer of the device that is being emulated.
Screen: The screen resolution of the emulated device.
Density: The pixel density in the app you are emulating.
CSS Pixel Ratio: The device pixel ratio is the ratio between logical pixels and physical pixels.This indicates the pixel ratio of the emulated device.
CSS Pixels:The CSS pixels that is being emulated.
User Agent: Indicates the user agent in device that is being emulated.

Accelerometer

The accelerometer allows us to emulate the device motion changes using accelerometer  framework. You might as well emulate shaking the device to test the device motion changes. You can use the device icon in this section to emulate the device motion actions.

Settings

The 'Settings' has options to switch the themes between 'Light' or 'Dark' and you can turn the tool tips on or off.

Desktop browsers have a limitation which restricts the Ajax code from making cross domain requests. This is a security restriction on all the browsers. Chrome provides an flag to bypass that restriction. 


The Cross Domain Proxy is one of most useful features of the Ripple emulator. Ripple proxies the request made from then application, makes a request for the data from its own server and then proxies the result back to the application.

Device & Network Settings

This section provides you an option to emulate the network and gloabalization API of the Cordova framework.

You can select the connection type you want to select from all the connection types like ETHERNET, Wi-Fi, 2G, 3G, 4G and also you can indicate if there is a network lag or not.

There are also some functions from globalization API which can be emulated. You can provide the locale name, whether the day light savings are enabled or not and also the first day of the week. The values provided here will be used by your application when these functions are called.

Geo Location

The geolocation allows you to emulate the location related API in your application. You can enter the values to mock in the geolocation section and they will be used by your application.

Config

The Ripple emulator reads the configuration file and displays the result in this section . If there are any errors or issues they will be displayed here.

Events

The Events section provides several events(device ready, back button,pause, resume, search button, menu button, offline, online) which are supported by Apache Cordova. While these events are not actually simulated, they are just registered. Say if you select back button, the event will be registered to the Cordova API, but it doesn't simulate the actual hardware event.

Camera

Ripple supports some of the functions related to Camera API also. It allows you to select a image from your system and then use it for mocking the functionality later.

Unsupported options

As you can see by now, Ripple doesn't support all the options provided by Apache Cordova. When Ripple encounters a call that it doesn't support, it shows up a pop up similar to below.

In this case you can enter the JSON object to the callback that you want to execute.

Conclusion

Ripple is an excellent development tool to emulate the Apache Cordova applications on desktops. You will be able to switch between different OS's like Android, i-OS and Blackberry. And you will able to get a first hand feel of how your application looks on different devices and also in horizontal and Vertical orientations. There may be some limitations in Ripple, but I believe it is a must use tool for developers developing cross platform mobile applications using Apache Cordova. And once you are done with developing, you need make sure you will test the application on real device before pushing the applications to App Stores.

Apache Commons StringUtils to manipulate Strings

Apache commons lang library has a stringutils class which has several useful methods which can be used for the most common string operations.
There are several methods in that class but here I will be going through some of the most useful methods.

Padding:
Often the String needs to be of a certain length with an option to pad some character to make the string of the required length.

String strNumber = “123″;
For left padding,
String strLeftPad = StringUtils.leftPad(strLeftPad, 10, “0″);
For Right Padding,
String strRightPad = StringUtils.rightPad(strLeftPad, 10, “Q”);
And similarly center,
String strCenterPad = StringUtils.center(“a”, 5, ‘y’)

Null/Blank checks:
Several times we write code similar to the below for null checks and blank checks.

if(strNumber!= null && strNumber.length() > 0){
}

That can be replaced with the isNotBlank method. If the String is not null and not empty or blank, then this method returns true else false.

boolean isEmpty = StringUtils.isNotBlank(strNumber);
Similarly there is method to check if the String is null or blank or empty.
boolean isEmpty = StringUtils.isBlank(strNumber);

defaultIfBlank and defaultIfEmpty are 2 very useful methods in this class.
defaultIfBlank returns either the passed in String, or if the String is whitespace, empty (“”) or null, the value of default String
defaultIfEmpty returns either the passed in String, or if the String is empty or null, the value of default String.

StringUtils.defaultIfEmpty(null, “defaultDue2Empty”)  = “defaultDue2Empty”
StringUtils.defaultIfEmpty(“”, “defaultDue2Empty”)    = “defaultDue2Empty”
StringUtils.defaultIfEmpty(” “, “defaultDue2Empty”)   = ” “
StringUtils.defaultIfEmpty(“bat”, “defaultDue2Empty”) = “bat”
StringUtils.defaultIfEmpty(“”, null)      = null

StringUtils.defaultIfBlank(null, “defaultDue2Blank”)  = “defaultDue2Blank”
StringUtils.defaultIfBlank(“”, “defaultDue2Blank”)    = “defaultDue2Blank”
StringUtils.defaultIfBlank(” “, “defaultDue2Blank”)   = “defaultDue2Blank”
StringUtils.defaultIfBlank(“bat”, “defaultDue2Blank”) = “bat”
StringUtils.defaultIfBlank(“”, null)      = null

Start/End String match:

The endsWithAny method checks if the String ends with any of the string in the provided String array. This method is case sensitive.

StringUtils.endsWithAny(“test.rtf”, new String[] {“docx”, “rtf”, “doc”}) = true
Similarly endsWithIgnoreCase is not case sensitive.
StringUtils. endsWithIgnoreCase (“test.RTF”, new String[] {“docx”, “rtf”, “doc”}) = true

startsWithAny method checks if the String starts with any of the String in array provided.
This method is case sensitive. Similarly startsWithIgnoreCase method does the same functionality except that it is not case sensitive.

StringUtils.startsWithAny(“C:/Chapter1/test.rtf”, new String[] { “C:/Chapter1″,”C:/Chapter2″, ” C:/Chapter3″}) = true;

StringUtils.startsWithIgnoreCase(“C:/CHAPTER1/test.rtf”, new String[] { “C:/Chapter1″,”C:/Chapter2″, ” C:/Chapter3″}) = true;

The left and right methods gets the left most and right most characters in the string.
public static String right(String str, int len)
public static String left(String str, int len)

where
len - the length of the required String

Reverse:

The reverse method provides functionality equivalent to that of StringBuilder.reverse().

This method reverses the String passed.

StringUtils.reverse(“bat”) = “tab”

String count:

countMatches method returns the number of times the char sequence passed in is available in the string.

StringUtils.countMatches(“I am learning commons string utils”, “ring”)  = 1

String Case:

swapCase reverses the case of the existing String.
Swaps the case of a String changing upper and title case to lower case, and lower case to upper case.

• Upper case character converts to Lower case
• Title case character converts to Lower case
• Lower case character converts to Upper case

StringUtils.swapCase(“I am learning commons string utils”)  = “i AM LEARNING COMMONS STRING UTILS”

Capitalize method capitalize the 1st letter of the provided String.
StringUtils.capitalize(“mr”) = “Mr”

repeat method:
public static String repeat(String str, String separator, int repeat)
Repeat a String repeat times to form a new String, with a String separator injected each time.

StringUtils.repeat(“”, “t”, 3)    = “ttt”

String split:

There are some methods available in the StringUtils class which provides equivalent functionality of StringTokenizer.

splitByWholeSeparator method splits the string with the provided delimiter string and returns an array of the split Strings.

String s1 = “we are using apache commons lang library”;
String[] arraySplitStrings =  StringUtils.splitByWholeSeparator(s1, ” “);

for(int num = 0 ; num < arraySplitStrings.length;num++)
System.out.println(arraySplitStrings[num]);

Output:
we
are
using
apache
commons
lang
library

This method can also limit the maximum number of sub strings that can be created by splitting the string.

String[] arraySplitStrings =  StringUtils.splitByWholeSeparator(s1, ” “,3);
for(int num = 0 ; num < arraySplitStrings.length;num++)
System.out.println(arraySplitStrings[num]);

Output:
we
are
using apache commons lang library

These are some of the most useful methods in the Apache commons lang library which can save us lot of time in writing the string manipulations lot of times.