Examining the source code of the examples
Legal Notice
Abstract
Chapter 1. Introduction to Red Hat JBoss Web Framework Kit
1.1. About Red Hat JBoss Web Framework Kit
1.2. About the JBoss Web Framework Kit Tiers
- Tier 1 - Included Components
- These are components that are based wholly or partly on open source technologies that support broad collaboration and where Red Hat maintains a leadership role; as such Red Hat is able to support these components and provide upgrades and fixes under our standard support terms and conditions.
- Tier 2 - Tested Frameworks
- These are third-party frameworks where Red Hat does not have sufficient influence and does not provide upgrades and fixes under our standard support terms and conditions. Commercially reasonable support is provided by Red Hat Global Support Services for these frameworks.
- Tier 3 - Frameworks in Tested Examples
- These are third-party frameworks where Red Hat does not have sufficient influence and does not provide upgrades and fixes under our standard support terms and conditions. Red Hat supports the examples these frameworks are used in and the generic use cases that these examples intend to demonstrate.
- Tier 4 - Confirmed Frameworks
- These are third-party frameworks that do not receive any support from Red Hat, but Red Hat verifies that the frameworks run successfully on Red Hat JBoss Enterprise Application Platform. Frameworks and versions not listed here have not been explicitly tested and certified, and thus may be subject to support limitations.
1.3. About the JBoss Web Framework Kit Distribution
- The component frameworks are available from the Red Hat Customer Portal. They are distributed in two alternative formats: a binary for each framework or together as one Maven repository. In addition, the source code for each framework is provided for inspection.
- The third party frameworks are not distributed by Red Hat and each must be obtained from its own source.
.zip file available to download from the Red Hat Customer Portal or from http://www.jboss.org/developer-materials/ on the JBoss Developer Framework website.
- TicketMonster is a moderately complex application demonstrating a number of the JBoss Web Framework Kit frameworks working together.
- Quickstarts and Maven archeypes illustrate subsets of the JBoss Web Framework Kit frameworks used to create simple applications.
- RichFaces, Snowdrop and Seam demonstrations showcase the power of each framework in web application development.
Chapter 2. Explore the JBoss Web Framework Examples
2.1. About Explore the Examples
2.1.1. Exploring the Examples Overview
2.2. Explore the Examples System Requirements
2.2.1. System Requirements
- Red Hat JBoss Enterprise Application Platform (version specific to this JBoss Web Framework Kit release)
- JBoss EAP Maven repository (version matching installed JBoss EAP). Download this from the Red Hat Customer Portal and extract its contents.
- JBoss Web Framework Kit Maven repository (version matching this release). Download this from the Red Hat Customer Portal and extract its contents.
- Java. The instance of Java installed on your system must satisfy the requirements of Red Hat JBoss Enterprise Application Platform.
Chapter 3. The contacts-mobile-basic Example
3.1. Running the Example
3.1.1. Obtaining the Example
Procedure 3.1. Obtaining the Example from the Red Hat Customer Portal
- Log into the Red Hat Customer Portal at http://access.redhat.com.
- Locate the downloads for this release version of Red Hat JBoss Web Framework Kit.
- Download the
.zipfile for Red Hat JBoss Web Framework Kit quickstarts, which contains the contacts-mobile-basic example. - Extract the contents of the downloaded
.zipfile to the location where you want to keep the quickstarts source code.
3.1.2. Building the Example
Procedure 3.2. Building contacts-mobile-basic with Maven
- On the command line, navigate to the directory containing the contacts-mobile-basic example.
- Run the following command to build the example:
$mvn clean package
3.1.3. Deploying the Example
Procedure 3.3. Deploying contacts-mobile-basic to the Server
- In the directory containing JBoss EAP, run the following command to start the server:
$./bin/standalone.sh - Open a new command line instance and navigate to the directory containing the contacts-mobile-basic example.
- Enter the following command to deploy the contacts-mobile-basic example:
$mvn jboss-as:deploy - Open a web browser and access the example at http://localhost:8080/jboss-contacts-mobile-basic/.
3.2. Exploring the Source Code
src/main/webapp/index.html.
3.2.1. About jQuery Mobile
3.2.2. The jQuery Mobile Declarations
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>
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
- an initial page statement
- common content such as headers and footers
- unique page content
3.2.3.1. Page Statement
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>
<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
<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>
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. |
<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>
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
<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. |
<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. |
<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
3.2.4.1. Panel Statement
<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>
3.2.4.2. Panel Content
<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. |
3.2.5. The Dialog
3.2.5.1. Dialog Statement
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
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. |
Chapter 4. The kitchensink-angularjs-bootstrap Example
4.1. Running the Example
4.1.1. Obtaining the Example
Procedure 4.1. Downloading the Example from the Red Hat Customer Portal
- Log into the Red Hat Customer Portal at http://access.redhat.com.
- Locate the downloads for this version of Red Hat JBoss Web Framework Kit.
- Download the
.zipfile for Red Hat JBoss Web Framework Kit quickstarts, which contains the kitchensink-angularjs-bootstrap example. - Extract the contents of the downloaded
.zipfile to the location where you want to keep the quickstarts source code.
4.1.2. Building the Example
Procedure 4.2. Building kitchensink-angularjs-bootstrap with Maven
- On the command line, navigate to the directory containing the kitchensink-angularjs-bootstrap example.
- Run the following command to build the example:
$mvn clean package
4.1.3. Deploying the Example
Procedure 4.3. Deploying kitchensink-angularjs-bootstrap to the Server
- In the directory containing JBoss EAP, run the following command to start the server:
$./bin/standalone.sh - Open a new command line instance and navigate to the directory containing the kitchensink-angularjs-bootstrap example.
- Enter the following command to deploy the kitchensink-angularjs-bootstrap example:
$mvn jboss-as:deploy - Open a web browser and access the example at http://localhost:8080/jboss-kitchensink-angularjs-bootstrap/.
4.2. Exploring the Source Code
src/webapp/index.html. The user interface is generated with CSS and JavaScript, the libraries for which are located in kitchensink-angularjs-bootstrap/src/main/webapp/css and kitchensink-angularjs-bootstrap/src/main/webapp/js/libs respectively.
4.2.1. Bootstrap
4.2.1.1. About Bootstrap
4.2.1.2. The Bootstrap Declarations
index.html file, located in WEB-INF. These library declarations occur in the <head> section. The CSS and JavaScript libraries are declared:
<head> ... <link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> <link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" /> ... <!-- Load Bootstrap JS components --> <script src="js/libs/bootstrap.js"></script> ... </head>
Table 4.1. Bootstrap Declarations
| Name | Description |
|---|---|
bootstrap.css | Contains the columns and rows that Bootstrap requires to create a grid. Also contains information on margin sizes, coloring, and fonts. index.html uses the bootstrap.css stylesheet to generate columns (<col-*>) in the container section of the body. |
bootstrap-theme.css | Contains graphical and theme elements for the user interface, such as text shadows, buttons, and navigation bars. index.html uses this to generate the appearance of the buttons. (For example, class="btn btn-default".) |
bootstrap.js | Contains all the Bootstrap JavaScript plugins. This includes transition effects, button functions, and pop-up text. In this example, JavaScript implementations are performed by AngularJS. |
4.2.1.3. The Layout
- A header that displays a JBoss EAP graphic and welcome message
- A footer that displays the text “This project was generated from a Maven archetype from JBoss.”
- Space to insert the form
<section id="container" class="container"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="dualbrand img-responsive pull-right"> <img src="gfx/rhjb_eap_logo.png" /> </div>
Table 4.2. Layout Attributes
| Name | Description |
|---|---|
| section id | A unique identifier given to refer to the object. (In this case, “container”.) |
| class | Defines what sort of object is being inserted. In this case, it is a container. The container is used to nest columns and rows. |
| <div class="col-xs-12 col-sm-12 col-md-12"> | Defines the size of the container. This is determined by columns, referenced to as col-xs (extra small devices), col-sm (small devices), and col-md (medium devices). All these columns are followed by a 12, indicating that they are 12 columns wide. Depending on the size of the screen (extra small, small or medium), the container scales the columns to fit. |
| <div class="dualbrand img-responsive pull-right"> | Makes the layout responsive to the device it is being viewed on. The dualbrand variable is a style class. The img-responsive variable scales the image (in this case, rhjb_eap_logo.png) to fit the size of the screen. The pull-right variable ensures the container floats to the right of the screen. This prevents it from distorting the layout when the user views and moves about the application. |
4.2.1.4. The Content
index.html:
<div id="content" class="col-xs-12 col-sm-12 col-md-8" ng-view> <!-- This div will be templated by AngularJS --> [Template content will be inserted here] </div>
Table 4.3. Content Attributes
| Name | Description |
|---|---|
| id="content" | A unique identifier given to refer to the object. (In this case, "content".) |
| class="col-xs-12 col-sm-12 col-md-8" | Determines the scaling of the content. In this case, the web form is the content. Screens defined as "extra small" and "small" display the web form over the width of 12 columns. A "medium-sized" screen displays the web form over 8 columns. In a desktop browser, the web form displays horizontally. On a mobile device, the web form displays vertically. |
4.2.1.5. The Side Bar
<aside id="aside" class="col-xs-12 col-sm-12 col-md-4"> <div class="row"> ... </div> </aside>
Table 4.4. Side Bar Attributes
| Name | Description |
|---|---|
| aside | Creates the side bar. In a web browser, this bar displays on the top right of the homepage. When scaled down to adhere to a mobile device screen, the bar moves to the bottom of the homepage. |
| id | A unique identifier that refers to the object. (In this case, “aside”.) |
| class | Defines the size of the side bar on extra small, small, and medium screens (12, 12, and 4 columns wide respectively). This data is drawn from Bootstrap.css. The col-xs and col-sm variables in this example display content over 12 columns, so as to take up the whole width of the layout on a mobile device. The col-md variable displays information over 4 columns, which exhausts the layout width unconsumed by content on medium-sized screens. |
| <div class="row"> | Creates a row for the panel's content. Each row contains a group of columns and is nested inside a container. Adding another row adds another group of columns to which content may be added. |
4.2.2. AngularJS
4.2.2.1. About AngularJS
index.html file. These libraries load when the application launches. The libraries do not wait for a response from the server before loading. AngularJS objects are defined with <ng> tags.
4.2.2.2. The AngularJS Declarations
index.html file. The folders are located in src/main/webapp/js/libs. These library declarations occur in the "<head>" section of the example and apply to the entire application:
<head>
...
<!-- Load angularjs -->
<script src="js/libs/angular.js"></script>
<!-- Load angularjs-route, which allows us to use multiple views displayed through application routes -->
<script src="js/libs/angular-route.js"></script>
<!-- Load angularjs-resource, which allows us to interact with REST resources as high level services -->
<script src="js/libs/angular-resource.js"></script>
...
</head>Table 4.5. AngularJS Declarations
| Name | Description |
|---|---|
angular.js | Contains the AngularJS JavaScript plugins and directives (attributes). In this example, it contains the elements needed to generate the form. This is the primary library. |
angular-resource.js | Contains JavaScript for implementing RESTful data sources. In this example, it is used when generating the list of contacts displayed at the bottom of the web form. |
angular-route.js | Contains the JavaScript elements used to respond to input by directly updating the layout. It implements the ngView directive that renders the layout. |
4.2.2.3. The Member Registration Form
home.html file. They are responsive to user input and have been designed with mobile devices in mind. The properties and functions of these elements are discussed in detail in this section.
4.2.2.3.1. Form Statement
home.html file in src/main/webapp/partials. This file loads the form, which is inserted in the body of the application:
<!-- This is a partial, and is templated by AngularJS -->
<div>
<!-- Standard HTML form, with the submit function bound to the register() function defined in the the controller -->
<form name="regForm" class="form-horizontal" ng-submit="register()">
<h2>Member Registration</h2>
<fieldset>
...
</fieldset>
</form>
....
</div>Table 4.6. Form Attributes
| Name | Description |
|---|---|
| name="regForm" | Identifies the object is a form. A unique name is entered to identify the form in the layout. In this case, it is named regForm. |
| class="form-horizontal" | Ensures that the form fills the entire width of the layout and that the form uses all available space. A "form-vertical" attribute would ensure that the form takes up the entire length of the available space. |
| ng-submit="register()" | Reloads the form using AngularJS when a member is registered. It refreshes instantly instead of pulling data from the server. |
4.2.2.3.2. Form Fields
<fieldset>
<legend>Register a member:</legend>
<!-- Each input is bound to a property on the prototype newMember object -->
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" ng-model="newMember.name" placeholder="Your Name" required autofocus/>
<span class="error help-block" ng-show="regForm.name.$error.required">required</span>
<span class="error help-block" ng-show="errors.name">{{errors.name}}</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" name="email" id="email" ng-model="newMember.email" placeholder="Your Email" required />
<span class="error help-block" ng-show="regForm.email.$error.required">required</span>
<span class="error help-block" ng-show="regForm.email.$error.email">not a valid email</span>
<span class="error help-block" ng-show="errors.email">{{errors.email}}</span>
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-sm-2 control-label">Phone #:</label>
<div class="col-sm-10">
<input type="tel" name="phoneNumber" id="phoneNumber" ng-model="newMember.phoneNumber" ng-pattern="/^[0-9]{10,12}$/" placeholder="Your Phone #" required />
<span class="error help-block" ng-show="regForm.phoneNumber.$error.required">required</span>
<span class="error help-block" ng-show="regForm.phoneNumber.$error.pattern">must be between 10 and 12 digits</span>
<span class="error help-block" ng-show="errors.phoneNumber">{{errors.phoneNumber}}</span>
</div>
</div>
....
</fieldset>Table 4.7. Common Attributes
| Name | Description |
|---|---|
| input type | Specifies the kind of data that can be added to the form, in this case, text. |
| name | Where the title of the field is specified. These fields are names name, email, and phoneNumber respectively. |
| ng-model | Creates a two-way binding process model. It is triggered by the input, in this case, when a user enters text. When the input is invalid, it alerts the user with a warning that displays beneath the name field. |
| placeholder | Adds grayed-out text to indicate the field required input, for example, Your Name. The text disappears when the user starts typing. |
| ng-show | Displays events when triggered. In this example, it is triggered when the required input is missing, resulting in a red error message displaying beneath the field. |
| required | Requires the field to contain input before it is submitted. The form will not validate if the field is left blank. |
Table 4.8. Unique Attributes
| Name | Description |
|---|---|
| autofocus | The Name field contains an autofocus attribute. This activates the field when the application deploys. In this example, it adds a flashing text cursor to the first field of the form to prompt the user to add input. |
| ng-pattern | The Phone # field contains the ng-pattern directive. This defines which characters are allowed. In this example, it allows only umerical characters ([0-9]) that are 10-12 numbers long ({10,12}). |
4.2.2.3.3. Form Buttons
home.html file:
<fieldset>
...
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" ng-disabled="regForm.$invalid" id="register" value="Register" class="btn btn-primary" />
<input type="button" ng-click="reset()" name="cancel" id="cancel" value="Cancel" class="btn btn-default" />
</div>
</div>
</fieldset>
Table 4.9. Button Attributes
| Name | Description |
|---|---|
| input type | Defines which of the elements displays. In this example, both elements are buttons: the first is used to submit the form and the second is used to cancel it. |
| ng-disabled | Stops the browser from submitting the form if the input is incorrect. In this case, it disables the validation button if the registration form is invalid. |
| ng-click | Specifies which action the button takes when it is clicked. In this case, it contains a reset command. Clicking the Cancel button resets the form to its default state. |
4.2.2.3.4. Form Validation
<fieldset>
...
<!-- We output a list of success messages (appropriately styled!) for the form. -->
<ul ng-hide="!successMessages" class="success">
<li ng-repeat="message in successMessages">{{message}}</li>
</ul>
<!-- Output the list of error messages if any. -->
<ul ng-hide="!errorMessages" class="error">
<li ng-repeat="message in errorMessages">{{message}}</li>
</ul>
...
</fieldset>Table 4.10. Validation Attributes
| Name | Description |
|---|---|
| ng-hide | Hides data where specified. If there is no error message, the error message dialogue is hidden and not appear on screen. |
| ng-repeat | Repeats a set of data from a specified location. In this case, it replicates the list of the messages in the defined attribute (successMessages or errorMessages). |
4.2.2.4. The Members List
4.2.2.4.1. List Statement
home.html file:
<!-- This is a partial, and is templated by AngularJS -->
<div>
...
<!-- A list of registered members -->
<h2>Members</h2>
<!-- If there are no members registered, instead of showing the table, we show a simple message. -->
<em ng-show="members.length == 0">No registered members.</em>
<div class="table-responsive">
<table ng-hide="members.length == 0" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone #</th>
<th>REST URL</th>
</tr>
</thead>
<!-- The table is built using the AngularJS repeat function, iterating over the members variable, and ordering by the property specified in the orderBy variable -->
<tr ng-repeat="member in members | orderBy:orderBy">
<td>{{member.id}}</td>
<td>{{member.name}}</td>
<td>{{member.email}}</td>
<td>{{member.phoneNumber}}</td>
<td><a href="rest/members/{{member.id}}">/rest/members/{{member.id}}</a>
</td>
</table>
</div>
...
</div>
Table 4.11. List Attributes
| Name | Description |
|---|---|
| ng-show | Displays a message when triggered. In this case it has been defined to display a “No registered members” message when no members have been added. |
| ng-hide | Does not display the specified data if certain requirements have not been met. If there are no registered members, it hides the members list so it does not appear on screen. |
| ng-repeat | Reiterates the list of members that have been submitted so they display in the list. It contains a orderBy attribute, which lists the members in alphabetical order by default. |
4.2.2.4.2. Refresh Button
<!-- This is a partial, and is templated by AngularJS -->
<div>
...
<div>
<!-- The table has a button to manually refresh the values, in case, for example, someone else adds a member -->
<input type="button" ng-click="refresh()" name="refresh"
id="refresh" value="Refresh" class="btn btn-default" />
</div>
</div>Table 4.12. Refresh Button Attributes
| Name | Description |
|---|---|
| ng-click | Specifies which action the button takes when it is clicked. In this case it contains a refresh command. Clicking the refresh button reloads the values dynamically in the members list. |
Chapter 5. Next
5.1. Further Reading
README.md file. This file contains instructions for building and deploying the example.




