Apache Cordova Tutorials

This is a series on setting up the development environments for various mobile platforms and using the various cordova core API's for developing Apache cordova apps.


Installing NodeJs on Windows

Setting up Mozilla FirefoxOS development environment on Windows.

Setting up Mozilla FirefoxOS development environment on Mac

Setting up Mozilla FirefoxOS development environment on Ubuntu

Setting up Windows Mobile Development environment.

Installing NodeJs on Windows

 
NodeJs is an asynchronous event driven JavaScript framework designed to build scalable network applications. NodeJs is used to distribute Cordova and all the plugins related to Apache Cordova. 

Download the latest version of nodejs from nodejs website.

https://nodejs.org/



Once the download is completed, double click on the installer to start the installation process.



Click on ‘Next’ to start the Nodejs installation.



Accept the End-User License Agreement and click on ‘Next’ to continue the installation process.





Select the location at which you want to install the Nodejs.



Click on ‘Next’ to continue installation.



Click on Ínstall’ button to start installing nodejs.





Click on ‘Finish’ to complete the nodejs installation.



To verify the installation, open command prompt and run the below commands.
npm –v
node –v

These commands should display the nodejs version and npm versions. They may vary from the below screen based on the version of the nodejs installed.



We have installed nodejs on the windows machine and we will be using this to work with Cordova in the upcoming tutorials.

Setting up development environment for GWT

Introduction

This is part of series intended to develop cross platform mobile applications in Java. In this blog post we will see what GWT is and set up the development environment for GWT.

GWT is an open source development toolkit for developing complex browser based Ajax applications. Using GWT you can develop Rich Internet Applications(RIA) in Java which is then compiled into JavaScript and is cross browser compliant.

Some of the advantages of developing web applications in GWT are:

Since GWT apps can be developed in Java, you can enjoy all the advantages of developing in Java like auto-complete,Debugging, refactoring, code reuse, polymorphism, over riding, over loading. And Java has large set of tools for development like Eclipse, NetBeans,JUnit and Maven etc which you can use for developing Rich Internet Applications(RIA).

Maintaining large JavaScript projects is not easier when compared to Java projects. But you need JavaScript to run Rich Internet Applications in browser. GWT combines both the advantages. You develop the applications in Java and then they are compiled into JavaScript, so you are having best of both.
GWT is almost similar to AWT and Swing packages in Java and so has a low learning curve for Java Developers.
Supporting several browsers in the market is a difficult tasks. Each browser creates it own set of problems. GWT solves this problem by creating optimized JavaScript code for each browser specifically addressing the issues with that browser. So you can support almost all the major browsers including Android , iPad and iPhone based browsers without worrying about quirks for each browser.

Developing UI's in Java is difficult task compared to other aspects of Java programming. GWT solves it by providing several UI widgets and also you can extend the existing widgets and create your own custom widgets if you wish to.

Some of the limitations of GWT are:

Since the java code is compiled into JavaScript which runs on the browsers, the JavaScript needs to be enabled on the browsers. The applications will not work if the JavaScript is not enabled on the browser.
If you have specialist UI designers who can create HTML pages, this will not work. You may have to implement what ever Designer created again in GWT.

Web Pages created by GWT cannot be indexed by search engines since these applications are generated dynamically.

I think except the second drawback in the list, others don't matter much. It is difficult to provide a rich internet application just in HTML. You will need JavaScript to create rich internet applications. Some apps provide a limited version of apps which work if JavaScript is disabled but majority of apps require JavaScript , so you are not the one there. And there is no reason why large number of users will disable JavaScript on their browsers.

And there is a work around for indexing by search engines. The index page can be created in html, and the remaining pages can be created in GWT. GWT provides an option to define index page in html format. So the index page can still be indexed by search engines and the other pages are mostly dynamically created data, so they don't need to come up in the search unless you they are some kind of content management systems(CMS).

Like the case with all the frameworks, GWT doesn't solve all the issues, but it surely makes the java developers more productive developing the web applications, provides cross browser support and works perfectly for complex enterprise web applications.

GWT Development Environment Setup

We will start setting up the development environment for GWT applications.

