The contacts-jquerymobile quickstart demonstrates a Jakarta EE 8 mobile database application using HTML5, jQuery Mobile, JAX-RS, JPA, and REST.

What is it?

The contact-jquerymobile quickstart is a deployable Maven 3 project designed to help you get your foot in the door developing HTML5 based mobile web applications with Jakarta EE 8 in Red Hat JBoss Enterprise Application Platform. This project is setup to allow you to create a basic Jakarta EE 8 application using HTML5, jQuery Mobile, JAX-RS, CDI, EJB, JPA, and Bean Validation. It includes a persistence unit and some sample persistence and transaction code to help you get your feet wet with database access in enterprise Java.

This application is built using a HTML5 + REST approach. This uses a pure HTML client that interacts with with the application server via restful end-points (JAX-RS). This application also uses some of the latest HTML5 features and advanced JAX-RS. And since testing is just as important with client side as it is server side, this application uses QUnit to show you how to unit test your JavaScript.

This application focuses on CRUD in a strictly mobile app using only jQuery Mobile(no other frameworks). The user will have the ability to:

  • Create a new contact.

  • Read a list of contacts.

  • Update an existing contact.

  • Delete a contact.

Validation is an important part of an application. Typically in an HTML5 app you can let the built-in HTML5 form validation do the work for you. However, mobile browsers do not support this feature at this time. In order to validate the forms, the jquery.validate plugin was added, which provides both client-side and server-side validation. Over AJAX, if there is an error, the error is returned and displayed in the form. You can see an example of this in the Edit form if you enter an email that is already in use. The application will attempt to insert the error message into a field if that field exists. If the field does not exist then it display it at the top. In addition, there are QUnit Tests for every form of validation.

System Requirements

The application this project produces is designed to be run on Red Hat JBoss Enterprise Application Platform 7.4 or later.

All you need to build this project is Java 8.0 (Java SDK 1.8) or later and Maven 3.3.1 or later. See Configure Maven to Build and Deploy the Quickstarts to make sure you are configured correctly for testing the quickstarts.

An HTML5 compatible browser such as Chrome, Safari 5+, Firefox 5+, or IE 9+ is required. Note that some behaviors, such as validation, will vary slightly based on browser support, especially IE 9.

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

With the prerequisites out of the way, you are ready to build and deploy.

Use of the EAP_HOME and QUICKSTART_HOME Variables

In the following instructions, replace EAP_HOME with the actual path to your JBoss EAP installation. The installation path is described in detail here: Use of EAP_HOME and JBOSS_HOME Variables.

When you see the replaceable variable QUICKSTART_HOME, replace it with the path to the root directory of all of the quickstarts.

Start the JBoss EAP Standalone Server

  1. Open a terminal and navigate to the root of the JBoss EAP directory.

  2. Start the JBoss EAP server with the default profile by typing the following command.

    $ EAP_HOME/bin/standalone.sh
    Note
    		 For Windows, use the EAP_HOME\bin\standalone.bat script.

    Adding -b 0.0.0.0 to the above command allows external clients, such as phones, tablets, and desktops, to connect through your local network. For example:

    $ EAP_HOME/bin/standalone.sh  -b 0.0.0.0

Build and Deploy the Quickstart

  1. Make sure you start the JBoss EAP server as described above.

  2. Open a terminal and navigate to the root directory of this quickstart.

  3. Type the following command to build the artifacts.

    $ mvn clean package wildfly:deploy

This deploys the contacts-jquerymobile/target/contacts-jquerymobile.war to the running instance of the server.

You should see a message in the server log indicating that the archive deployed successfully.

Access the Application

Access the running client application in a browser at the following URL: http://localhost:8080/contacts-jquerymobile/.

The application is made up of the following pages:

Main page

  • Displays a list of contacts.

  • Search bar for the list.

  • Details button changes to the Detailed list.

  • Clicking on a contact brings up an Edit form.

  • Menu button (in upper left) opens menu.

Menu pullout

  • Add a new contact.

  • List/Detail view switcher, depending on what is currently displayed.

  • About information.

  • Theming - apply various themes (only on the List view).

Details page

  • Same as Main page except all information is displayed with each contact.

Add form

  • First name, Last name, Phone, Email, and BirthDate fields.

  • Save submits the form.

  • Clear resets the form but stays on the form.

  • Cancel resets the form and goes the Main page.

Edit form

  • Same as Add form.

  • Delete button will delete the contact currently viewed and return you to the Main page.

Undeploy the Quickstart

