Worklight Demo Application

Here is simple application build using IBM Worklight

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>
<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>

 On javascript side

$(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

Create beautiful random color with Javascript

<html>
<head>
</head>
<body>

   <div id="content" />

     <script>
  
      var golden_ratio = 0.618033988749895;
 
      function hsv_to_rgb(h, s, v){
    var r,g,b,p,q,v;
    var hi = (h*6);
var f = h*6 - hi;
p = v * (1  - s);
q = v * (1  - f*s);
t = v * (1  - (1-f) * s);
hi = parseInt(hi,10);
 
if(hi==0) { r=v; g=t; b=p; }
if(hi==1) { r=q; g=v; b=p; }
if(hi==2) { r=p; g=v; b=t; }
if(hi==3) { r=p; g=q; b=v; }
if(hi==4) { r=t; g=p; b=v; }
if(hi==5) { r=v; g=p; b=q; }
return { r : parseInt(r*256,10), g : parseInt(g*256,10), b: parseInt(b*256,10) }
 }
 
 
 var html = '';
 
 var rnd = Math.random();
 var rnds = 0.5;
 var rndv = 0.95;

 for(var i=0;i<6;i++){
 rnd += golden_ratio;
 rnd %= 1;

     var color = hsv_to_rgb(rnd, rnds, rndv);
 var hexString = '#'+color.r.toString(16)+color.g.toString(16)+color.b.toString(16);
 html += '<div style="width:50px;height:50px;background-color: '+hexString+'">&nbsp;</div><br/>';
 }
 
 
 rnds = 0.25;
 rndv = 0.8;
 for(var i=0;i<6;i++){
     console.log('*');
 rnd += golden_ratio;
 rnd %= 1;

     var color = hsv_to_rgb(rnd, rnds, rndv);
 var hexString = '#'+color.r.toString(16)+color.g.toString(16)+color.b.toString(16);
 html += '<div style="width:50px;height:50px;background-color: '+hexString+'">&nbsp;</div><br/>';
 }
 
 rnds = 0.3;
 rndv = 0.99;
 for(var i=0;i<6;i++){
     console.log('*');
 rnd += golden_ratio;
 rnd %= 1;

     var color = hsv_to_rgb(rnd, rnds, rndv);
 var hexString = '#'+color.r.toString(16)+color.g.toString(16)+color.b.toString(16);
 html += '<div style="width:50px;height:50px;background-color: '+hexString+'">&nbsp;</div><br/>';
 }
 
 //console.log(html);
 document.getElementById('content').innerHTML = html;
  </script>

</body>

</html>