Red Hat

Developer Materials

kitchensink-cordova: Mobile Hybrid HTML5, REST, and Apache Cordova Example

What is it?

The kitchensink-cordova quickstart serves as an example of the HTML5 kitchensink quickstart converted to a hybrid Apache Cordova application in Red Hat JBoss Enterprise Application Platform.

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 (JBoss EAP) 6.1 or later with the Red Hat JBoss Web Framework Kit (WFK) 2.7.

All you need to build this project is Java 6.0 (Java SDK 1.6) or later, the iOS SDK and JBoss Developer Studio 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 JBoss Developer Studio 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 JBoss Developer Studio

  1. In JBoss Developer Studio, click on File, then Import.
  2. Select Mobile –> Import Cordova Project 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 JBoss Developer Studio.
  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 JBoss Developer Studio 7 with JBoss Hybrid Mobile Tools + CordovaSim and the Android Development Tools plugin from Google. If you need more detailed instructions to setup JBoss Developer Studio 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 JBoss Developer Studio

  1. In JBoss Developer Studio, click on File, then Import.
  2. Select Mobile –> Import Cordova Project 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 JBoss Developer Studio.
  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

  • Jan 29, 2015(Sande Gilda):Modify JBDS Maven Arquillian instructions to point to shared developer guides. Fix product names
  • Dec 15, 2014(Vineet Reynolds):Corrected instructions in README for Cordova projects
  • Nov 11, 2014(Sande Gilda):JDF 787 Modify README metadata to optimize for Google search
  • Nov 7, 2014(Matous Jobanek):updated versions of WFK and EAP in README.md files
  • Jun 12, 2014(Vineet Reynolds):WFK2 636 Align Cordova with 3.4
  • Jun 11, 2014(Sande Gilda):Fix broken link in kitchensink cordova README file
  • May 29, 2014(Emil Cervenan):Squashed README files update. WFK 2.5 version replaced with 2.6
  • May 14, 2014(Marek Novotný):updated README.md info about WFK 2.6
  • 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
Avg:
Your Rating:
×