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 JBoss Enterprise Application Platform continuous delivery. 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.

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

Import the Latest JBoss EAP for OpenShift Image Streams 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.

Use the following command to import the latest JBoss EAP for OpenShift image streams and templates into your OpenShift project’s namespace.

for resource in \
  eap-cd-image-stream.json \
  eap-cd-amq-persistent-s2i.json \
  eap-cd-amq-s2i.json \
  eap-cd-basic-s2i.json \
  eap-cd-https-s2i.json \
  eap-cd-mongodb-persistent-s2i.json \
  eap-cd-mongodb-s2i.json \
  eap-cd-mysql-persistent-s2i.json \
  eap-cd-mysql-s2i.json \
  eap-cd-postgresql-persistent-s2i.json \
  eap-cd-postgresql-s2i.json \
  eap-cd-third-party-db-s2i.json \
  eap-cd-tx-recovery-s2i.json \
  eap-cd-sso-s2i.json
do
  oc replace --force -f \
https://raw.githubusercontent.com/jboss-container-images/jboss-eap-7-openshift-image/CD19/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

  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 eap-cd-basic-s2i template with the contacts-jquerymobile source code on GitHub.

    oc new-app --template=eap-cd-basic-s2i \
 -p IMAGE_STREAM_NAMESPACE="contacts-jquerymobile-project" \
 -p SOURCE_REPOSITORY_URL="https://github.com/jboss-developer/jboss-eap-quickstarts" \
 -p SOURCE_REPOSITORY_REF="openshift" \
 -p CONTEXT_DIR="contacts-jquerymobile"

    With respect to the command parameters:

    • --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 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.

  1. Retrieve the name of the build configuration.

    $ oc get bc -o name

  2. Use the name of the build configuration from the previous step to view the Maven progress of the build.

    $ oc logs -f buildconfig/eap-app