Creating a multipage UI in PhoneGap

We will use the HTML CSS, and JavaScript to create the PhoneGap application’s user interface. The PhoneGap application’s UI layer takes 100% of the device height and 100% of the device width. This is a web browser, and we can think of it as a “chrome-less” web browser.

It shows us the HTML content, without the window or “chrome” decoration of a regular web browser. We build our application to take advantage of this space, and we build navigational/interactive/content elements and application chrome into our HTML and CSS based user interface.

PhoneGap uses the same web view as the native operating system use. This is present as the Objective-C UIWebView class on the iOS and as the android.webkit.WebView on Android.

If we are coming to mobile development from the desktop world, we may find that user interface development for mobile requires a little more consideration, and we had a giant screen and a lot of screen real-estate to play with it. In this section, we will learn about the user interface. We’re first going to create a multipage user interface. We’re going to work with collapsible content blocks control groups later. The flip switch and the list view from the JQuery mobile UI library. This section will help us make really attractive and usable interfaces for our mobile applications with a phone app.

Note: There is a couple of different libraries which we can use. We will use the JQuery mobile library.

The JQuery mobile library is one of the most effective and oldest libraries. These are the following steps used to create a multipage UI:

1) Create a new project

Firstly, we will create a new PhoneGap project with a blank template. If you don’t know how to create an app with a blank template, go through the PhoneGap project link.

2) Open index.html file

After creating a new project with a blank template, we will go to our application directory on the computer and open the index.html file on our preferred editor.

3) Create the div tag

We will divide the complete page into three section, i.e., header, footer and the main page with the ui-content class. We will create a div tag which will contain all these three div tags like as:

  <body>          <div data-role=”page”>          <div data-role=”header”>          </div> <!– header –>          <div data-role=”main” class=”ui-content”>          </div> <!– main –>          <div data-role=”footer”>          </div> <!– footer –>          </div> <!– page –>          <script type=”text/javascript” src=”cordova.js”></script>      </body>  

4) Add heading and JQuery mobile library.

Now, we will add heading tags in header div and also add the JQuery mobile library, as we have added in our previous section.

  <!DOCTYPE html>  <html>  <head>  <meta charset=”utf-8″>          <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>  <title>Dog Years Calculator</title>  <link rel=”stylesheet” href=”https:://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />  <script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>  <script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>  </head>  <body>          <div data-role=”page”>          <div data-role=”header”>              <h1>PhoneGap User Intrface</h1>          </div> <!– header –>          <div id=”result”></div>          </div> <!– main –>          <div data-role=”footer”>          </div> <!– footer –>          </div> <!– page –>          <script type=”text/javascript” src=”cordova.js”></script>      </body>  </html>  

5) Adding Anchor

Now, what we will do, we will add an anchor to our project.

1. We will give an id to our footer.

  <div data-role=”footer” id=”footer”>  <h2>tutoraspire.com</h2>  </div> <!– footer –>  

2. We will open the style sheet by using <style></style> We will do all the things in the footer. So, we will go to the footer using the id selector. We will set the position to absolute, bottom to 0, and width to 100%.

  <style>              #footer              {                  position: absolute;                  bottom: 0;                  width: 100%;              }  </style>  

3) We will give a unique id to this page.

4. We will also add a button to the screen by adding the <button></button> tag in the main div.

  <div data-role=”main” class=”ui-content”>  <button>Click here</button>  </div> <!– main –>  

6) Creating a new page

Now, we will repeat the whole structure of the page for a second screen. We will copy the code of page 1 and paste it below this page. We will give it an id page2.

  <div data-role=”page” id=”page2″>  <div data-role=”header”>           <h1>PhoneGap User Interface 2</h1>              </div> <!– header –>                <div data-role=”main” class=”ui-content”>           <button>Click here</button>              </div> <!– main –>                <div data-role=”footer” id=”footer”>           <h2>Visit tutoraspire</h2>              </div> <!– footer –>  </div> <!– page –>  

7) Connects pages

Now, we will connect pages through hyper-reference so that we can move from one page to another. For this, we will go to the buttons and use onclick for switching pages.

  <div data-role=”main” class=”ui-content”>  <button onclick=”location.href=’index.html#page2′”>Click here</button>   </div> <!– main –>     <div data-role=”main” class=”ui-content”>              <button onclick=”location.href=’index.html#page1′”>Click here</button>   </div> <!– main –>  

Next TopicCollapsible content block

Creating a multipage UI in PhoneGap

Creating a multipage UI in PhoneGap

Note: There is a couple of different libraries which we can use. We will use the JQuery mobile library.

1) Create a new project

2) Open index.html file

3) Create the div tag

4) Add heading and JQuery mobile library.

5) Adding Anchor

6) Creating a new page

7) Connects pages

NGINX HTTP Health Checks

Get and Post Methods in PHP

You may also like