The contacts-jquerymobile
quickstart demonstrates a Java EE 7 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 Java EE 7 in Red Hat JBoss Enterprise Application Platform. This project is setup to allow you to create a basic Java EE 7 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.1 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 EAP_HOME
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.
Start the JBoss EAP Standalone Server
-
Open a terminal and navigate to the root of the JBoss EAP directory.
-
Start the JBoss EAP server with the default profile by typing the following command.
$ EAP_HOME/bin/standalone.sh
NoteFor 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
-
Make sure you start the JBoss EAP server as described above.
-
Open a terminal and navigate to the root directory of this quickstart.
-
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.
-
Make sure you start the JBoss EAP server as described above.
-
Open a terminal and navigate to the root directory of this quickstart.
-
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.
-
Start the JBoss EAP server as described above.
-
Open a terminal and navigate to the root directory of this quickstart.
-
Type the following command to run the
verify
goal with thearq-remote
profile activated.$ mvn clean verify -Parq-remote
Note
|
You can also let Arquillian manage the JBoss EAP server by using the |
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.
-
Start the JBoss EAP server as described above.
-
Build the quickstart archive.
-
Open a terminal and navigate to the root directory of this quickstart.
-
Build the quickstart archive using the following command:
$ mvn clean package
-
-
Navigate to the
functional-tests/
directory in this quickstart. -
Type the following command to run the
verify
goal with thearq-remote
profile activated.$ mvn clean verify -Parq-remote
Note
|
You can also let Arquillian manage the JBoss EAP server by using the |
Run the Quickstart in Red Hat JBoss Developer Studio or Eclipse
You can also start the server and deploy the quickstarts or run the Arquillian tests in Red Hat JBoss Developer 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 JBoss Developer Studio or Eclipse to Run the Quickstarts.
Deploy the Quickstart to OpenShift Online
Use these instructions to deploy the quickstart to Red Hat OpenShift Online. If you do not yet have an OpenShift Online account and are interested in signing up for one, see Choose a Plan in the OpenShift Online documentation located on the Red Hat Customer Portal. For information about running JBoss EAP on Red Hat OpenShift Online, see Getting Started with JBoss EAP for OpenShift Online, also located on the Red Hat Customer Portal.
Create and Deploy the Quickstart Project
Follow these instructions to deploy this quickstart to OpenShift Online.
-
Browse to OpenShift Online console and login with your credentials.
-
On the View All Projects or Welcome to Project page, click Create Project.
-
On the Create Project page, enter the following information:
Name: contacts-jquerymobile Display Name contacts-jquerymobile Description: contacts-jquerymobile
-
Click Create to create the project.
-
On the My Projects page, choose your new contacts-jquerymobile and click Browse Catalog.
-
Choose JBoss EAP CD (no https) and then click Next to view the Information page.
-
Click Next to navigate to the Configuration page. . . Enter the following information. You can leave the remaining fields as they are.
Add to Project: contacts-jquerymobile Application Name: contacts-jquerymobile Custom http Route Hostname: (leave blank) Git Repository URL: https://github.com/jboss-developer/jboss-eap-quickstarts/ Git Reference: openshift Context directory: contacts-jquerymobile
-
Click the Create button.
-
Click on the Continue to the project overview link.
-
You should see "Build #1 is running …" with the console log below.
Cloning ... Downloading ... Building ... Copying ... Pushing ...
-
At the end of the build, you should see "Push successful".
-
Click View Full Log to see the entire log.
-
-
Click the Overview tab to see the
contacts-jquerymobile
deployment. -
Click on the application URL on the right side of the page to view the running application. It should be in the following pattern:
http://APPLICATION_NAME-PROJECT_NAME.PORT.HOST.openshiftapps.com
Delete the Quickstart Project
Follow these instructions to delete the project from OpenShift Online.
-
Go to the View All Projects page and select Delete Project from the drop down list to the right of the contacts-jquerymobile project.
-
Type the name of the project to confirm, and then click Delete
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