Hybrid Mobile App with Ionic Framework

All About Ionic

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like "Bootstrap for Native," but with support for a broad range of common native mobile components, slick animations, and beautiful design.

Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you'd get with a native SDK on iOS or Android but didn't really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.

Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app. We strongly recommend using Cordova proper for your apps, and the Ionic tools will use Cordova underneath.

Building Hybrid Apps With Ionic

Those familiar with web development will find the structure of an Ionic app straightforward. At its core, it's just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want. The only difference is, instead of creating a website that others will link to, we are building a self-contained application experience.

The bulk of an Ionic app will be written in HTML, Javascript, and CSS. Eager developers might also dig down into the native layer with custom Cordova plugins or native code, but it's not necessary to get a great app.

Ionic also uses AngularJS for a lot of the core functionality of the framework. While you can still use Ionic with just the CSS portion, we recommend investing in Angular as it's one of the best ways to build browser-based applications today.

Platform notes

Windows users developing for Android: You'll want to make sure you have the following installed and set up.

NOTE: Whenever you make changes to the PATH, or any other environment variable, you'll need to restart or open a new tab in your shell program for the PATH change to take effect.

Java JDK

Install the most recent Java JDK (NOT just the JRE).

Next, create an environment variable for JAVA_HOME pointing to the root folder where the Java JDK was installed. So, if you installed the JDK into C:\Program Files\Java\jdk7, set JAVA_HOME to be this path. After that, add the JDK's bin directory to the PATH variable as well. Following the previous assumption, this should be either %JAVA_HOME%\bin or the full path C:\Program Files\Java\jdk7\bin

Apache Ant

To install Ant, download a zip from http://ant.apache.org/bindownload.cgi, extract it, move the first folder in the zip to a safe place, and update your PATH to include the binfolder in that folder. For example, if you moved the Ant folder to c:/, you'd want to add this to your PATH: C:\apache-ant-1.9.2\bin.

Android SDK

Installing the Android SDK is also necessary. The Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android.

Cordova requires the ANDROID_HOME environment variable to be set. This should point to the [ANDROID_SDK_DIR]\sdk directory (for example c:\android\sdk).

Next, update your PATH to include the tools/ and platform-tools/ folder in that folder. So, using ANDROID_HOME, you would add both%ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools.

Install Ionic

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools.

npm install -g cordova ionic

if above command doesn't works use below command  

npm install  cordova ionic

Start a Ionic Project

Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh.

For Blank Templates : ionic start myDemoApp blank

For Tab Templates : ionic start myDemoApp tads

for Sidemenu Templates  : ionic start myDemoApp sidemenu

Configure Platforms

Android Platform : ionic platform add android 

iOS Platform: ionic platform add ios 

Test it out

Just to make sure the default project worked, try building and running the project (substitute Android for ios to build for IOS instead):

for Building App : ionic build android

for Run on Emulate App :ionic emulate android

jQuery Mobile for Hybrid Mobile Application

jQuery Mobile Table of Content

1. Standard Create a Dialog box Page
2. Multiple Pages in a Single HTML file
3. jQuery Mobile dialog box
4. jQuery Mobile Icons
5. jQuery Mobile Buttons
6. jQuery Mobile Popup

Getting Started With jQuery Mobile

Below, we have created a simple, standard jQuery Mobile page:

Example

<body>

          <div data-role="page">

                   <div data-role="header">

                             <h1>Header Text</h1>

                   </div>

                   <div data-role="main" class="ui-content">

                             <p>Main Content</p>

                   </div>

                   <div data-role="footer">

                             <h1>Footer Text</h1>

                   </div>

          </div>

</body>

Example explained:

• The data-role="page" is the page displayed in the browser
• The data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
• The data-role="main" defines the content of the page, like text, images, buttons, forms, etc.
• The "ui-content" class adds extra padding and margin inside the page content
• The data-role="footer" creates a toolbar at the bottom of the page
• Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.

Note : The HTML5 data-* attributes are used throughout jQuery Mobile to create a"touch-friendly" and attractive look for mobile devices.

Adding Pages in jQuery Mobile

In jQuery Mobile, you can create multiple pages in a single HTML file.

