Preparations:
- Install Eclipse Juno with Worklight
For full source code download here:
Worklight project - project for mobile client side, using IBM Worklight Studio
Server side code - server side code in PHP and MySQL
The application will demo how to:
- Use worklight in offline mode, does not contact Worklight Server
- Call external server side, cross domain (I'm using PHP and MySQL for example)
- Using jQueryMobile
- Using Google Map Javascript API
Code review
get_list.php
<?php header("Access-Control-Allow-Origin: *"); header("Content-type: application/json"); $result = array(); $con = mysql_connect("localhost","root",""); mysql_select_db("demo"); $sql = "select * from contacts"; $rs = mysql_query($sql); while($read = mysql_fetch_array($rs)){ $result[] = array("id"=>$read[0], "name"=>$read[1], "phone"=>$read[2]); } mysql_close($con); echo json_encode($result);?>In client side application can use jQuery mobile with Worklight
<!DOCTYPE HTML>On javascript side
<html>
<head>
<meta charset="UTF-8">
<title>DemoApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/DemoApp.css">
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.theme-1.3.1.min.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content">
<div id="home" data-role="page">
<div data-role="header">
<a href="#add_contact" data-role="button" id="addContact" data-theme="b">Add Contact</a> <h2>Demo App</h2>
<a href="#view_map" data-role="button" id="viewMap" data-theme="b">View Map</a>
</div>
<div data-role="content">
<div id="message"></div>
<ul id="contact_list" data-role="listview">
</ul>
</div>
</div>
<div id="add_contact" data-role="page">
<div data-role="header">
<a href="#" data-role="button" data-rel="back" data-theme="b">Back</a>
<h2>Demo App</h2>
</div>
<div data-role="content">
<div>
<input type="text" id="txtName" placeholder="Your name" />
</div>
<div>
<input type="text" id="txtPhone" placeholder="Your phone" />
</div>
<div>
<input type="button" id="btnSave" value="Save" data-theme="b" />
</div>
</div>
</div>
<div id="view_map" data-role="page">
<div data-role="header">
<a href="#" data-role="button" data-rel="back">Back</a>
<h2>Demo App</h2>
</div>
<div data-role="content">
<div id="canvas"></div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/DemoApp.js"></script>
<script src="js/messages.js"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</body>
</html>
$(document).ready(function(){
$('#addContact').click(function(){
$('#txtName').val('');
$('#txtPhone').val('');
$.mobile.changePage('#add_contact');
});
$('#viewMap').click(function(){
$.mobile.changePage('#view_map');
loadMap();
});
$('#btnSave').click(function(){
var name = $('#txtName').val();
var phone = $('#txtPhone').val();
if(name.trim()==''){
alert('Name is required');
$('#txtName').focus();
return;
}
if(phone.trim()==''){
alert('Phone is required');
$('#txtPhone').focus();
return;
}
addContact(name, phone);
});
loadContactList();
});
For full source code download here:
Worklight project - project for mobile client side, using IBM Worklight Studio
Server side code - server side code in PHP and MySQL
