Red Hat

Developer Materials

Example Mobile Applications Using Hybrid HTML5 + REST with Apache Cordova

  • Author:
  • Contributors: Sande Gilda, Vineet Reynolds, Rafael Benevides
  • Last Update: Feb 28, 2014
  • Level: Intermediate
  • Technologies:HTML5, REST, Apache Cordova
  • Target Product:WFK

What is it?

This project serves as an example of the HTML5 kitchensink quickstart converted to a hybrid Apache Cordova application.

What does this mean? Basically, this takes our HTML5 + REST / jQuery Mobile web application and converts it to a native application for both iOS and Android.

These concepts can be applied to the conversion of most HTML5/JS based web apps by just replacing the specific paths described in this article with paths that match your environment. The existing web application is also enhanced with Cordova plugins to utilize device features through JavaScript APIs. This example uses the following plugins:

  • the Device plugin to describe the device hardware and software,
  • the network-information plugin to obtain information about the internet connectivity and the cellular and wifi connection on the device, and
  • the Statusbar plugin to manipulate the statusbar on iOS devices.

Available Hybrid Applications

The following is a list of instructions for all supported mobile platforms.

Click on the link below to see instructions to see instructions for each platform:

  1. Kitchensink Apache Cordova iOS
  2. Kitchensink Apache Cordova Android

Kitchensink Apache Cordova iOS Example

What is it?

This quickstart was built upon the HTML5 kitchensink quickstart, which was converted to an Apache Cordova based Hybrid Mobile application. Basically, this takes our HTML5 + REST / jQuery Mobile based web application and converts it to a native application for iOS.

System requirements

The application this project produces is designed to be run on Red Hat JBoss Enterprise Application Platform (EAP) 6.1 or later with the Red Hat JBoss Web Framework Kit (WFK) 2.5.

All you need to build this project is Java 6.0 (Java SDK 1.6) or later, the iOS SDK and JBDS 7 with JBoss Hybrid Mobile Tools + CordovaSim installed. The iOS SDK is available as part of Apple XCode. If you need more detailed instructions to setup JBDS 7 with JBoss Hybrid Mobile Tools + CordovaSim, you can take a look at the user guide to Install Hybrid Mobile Tools and CordovaSim.

Import the Quickstart Code

First we need to import the existing code to JBDS

  1. In JBDS, click on File, then Import.
  2. Select General –> Existing Projects into Workspace and click Next.
  3. In Select root directory, click on the Browse... button, then find and select QUICKSTART_HOME/kitchensink-cordova/. Be sure to replace QUICKSTART_HOME with the root directory of your quickstarts.
  4. Click the Finish button to start the project import.

Deploy and Access the application

  1. Select your project in JBDS.
  2. Click on Run, then Run As and Run on iOS Simulator.

The iOS simulator will started, and the application will be deployed and run on it.

Kitchensink Apache Cordova Android Example

What is it?

This application is built upon the HTML5 kitchensink quickstart, which was converted to an Apache Cordova based Hybrid Mobile application. Basically, this takes our HTML5 + REST / jQuery Mobile based web application and converts it to a native application for Android.

System requirements

All you need to build this project is Java 6.0 (Java SDK 1.6) or later, the Android SDK and JBDS 7 with JBoss Hybrid Mobile Tools + CordovaSim and the Android Development Tools plugin from Google. If you need more detailed instructions to setup JBDS 7 with JBoss Hybrid Mobile Tools + CordovaSim, you can take a look at the user guide to Install Hybrid Mobile Tools and CordovaSim.

Import the Quickstart Code

First we need to import the existing code to JBDS

  1. In JBDS, click on File, then Import.
  2. Select General –> Existing Projects into Workspace and click Next.
  3. In Select root directory, click on the Browse... button, then find and select QUICKSTART_HOME/kitchensink-cordova/. Be sure to replace QUICKSTART_HOME with the root directory of your quickstarts.
  4. Click the Finish button to start the project import.

Deploy and Access the application

  1. Select your project in JBDS.
  2. Click on Run, then Run As and Run on Android Emulator.

The Android emulator will started, and the application will be deployed and run on it.

Recent Changelog

  • Feb 28, 2014(Sande Gilda):Edits to README files to render metadata correctly and to use the correct term for JBoss EAP
  • Feb 26, 2014(Vineet Reynolds):JDF 578 Removed references to Aerogear from the quickstarts
  • Feb 17, 2014(Sande Gilda):JDF 614 Update WFK version from 2.4 to 2.5
  • Dec 17, 2013(Vineet Reynolds):JDF 335 Modified project structure to Hybrid Mobile project
  • Oct 22, 2013(Sande Gilda):JDF 528 Fix broken links to documentation and other minor cleanup
  • Oct 2, 2013(Sande Gilda):JDF 503 Remove AS 7 references add versions general cleanup remove temp repo from settings
  • Sep 23, 2013(Sande Gilda):Update metadata source URLs to new repository
  • Jul 8, 2013(Sande Gilda):Fix bug 982330 Move iOS and Android instructions into the top README remove iOS and Android README.md files remove hidden android .android directory
  • Jun 12, 2013(Sande Gilda):Modify README file internal links to use generated anchors. Remove hard coded anchors. Fixed obsolete links and other markdown rendering problems
  • Mar 21, 2013(Rafael Benevides):JDF 235 Move Aerogear Quickstart to JDF
Avg:
Your Rating: