Learn Hybrid Mobile Apps Development using PhoneGap Online

CORPORATE TRAINING BOOK – MOBILE APPS DEV.
Copyrights © 2017 BigSpire Software Private Limited. All Rights Reserved
Name:
Email:
Mobile:

CORPORATE TRAINING BOOK – MOBILE APPS DEV.
Copyrights © 2017 BigSpire Software Private Limited. All Rights Reserved
Page No. 01
Page No. 62
Page No.131Employee
App

CORPORATE TRAINING BOOK – JQUERY MOBILE
Copyrights © 2017 BigSpire Software Private Limited. All Rights Reserved 1
TABLE OF CONTENTS
1. Objective............................................................................................................... 03
2. Introduction.......................................................................................................... 03
3. About.................................................................................................................... 03
4. Project................................................................................................................... 03
5. Download.............................................................................................................. 03
6. Advantages........................................................................................................... 04
7. CSS Framework.................................................................................................... 05
7.1 Classes.................................................................................................... 05
7.2 Grid Layout.............................................................................................. 09
7.3 Responsive Grid...................................................................................... 10
7.4 Theme....................................................................................................... 12
8. Events.................................................................................................................... 13
9. Icons...................................................................................................................... 19
10. Methods................................................................................................................. 20
10.1 Path........................................................................................................... 27
11. Reference.............................................................................................................. 32
11.1 Data Attributes......................................................................................... 32
11.2 Configuring Defaults............................................................................... 42
12. Widgets.................................................................................................................. 45
13. Demos.................................................................................................................... 56
13.1 Pages....................................................................................................... 56
13.2 Panel Widgets......................................................................................... 60
13.3 Datepicker............................................................................................... 62

1. OBJECTIVE
2. INTRODUCTION
Query mobile framework takes the "write less, do more" mantra to the next level:
instead of writing unique applications for each mobile device or os, the jquery
mobile framework allows you to design a single highly-branded responsive web
site or application that will work on all popular smartphone, tablet, and desktop
platforms
3. ABOUT
 jQuery Mobile is a HTML5-based user interface system designed to make
responsive web sites and apps that are accessible on all smartphone,
tablet and desktop devices.
 It is built on the rock-solid jQuery and jQuery UI foundation, and offers
Ajax navigation with page transitions, touch events, and various widgets.
 Its lightweight code is built with progressive enhancement, and has a
flexible, easily themeable design.
4. PROJECT
jQuery Mobile is a project of the jQuery Foundation. It is completely open source
and is one of the most popular Mobile frameworks thanks to the efforts of all
contributors.
And we are never done! Check out roadmap to see what the jQuery Mobile team
is planning to work on.
5. DOWNLOAD
We recommend using our tool to build a custom bundle that contains only the
components you need. The builder generates a custom JavaScript file, as well as
full and structure-only stylesheets for production use.
Latest stable version 1.4.5
The objective of this book to understand the jquery
mobile development using JQuery in detailed way
with real time examples for effective learning.
The objective of this book is to understand the jquery mobile
development using JQuery in detailed way with real time examples for
effective learning.

Google CDN
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css
6. ADVANTAGES
Wide browser and device coverage - using progressive enhancement, your
website is able to be seen by the widest number of browsers and devices.
Touch-friendly form inputs and UI widgets - form inputs are enhanced to be
touch-friendly, including the addition of a set of touch-friendly UI widgets.
Responsive web design ready - jQuery Mobile is a 'mobile-first' framework, not
'mobile only'.
Layout and theming engine - highly extensible and customisable theme and
layout engine.
Ajax page navigation model - load new pages faster using Ajax and HTML5
pushstate instead of full page refreshes.
jQuery Mobile has broad support for the vast
majority of all modern desktop, smartphone,
tablet, and e-reader platforms

7. CSS FRAMEWORK
1) Classes
2) Grid Layout
3) Responsive Grid
4) Theme
7.1 CLASSES
CSS classes for common styles
1) Style Classes
jQuery Mobile uses the following style classes:
Classes Description
ui-corner-all Adds rounded corners to the element.
ui-shadow Adds an item shadow around the element.
ui-overlay-
shadow
Adds an overlay shadow around the element. The
intended effect is for the element to appear to float
above other elements.
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.
jQuery Mobile offers CSS-based enhancements for
common user interface elements.

2) Widget-specific classes
Classes Description
ui-collapsible-inset The collapsible widget has horizontal margins,
borders, and rounded corners when this class is
applied.
ui-listview-inset The listview widget has horizontal margins,
borders, and rounded corners when this class is
applied.
3) Button-specific classes
In addition to the style classes, you can add the following classes to a
(anchor) and button elements to render them touch-friendly:
Basic options
Classes Description
ui-btn You must add this class to indicate that the
element is to be styled as a button. This is a
prerequisite for adding any other button-related
classes.
ui-btn-inline Displays the button inline. This means that it will
only consume as much space as is needed for the
label.
ui-shadow-icon Draws a shadow around the icon.

Icon positioning
Icons Description
ui-btn-icon-top The icon appears above the text
ui-btn-icon-right The icon appears to the right of the text
ui-btn-icon-
bottom
The icon appears below the text
ui-btn-icon-left The icon appears to the left of the text
ui-btn-icon-notext The button text is suppressed, and only the icon is
shown. The result is a circular button the size of the
icon.
Theme
Themes Description
ui-btn-[a-z] Sets the color scheme (swatch) for the button.
Use a single letter from a-z that maps to the
swatches included in your theme. For
example: ui-btn-b
4) Icon classes
Icons are used by a variety of widgets. The table below lists all the available
icon classes. The widgets which support an icon usually have an option named
"icon". The value for that option is the name of the icon, which is appended to
the prefix ui-icon- to create the icon class name. In the class list below, the
icon names are emphasized as part of the icon class name.
ui-icon-alert An exclamation mark inside a triangle.

ui-icon-arrow-l An arrow pointing left (←).
ui-icon-arrow-r An arrow pointing right (→).
ui-icon-arrow-u An arrow pointing up (↑).
ui-icon-arrow-d An arrow pointing down (↓).
ui-icon-back A curved arrow arcing counterclockwise upwards.
ui-icon-bars Three horizontal bars one above the other.
ui-icon-carat-b A carat pointing down (v).
ui-icon-carat-l A carat pointing left (<).
ui-icon-carat-r A carat pointing right (>).
ui-icon-carat-t A carat pointing up (^).
ui-icon-check A checkmark (✓).
ui-icon-delete A diagonal cross similar to (✕).
ui-icon-edit A pencil - similar to (✎) but pointing to the lower
left.
ui-icon-forward A curved arrow arcing clockwise upwards.
ui-icon-gear A gear .
ui-icon-grid A 3✕3 grid.
ui-icon-home A house similar to (⌂).

ui-icon-minus A "minus" sign (-).
ui-icon-plus A "plus" sign (+).
ui-icon-refresh A circular arrow similar to (⟳).
ui-icon-search A magnifying glass.
ui-icon-star A star similar to (✭).
5) Theme-related classes
The class prefixes in the table below are used for applying a swatch to various
parts of the user interface. The actual class name is constructed by appending
the swatch letter (a-z) to the prefix. For example, the class ui-body-a is the
swatch applied to the page.
ui-bar-[a-z] Sets the color scheme (swatch) for a bar. This
includes headers and footers, or bars you include
in the page.
ui-body-[a-z] Sets the color scheme (swatch) for a content
block. This includes page content panes
(deprecated as of 1.4.0), listview items, popups,
collapsibles, the loader widget, sliders, and
panels.
ui-btn-[a-z] Sets the color scheme (swatch) for a button.
ui-group-theme-[a-z] Sets the color scheme (swatch) for controlgroups,
listviews, and collapsible sets (accordions).
ui-overlay-[a-z] Sets the color scheme (swatch) for backgrounds
such as those of popup widgets, and page
containers.
7.2 GRID LAYOUT
Multi-column layout grids

Using multiple column layouts isn't generally recommended on a mobile device
because of the narrow screen width, but there are times where you may need to
place small elements side-by-side (like buttons or navigation tabs, for example).
There are four preset layouts that can be used in any situation that requires
columns:
 two-column (using the ui-grid-a class)
 three-column (using the ui-grid-b class)
 four-column (using the ui-grid-c class)
 five-column (using the ui-grid-d class)
Two column grids
To build a two-column (50/50%) layout, start with a container with a class of ui-
grid-a, and add two child containers inside it classed with ui-block-a for the first
column and ui-block-b for the second:
Example:
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text
inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text
inside will wrap</div>
</div>
The above markup produces the following content layout:
7.3 RESPONSIVE GRID
Reponsive layout grids
The jQuery Mobile framework provides a simple
way to build CSS-based columns through a block
style class convention called ui-grid.

When using layout grids for building full-level layouts, it may make sense to apply
responsive web design (RWD) principles to ensure that the layout adapts to a wide
range screen widths.
The simplest form of responsive behavior swaps from a stacked layout on narrow
screens like a smartphone to the multi-column grid layouts at wider screens. This
can be done by targeting styles to specific screen widths by using CSS media
queries.
Making the grids responsive
By default, the grid classes will result in a multi column layout across all screen
widths. The styles to make the grids responsive are added by applying a media
query with rules to switch to the stacked style presentation below a specific screen
width.
Without the custom styles, our grid will be a 3 column layout across all screen
widths:
In our custom styles, we want this grid to stack at narrow widths, then switch to a
standard 3 column layout. At very wide screen widths, we want first column to take
up 50% of the width, like this:
To make this responsive, start by adding the my-breakpoint class to the grid
container that references the custom breakpoint in your custom stylesheet:
<div class="ui-grid-b my-breakpoint">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>

<div class="ui-block-c">Block C</div>
</div>
7.4 THEME
Jquery mobile theme
Theming Concepts
The jQuery Mobile theme provides the CSS framework necessary for providing a
consistent and touch-friendly look and feel for your widgets across platforms. It is
built around the following essential concepts:
Swatches
A swatch is one of several colour schemes provided by your theme. We use
single-letter designations for swatches. The default jQuery Mobile theme provides
two swatches. The "a" swatch is a neutral, gray swatch, and the "b" swatch has a
darker color scheme designed to contrast with the "a" swatch. You can use "b" to
draw special attention to elements in a user interface styled with "a", and vice
versa.
Active state
The theme defines an "active" state separately from all the swatches. The
intention is to give immediate feedback upon a user action if there should be a
brief processing delay. For example, most mobile devices implement a 300ms
delay between the time when the user lifts her finger from the touchscreen and the
triggering of the "click" event. jQuery Mobile adds the "active" state to a button
whenever the device is poised to emit a "click" event so the user receives
immediate feedback that the application is committed to processing the "click" in
the next 300ms.
Theme inheritance
You do not need to specify a swatch for every widget you create. Despite this,
most widgets have a "theme" option set to null by default so you may override the
swatch for an individual widget.

8. EVENTS
1) Hashchange
Enables bookmarkable #hash history.
jQuery( ".selector" ).on( "hashchange", function( event ) { ... } )
The jQuery Mobile .hashchange() event handler enables very basic
bookmarkable #hash history by providing a callback function bound to the
window.onhashchange event. The onhashchange event fires when a window's
hash changes.
In browsers that support it, the native HTML5 window.onhashchange event is
used. In IE6/7 (and IE8 operating in "IE7 compatibility" mode), a hidden iframe
is created to allow the back button and hash-based history to work.
This plugin extends jQuery's built-in method. If jQuery Mobile is not loaded,
calling the .hashchange() method may not fail directly, as the method still
exists. However, the expected behavior will not occur.
Example:
$(function() {
// Bind an event to window.onhashchange that, when the hash changes,
gets the
// hash and adds the class "selected" to any matching nav link.
$( window ).hashchange(function() {
var hash = location.hash;
// Set the page title based on the hash.
document.title = "The hash is " + ( hash.replace( /^#/, "" ) || "blank" ) + ".";
// Iterate over all nav links, setting the "selected" class as-appropriate.
$( "#nav a" ).each(function() {
var that = $( this );
that[ that.attr( "href" ) === hash ? "addClass" : "removeClass" ](
"selected" );
});
jQuery Mobile offers several custom events that
build upon native events to create useful hooks for
development.

});
// Since the event is only triggered when the hash changes, we need to
trigger
// the event now, to handle the hash the page may have loaded with.
$( window ).hashchange();
});
iFrame source: example1.html#test1
Output:
2) Mobileinit
Event indicating that jQuery Mobile has finished loading.
jQuery( ".selector" ).on( "mobileinit", function( event ) { ... } )
This event is triggered after jQuery Mobile has finished loading, but before it has
started enhancing the start page. Thus, handlers of this event have the
opportunity to modify jQuery Mobile's global configuration options and all the
widgets' default option values before they influence the library's behavior.
You must connect a handler to the mobileinit event before you load jQuery
Mobile, because it is triggered as part of the library's loading process. The
easiest way of achieving this is to place a script tag after the script tag that
loads jQuery, and before the script tag that loads jQuery Mobile:
<script>
// Update configuration to our liking
$( document ).on( "mobileinit", function() {
// We want popups to cover the page behind them with a dark background
$.mobile.popup.prototype.options.overlayTheme = "b";
// Set a namespace for jQuery Mobile data attributes
$.mobile.ns = "jqm-";
});

</script>
Output:
3) Pagebeforechange
Triggered twice during the page change cyle: First prior to any page loading or
transition and next after page loading completes successfully, but before the
browser history has been modified by the navigation process.
jQuery( ".selector" ).on( "pagebeforechange", function( event ) { ... } )
When received with data.toPage set to a string, the event indicates that
navigation is about to commence. The value stored in data.toPage is the URL
of the page that will be loaded.
When received with data.toPage set to a jQuery object, the event indicates that
the destination page has been loaded and navigation will continue.
If the page change cycle was initiated programmatically, and, instead of a URL
a jQuery object containing a page was given, then the event will be triggered
both times with data.toPage set to the jQuery object containing the destination
page.
The pagebeforechange event is triggered either by explicit navigation on the
part of the user (e.g. by clicking on a link or by running code that results in a call
to the pagecontainer change() method), or by implicit navigation caused by the
user clicking the browser's "Back" or "Forward" buttons.
Explicit navigation results in both pagebeforechange events being triggered
before a new entry is added to the browser's navigation history.

Implicit navigation results in both pagebeforechange events being triggered
after the browser's navigation history has been updated.
In addition to the event parameter, handlers of this event will receive a second
parameter, data. The second parameter is an object containing the following
properties:
 toPage (object or string)
This property represents the page the caller wishes to make active. It can
be either a jQuery collection object containing the page DOM element, or an
absolute/relative url to an internal or external page. The value exactly
matches the 1st arg to the changePage() call that triggered the event.
 options (object)
This object contains the configuration options to be used for the current
changePage() call.
It should be noted that callbacks can modify both the toPage and options
properties to alter the behavior of the current changePage() call. So for
example, the toPage can be mapped to a different url from within a callback
to do a sort of redirect.
4) Pagebeforecreate
Triggered on the page being initialized, before most plugin auto-initialization
occurs.
jQuery( ".selector" ).on( "pagebeforecreate", function( event ) { ... } )
5) Pagebeforehide
Triggered on the "fromPage" we are transitioning away from, before the actual
transition animation is kicked off.
6) Pagebeforeload
Triggered before any load request is made.
jQuery( ".selector" ).on( "pagebeforeload", function( event ) { ... } )
7) Pageload
Triggered after the page is successfully loaded and inserted into the DOM.
jQuery( ".selector" ).on( "pageload", function( event ) { ... } )

8) Scrollstop
Scrollstop eventversion added: 1.0
Triggers when a scroll finishes.
jQuery( ".selector" ).on( "scrollstop", function( event ) { ... } )
9) Swipe
Triggered when a horizontal drag of 30px or more (and less than 30px
vertically) occurs within 1 second duration.
jQuery( window ).on( "swipe", function( event ) { ... } )
Triggered when a horizontal drag of 30px or more (and less than 30px
vertically) occurs within 1 second duration but these can be configured:
$.event.special.swipe.scrollSupressionThreshold (default: 10px) – More than
this horizontal displacement, and we will suppress scrolling.
$.event.special.swipe.durationThreshold (default: 1000ms) – More time than
this, and it isn't a swipe.
$.event.special.swipe.horizontalDistanceThreshold (default: 30px) – Swipe
horizontal displacement must be more than this.
$.event.special.swipe.verticalDistanceThreshold (default: 30px) – Swipe vertical
displacement must be less than this.
Example:
<script>
$(function(){
// Bind the swipeHandler callback function to the swipe event on div.box
$( "div.box" ).on( "swipe", swipeHandler );
// Callback function references the event target and adds the 'swipe' class to
it
function swipeHandler( event ){
$( event.target ).addClass( "swipe" );
}
});
</script>
Output:

10) Tap
Triggered after a quick, complete touch event.
jQuery( ".selector" ).on( "tap", function( event ) { ... } )
The jQuery Mobile tap event triggers after a quick, complete touch event that
occurs on a single target object. It is the gesture equivalent of a standard click
event that is triggered on the release state of the touch gesture.
This plugin extends jQuery's built-in method. If jQuery Mobile is not loaded,
calling the .tap() method may not fail directly, as the method still exists.
However, the expected behavior will not occur.
A simple example of the capturing and acting upon a tap event
<script>
$(function(){
$( "div.box" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( event.target ).addClass( "tap" );
}
});
</script>
Output:

9. ICONS
Icons
jQuery Mobile provides a number of icons that can be used by applying a data-
icon attribute or a ui-icon- class to a suitable widget.
There is an SVG and PNG image of each icon. By default the SVG icons, that look
great on both SD and HD screens, are used. On platforms that don't support SVG
the framework falls back to PNG icons. The icon name is self-describing. For
example, the following will display a button with a home icon:
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
The following is a full list of the icons provided:
jQuery Mobile offers a set of built-in icons that can
be applied to buttons, collapsibles, listview buttons
and more.

10. METHODS
jQuery Mobile exposes several methods on the $.mobile object for use in your
applications.
1) .buttonmarkup()
Adds button styling to an element
Corners: (default: true)
Type: Boolean
Adds the class ui-corner-all when true and removes it when false. This
gives the button-styled element rounded corners.
This option is also exposed as a data-attribute: data-corners="false"
icon: (default: "")
Type: String
Adds an icon class by prefixing the value with the string "ui-icon-" and an
icon position class based on the value of the iconpos option.
For example, if the value is "arrow-r" and the value of the iconpos option is
"left", then .buttonMarkup() will add the classes ui-icon-arrow-r and ui-btn-
icon-left to each of the set of matched elements.
This option is also exposed as a data-attribute: data-icon="arrow-r"
iconpos (default: "left")
Type: String
Adds an icon position class by prefixing the value with the string "ui-btn-
icon-" when the button-styled element has an icon.

For example, if the value is "right" and the button-styled element has an
icon, then the class ui-btn-icon-right will be added to each of the set of
matched elements.
This option is also exposed as a data-attribute: data-iconpos="right"
iconshadow (default: false)
Type: Boolean
This option is deprecated in 1.4.0 and will be removed in 1.5.0.
Adds the class ui-shadow-icon to each of the set of matched elements
when set to true and the button-styled element has an icon.
This option is also exposed as a data-attribute: data-iconshadow="true"
inline (default: false)
Type: Boolean
Adds the class ui-btn-inline to each of the set of matched elements when
set to true.
This option is also exposed as a data-attribute: data-inline="true"
theme (default: null, inherited from parent)

Type: String
The value is a letter a-z identifying one of the color swatches in the current
theme, or null.
This option adds a class constructed by appending the string "ui-btn-" to the
value to each of the set of matched elements. If set to null, no class is
added, and the swatch is inherited from the element's parent.
For example, a value of "b" will cause the class ui-btn-b to be added to each
of the set of matched elements.
2) .enhanceWithin()
Enhance all the children of all elements in the set of matched elements.
This method is responsible for performing all jQuery Mobile enhancement.
Given a set of DOM elements it will enhance their children with all the widgets
available
Example:
<script>
$.mobile.document.on( "click", "#insert-content", function() {
var content =
"<div>" +
"<div data-role='collapsible' data-collapsed='false'>" +
"<h2>Cities</h2>" +
"<ul data-role='listview'>" +
"<li><a
href='http://en.wikipedia.org/wiki/Sydney'>Sydney</a></li>" +
"<li><a
href='http://en.wikipedia.org/wiki/Yekaterinburg'>Yekaterinburg</a></li>" +
"<li><a
href='http://en.wikipedia.org/wiki/Asuncion'>Asunción</a></li>" +

"<li><a
href='http://en.wikipedia.org/wiki/Liege'>Liège</a></li>" +
"<li><a
href='http://en.wikipedia.org/wiki/Kinshasa'>Kinshasa</a></li>" +
"<li>" +
"<div data-role='controlgroup' data-type='horizontal'>" +
"<a href='#' class='ui-btn ui-shadow ui-corner-all'>Add</a>" +
"<a href='#' class='ui-btn ui-shadow ui-corner-all'>Remove</a>" +
"<a href='#' class='ui-btn ui-shadow ui-corner-all'>Edit</a>" +
"</div>" +
"</li>" +
"</ul>" +
"</div>" +
"</div>";
$( content ).appendTo( "#page-content" ).enhanceWithin();
});
</script>
Output:

3) .fieldcontain()
Adds class ui-field-contain to div wrappers of individual form elements which
have a label. The div and the class ensure that the form is rendered
responsively. At a sufficient width the label for each form element will be
placed to the left of the form element, whereas on narrow displays, the label
will appear above the form element.
4) jqmEnhanceable()
Filter method to respect data-enhance=false parent elements during manual
enhancement.
For users that wish to respect data-enhance=false parent elements during
manual enhancement or custom plugin authoring jQuery Mobile provides the
$.fn.jqmEnhanceable filter method.
Settings:
If, and only if, $.mobile.ignoreContentEnabled is set to true, this method will
traverse the parent nodes for each DOM element in the jQuery object and
where it finds a data-enhance=false parent the child will be removed from the
set.
5) jQuery.mobile.changePage()
Programmatically change from one page to another.
<script>
//Adding the changeHash: false to avoid an issue with the iframe
$.mobile.changePage( "../resources/us.html", { transition: "slideup",
changeHash: false });
</script>
Output:

6) jQuery.mobile.navigate()
Alter the url and track history. Works for browsers with and without the new
history API.
The $.mobile.navigate method provides a uniform history manipulation API for
browsers that support the new history API and those that don't (hashchange).
It works in concert with the navigate event by storing and retrieving arbitrary
data in association with a URL (much like popState and replaceState). When
the user returns to a URL set by the navigate method the navigate event is
triggered with the associated data.
Example:
Change the hash fragment twice then log the data provided with the
navigate event when the browser moves backward through history.
// Starting at http://example.com/
// Alter the URL: http://example.com/ => http://example.com/#foo
$.mobile.navigate( "#foo", { info: "info about the #foo hash" });
// Alter the URL: http://example.com/#foo => http://example.com/#bar
$.mobile.navigate( "#bar" );
// Bind to the navigate event
$( window ).on( "navigate", function( event, data ) {
console.log( data.state.info );
console.log( data.state.direction )
console.log( data.state.url )
console.log( data.state.hash )
});
// Alter the URL: http://example.com/#bar => http://example.com/#foo
window.history.back();
// From the `navigate` binding on the window, console output:

// => "info about the #foo hash"
// => "back"
// => "http://example.com/#bar
// => "#bar"
Hijack a link click to use the navigate method and then load content
// Starting at http://example.com/
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ) {
// Prevent the usual navigation behavior
event.preventDefault();
// Alter the url according to the anchor's href attribute, and
// store the data-foo attribute information with the url
$.mobile.navigate( this.attr( "href" ), { foo: this.attr( "data-foo" ) });
// Hypothetical content alteration based on the url. E.g, make
// an ajax request for JSON data and render a template into the page.
alterCon
7) jQuery.mobile.silentScroll()
Scroll to a particular Y position without triggering scroll event listeners.
Example:
<div role="main" class="ui-content">
<a href="#" onclick="$.mobile.silentScroll(100)" data-role="button">Go down
100 pixels</a>
<p> <br><br>Here, we have some text so that we can have <br>
some vertical space in order to demonstrate <br>

the silentScroll() method.<br><br></p>
<a href="#" onclick="$.mobile.silentScroll(0)" data-role="button">Back to
Top</a>
</div>
Output:
10.1 PATH
jQuery.mobile.path.get()
Utility method for determining the directory portion of an URL.
Example:
<script>
$(document).ready(function() {
$( ".myButton" ).on( "click", function() {
var dirName = $.mobile.path.get( $( this ).attr( "value" ) );
$( "#myResult" ).html( String( dirName ) );
})
});
</script>

Output:
jQuery.mobile.path.getDocumentBase()
Utility method for retrieving the original document base URL.
asParsedObject (default: false)
Type: Boolean
The function normally returns the original document base URL as a string.
However, if you specify a truthy value for this parameter, the original document
base URL will be returned in a hash as a parsed URL.
jQuery.mobile.path.getDocumentUrl()
Utility method for retrieving the URL of the original document.
asParsedObject (default: false)
Type: Boolean
The function normally returns the original document's URL as a string. However, if
you specify a truthy value for this parameter, the original document's URL will be
returned in a hash as a parsed URL.
jQuery.mobile.path.getLocation()
Utility method for safely retrieving the current location.
This method does not accept any arguments.
The browser's location.href may contain the username/password information.
getLocation() always returns location.href stripped of the username/password
information if present, ensuring that your code is not vulnerable to XSS attacks.

jQuery.mobile.path.isAbsoluteUrl()
Utility method for determining if a URL is absolute
.
Example
<script>
var isAbs = $.mobile.path.isAbsoluteUrl( $( this ).attr( "value" ) );
$( "#myResult" ).html( String( isAbs ) );
})
});
</script>
Output:
jQuery.mobile.path.isRelativeUrl()
Utility method for determining if a URL is a relative variant.

Example:
<script>
var isRel = $.mobile.path.isRelativeUrl( $( this ).attr( "value" ) );
$( "#myResult" ).html( String( isRel ) );
})
});
</script>
Output:
jQuery.mobile.path.makePathAbsolute()
Utility method for converting a relative file or directory path into an absolute path.
Example:
<script>
var arguments = $( this ).attr( "value" ).split( " relative to " ),
absolutePath = $.mobile.path.makePathAbsolute( arguments[ 0 ],
arguments[ 1 ] );

$( "#myResult" ).text( absolutePath );
})
});
</script>
Output:
jQuery.mobile.path.parseLocation()
Utility method for retrieving the current location as a parsed object.
This method does not accept any arguments.
This method gets the current location via getLocation() and returns the result of
parsing this value via parseUrl().

After Clicking, It will show
2) Checkbox
Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-
role required
data-role none - Prevents auto-enhancement to use native
control
data-theme swatch letter (a-z) - Added to the form element

data-theme swatch letter (a-z)
data-type horizontal | vertical - For horizontal or vertical item
alignment
6) Dialog
Container with data-role="dialog" or linked to with data-rel="dialog" on the
anchor.
data-close-btn left | right | none
data-dom-cache true | false
data-overlay-theme swatch letter (a-z) - Overlay theme when the page is
opened in a dialog
data-title string - Title used when page is shown

After clicking, It will show,
7) Enhancement
Container with data-enhance="false" or data-ajax="false"
data-enhance true | false
data-ajax true | false
8) Radio button
Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role
required

control
9) Slider
Inputs with type="range" are auto-enhanced, no data-role required
data-highlight true | false - Adds an active state fill on track to handle
control
data-track-theme swatch letter (a-z) - Added to the form element

10) Textinput
Input type="text|number|search|etc." or textarea elements are auto-enhanced,
no data-role required
data-clear-btn true | false - Adds a clear button
data-clear-btn-text string Text for the close button. Default: "clear text"
control

11) Toolbar
Container with data-role="header" or data-role="footer"
data-add-back-btn true | false - Auto add back button, header only
data-back-btn-text string - Header only
data-back-btn-theme swatch letter (a-z) - Header only
data-id string - Unique ID. Required for persistent footers
data-position fixed

12) Fixed toolbar
Container with data-role="header" or data-role="footer" plus the attribute data-
position="fixed"
data-disable-page-zoom true | false - User-scaling-ability for pages with
fixed toolbars
data-fullscreen true | false - Setting toolbars over the page-
content
data-tap-toggle true | false - Ability to toggle toolbar-visibility on
user tap/click
data-transition slide | fade | none - Transition used when
showing/hiding the
13) Popup
Container with data-role="popup"
data-shadow true | false
data-back-btn-theme swatch letter (a-z) | none - Default inherited,
"none" sets the popup to transparent

data-tolerance 30,15,30,15 - Distance from the edges of the
window (top, right, bottom, left)
data-transition none | transition - The transition to use when
making the popup appear/disappear.
11.2 CONFIGURING DEFAULTS
Working with jQuery Mobile's Auto-initialization
Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile
automatically applies many markup enhancements as soon as it loads (long
before the document.ready event fires). These enhancements are applied based
on jQuery Mobile's default settings, which are designed to work with common
scenarios. If changes to the settings are needed, they are easy to configure.
The mobileinit event
When jQuery Mobile starts, it triggers a mobileinit event on the document object.
To override default settings, bind to mobileinit.
//apply overrides here
});
Because the mobileinit event is triggered immediately, you'll need to bind your
event handler before jQuery Mobile is loaded. Link to your JavaScript files in the
following order:
<script src="jquery.js"></script>

Set the default transition for dialog changes that use Ajax. Set to 'none' for
no transitions.
$.mobile.defaultDialogTransition is deprecated.
defaultPageTransition string, default: 'fade'
Set the default transition for page changes that use Ajax. Note: default
changed from 'slide' to 'fade' in 1.1. Set to 'none' for no transitions.
pageLoadErrorMessage string, default: "Error Loading Page"
Set the text that appears when a page fails to load through Ajax.
pageLoadErrorMessageTheme string, default: "e"
Set the theme that the error message box uses.
phonegapNavigationEnabled boolean, default: false
Replace calls to window.history.back with PhoneGap's navigation helper
where it is available. This addresses navigation issues on page refresh in
Android PhoneGap applications using jQuery Mobile.
pushStateEnabled boolean, default: true
Enhancement to use history.replaceState in supported browsers, to convert
the hash-based Ajax URL into the full document path. Note that we
recommend disabling this feature if Ajax is disabled or if external links are
used extensively.
subPageUrlKey string, default: "ui-page"
The url parameter used for referencing widget-generated sub-pages (such
as those generated by nested listviews). Translates to example.html&ui-
page=subpageIdentifier. The hash segment before &ui-page= is used by
the framework for making an Ajax request to the URL where the sub-page
exists.

12. WIDGETS
Exapmle:
$.widget( "my.widget", /* NOTE: no base needed */ {
options: {
/* ... */
},
_create: function() {
/* ... */
}
/* ... */
});
Widgets Description
Button Widget Creates a button widget.
Checkboxradio Widget Creates a checkboxradio widget
Collapsible Widget Creates a collapsible block of content
Collapsibleset Widget Creates a set of collapsible blocks of content
Controlgroup Widget Groups buttons together.
Toolbar Widget Adds toolbars to the top and/or bottom of the page.
Widgets are feature-rich, stateful plugins that have
a full life-cycle, along with methods and events.
Check out the widget factory documentation for
more details.

Table Widget Creates a responsive table
Pop Up Widget Opens content in a popup.
List View Widget Creates a listview widget
1) Button Widget
Creates a button widget
Buttons are coded with standard HTML input elements, then enhanced by
jQuery Mobile to make them more attractive and useable on a mobile device.
Form buttons
For ease of styling, the framework automatically converts any input element
with a type of submit, reset, or button into a custom styled button - there is no
need to add the data-role="button" attribute. However, if needed, you can
directly call the button plugin on any selector, just like any jQuery plugin:
$( "[type='submit']" ).button();
Input type="button" based button:
<input type="button" value="Button">
Input type="submit" based button:
<input type="submit" value="Submit Button">
Input type="reset" based button:
<input type="reset" value="Reset Button">

2) Checkboxradio Widget
Creates a checkboxradio widget
Checkboxes are used to provide a list of options where more than one can be
selected. Traditional desktop checkboxes are not optimized for touch input so
in jQuery Mobile, we style the label for the checkboxes so they are larger and
look clickable. A custom set of icons are added to the label to provide
additional visual feedback.
The checkbox controls below use standard input/label markup, but are styled
to be more touch-friendly. The styled control you see is actually the label
element, which sits over the real input, so if images fail to load, you'll still have
a functional control. In most browsers, clicking the label automatically triggers
a click on the input, but we've had to trigger the update manually for a few
mobile browsers that don't do this natively. On the desktop, these controls are
keyboard and screen-reader accessible.
Example:
<label><input type="checkbox" name="checkbox-0"> I agree </label>
<input type="checkbox" name="checkbox-1" id="checkbox-1"
class="custom">
<label for="checkbox-1">I agree</label>
Output:
3) Collapsible Widget
Creates a collapsible block of content
To create a collapsible block of content, create a container and add the data-
role="collapsible" attribute. Using the data-content-theme attribute allows you
to set a theme for the content of the collapsible.

Directly inside this container, add any header (H1-H6) or legend element. The
framework will style the header to look like a clickable button and add a "+"
icon to the left to indicate it's expandable.
Example:
div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the
header to open me.</p>
</div>
Output
4) Collapsibleset Widget
jQuery Mobile will visually style a set of collapsibles as a group and will make
the set behave like an accordion in that only one collapsible can be open at a
time if you wrap the collapsibles in a div that has the attribute data-
role="collapsibleset".
Example:
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsibleset content for section 1. My content is
initially visible.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsibleset content for section 2.</p>
</div>

</div>
Output:
5) Controlgroup Widget
Groups buttons together.
Occasionally, you may want to visually group a set of buttons to form a single
block that looks contained like a navigation component. To get this effect, wrap
a set of buttons in a container with the data-role="controlgroup" attribute — the
framework will create a vertical button group, remove all margins and drop
shadows between the buttons, and only round the first and last buttons of the
set to create the effect that they are grouped together.
Example:
<div data-role="controlgroup">
<a href="#" class="ui-btn ui-corner-all">Yes</a>
<a href="#" class="ui-btn ui-corner-all">No</a>
<a href="#" class="ui-btn ui-corner-all">Maybe</a>
</div>
Output:

6) Dialog Widget
Opens content in an interactive overlay.
Any page can be presented as a modal dialog by adding the data-rel="dialog"
attribute to the page anchor link. When the "dialog" attribute is applied, the
framework adds styles to add rounded corners, margins around the page and a
dark background to make the "dialog" appear to be suspended above the page.
<a href="foo.html" data-rel="dialog">Open dialog</a>
Output:

7) Toolbar Widget
Adds toolbars to the top and/or bottom of the page.
Headers and footers are elements that precede resp. succeed the page
content. The toolbar widget allows you to create headers and footers.
Headers
The header bar serves as the page title, is usually the first element inside each
mobile page, and typically contains a page title and up to two buttons.
Header structure
The header is a toolbar at the top of the page that usually contains the page title
text and optional buttons positioned to the left and/or right of the title for
navigation or actions. Headers can optionally be positioned as fixed so they
remain at the top of the screen at all times instead of scrolling with the page.
The title text is normally an H1 heading element but it's possible to use any
heading level (H1-H6) to allow for semantic flexibility. For example, a page
containing multiple mobile "pages" may use a H1 element on the home "page"
and a H2 element on the secondary pages. All heading levels are styled
identically by default to maintain visual consistency.
Example:

<div data-role="header">
<h1> Page Title </h1>
</div>
Output:
8) Table Widget
Creates a responsive table
Responsive tables
One of the biggest challenges in responsive web design (RWD) is presenting
tabular data. Large tables with lots of columns don't fit on smaller screens and
there isn't a simple way to re-format the table content with CSS and media
queries for an acceptable presentation. To address this, the framework offers
two different options for presenting tables responsively. Each has benefits and
tradeoffs, the right choice will depend on the data being presented.
Reflow mode - Re-formats the table columns at narrow widths so each row of
data is presented as a formatted block of label/data pairs. This is ideal for tables
with product or contact information with more complex or lengthy data
formatting that doesn't need comparison across rows of data.
Column toggle mode - Selectively hides columns at narrower widths as a
sensible default but also offers a menu to let users manually control which
columns they want to see. This mode is better for financial data tables that have
compact values and need to maintain comparisons across columns and rows of
data. It can also be used for building things like product comparison tables.
General table markup guidelines
Here is the basic table markup you should use for both table modes:
<table data-role="table" id="my-table" data-mode="reflow">
<thead>
<tr>
<th>Rank</th>
<th>Movie Title</th>
<th>Year</th>

<th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th>Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
</tbody>
</table>
9) Popup Widget
Opens content in a popup.
Popups
To create a popup, add the data-role="popup" attribute to a div with the popup
contents. Then create a link with the href set to the id of the popup div, and add

the attribute data-rel="popup" to tell the framework to open the popup when the
link is tapped. This is a similar markup pattern to the dialog widget. A popup div
has to be nested inside the same page as the link.
Example:
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
Output:
10) Listview Widget
Creates a listview widget
A listview is coded as a simple unordered list containing linked list items with a
data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to
transform the list into a mobile-friendly listview with right arrow indicator that fills
the full width of the browser window. When you tap on the list item, the
framework will trigger a click on the first link inside the list item, issue an Ajax
request for the URL in the link, create the new page in the DOM, then kick off a
page transition. View the data- attribute reference to see all the possible
attributes you can add to listviews.
Here is the HTML markup for a basic linked list.
<ul data-role="listview">

<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
Output:

