Getting Started With HTML5 Mobile Web Development

There are many ways of developing mobile web applications, this article is going to show you how to get started quickly with one approach we call Plain Old HTML5 (POH5).  This approach uses a pure HTML5 based front end that interactions with server side content through RESTful endpoints.

 

 

If you are new to the mobile web, or want more information before you get started take a look at these links:

  • <link to mobile web basics>
  • <link to POH5 >
  • <link to JSF & mobile web>

 

This guide will walk your through creating an POH5 application using a Maven archetype, deploying it to JBoss Application Server 7, and using JBoss Tools to make development easier.  A breakdown and explanation of the various aspects of the application will follow.

 

<link to the webinar>

Prerequisites

 

Using JBoss tools is optional.  Any IDE that can generate and consume projects from Maven archetypes will work.  Even standard Maven command line tools are fine.

 

An HTML5 compatible browser is also required such as Chrome 14+, Safari 5+, Firefox 5+, or IE 9+, and note that some behaviors will vary slightly (ex. validations) based on browser support, especially IE 9.

 

 

Mobile web support is limited to Android and iOS devices however it should run on HP, and Black Berry devices as well.  Windows Phone, and others will work as jQuery Mobile announces support.

Creating, Deploying, and Testing the Application

As was mentioned before there are multiple ways to create this application from the Maven archetype.  The archetype is located in the Maven central repository so there is no need to follow any special Maven setup steps.

Using the Command Line

Move to a the directory you wish to create the project in.  Then execute the following Maven archetype command:

 

mvn archetype:generate \
        -DarchetypeArtifactId=jboss-html5-mobile-archetype \
        -DarchetypeGroupId=org.jboss.spec.archetypes \
        -DarchetypeVersion=7.0.2.CR2

 

Maven will download the archetype, and its dependencies then ask you some questions:

 

  1. GroupId, the base package for the project
  2. ArtifactId, the name of the project
  3. Version, the starting version of project
  4. Package, if you want it different from the groupId

 

Select what ever values you wish, and when Maven asks to proceed just type "Y".  You'll then have the project generated in a directory named what ever you chose for the artifactId.  The "readme.md" files contains a lot of great information to get you started.

Deploying

First you need to start the JBoss container. To do this, run

 

 $JBOSS_HOME/bin/standalone.sh

 

or if you are using windows

 

$JBOSS_HOME/bin/standalone.bat

 

Note: Adding "-b 0.0.0.0" to the above commands will allow external clients (phones, tablets, desktops, etc...) connect through your local network.

 

For example:

 

$JBOSS_HOME/bin/standalone.sh -b 0.0.0.0 

 

To deploy the application, you first need to produce the archive to deploy using the following Maven goal:

 

mvn package

 

You can now deploy the artifact by executing the following command:

 

mvn jboss-as:deploy

 

The application will be running at the following URL <http://localhost:8080/<artifactId>/>.  Where <artifactId> is what ever you entered above.

 

To undeploy run this command:

 

mvn jboss-as:undeploy
Testing

For this application with use Arquilian for in container testing of our services, and QUnit for verifying our JavaScript.  We'll discuss these more in detail further down in this article, but for now we'll cover how to execute the tests.

Arquilian

By default, tests are configured to be skipped. The reason is that the sample test is an Arquillian test, which requires the use of a container. You can activate this test by selecting one of the container configuration provided for JBoss.

 

To run the test in JBoss, first start the container instance. Then, run the test goal with the following profile activated:

 

mvn clean test -Parq-jbossas-remote
QUnit

QUnit is a JavaScript unit testing framework used and built by jQuery.  This application includes a set of QUnit tests in order to verify JavaScript that is core to this HTML5 application.  Executing QUnit test cases is quite easy.  Simply load the following HTML in the browser you wish to test.

 

<app-root>/src/test/qunit/index.html

 

For more information on QUnit tests see http://docs.jquery.com/QUnit

Using JBoss Tools

With JBoss Tools it is even easier to create, deploy, test, and develop this application than using the command line alone.  The instructions below assume you've already installed JBoss Tools, and JBoss AS 7 as a server in the IDE.

 

Starting with JBoss Tools 3.3 there is a new splash screen that called JBoss Central.  This gives you quick access to tons of JBoss quickstarts, tutorials, news, and more.

 

jboss_central.png

 

We are going to select the HTML5 Project link which is tied to this archetype.  Following the wizard below enter the project name, package, target runtimes, etc... then click the Next button.

 

wizard.png

 

The next page should be pre-populated with values from the previous screen, and you can update as needed.  When finished click the Finish button.

 

wizard_1.png

 

JBoss Tools will then create the application and import it as a new project in your workspace!

Deploying

Getting the application deployed from JBoss Tools is snap.  Assuming you followed the JBoss AS7 setup instructions above you should have a server tab that looks like this:

 

server.png

 

Right click on the "JBoss 7.0 Runtime Server" and select "Add and Remove...".  You should see the following screen:

 

server_01.png

 

Using this wizard select your application on the left and choose to add it to the right.  Click the Finished button when ready.

 

You can then start, stop, republish, and debug your application right from here:

 

server_02.png

 

Go ahead and start the server, and when completed (super fast because it's JBoss AS7) you can access your application at:

 

http://localhost:8080/<artifactId>
Testing

For this application with use Arquilian for in container testing of our services, and qUnit for verifying our JavaScript.  We'll discuss these more in detail further down in this article, but for now we'll cover how to execute the tests in JBoss Tools.

 

Arquilian

Arquilian's in container tests can be executing like any other jUnit test in eclipse.  The only thing is that for our configuration we'll need to have our JBoss container started following the JBoss Tools instructions above.

 

Then navigate to MemberRegistrationTest.java as shown below:

 

arquili_01.png

Right click on the file, and select Run As --> JUnit Test.  The JUnit tab should appear, and the console should show you the tests being deployed and executed.  If all goes according to plan you should see something like this:

 

arquili_02.png

QUnit

QUnit is a JavaScript unit testing framework used and built by jQuery.  This application includes a set of QUnit tests in order to verify JavaScript that is core to this HTML5 application.  Executing QUnit test cases is quite easy, especially in JBoss Tools.

 

Navigate to the QUnit index.html file as shown below, right click on this and choose to Open With --> Web Browser.

 

qunit.png

You default browser should launch, loading, and executing the QUnit tests in the process.  The browser window should look something like this:

 

qunit_01.png

This is showing you the results of the tests that were executed.

Application Deep Dive

Client Side

desktop.html
mobile.html

jQuery Mobile

HTML5 Semantic Tags
HTML5 Form API
app.js
index.html

Server Side

Bean Validation
RESTful JAX-RS Endpoints

Testing the Application Code

Testing an HTML5 based application requires some addition considerations.  First you need to test the JAX-RS  back end services.  Second with more logic existing in JavaScript you need an effective way of unit testing that. 

Server Side
Client Side

 

Wrap Up

- link to webinar

- link to openshift instructions

-