Java

Since you will developing the applications in Java before they are compiled into JavaScript, you need to set up Java development environment.
Once Java environment is set up, let us configure the environment for GWT.

GWT SDK:

Download the latest version of GWT SDK from the GWT project site.
http://www.gwtproject.org/download.html



Go to the above link and click on ‘Download GWT SDK’ highlighted in the above screen. Then unzip the downloaded GWT SDK to your preferred location on your hard disk and it will look similar to the below screen shot.

 

You might want to add this path to use the commands available in gwt.

Right click on ‘Computer’ on your desktop and select ‘Properties’ which displays the below screen. Click on ‘Advanced System settings’.

Click on ‘Environment Variables’ in the below screen.

Clicking on Environment Variables will display the below Window. Select ‘Path’ from the list of available variables and add the path to which you extracted GWT SDK.

 
Then click on ‘OK’ to close the ‘Edit User Variable’ screen and ‘OK’ in ‘Environment Variables’ and ‘System Properties’ window to save the modifications.

 

Eclipse

You need to install the eclipse plug-in for GWT to develop GWT applications on eclipse easily. To install GWT eclipse plug-in , launch eclipse , go to Help –> Eclipse Marketplace



Search for GWT in the eclipse market place.



Find out ‘Google Plugin for Eclipse’ and the version number should match the version of the eclipse you are using. If you are using Eclipse Kepler(eclipse 4.3), you need to look for ‘Google Plugin for Eclipse 4.3) and click on ‘Install’.



Accept the license and click on ‘Next’ to continue installation.



It takes some time to download and install the plug-in.



While installing you will get a security warning. Just click on ‘Ok’ to continue the installation.



Restart the eclipse after the installation of plug-in is completed. After restarting the eclipse, you will see the GWT plug-in added to the eclipse tool bar.

NetBeans

If NetBeans is your preferred IDE, there is an GWT plug-in available for NetBeans as well.
Launch NetBeans, and in NetBeans ‘Start Page’ click on ‘Install Plugins’.






Alternatively you can navigate to Plugins view by selecting Tools – > Plugins from the NetBeans menu.




In the Plugins Windows, navigate to ‘Available Plugins’ tab.



In the Search textbox, enter gwt and hit Enter. This will return the gwt related plugins for NetBeans.



The GWT plug-in for NetBeans in GWT4NB which is the only GWT plug-in available in the list. So select it to install and click on Install button at the bottom of the Plugins screen.



Click on ‘Next >’ button to start the installation of the GWT NetBeans plug-in.



Select the check box against the license agreement and click on Install to agree to the license agreement and to start the installation process.



GWT NetBeans plug-in is being installed..



When the below message is displayed, just click on Continue to continue the installation process.



Restart the IDE once the installation is completed by selecting against the ‘Restart IDE Now’ and clicking on ‘Finish’.



Once the IDE is restarted, from the NetBeans Menu bar , select File –> New Project. You will see the below New Project window which has a GWT option under the Categories indicating that the GWT Plugin for NetBeans is installed successfully.

Browser Plugins

And we need to install extensions to the browser you are planning to use for running the GWT app in development mode. We will see later what the development mode is, but for now let us install the plugins for the browser to complete our set up of the development environment. If you launch the app in Dev mode without installing the plug-in, the browser will display a message similar to below.

In Internet Explorer:

On Chrome:

When you click on Download, On Chrome, you will be redirected to the Chrome extensions page from where you can install the GWT Developer plug-in.



Click on ‘FREE’ button to install the plug-in on Chrome browser.

On IE, clicking on ‘Download’ button will download a ‘GWTDevPluginSetup.exe’ set up and launching it will install the GWT developer plug-in for IE.

Restart the browsers after the GWT developer plug-in is installed.

Unfortunately the latest versions of Mozilla Firefox doesn't support the GWT Developer Plugin. So you can’t work in Development mode on latest version of Firefox, but GWT already provides a super dev mode which doesn’t require installing any plug-in during development. So you can use Firefox in super dev mode during development mode.

Conclusion

We completed setting up the required development environment for developing applications in GWT. We can start creating GWT applications !!

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.