13. DEMOS
Query Mobile is a touch-optimized HTML5 UI framework designed to make
responsive web sites and apps that are accessible on all smartphone, tablet and
desktop devices.
13.1 PAGES
The page is the primary unit of interaction in jQuery Mobile and is used to group
content into logical views that can be animated in and out of view with page
transitions. A HTML document may start with a single "page" and the Ajax
navigation system will load additional pages on demand into the DOM as users
navigate around.
Mobile page structure
A jQuery Mobile site must start with an HTML5 doctype to take full advantage of all
of the framework's features. (Older devices with browsers that don't understand
HTML5 will safely ignore the 'doctype' and various custom attributes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/[version]/jquery.mobile-
[version].min.css" />
<script src="http://code.jquery.com/jquery-
[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-
[version].min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>

Viewport meta tag
Note above that there is a meta viewport tag in the head to specify how the
browser should display the page zoom level and dimensions. If this isn't set, many
mobile browsers will use a "virtual" page width around 900 pixels to make it work
well with existing desktop sites but the screens may look zoomed out and too
wide. By setting the viewport attributes to content="width=device-width, initial-
scale=1", the width will be set to the pixel width of the device screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside the body: Pages
Inside the <body> tag, each view or "page" on the mobile device is identified with
an element (usually a div) with the data-role="page" attribute.
<div data-role="page">
...
</div>
Within the "page" container, any valid HTML markup can be used, but for typical
pages in jQuery Mobile, the immediate children of a "page" are divs with data-
role="header", class="ui-content", and data-role="footer".
<div data-role="header">...</div>
<div role="main" class="ui-content">...</div>
<div data-role="footer">...</div>
</div>
Putting it together: Basic single page template
Putting it all together, this is the standard boilerplate page template you should
start with on a project:
<h1>Page Title</h1>
</div>
<p>Page content goes here.</p>

</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
Output:
After clicking, It will show following screen,
Multi-page template structure
A single HTML document can contain multiple "pages" that are loaded together by
stacking multiple divs with a data-role of "page". Each "page" block needs a
unique id (id="foo") that will be used to link internally between "pages"
(href="#foo"). When a link is clicked, the framework will look for an internal "page"
with the id and transition it into view.
Here is an example of a two "page" site built with two jQuery Mobile divs navigated
by linking to an id placed on each page wrapper. Note that the ids on the page
wrappers are only needed to support the internal page linking, and are optional if
each page is a separate HTML document. Here is what two pages look like inside
the body element.
Example:
<body>

<div data-role="page" id="foo">
<h1>Foo</h1>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>

<div data-role="page" id="bar">
<h1>Bar</h1>
<p>I'm the second in the source order so I'm hidden when the page
loads. I'm just shown if a link that references my id is beeing
clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
</body>

Output:
After clicking, it will show following screen,
13.2 PANEL WIDGETS
Example:
A basic example of a panel.
<!doctype html>
<html lang="en">
<body>
<div data-role="page" id="page1">
<h1>jQuery Mobile Example</h1>
</div>
<a href="#defaultpanel" data-role="button" data-inline="true" data-
icon="bars">Default panel</a>
</div>

<div data-role="panel" id="defaultpanel" data-theme="b">
<div class="panel-content">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the
reveal display mode. The panel markup is <em>before</em> the header,
content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or
use the button below:</p>
<a href="#demo-links" data-rel="close" data-role="button" data-
theme="a" data-icon="delete" data-inline="true">Close panel</a>
</div>
</div>
</div>
</body>
</html>
Output:

13.3 DATEPICKER
Select a date from a popup or inline calendar
The jQuery UI Datepicker is a highly configurable plugin that adds datepicker
functionality to your pages. You can customize the date format and language,
restrict the selectable date ranges and add in buttons and other navigation options
easily.
By default, the datepicker calendar opens in a small overlay when the associated
text field gains focus. For an inline calendar, simply attach the datepicker to a div
or span.
Example:
<script>
$( "#datepicker" ).datepicker();
</script>
Output:

CORPORATE TRAINING BOOK – PHONEGAP
TABLE OF CONTENTS
1. Objective........................................................................................ 64
2. Mobile App Development............................................................. 64
2.1 Native app development................................................ 65
2.2 Hybrid app development............................................... . 66
3. Getting Started............................................................................. 67
3.1 Introduction..................................................................... 67
3.2 Install PhoneGap with desktop app.............................. 67
3.3 Install PhoneGap with CLI.............................................. 73
3.4 Install mobile app............................................................ 75
3.5 Create your app with desktop app................................ 77
3.6 Create your app with CLI............................................... 80
3.7 Preview your app with desktop app.............................. 81
3.8 Preview your app with CLI............................................. 87
3.9 Going further.................................................................... 93
4. Tutorials........................................................................................ 95
4.1 Hello world explained..................................................... 95
4.2 Push Notifications........................................................... 98
5. References.................................................................................... 112
5.1 PhoneGap desktop app................................................... 112
5.2 PhoneGap developer app............................................... 113
5.3 Phonegep CLI.................................................................. 114
5.4 Plugin APIS...................................................................... 115
6. PhoneGap Build............................................................................ 116
6.1 Overview.......................................................................... 116
6.2 Getting started................................................................. 117
6.3 Configuring..................................................................... 118
6.4 Signing............................................................................. 120
6.5 Tools................................................................................. 125
6.6 Developer API.................................................................. 125
6.7 Support............................................................................. 127
6.8 FAQ................................................................................... 128

1. OBJECTIVE
The objective of this book to understand the mobile apps development with
PhoneGap build in detailed way with real time examples for effective learning.
2. MOBILE APP DEVELOPMENT
PhoneGap vs. Apache Cordova
Apache Cordova was born from PhoneGap. In 2011, the PhoneGap codebase
was donated to Apache for incubation, and the project has continued to thrive ever
since. Apache Cordova is still the engine that powers PhoneGap, much like
WebKit is the engine that powers many modern web browsers.
1. RAPID DEVELOPMENT = BETTER APPS
Leverage the web technologies that you know and love to make more time for
rapid iterations and releases. By releasing your mobile app early and often, and
gathering metrics for quick iterations, your customers get what they want and
need.
2. NATIVE APIS = NATIVE FUNCTIONALITY
PhoneGap is the open source framework that
gets you building amazing mobile apps using
web technology
For web developers with a history of creating
outstanding user experiences and products,
PhoneGap is the tool to use to quickly transfer
web development skills into making awesome
mobile apps.
PhoneGap gives you access to all of the native
device APIs (like camera, GPS, accelerometer
and more), so that the app you build with web
tech behaves just like a native app.

Developing your mobile app using HTML, CSS and Javascript doesn’t mean that
you have to give up on native functionality that makes mobile devices so
extraordinary.
3. CROSS PLATFORM = GREATER REACH
There is nothing worse than making your hugely anticipated/successful/helpful
mobile app only available for a single platform. It means missing out on a huge
part of your potential customer base. Focus on creating a great experience for all
of your potential customers instead of authoring complex platform compatibility
layers — it just makes sense.
4. OPEN SOURCE = GREAT COMMUNITY
We have great community support, which means that there are more people
available to help you out and to keep the software current and robust. The Adobe
PhoneGap team remains highly active in the stewardship and development of the
Apache Cordova project.
2.1 NATIVE APP DEVELOPMENT
A native app is a smartphone application developed specifically for a mobile
operating system (think Objective-C or Swift for iOS vs. Java for Android).
Since the app is developed within a mature ecosystem following the technical and
user experience guidelines of the OS (e.g. swipes, app defined gestures, left
aligned header on Android, centrally aligned header on iOS, etcetera), it not only
By using PhoneGap you can create an app for
each of the platforms that you choose, using a
single code base.
By remaining free and open source, PhoneGap
makes mobile app development accessible to
thousands of web developers

has the advantage of faster performance but also “feels right”. What feeling right
means is that the in-app interaction has a look and feel consistent with most of the
other native apps on the device. The end user is thus more likely to learn how to
navigate and use the app faster.
Finally, native applications have the significant advantage of being able to easily
access and utilize the built-in capabilities of the user’s device (e.g., GPS, address
book, camera, etcetera). When a user sends text messages, takes pictures using
the device’s default app, set reminders, or uses the device’s music app (the one
that came with the phone), they’re using native apps.
2.2 HYBRID APP DEVELOPMENT
Hybrid applications are, at core, websites packaged into a native wrapper.
They look and feel like a native app, but ultimately outside of the basic frame of
the application (typically restricted to the controls/navigational elements) they are
fueled by a company’s website.
Basically, a hybrid app is a web app built using HTML5 and JavaScript, wrapped
in a native container which loads most of the information on the page as the user
navigates through the application (Native apps instead download most of the
content when the user first installs the app).
In short, native apps are exactly that, native to
the user’s OS and hence built per those
guidelines.
Usual suspects here are Facebook, Twitter,
Instagram, your mobile banking app, etcetera.

3. GETTING STARTED
Building applications for each platform–iPhone, Android, Windows and more–
requires different frameworks and languages. PhoneGap solves this by using
standards-based web technologies to bridge web applications and mobile devices.
Since PhoneGap apps are standards compliant, they’re future-proofed to work
with browsers as they evolve. Nitobi was the original creator and is one of the
primary contributors to the PhoneGap framework
3.1 INTRODUCTION
The core engine for PhoneGap is open source, under the Apache
Cordova project.The user interface for PhoneGap applications is created using
HTML, CSS, and JavaScript. The UI layer of a PhoneGap application is a web
browser view that takes up 100% of the device width and 100% of the device
height.
3.2 INSTALL PHONEGAP WITH DESKTOP APP
PhoneGap is an application container technology
that allows you to create natively-installed
applications for mobile devices using HTML, CSS,
and JavaScript.
In October 2011, Adobe acquired Nitobi enabling
the team to focus solely on the PhoneGap project
and continue its work on efficient development
across mobile platforms.
The PhoneGap Desktop application provides a
drag and drop interface for creating PhoneGap
applications.

It's an alternative to using the PhoneGap CLI built for those who prefer a visual
user interface over a command line interface approach.
Select your operating system to continue:
 Mac OS X
 Windows
Mac OS X Installation
1. Download the latest Mac OS X Installer.
2. Double-click the downloaded file to run the installer. You will initially be
prompted with a license agreement to accept:
3. Drag and drop the application into the Applications folder on your Mac as
prompted:

4. Next simply open the application and proceed to 3.4 (Install mobile app) where
you will install the PhoneGap Developer App to your mobile device for
previewing the apps you build.
Windows Installation
Download the latest Windows Installer.
NOTE: If you're unable to run the Windows Installer for some reason, there's also
a zip file available that can be used to install PhoneGap Desktop manually.

Download the zip file for the latest release and follow the instructions in the
README and INSTALL files within the downloaded zip.
1. Double click the downloaded file to run the installer. You will be prompted
with the PhoneGap Desktop Setup Wizard:
2. Accept the license agreement :

3. Select the desired destination for the application and click Next:
4. Select the desired location for the shortcut and click Next:

5. Click Install to begin the installation:
6. Click Finish to close the Setup Wizard:

7. Next simply open the application and proceed to next step below where you will
install the PhoneGap Developer App to your mobile device for previewing the
apps you build.

3.3 INSTALL PHONEGAP WITH CLI
The PhoneGap CLI currently has some additional features over the PhoneGap
Desktop for building. running and packaging your PhoneGap applications on
multiple platforms. If you're comfortable using a CLI this option may be best going
forward.
Requirements
There are a few simple requirements you'll need prior to installing the PhoneGap
CLI:
 node.js - a JavaScript runtime to build your JavaScript code
 git - used in the background by the CLI to download assets. It comes pre-
installed on some operating systems.
To see if you already have it installed, type git from the command line.
Install Steps
1. Install the PhoneGap CLI via npm with the following command from the
Terminal app (Mac) or Command Prompt (Win).
1. $ npm install -g PhoneGap@latest
TIPS:
1) The $ symbol is used throughout this guide to indicate the command
prompt, it should not be typed.
2) npm is the node package manager and installed with node.js.
The npmcommand fetches the necessary dependencies for the
PhoneGap CLI to run on your local machine. It creates
a node_modules folder with the necessary code needed to run the CLI.
The -g flag specifies that folder to be installed at the global location so it
can be accessed from anywhere on your machine (defaults
to /usr/local/lib/node_modules/PhoneGap on Mac).
OS X Users: You may need to prefix this command with sudo to allow
installation to restricted directories and type the following instead: $ sudo
The PhoneGap Desktop application provides a
drag and drop The PhoneGap CLI provides a
command line interface for creating PhoneGap
apps as an alternative to using the PhoneGap
Desktop App for those who prefer working at the
command line.

