⁠Chapter 3. The contacts-mobile-basic Example

3.1. Running the Example
3.1.1. Obtaining the Example
3.1.2. Building the Example
3.1.3. Deploying the Example
3.2. Exploring the Source Code
3.2.1. About jQuery Mobile
3.2.2. The jQuery Mobile Declarations
3.2.3. The Pages
3.2.4. The Panel
3.2.5. The Dialog
The contacts-mobile-basic example creates a simple mobile web application that stores contacts. It offers CRUD (create, read, update, delete) functionality.
jQuery Mobile is the main framework used to create the user interface of the application. The framework is composed of widgets that enable interactive application pages for mobile devices, and includes items such as headers, buttons and forms.
This chapter examines how to build and deploy the contacts-mobile-basic example, how it uses the jQuery Mobile framework, and how widgets are used.
⁠
Screenshot of the contacts-mobile-basic Example

Figure 3.1. The contacts-mobile-basic Example: List and Details views

⁠
Screenshot of the contacts-mobile-basic Example

Figure 3.2. The contacts-mobile-basic Example: Sidebar and Add Contact views

Report a bug

⁠3.1. Running the Example

The contacts-mobile-basic example is provided as part of the Red Hat JBoss Web Framework Kit distribution. The example can be downloaded from the Red Hat Customer Portal. This section explains how to download, build, and deploy the example.
Report a bug

⁠3.1.1. Obtaining the Example

The contacts-mobile-basic example is available from the Red Hat Customer Portal. It must be downloaded and extracted into a local directory before it can be built.
⁠

Procedure 3.1. Obtaining the Example from the Red Hat Customer Portal

  1. Log into the Red Hat Customer Portal at http://access.redhat.com.
  2. Locate the downloads for this release version of Red Hat JBoss Web Framework Kit.
  3. Download the .zip file for Red Hat JBoss Web Framework Kit quickstarts, which contains the contacts-mobile-basic example.
  4. Extract the contents of the downloaded .zip file to the location where you want to keep the quickstarts source code.
Report a bug

⁠3.1.2. Building the Example

Use Maven to build contacts-mobile-basic locally.
⁠

Procedure 3.2. Building contacts-mobile-basic with Maven

  1. On the command line, navigate to the directory containing the contacts-mobile-basic example.
  2. Run the following command to build the example: 
    $ mvn clean package
Report a bug

⁠3.1.3. Deploying the Example

Deploy the example to the JBoss EAP server. After deploying the example to the JBoss EAP server, you can view the example in your browser.
⁠

Procedure 3.3. Deploying contacts-mobile-basic to the Server

  1. In the directory containing JBoss EAP, run the following command to start the server: 
    $ ./bin/standalone.sh
  2. Open a new command line instance and navigate to the directory containing the contacts-mobile-basic example.
  3. Enter the following command to deploy the contacts-mobile-basic example: 
    $ mvn jboss-as:deploy
  4. Open a web browser and access the example at http://localhost:8080/jboss-contacts-mobile-basic/.
Report a bug