Separate each page with a unique id and use the href attribute to link between them:

Example

<body>

          <div data-role="page" id="firstpage">

                   <div data-role="header">

                             <h1> First Page</h1>

                   </div>

                   <div data-role="main" class="ui-content">

                             <p>First Page Content<p>

                             <a href="#firstpage">Go to Second Page </a>

                   </div>

                   <div data-role="footer">

                             <h1>Footer Text</h1>

                   </div>

          </div>

          <div data-role="page" id="secondpade">

                   <div data-role="header">

                             <h1> Second Page</h1>

                   </div>

                   <div data-role="main" class="ui-content">

                             <p>Second Page Content</p>

                             <a href="#secondpage">Go to First Page </a>

                   </div>

                   <div data-role="footer">

                             <h1>Footer Text</h1>

                   </div>

          </div>

</body>

Using Pages as Dialogs

A dialog box is a type of window used to show special information or request input.

To create a dialog box that opens when a user taps on a link, add data-dialog="true" to the page you want displayed as a dialog:

Example

<body>

          <div data-role="page" id="firstpage">

                   <div data-role="header">

                             <h1>Welcome First Page</h1>

                   </div>

                   <div data-role="main" class="ui-content">

                             <p>I Am Now A Mobile Developer!!</p>

                             <a href="#firstpage">Go to Dialog Page </a>

                   </div>

                   <div data-role="footer">

                             <h1>Footer Text</h1>

                   </div>

          </div>

          <div data-role="page" id="secondpage" data-dialog="true">

                   <div data-role="header">

                             <h1> Dialog Page</h1>

                   </div>

                   <div data-role="main" class="ui-content">

                             <p>Dialog Content</p>

                             <a href="#secondpage">Go to First Page </a>

                   </div>

                   <div data-role="footer">

                             <h1>Footer Text</h1>

                   </div>

          </div>

</body>

jQuery Mobile Page Transition Effects

jQuery Mobile has a variety of effects for how to transition from one page to the next.

The transition effect can be applied to any link or form submission by using the data-transition attribute:

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

The table below shows available transitions that can be used with the data-transition attribute for both pages and dialogs:

Example

<body>

 <div data-role="page" id="pageone">

                   <div data-role="header">                             
                         <h1>Welcome First Page</h1>

                   </div>

                   <div data-role="main" class="ui-content">

                             <p> Mobile Page Transition Effects.</p>

<a href="#pagetwo" data-transition="fade">Fade to Page Two</a>   

<a href="#pagetwo" data-transition="flip">flip to Page Two</a>  

<a href="#pagetwo" data-transition="slide">Fade to Page Two</a>   

<a href="#pagetwo" data-transition="flow">flow to Page Two</a>  

<a href="#pagetwo" data-transition="pop">pop to Page Two</a>   

<a href="#pagetwo" data-transition="slide">slide to Page Two</a>  

<a href="#pagetwo" data-transition="slideup">slideup to Page Two</a>   

<a href="#pagetwo" data-transition="slidedown">slidedown to Page Two</a>

<a href="#pagetwo" data-transition="slidefade">slidefade to Page Two</a>

<a href="#pagetwo" data-transition="none">none to Page Two</a>

                            

                   </div>

                   <div data-role="footer">

                             <h1>Footer Text</h1>

                   </div>

          </div>

</body>

Note : The fading effect is default on all links in jQuery Mobile

All effects above also support reverse/backward actions, e.g. if you want the page to slide from left to right, instead of right to left, use the data-direction attribute with value "reverse".

Example

<a href="#" data-transition="slide" data-direction="reverse">Slide</a>

Creating a Button in jQuery Mobile

A button in jQuery Mobile can be created in three ways:

1. Using the <input> element

<input type="button" value="Button">

2. Using the <button> element with class="ui-btn"

 <button class="ui-btn">Button</button>

3. Using the <a> element with class="ui-btn"

<a href="#" class="ui-btn">link between pages </a>

Buttons in jQuery Mobile are automatically styled, making them attractive and useable on both mobile devices and desktop computers. 

We recommend that you use the <a> element with class="ui-btn" to link between pages, and <input> or <button> elements for form submission

Navigation Buttons