When you are finished testing the quickstart, follow these steps to undeploy the archive.

  1. Make sure you start the JBoss EAP server as described above.

  2. Open a terminal and navigate to the root directory of this quickstart.

  3. Type this command to undeploy the archive:

    $ mvn wildfly:undeploy

Minification

By default, the project uses the wro4j plugin, which provides the ability to concatenate, validate and minify JavaScript and CSS files. These minified files, as well as their unmodified versions are deployed with the project.

With just a few quick changes to the project, you can link to the minified versions of your JavaScript and CSS files.

First, in the contacts-jquerymobile/src/main/webapp/index.html file, search for references to minification and comment or uncomment the appropriate lines.

Finally, wro4j runs in the compile phase, so any standard build command like package or install, will trigger it. The plugin is in a profile with an ID of minify so you must specify that profile in your Maven build.

By default, tests are disabled, so you must use the Arquillian test profile to run tests when minifying.

  • For example, to deploy with no tests:

    $ mvn clean package wildfly:deploy -Pminify

  • To deploy with tests:

    $ mvn clean verify wildfly:deploy -Pminify,arq-remote

Run the Arquillian Tests

This quickstart provides Arquillian tests. By default, these tests are configured to be skipped since Arquillian tests require the use of a container.

Note
 The Arquillian tests deploy the application, so make sure you undeploy the quickstart before you begin.

Follow these steps to run the tests.

  1. Start the JBoss EAP server as described above.

  2. Open a terminal and navigate to the root directory of this quickstart.

  3. Type the following command to run the verify goal with the arq-remote profile activated.

    $ mvn clean verify -Parq-remote
Note

You can also let Arquillian manage the JBoss EAP server by using the arq-managed profile, meaning the tests will start the server for you. This profile requires that you provide Arquillian with the location of the JBoss EAP server, either by setting the JBOSS_HOME environment variable, or by setting the jbossHome property in the arquillian.xml file. For more information, see Run the Arquillian Tests.

Run the QUnit Tests

QUnit is a JavaScript unit testing framework used and built by jQuery. Because JavaScript code is the core of this HTML5 application, this quickstart provides a set of QUnit tests that automate testing of this code in various browsers. Executing QUnit test cases are quite easy.

Simply load the QUICKSTART_HOME/contacts-jquerymobile/src/test/qunit/index.html file in the browser you want to test.

Note
 If you use Chrome, some date tests fail. These are false failures and are known issues with Chrome. FireFox, Safari, and IE run the tests correctly. You can also display the tests using the Eclipse built-in browser.

For more information on QUnit tests, see http://qunitjs.com/.

Run the Arquillian Functional Tests

This quickstart provides Arquillian functional tests. They are located under the functional-tests/ directory. Functional tests verify that your application behaves correctly from the user’s point of view and simulate clicking around the web page as a normal user would do.

Note
 The Arquillian functional tests deploy the application, so make sure you undeploy the quickstart before you begin.

Follow these steps to run the functional tests.

  1. Start the JBoss EAP server as described above.

  2. Build the quickstart archive.

    1. Open a terminal and navigate to the root directory of this quickstart.

    2. Build the quickstart archive using the following command:

      $ mvn clean package

  3. Navigate to the functional-tests/ directory in this quickstart.

  4. Type the following command to run the verify goal with the arq-remote profile activated.

    $ mvn clean verify -Parq-remote
Note

You can also let Arquillian manage the JBoss EAP server by using the arq-managed profile, meaning the tests will start the server for you. This profile requires that you provide Arquillian with the location of the JBoss EAP server, either by setting the JBOSS_HOME environment variable, or by setting the jbossHome property in the arquillian.xml file. For more information, see Run the Arquillian Tests.

Run the Quickstart in Red Hat CodeReady Studio or Eclipse

You can also start the server and deploy the quickstarts or run the Arquillian tests in Red Hat CodeReady Studio or from Eclipse using JBoss tools. For general information about how to import a quickstart, add a JBoss EAP server, and build and deploy a quickstart, see Use Red Hat CodeReady Studio or Eclipse to Run the Quickstarts.

Debug the Application

If you want to be able to debug into the source code or look at the Javadocs of any library in the project, you can run either of the following two commands to pull them into your local repository. The IDE should then detect them.

$ mvn dependency:sources
$ mvn dependency:resolve -Dclassifier=javadoc

Getting Started with JBoss EAP for OpenShift

This document contains the basic instructions to build and deploy this quickstart to JBoss EAP for OpenShift or JBoss EAP for OpenShift Online.

