3.2. Exploring the Source Code
Different frameworks are used for different aspects of the contacts-mobile-basic example. The application functionality is generated with Java EE. Client-side data validation is provided by jQuery and some custom JavaScript. The user interface is created with HTML5, CSS and jQuery Mobile.
This section explains the role jQuery Mobile plays in the contacts-basic-mobile example. The jQuery Mobile source code for the application is contained in
src/main/webapp/index.html.
3.2.1. About jQuery Mobile
jQuery Mobile is a framework that uses JavaScript for building web applications.
jQuery Mobile is enriched with mobile support and uses HTML5 and CSS3 to render stylesheets on mobile devices. jQuery Mobile uses Ajax to pull data directly from the server and load it onto the webpage when the data is accessed.
jQuery Mobile is supported by most mobile devices and desktop browsers. Applications built with jQuery Mobile are accessible from both mobile devices and desktop browsers. Users with a basic understanding of how jQuery works as a JavaScript library can leverage this information to learn how to create applications with jQuery Mobile.
jQuery Mobile detects when a user accesses a website from a mobile devices and renders the website accordingly. jQuery Mobile scales the resolution to match the screen's resolution and loads the mobile version of the website.
Widgets (interactive objects in the user interface) are touchscreen-friendly. Buttons, lists, and toolbars are kinds of widgets. Widgets are added to the HTML body of the application, and display according to the style employed.
Styles are defined with the swatch elements in jQuery Mobile libraries. Styles customize the appearance of applications. Color schemes are defined at the beginning of the HTML body and inherited in the rest of the document. jQuery Mobile libraries also contain default buttons, headers, panels, and menus. The contents of these libraries makes it possible to use ready-made graphics, which reduces the cost of development and makes the development of similar content unnecessary.
3.2.2. The jQuery Mobile Declarations
jQuery Mobile libraries must be declared before jQuery Mobile can be used in a body of HTML.
In the contacts-mobile-basic example, these library declarations must be added to the <head> section of the
index.html file. The example uses two declarations: one for the CSS library and one for the JavaScript library:
<head>
...
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" type="text/css" media="all" />
...
<script src="js/libs/jquery.mobile-1.4.2.js"></script>
</head>
The contents of these libraries are briefly described in the table below.
Table 3.1. jQuery Mobile Declarations
| Name | Description |
|---|---|
jquery.mobile-1.4.2.css | Contains the data for implementing style sheets. The file includes information on style elements, such as button edges, field separators, and link-enabled buttons. These provide the visual elements of the application. |
jquery.mobile-1.4.2.js | Contains pre-written JavaScript for adding features such as transition animations, drop-down lists, and visual effects. It also contains uncompressed JavaScript used for debugging. It is added to the <head> section last to apply mobile mark-ups on launch. |
3.2.3. The Pages
The contacts-mobile-basic example has five pages. These pages provide the main content of the application. Each page has:
- an initial page statement
- common content such as headers and footers
- unique page content
The jQuery Mobile widgets used to implement each of these are discussed in this section.
3.2.3.1. Page Statement
Each page in the contacts-mobile-basic example is implemented by including the page widget in the <body> of
index.html:
<body> <div data-role="page" id="contacts-list-page" class="ui-page-theme-a" data-url="/jboss-contacts-mobile-basic/"> ... </div> <div data-role="page" id="contacts-detail-list-page" class="ui-page-theme-a" > ... </div> <div data-role="page" id="about-page" class="ui-page-theme-a" > ... </div> <div data-role="page" id="contacts-add-page" class="ui-page-theme-a" > ... </div> <div data-role="page" id="contacts-edit-page" class="ui-page-theme-a" > ... </div> ... </body>
Each page widget is defined in a <div> tag with data-role value page.
Page widgets have several attributes. Some page widgets have unique values and some have shared values. By default, the first page listed in the <body> displays when a user navigates to the web application URL. This is the page widget for the first page of the application:
<div data-role="page" id="contacts-list-page" class="ui-page-theme-a" data-url="/jboss-contacts-mobile-basic/"> ... </div>
Table 3.2. Attributes
| Name | Description |
|---|---|
| data-role | Indicates what kind of object displays. In the example above, this attribute declares that this is a page. |
| id | A unique name given for identification and storage of the page in the application. |
| class | Indicates the jQuery Mobile CSS color swatch used for the page. This example uses “a”, which corresponds to a default light theme. |
| data-url | The location of the example directory. The page at the top of the <body> loads as the homepage. |
3.2.3.2. Common Page Content
The majority of the pages in the contacts-mobile-basic example contain widgets for rendering a header and a footer. These are nested within the page widget, as demonstrated here for the first page:
<div data-role="page" id="contacts-list-page" class="ui-page-theme-a" data-url="/jboss-contacts-mobile-basic/"> ... <div data-role="header" data-position="fixed" > ... </div> ... <div data-role="footer" > ... </div> </div>
The header and footer widgets are distinguished by their data-role values.
Table 3.3. Attributes
| Name | Description |
|---|---|
| data-position | Indicates the position of the widget. If set to fixed, the widget stays in one place on the screen. Because the first widget is defined as a header, it displays at the top of the screen. Because the second widget is defined as a footer, it displays at the bottom of the screen. |
The headers in the contacts-mobile-basic example typically contain a title and button widgets to enable navigation between the various application pages. Some of the more detailed footers also contain button widgets. The button widgets are simply links to other pages in the application represented with icons and text, as demonstrated here for the first page:
<div data-role="header" data-position="fixed" > <a href="#contacts-list-page-menu-panel" id="contacts-list-page-menu-button" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext ui-mini ui-btn-inline">Menu</a> <h1>Contacts</h1> <a href="#contacts-detail-list-page" id="contacts-detail-list-page-button" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-d ui-btn-icon-right ui-mini ui-btn-inline">Details</a> </div>
This page header has two buttons,
with icon 
with icon
with icon ui-icon-bars and no text to open the #contacts-list-page-menu-panel and
with icon ui-icon-arrow-d and text Details to open the #contacts-detail-list-page.
Table 3.4. Button Attributes
| Name | Description |
|---|---|
| ui-btn | Indicates that this is a button widget. |
| ui-corner-all | Adds rounded corners to the element. |
| ui-shadow | Adds an item shadow around the element. |
| ui-icon-... | Indicates the icon to be used for the button: bars, arrow-d (↓), carat-r (>), and many more. |
| ui-btn-icon-... | Indicates where the icon appears in relation to the button text: top, bottom, right, left. Alternatively, notext supresses the button text and the result is a circular button the size of the icon. |
| ui-mini | Reduces the font size and scales down paddings proportionally to produce a miniature version of the element for use in toolbars and tight spaces. |
| ui-btn-inline | Displays the button inline. This means that it will only consume as much space as is needed for the label. This allows you to place buttons side by side, flowing with the text. |
3.2.3.3. Unique Page Content
The Contacts List and Detailed List pages are similar in structure, both displaying an alphabetized list of contacts but the latter with the contact details expanded. As such, the implementation of the pages is also very similar. The implementation for the Contacts List page is given here:
<div data-role="page" id="contacts-list-page" class="ui-page-theme-a" data-url="/jboss-contacts-mobile-basic/">
...
<div role="main" class="ui-content">
<form id="filter-form-list-page" class="ui-filterable">
<input id="filter-input-list-page" data-type="search">
</form>
<ul data-role="listview" id="contacts-display-listview" class="sortedList" data-autodividers="true" data-filter="true" data-input="#filter-input-list-page">
<!-- The list of Contacts gets inserted here. -->
</ul>
</div>
...
</div>
Table 3.5. Contacts List Attributes
| Name | Description |
|---|---|
| data-role="listview" | Adds a list containing the contacts. These are added in place of <!-- The list of Contacts gets inserted here. -->. This list inherits the style swatch specified at the beginning of the page. In this case, the style swatch specified at the beginning of the page is "a". |
| id="contacts-display-listview" | The unique name given to the list, used for identification and storage. |
| class="sortedList" | Sorts each list entry. By default, these entries are sorted in alphabetical order. |
| data-autodividers="true" | Adds graphical bars that separate each entry on the list from the other. In this case, each name is presented as text in its own blue-colored horizontal bar. |
| data-filter="true" | Adds a search field to the list. In this case, the search field is located above the list of names. The user types the search term into the box and presses enter or clicks the magnifying glass icon to have the results “filtered” back to them. |
| data-input="#filter-input-list-page" | Specifies that the list of contacts serves as the data over which the search field operates. |
Likewise, the Add Contact and Edit Contact pages are similar in structure, both displaying a five-field form but the latter with contact details already populating the form fileds. As such, the implementation of the pages is also very similar. The implementation for the Edit Contact page is given here:
<div data-role="page" id="contacts-edit-page" class="ui-page-theme-a" >
...
<div role="main" class="ui-content">
<form name="contacts-edit-form" id="contacts-edit-form" class="contact_info" method="post" data-ajax="false">
<div>
<label for="contacts-edit-input-firstName">First Name:</label>
<input name="firstName" id="contacts-edit-input-firstName" class="name" data-clear-btn="true" value="" placeholder="Enter a first name." type="text"/>
</div>
<div>
<label for="contacts-edit-input-lastName">Last Name:</label>
<input name="lastName" id="contacts-edit-input-lastName" class="name" data-clear-btn="true" value="" placeholder="Enter a last name." type="text"/>
</div>
<div>
<label for="contacts-edit-input-tel">Phone:</label>
<input name="phoneNumber" id="contacts-edit-input-tel" class="phoneNumber" data-clear-btn="true" value="" type="tel"/>
</div>
<div>
<label for="contacts-edit-input-email">Email:</label>
<input name="email" id="contacts-edit-input-email" class="email" data-clear-btn="true" value="" placeholder="name@company.domain" type="email"/>
</div>
<div>
<label for="contacts-edit-input-date">Birth Date:</label>
<input name="birthDate" id="contacts-edit-input-date" class="birthDate" data-clear-btn="true" value="" placeholder="YYYY-MM-DD" type="date" min="1900-01-01"/>
</div>
<div>
<input name="id" id="contacts-edit-input-id" value="" type="hidden"/>
</div>
<input id="submit-edit-btn" data-inline="true" type="submit" value="Save" />
<input id="clear-edit-btn" data-inline="true" type="reset" value="Clear" />
<input id="cancel-edit-btn" data-inline="true" type="reset" value="Cancel" />
</form>
</div>
...
</div>
Table 3.6. Form Widget Attributes
| Name | Description |
|---|---|
| form name="contacts-edit-form" | The name of the form being added. |
| id | Specifies which form is being added. In this case, the "contacts-edit-form" is being added. |
| class="contact_info" | Declares the class properties. |
| method="post" | Specifies how any data typed into the form is sent. In this example, data is sent as a post transaction. This means that the data displays in the body of the request. |
| data-ajax="false" | Disables automatic page transitions when forms are submitted. This keeps forms on screen and prevents applications from redirecting to other pages. |
Table 3.7. First Name Field Attributes
| Name | Description |
|---|---|
| label for="contacts-edit-input-firstName" | Specifies the part of the form defined in the quotation marks. In this case, it specifies the First Name text field. |
| input name="firstName" | Specifies a text-box field. In this case, it is the field for entering the first name of a contact. |
| id | A unique name for referring to the text-box field. It is stored locally for quick access. |
| class="name" | Specifies the class name for the text box. The jQuery Mobile CSS file adds a stylized graphical visualization of the text box. |
| data-clear-btn"true" | Adds to the layout a button that clears data. Click this button to remove all user-entered information from the text box. |
| placeholder="Enter a first name." | Adds grayed-out text to the text box. In this case, it reads “Enter a first name”. The text indicates that the user can type into the field. The grayed-out text disappears when the user enters input into the field. |
| type="text" | Indicates the type of input that is accepted. In this case, text entries are accepted as input. |
The About page contains a list containing two links for learning more about JBoss EAP. The
<li> attribute indicates that the links are list items:
<div data-role="page" id="about-page" class="ui-page-theme-a" >
...
<div role="main" class="ui-content" >
<p>Learn more about Red Hat JBoss Enterprise Application Platform 6.</p>
<ul>
<li><a href="https://access.redhat.com/site/documentation/JBoss_Enterprise_Application_Platform/">Documentation</a></li>
<li><a href="http://red.ht/jbeap-6">Product Information</a></li>
</ul>
</div>
</div>3.2.4. The Panel
The panel stores additional options without cluttering the screen. Clicking on the Menu button in the header expands this panel. The panel displays a list of links.
The contacts-mobile-basic example has 5 panels, 1 panel per page. The panel for the first page is different, containing four links: Add Contact, Detailed List, About, and Themes. The panels for the other four pages of the application are the same and have three links: Add Contact, List view, and About.
3.2.4.1. Panel Statement
Each panel is generated by a panel widget. The panel widget is nested inside each page widget, as demonstrated here for the first page:
<div data-role="page" id="contacts-list-page" class="ui-page-theme-a" data-url="/jboss-contacts-mobile-basic/"> <div data-role="panel" id="contacts-list-page-menu-panel"> ... </div> ... </div>
The panel widget has only the data-role and id attributes. No other attributes are defined in the panel widget.
3.2.4.2. Panel Content
The panel contains a listview widget with links, as demonstrated here for the panel of the first page:
<div data-role="panel" id="contacts-list-page-menu-panel">
<ul data-role="listview" id="contacts-list-page-menu-panel-listview">
<li><a href="#contacts-add-page">Add Contact</a></li>
<li><a href="#contacts-detail-list-page">Detailed List</a></li>
<li><a href="#about-page">About</a></li>
<li><a href="#contacts-theming-dialog" data-rel="popup" data-position-to="window">Themes</a></li>
</ul>
</div>
Table 3.8. Panel Content Attributes
| Name | Description |
|---|---|
| <li> | Specifies that the link is an item on a list. |
In this example, the listview widget has only "data-role" and "id" as defined attributes.
3.2.5. The Dialog
On the Edit Contact screen, there is a Delete button in the header. The Delete button removes the contact from the application. When a user clicks the button, a window opens to confirm the deletion.
3.2.5.1. Dialog Statement
The dialog is implemented with the popup widget. This widget is added at the bottom of the
contacts-edit-page:
<div data-role="page" id="contacts-edit-page" class="ui-page-theme-a" > ... <div data-role="popup" id="contact-delete-dialog" data-overlay-theme="b"> ... </div> </div>
Table 3.9. Dialog Attributes
| Name | Description |
|---|---|
| data-role | Indicates the type of information that displays, in this case, a popup window. |
| id | The identifying name for the dialog that opens when the Delete button is activated, in this case, “contact-delete-dialog”. |
3.2.5.2. Dialog Content
The dialog widget contains a header and a content widget. The content widget contains a header
Are you sure you want to Delete? and two button widgets corresponding to Yes and No.
<div data-role="popup" id="contact-delete-dialog" data-overlay-theme="b">
<div data-role="header">
<h1>Delete Contact</h1>
</div>
<div role="main" class="ui-content">
<!-- PUT and DELETE are not supported in an HTML form. Please see http://www.w3.org/TR/2010/WD-html5-diff-20101019/#changes-2010-06-24 That is why we are using a dialog with simple Yes/No. The ID of the Contact to be deleted will programatically be pulled in from the Update form. -->
<h3>Are you sure you want to Delete?</h3>
<a href="#contacts-list-page" id="confirm-delete-button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Yes</a>
<a href="#contacts-list-page" id="cancel-delete-button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">No</a>
</div>
</div>
Table 3.10. Dialog Content Attributes
| Name | Attribute |
|---|---|
| ui-content | Indicates the type of information that displays, in this case, the dialog content. |
| ui-btn-b | Sets the color swatch for the button, here "b. Use a single letter from a-z that maps to the swatches included in your theme. |