Tutorial (basic learning) » 10.Interacting with Smartphone (Combination with jQueryMobile)

10.Interacting with Smartphone (Combination with jQueryMobile)

Last modified by kashi on 2015/01/30, 13:09

List of tutorials

Overview
Combination with jQueryMobile
Why manager required?
Implementation method
- Sample code
Register controller to page
Reference

Overview

This chapter describes a function that interconnects a development project using jQuery Mobile with hifive for ease of use. Refer to the link below for more details about jQuery Mobile:

Combination with jQueryMobile

Using a built-in controller manager (hereinafter referred to as manager) dedicated for jQuery Mobile, you can combine hifive and jQuery Mobile for use in a simple way, without having to understand jQuery Mobile specific page lifecycle (DOM generation and destruction).
Besides, since manager also imports CSS file required for view, this can avoid interfering with definition of CSS file being used in other pages.

Why manager required?

The diagrams below describe how jQuery Mobile manipulates with DOM element (data-role="page"). You will have to configure or remove controller as appropriate.

Implementation method

Follow these steps to integrate manager:

Create html file. Configure 1 html - 1 page (remember to have only 1 data-role="page" DIV element in 1 html).
Import js and css files used for the application into HEAD tag.
After h5.js, jquery.mobile.js are imported, initialize manager using h5.ui.jqm.manager.init().
Insert path of the script file where controller binded to the page is defined, to data-h5-script attribute of data-role="page" DIV element (use "," to separate between multiple paths).
- By default, script imported to data-h5-script attribute will be loaded synchronously.
  If you want to load asynchronously, add data-h5-async="true" to the element where data-h5-script attribute exists.
Create js file and define controller.
Register controller using h5.ui.jqm.manager.define():
- Write definition of controller registered in h5.ui.jqm.manager.define() to JS file specified by data-h5-script attribute.

Sample code

HTML

<!doctype html>
<html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       
       <link rel="stylesheet" href="jquery.mobile.css" />
       <script src="jquery.js"></script>
       <script src="ejs-1.0.h5mod.js"></script>
       <script src="h5.js"></script>
       <script src="jquery.mobile.js"></script>
       <script>
            h5.ui.jqm.manager.init(); // / Initialize controller manager
       </script>
       <title>JQM Controller Sample</title>
   </head>
   <body>
       
       
       <div data-role="page" id="index-page" data-h5-script="index.js">
           <div data-role="header">
               <h1>TEST 1</h1>
           </div>
           <div data-role="content">
               <input type="button" id="btn1" value="TEST">
           </div>
           <div data-role="footer">
               <div>footer</div>
           </div>
       </div>
   </body>
</html>

JavaScript

var indexController = {
    __name: 'IndexController',
   '#btn1 click': function() {
        alert('Hello!');
    }
};
// data-role="page" DIV id name passed to argument 1
// Path of css file used in this view passed to argument 2 (use array to pass multiple files)
// Controller definition object passed to argument 3
h5.ui.jqm.manager.define('index-page', 'index.css', indexController);

In the sample below, when controller is bound or unbound to each page, CSS file will be loaded and the style will be applied to the page.
jQueryMobile + hifive combination sample

Register controller to page

Use the code below to register controller to page:

For a single controller, pass a controller definition object, for multiple controllers, pass an array to argument 3.
However, executing h5.ui.jqm.manager.define() several times with the same page ID can still enable you to bind multiple controllers.
If using array, controllers will be bound based on the order defined in array.
Binding process will not execute for controller that is already bound.
To determine whether a controller is bound, check to see if name property value of controller definition object and of the bound controller are equal.

Next Chapter⇒11.HTML5 API