See Getting Started with JBoss EAP for OpenShift Container Platform for more detailed information about building and running applications on JBoss EAP for OpenShift.

See Getting Started with JBoss EAP for OpenShift Online for more detailed information about building and running applications on JBoss EAP for OpenShift Online.

Prepare OpenShift for Quickstart Deployment

  1. Log in to your OpenShift instance using the oc login command.

  2. Create a new project for the quickstart in OpenShift. You can create a project in OpenShift using the following command.

    $ oc new-project contacts-jquerymobile-project

    Before you can import and use the OpenShift image for JBoss EAP for OpenShift , you must configure authentication to the Red Hat Container Registry.

Create an authentication token using a registry service account to configure access to the Red Hat Container Registry. You need not use or store your Red Hat account’s username and password in your OpenShift configuration when you use an authentication token.

Procedure

  1. Follow the instructions on Red Hat Customer Portal to create an authentication token using a registry service account.

  2. Download the YAML file containing the OpenShift secret for the token.

    You can download the YAML file from the OpenShift Secret tab on your token’s Token Information page.

  3. Create the authentication token secret for your OpenShift project using the YAML file that you downloaded:

    oc create -f 1234567_myserviceaccount-secret.yaml

  4. Configure the secret for your OpenShift project using the following commands, replacing the secret name below with the name of your secret created in the previous step.

    oc secrets link default 1234567-myserviceaccount-pull-secret --for=pull
oc secrets link builder 1234567-myserviceaccount-pull-secret --for=pull
    Additional resources

Import the Latest JBoss EAP for OpenShift Imagestreams and Templates

Important

If you are building and deploying this quickstart on JBoss EAP for OpenShift, you must configure authentication to the Red Hat Container Registry before you import the image streams and templates into your namespace. Getting Started with JBoss EAP for OpenShift Container Platform provides an example of one way to configure authentication to the registry. For additional information, see Red Hat Container Registry Authentication on the Red Hat Customer Portal.

Configuration of authentication to the registry is not necessary if you are building and deploying this quickstart on JBoss EAP for OpenShift Online.
Procedure

  1. Use the following commands to import the latest JDK 8 and JDK 11 image streams and templates for the OpenShift image for JBoss EAP for OpenShift, into your OpenShift project’s namespace.

    1. Import JDK 8 image streams:

      oc replace --force -f https://raw.githubusercontent.com/jboss-container-images/jboss-eap-openshift-templates/eap74/eap74-openjdk8-image-stream.json

      This command imports the following imagestreams:

      • The JDK 8 builder imagestream: jboss-eap74-openjdk8-openshift

      • The JDK 8 runtime imagestream: jboss-eap74-openjdk8-runtime-openshift

    2. Import JDK 11 image stream:

      oc replace --force -f https://raw.githubusercontent.com/jboss-container-images/jboss-eap-openshift-templates/eap74/eap74-openjdk11-image-stream.json

      This command imports the following imagestreams:

      • The JDK 11 builder imagestream: jboss-eap74-openjdk11-openshift

      • The JDK 11 runtime imagestream: jboss-eap74-openjdk11-runtime-openshift

    3. Import the JDK 8 and JDK 11 templates:

      for resource in \
  eap74-amq-persistent-s2i.json \
  eap74-amq-s2i.json \
  eap74-basic-s2i.json \
  eap74-https-s2i.json \
  eap74-sso-s2i.json \
  eap74-starter-s2i.json \
  eap74-third-party-db-s2i.json \
  eap74-tx-recovery-s2i.json
do
  oc replace --force -f \
https://raw.githubusercontent.com/jboss-container-images/jboss-eap-openshift-templates/eap74/templates/${resource}
done
Note

The JBoss EAP image streams and templates imported using the above command are only available within that OpenShift project.

If you have administrative access to the general openshift namespace and want the image streams and templates to be accessible by all projects, add -n openshift to the oc replace line of the command. For example:

...
oc replace -n openshift --force -f \
...

Deploy the JBoss EAP Source-to-Image (S2I) Quickstart to OpenShift

