10.Interacting with Smartphone (Combination with jQueryMobile)
- Overview
- Combination with jQueryMobile
- Why manager required?
- Implementation method
- 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.
- By default, script imported to data-h5-script attribute will be loaded synchronously.
- 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
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import js and css files which are used commonly in the application -->
<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>
<!-- Definition of controller used in this page is written in index.js -->
<!-- Assign index.js to data-h5-script attribute of data-role"page" DIV element -->
<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
__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:
__name: 'IndexController',
'#btn1 click': function() {
alert('Hello!');
}
};
var indexController2 = {
__name: 'IndexController2',
'#btn1 click': function() {
alert('World!');
}
};
h5.ui.jqm.manager.define('index-page', 'index.css', [indexController, indexController2]);
- 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