To link between pages by buttons, use the <a> element with class="ui-btn":

<a href="#" class="ui-btn">link between pages </a>

Grouped Buttons

jQuery Mobile provides an easy way for grouping buttons together.

Use the data-role="controlgroup" attribute together with data-type= "horizontal | vertical " in a container element, to specify whether to group buttons

 horizontally or vertically:

Example

Horizontally

                   <div data-role="controlgroup" data-type="horizontal">

                                      <p>Horizontal Group:</p>

                                      <a href="#" class="ui-btn">Button 1</a>

                                      <a href="#" class="ui-btn">Button 2</a>

                                      <a href="#" class="ui-btn">Button 3</a>

                   </div>

Vertically                              

                   <div data-role="controlgroup" data-type="vertical">

                                      <p>Vertical Group (default):</p>

                                      <a href="#" class="ui-btn">Button 1</a>

                                      <a href="#" class="ui-btn">Button 2</a>

                                      <a href="#" class="ui-btn">Button 3</a>

                        </div>

Back Buttons

To create a Back button, use the data-rel="back" attribute (this will ignore the anchor's href value):

Example

            <a href="#" class="ui-btn" data-rel="back">Go Back</a>

Inline Buttons

By default, buttons take up the full width of the screen. If you want a button that is only as wide as its content, or if you want two or more buttons to appear side by side, add the "ui-btn-inline" class:

Example

<a href="#pageone" class="ui-btn ui-btn-inline">Inline Button</a>

Button Classes

Global Classes

These classes can be added on any jQuery Mobile widgets (buttons, toolbars, panels, tables, lists, etc..):

Note: If you want to use more than one class, separate each class

class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Note: By default, <input> buttons have shadow and rounded corners. The <a> and <button> element does not.

Examples

Inline buttons: mini and normal

          <a href="#" class="ui-btn ui-btn-inline ui-mini">Inline Button 1</a>

Inline buttons: with rounded corners

          <a href="#" class="ui-btn ui-btn-inline ui-corner-all">Inline Button 2</a>

Inline buttons: Changes the color of the button to a black background  

<a href="#" class="ui-btn ui-btn-inline ui-btn-b">Inline Button 3</a>

Inline buttons: with shadow

          <a href="#" class="ui-btn ui-btn-inline ui-shadow">Inline Button 4</a>

 

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:

To add an icon to your button, use the ui-icon class, and position the icon with an icon position class (ui-btn-icon-pos):

<a href="# " class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Note: For other buttons, like buttons in list views and forms, you must use the data-icon attribute.

Below we have listed all available icons that jQuery Mobile provides:

The following is a full list of the icons provided:

 Positioning Icons

You can specify one of four values for where the icon should be positioned in the button: top, right, bottom or left.

Use the ui-btn-icon class to specify the position:

Icon Position for Link Buttons

<a href="# " class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>

<a href="# " class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>

<a href="# " class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>

<a href="# " class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>

Note: If you do not specify the icon position for link buttons, the icon will not be shown.

Displaying Only The Icon

To only display the icon, use "notext" as value for icon position:

Example

A button with only the icon and no text:

<a href="#" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>

A button with only the icon and no text - added rounded corners and some shadow:

<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>

 

Removing The Circle

By default, all icons have a gray circle (disc) around them. To remove the circle, add the "ui-nodisc-icon" class to the element or its container:

Example

A "search" icon with a gray circle around it (default):

With Text

    <a href="#anylink" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow">With circle (default)</a> 

Without Text

    <a href="#anylink" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow">With circle (default)</a>

A "search" icon without the grey circle (class="ui-nodisc-icon"):

With Text

    <a href="#anylink" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-nodisc-icon">Without circle</a>  

Without Text

    <a href="#anylink" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-nodisc-icon">Without circle</a>

Note: Notice that when you specify the ui-nodisc-icon class while only displaying the icon, the gray background is removed, but the circle is not.

Black or White Icons

By default, all icons are white. To change the icon color to black, add the "ui-alt-icon" to the element or its container:

A white "search" icon (default):

    <a href="#anylink" class="ui-btn  ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow">White icon (default)</a> 

    <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow">White icon (default)</a>

A black "search" icon (class="ui-alt-icon"):

    <a href="#anylink" class="ui-btn  ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-alt-icon">Black icon</a>  

    <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-alt-icon">Black icon</a>

   

A black "search" icon without the gray circle (combining "ui-nodisc-icon" and "ui-alt-icon"):

    <a href="#anylink" class="ui-btn  ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>  

    <a href="#anylink" class="ui-btn  ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>

jQuery Mobile Popups

Popup basics

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.

Note: A popup div has to be nested inside the same page as the link.

Example

<div data-role="main" class="ui-content">

                             <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

                             <div data-role="popup" id="myPopup">

                                      <p>This is a basics popup.</p>

                             </div>

                        </div>

If you want some extra padding and margin in your popup box, add the "ui-content" class to <div>:

<div data-role="popup" id="myPopup1" class="ui-content">

<h3>Welcome!</h3>

          <p>The "ui-content" class is especially useful when you have a popup with

<span style="font-size: 55px;"> styled text</span>, and want the edges and corners to look extra clean and sleek. <strong>Note:</strong> The text will wrap to multiple lines if needed.</p>

</div>

Closing Popups

By default, popups can be closed either by clicking outside the popup box or by pressing the "Esc" key. If you do not want the popup to be closable by clicking outside the box, you can add the data-dismissible="false" attribute to the popup (not really recommended). You can also add a close button to the popup, placed either right or left. To do so, add a button link with the data-rel="back" attribute into the popup container, and position the button by CSS classes.

Right close button

<div data-role="popup" id="rightclose" class="ui-content">

          <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

<p>I have a close button at the top right corner.</p>

<p><b>Tip:</b> You can also click outside to close me.</p>

</div>

Left close button

<div data-role="popup" id=" rightclose " class="ui-content">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>

<p>I have a close button at the top left corner.</p>

          <p><b>Tip:</b> You can also click outside to close me. </p>

</div>

Undismissible Popup

<div data-role="popup" id=" undismissible " class="ui-content" data-dismissible="false" style="max-width: 400px;">

<a href="#" data-rel="back"class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

<p>I am an undismissible button (data-dismissible="false). The only way to close me is by clicking on the close button, which is positioned at the top right corner. You cannot close me by clicking outside of me.</p>

</div>

Positioning Popups

By default, popups will appear directly over the clicked element. To control the position of the popup, use the data-position-to attribute on the link that is used to open the popup.

There are three ways of positioning the popup:

 

 

<div data-role="main" class="ui-content">

<a href="#window" data-rel="popup" class="ui-btn"data-position-to="window">Window</a>

<a href="#elementid" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo" </a>

<a href="#over" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>

                            

<div data-role="popup" id="window" class="ui-content">

          <p>I will appear centered within the window.</p>

</div>

<div data-role="popup" id="elementid" class="ui-content">

          <p>I will appear directly over the element with id="demo".</p>

</div>

<div data-role="popup" id="over" class="ui-content">

          <p>I will appear directly over the clicked link.</p>

</div>

<p>This is also a paragraph. I have a child element: This is a <span id="demo"style="color: red;">span</span> element with id="demo",inside the paragraph.</p>

</div>

Transitions

By default, popups do not have any transition effects added to them. You can use any of the effects that  are available in jQuery Mobile. Just apply the data-transition="value" attribute to the link that opens the popup:

Note: For performance reasons, jQuery Mobile recommend using "pop", "fade" or "none" for smooth and fast animations.

Example:

  <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>

Dialog Popup

Standard dialog markup can be placed into a popup. To create a modal style dialog, add the data-dismissible="false" attribute to the popup to prevent the click out to close behavior so people need to interact with popup buttons to close it.

 

Example

<div data-role="main" class="ui-content">

    <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>

    <div data-role="popup" id="myPopupDialog">

      <div data-role="header">

        <h1>Header Text</h1>

      </div>

      <div data-role="main" class="ui-content">

        <h2>Welcome to my Popup Dialog!</h2>

        <p>jQuery Mobile is FUN!</p>

        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Go Back</a>

      </div>

      <div data-role="footer">

        <h1>Footer Text</h1>

      </div>

    </div>