Procedure

  1. Create a new OpenShift application using the JBoss EAP for OpenShift image and the quickstart’s source code. Use the following command to use the eap74-basic-s2i template with the JDK 8 images and the contacts-jquerymobile source code on GitHub.

    $ oc new-app --template=eap74-basic-s2i \
 -p EAP_IMAGE_NAME=jboss-eap74-openjdk8-openshift:latest \
 -p EAP_RUNTIME_IMAGE_NAME=jboss-eap74-openjdk8-runtime-openshift:latest \
 -p IMAGE_STREAM_NAMESPACE="contacts-jquerymobile-project" \
 -p SOURCE_REPOSITORY_URL="https://github.com/jboss-developer/jboss-eap-quickstarts" \
 -p SOURCE_REPOSITORY_REF="7.4.x" \
 -p CONTEXT_DIR="contacts-jquerymobile"

    • --template The template to use.

    • -p IMAGE_STREAM_NAMESPACE The latest images streams and templates were imported into the project’s namespace, so you must specify the namespace of where to find the image stream. This is usually the OpenShift project’s name.

    • -p SOURCE_REPOSITORY_URL The URL to the repository containing the application source code.

    • -p SOURCE_REPOSITORY_REF The Git repository reference to use for the source code. This can be a Git branch or tag reference.

    • -p CONTEXT_DIR The directory within the source repository to build.

    Alternatively, to create the quickstart application using the JDK 11 images enter the following command.

    $ oc new-app --template=eap74-basic-s2i \
 -p EAP_IMAGE_NAME=jboss-eap74-openjdk11-openshift:latest \
 -p EAP_RUNTIME_IMAGE_NAME=jboss-eap74-openjdk11-runtime-openshift:latest \
 -p IMAGE_STREAM_NAMESPACE="contacts-jquerymobile-project" \
 -p SOURCE_REPOSITORY_URL="https://github.com/jboss-developer/jboss-eap-quickstarts" \
 -p SOURCE_REPOSITORY_REF="7.4.x" \
 -p CONTEXT_DIR="contacts-jquerymobile"

    • --template The template to use.

    • -p IMAGE_STREAM_NAMESPACE The latest images streams and templates were imported into the project’s namespace, so you must specify the namespace of where to find the image stream. This is usually the OpenShift project’s name.

    • -p SOURCE_REPOSITORY_URL The URL to the repository containing the application source code.

    • -p SOURCE_REPOSITORY_REF The Git repository reference to use for the source code. This can be a Git branch or tag reference.

    • -p CONTEXT_DIR The directory within the source repository to build.

    Note
    		 A template can specify default values for many template parameters, and you might have to override some, or all, of the defaults. To see template information, including a list of parameters and any default values, use the command oc describe template TEMPLATE_NAME.
    Tip
    		 It is possible to trim down the JBoss EAP for OpenShift image that will be used to run this quickstart. To do so, please add the -p GALLEON_PROVISION_LAYERS=<galleon layers> argument when creating the new application. Please refer to the JBoss EAP documentation for the list of supported galleon layers.

  2. Retrieve the name of the build configuration.

    $ oc get bc -o name

  3. Use the name of the build configurations from the previous step to view the Maven progress of the builds.

    $ oc logs -f bc/${APPLICATION_NAME}-build-artifacts

…
Push successful
$ oc logs -f bc/${APPLICATION_NAME}
…
Push successful

    For example, for the previously created application, the following command shows the progress of the Maven builds.

    $ oc logs -f bc/eap74-basic-app-build-artifacts

…
Push successful
$ oc logs -f bc/eap74-basic-app
…
Push successful

OpenShift Post Deployment Tasks

Depending on your application, you might need to complete some tasks after your OpenShift application has been built and deployed.

Examples of post-deployment tasks include the following:

  • Exposing a service so that the application is viewable from outside of OpenShift.

  • Scaling your application to a specific number of replicas.

Procedure

  1. Get the service name of your application using the following command.

    $ oc get service

  2. Optional: Expose the main service as a route so you can access your application from outside of OpenShift. For example, for the previously created application, use the following command to expose the required service and port.

    Note

    If you used a template to create the application, the route might already exist. If it does, continue on to the next step.

    		 
    $ oc expose service/eap74-basic-app --port=8080

  3. Get the URL of the route.

    $ oc get route

  4. Access the application in your web browser using the URL. The URL is the value of the HOST/PORT field from previous command’s output.

    Note

    For example, to interact with this quickstart , the root of its application URLs should be https://HOST_PORT_Value/.

  5. Optionally, you can scale up the application instance by running the following command. This command increases the number of replicas to 3.

    $ oc scale deploymentconfig DEPLOYMENTCONFIG_NAME --replicas=3

    For example, for this` quickstart, use the following command to scale up the application.

    $ oc scale deploymentconfig/eap74-basic-app --replicas=3