npm install -g PhoneGap@latest
Windows 8 Users: If you just installed Node.js, be sure to start the Node.js
Command Prompt application specifically.
2. Test to ensure the PhoneGap CLI is properly installed by typing PhoneGap on
the command line. You should see the following help text output displayed:
2. $ PhoneGap
3. Usage: PhoneGap [options] [commands]
4. Description:
5. PhoneGap command-line tool.
6. Commands:
7. help [command] output usage information
8. create <path> create a PhoneGap project
...
TIP: You can access the PhoneGap CLI usage text at any time by adding
the keyword help, or the -h or --h attribute with any PhoneGap command
i.e.: $ PhoneGap create help, $ PhoneGap serve -h.
3.4 INSTALL MOBILE APP
It automatically provides access to the PhoneGap core APIs providing instant
access to the native device features without having to install any plugins or
compile anything locally. It's meant to provide an easy way for developers to get
started creating and testing their PhoneGap applications quickly with minimal
setup.
Install PhoneGap Developer
1. Locate the free PhoneGap Developer app from one of the following supported
app marketplaces and install it to your mobile device:
 iTunes
 Google Play
The PhoneGap Developer App is a mobile app
that runs on devices and allows you to preview
and test the PhoneGap mobile apps you build
across platforms without additional platform
SDK setup.

 Windows Phone Store
2. Once installed, tap the PhoneGap Developer app icon from your home screen
to open it:
3. Once installed, move on to the next step where you will create your first
PhoneGap app using the tool you selected in step 1 (iTunes,Google
Play,Windows Phone Store).
NOTE: The platform SDKs mentioned above refer to the software
development kits Apple, Google and Microsoft provide to build applications for
their platforms (iOS, Android and Windows respectively). When you're ready to
take your mobile application development further or decide you want to build
for each platform locally yourself, you can find the specific instructions for each
platform in the PhoneGap Platform Installation Guides.

3.5 CREATE YOUR APP WITH DESKTOP APP
This project will be a PhoneGap mobile app with the ability to run on multiple
devices and across operating systems in just a few simple steps.
Create a PhoneGap Project
1. Click the plus sign and select Create new PhoneGap project as shown below:
Now that you've installed PhoneGap
Desktop and/or the PhoneGap CLI to your
computer and the PhoneGap Developer App to
your mobile devices, you're ready to create your
first PhoneGap project.

2. You will be prompted with the template list dialog as shown below, where you
can choose to create an app based on a sample project.
Each template has a brief description below the name indicating what type
of project will be created. To select a template, click on the radio button next
to it. In the image below, the Hello World template is selected.
The first template option in the list is the default Hello World project. It's proven to
be the quickest and easiest way to understand the basics of building a mobile
PhoneGap app so let's start there.
1. Ensure the radio button next to the Hello World template is selected.
2. Click on the green Next button.

3. You will be presented with a screen to enter information about your project.
Choose the path on your local hard drive where you want to create the project,
a designated name and an optional identifier. Once the information has been
entered, click the green Create project button.
NOTE:Be aware that the ID field is also known as the package identifier for
Android and the bundle identifier for iOS.

4. You should now see a view like below, with your new project shown and
marked with a left green border, a green play button next to it and a green bar
at the bottom. You should also see a server address indicating it's running and
the active project. Only one project will be active and running at any time.
3.6 CREATE YOUR APP WITH CLI
Now that you've installed PhoneGap Desktop and/or the PhoneGap CLI
Create Default PhoneGap Project
The PhoneGap CLI has a default Hello World project for beginners to start with.
It's proven to be the quickest and easiest way to understand the basics of building
a mobile PhoneGap app so let's start by creating the default project with the CLI.
1. Enter the following command from your terminal:

$ phonegap create myApp
This will create a folder named myApp in the current path location with a
default project name of Hello World and id of com.phonegap.helloworld.
You can also specify a name and identifier to ensure the project is unique
but still contains the default Hello World code project by specifying them
as qualified parameters as shown below:
$ phonegap create myApp --id "org.myapp.sample"
--name "appSample"
TIP: Each of the create command options is documented in the help text
and can be accessed with $ phonegap create help. To access general
help from the CLI, type -h or help with any command.
2. Verify that you see the following output in your console after you run
the command:
Creating a new cordova project.
3. Change into the new project directory with the cd command:
$ cd myApp/
4. Check to be sure you see the following set of files and folders shown
below:
config.xml hooks platforms plugins
www
6. cd into the www folder and look around at the files and subfolders in
there, this is the content of your app, with the entry point being
the index.html file.
$ cd www/
TIP: Details about the rest of the files and folders created in the root project will be
covered in guides further along. For now just focus on the www folder and its
contents.
3.7 PREVIEW YOUR APP WITH DESKTOP APP
You can use the PhoneGap Developer App paired
with PhoneGap Desktop to immediately preview
your app on a device without installing platform
SDKs, registering devices, or compiling code.

PhoneGap Desktop starts a small web server to host your project and returns a
server address you can then enter into the PhoneGap Developer app running on
your mobile device or in your desktop browser. The project is served automatically
upon project creation, but you can also manually start any project that's inactive by
clicking the green play ( > ) button next to it.
Preview in a Desktop Browser
You can leverage your desktop browser to preview and test yours apps first to
speed up your initial development process. For instance, if you're using a
framework like Angular or React, there are tools available for specifically
debugging those frameworks in the browser that can be quite helpful before
moving over to a device. Recently PhoneGap began supporting the browser
platform as a target automatically to help you test with the deviceready event and
Apache Cordova core plugins more easily in an environment you're already
familiar with.
Preview on a Device

NOTE:Double check to ensure you're running your device and computer on the
same network before continuing.
In the previous step we created a project and ensured it was running by looking for
the green play button to be highlighted and a green bar showing the server
address it's running on at the bottom of the PhoneGap Desktop.
The screenshot is shown again below for reference. Locate the specific server
address for your project before moving to the next step.
Go to your mobile device where the PhoneGap Developer App is running, enter
the server address on the main screen and tap Connect.
NOTE: Tap directly on the server address displayed in the terminal screen of the
PhoneGap Developer app to change it to match yours. The value filled in by
default is only a sample.

You should see the connection occur followed by a success message as shown
below. If you receive an error of any kind, ensure once again that you are
connected to the same network on both your device and computer. You could also
check the issue tracker and PhoneGap Google Groups list for further help.

Once the PhoneGap Developer app connects, it will load and display your
application as shown below:
TIP: Gestures can be used while you're previewing your app. A 3 finger tap will
return you to the main screen, a 4 finger tap will cause a refresh.
Making Updates
Now let's make an update to some code to see how easy it is to test a change.
Using your favorite text editor, open up the index.html file located within
the www folder of your project; for instance ~/appSample/www/index.html
TIP: Some popular lightweight but powerful editors include Brackets, Sublime
Text and Atom. If you're looking for more of an IDE with extensive features and
plugins including code hinting and type-ahead, check out WebStorm by JetBrains
Choose an update to make. Let's start by changing the PHONEGAP text that's
displayed in the app from <h1>PhoneGap</h1> to <h1>Hello PhoneGap</h1>.
(This text has a CSS uppercase transform applied to it in the default project). Save
it when you're finished and move on to the next step.

Now check your mobile device where the PhoneGap Developer app is running and
you will see your application reload and automatically display the new text:
Continue making updates to your project to get familiar with this workflow.

3.8 PREVIEW YOUR APP WITH CLI
Preview in a Desktop Browser
You can test your apps in your desktop browser first to speed up your initial
development process. For instance, if you're using a framework like Angular or
React, there are tools available for specifically debugging those frameworks in the
browser that can be quite helpful before moving over to a device. Recently
PhoneGap began supporting the browser platform as a target automatically to help
you test with the deviceready event and Apache Cordova core plugins more easily
in an environment you're already familiar with.
Refer to the PhoneGap Browser Support Reference guide for specific details.
Preview on a Device
You can use the PhoneGap Developer App paired with the PhoneGap CLI to
immediately preview your app on a device without installing platform SDKs,
registering devices, or compiling code. The PhoneGap CLI starts a small web
The PhoneGap CLI has a serve command that
starts a small web server to host your project
where it can then be consumed by the PhoneGap
Developer App running on a mobile device or
your desktop browser.

server to host your project and returns the server address for you to pair with from
the PhoneGap Developer App running on your mobile device.
Double check to ensure you're running your device and computer on the same
network before continuing.
cd into the project directory created in the previous step and type $ phonegap
serve. You will receive the server address the app is being hosted on in the output
received in the console (192.168.1.11:3000 in this example):
$ phonegap serve
[phonegap] starting app server...
[phonegap] listening on 192.168.1.11:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]
Now go to your mobile device where the PhoneGap Developer App is running,
enter the server address on the main screen and tap Connect.

NOTE: Tap directly on the server address displayed in the terminal screen of the
PhoneGap Developer app to change it to match yours. The value filled in by
default is only a sample.
You should see the connection occur followed by a success message as shown
below. If you receive an error of any kind, ensure once again that you are
connected to the same network on both your device and your computer. You could
also check the issue tracker and PhoneGap Google Groups list for further help.

Once the PhoneGap Developer app connects and loads your mobile application, it
should be displayed for preview as shown below:

TIP: Gestures can be used while you're previewing your app. A 3 finger tap will
return you to the main screen, a 4 finger tap will cause a refresh.
Making Updates
Now let's make an update to some code to see how easy it is to test changes.
Using your favorite text editor, open up the index.html file located within
the www folder of your project; for instance ~/appSample/www/index.html
TIP: Some popular lightweight but powerful editors include Brackets, Sublime
Text, Atom and Code. If you're looking for more of an IDE with extensive features
and plugins including code hinting and type-ahead, check out WebStorm by
JetBrains
Choose an update to make. Let's start by changing the PHONEGAP text that's
displayed in the app from <h1>PhoneGap</h1> to <h1>Hello PhoneGap</h1>.
(This text has a CSS uppercase transform applied to it in the default project). Save
it when you're finished and move on to the next step.

Now check your mobile device where your PhoneGap Developer app is running
and you will see your app reload and automatically display the new text!

Continue making updates to your project to get familiar with this workflow.
At this point you should check out this guide explaining important details about the
default Hello PhoneGap application and mobile application development tips with
PhoneGap in general.
3.9 GOING FURTHER
Build, Package and Distribute for Production
At some point you will want to move out of the sandbox environment and into a
more advanced environment suitable for building, packaging and distributing your
mobile application.
This getting started workflow is meant for
beginning mobile application development with
PhoneGap in the quickest and simplest manner.

There are two choices available for building and packaging your applications:
1. Build and package locally using the PhoneGap CLI
2. Use PhoneGap Build cloud service for simplifying the build and app packaging
process
Which you choose will depend on how comfortable you are working with a
command line environment and more closely with the native SDKs and tools
versus leaving it to a cloud service and providing the required details.
Apache Cordova
Adobe PhoneGap™ is a distribution of Apache Cordova™. Cordova was originally
created by Nitobi, who was then acquired by Adobe in 2011. The project was
donated to the Apache Software Foundation (ASF) later that same year to
maintain a transparent and open governance and provide a mechanism for other
large organizations to contribute. Apache Cordova is the engine that powers
Adobe PhoneGap™, similar to how WebKit powers Chrome or Safari. However,
Adobe PhoneGap™ provides additional tools that tie into other Adobe services,
including tools like the PhoneGap Developer App, the PhoneGap Desktop App,
PhoneGap Build and PhoneGap Enterprise.

Learn Hybrid Mobile Apps Development using PhoneGap Online

Learn Hybrid Mobile Apps Development using PhoneGap Online

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Learn Hybrid Mobile Apps Development using PhoneGap Online

Ähnlich wie Learn Hybrid Mobile Apps Development using PhoneGap Online (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (7)

Learn Hybrid Mobile Apps Development using PhoneGap Online