In the
Connecting to Database from WorkLight i blogged about how to build WorkLight application that talks to database, that application did not had good looking UI, so i made changes to use JQuery Mobile that makes building good looking UI much simpler. This is how my application looks like now
These are the steps that i followed
- Create a simple WorkLight application that invokes a SQL query you can use the steps mentioned in Connecting to Database from WorkLight
- First download the Worklight Starter Application for JQuery Mobile from Worklight Getting started page
- Expand the WorklightStarter_jQueryMobile.zip some where on your local disk
- Copy jquery.mobile*.js and jquery-*.js from the WorklightStarter_jQueryMobile.zip to the js folder of your application, Also copy jquery.mobile.*.css into css folder of your application
- Change the html page of your application to include the JQuery related css and js, this is how the html page looks for me
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>HelloDatabase</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/HelloDatabase.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.0.min.js"></script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>Contact DB App</h3>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
First Name
</label>
<input id="contactName" placeholder="" value="" type="text" />
</fieldset>
</div>
<a data-role="button" data-transition="fade" href="javascript:getContact()" id="searchContact">
Search Contact
</a>
<ul data-role="listview" data-inset="true" data-filter="true" id="displayContact">
</ul>
</div>
<div data-theme="a" data-role="footer">
<h3>Copyright stuff</h3>
</div>
</div>
<script src="js/HelloDatabase.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
</body>
</html>
In the head section first you should include jquery related css and js and also call var jq = jQuery.noConflict(); so that the jQuery $ character does not conflict with $ used by the prototype javascript framework used by worklight.
Next use the jquery mobile template in the body section that divided the page into head, content and footer section.
- Add following code to the javascript file for your application
function wlCommonInit(){
// Common initialization code goes here
}
function getContact(){
console.log("Entering getContact()");
var contactName = '%'+$('contactName').getValue()+'%';
var invocationData = {
adapter:"mySQLAdapter",
procedure:"searchContactByFirstName",
parameters:[contactName]
}
var options ={
onSuccess:loadContactSuccess,
onFailure:loadContactFailure
}
WL.Client.invokeProcedure(invocationData, options);
}
function loadContactSuccess(result){
console.log("Inside loadContactSuccess " + result);
var html = '';
if(result.invocationResult.isSuccessful){
var contactList = result.invocationResult.resultSet;
var i = 0;
for(i =0 ; i < contactList.length ; i++){
var currentContact = contactList[i];
html = html + '<li><a href="#">'+currentContact.FIRSTNAME +' '
+currentContact.LASTNAME +'</a></li>';
}
}
jq("#displayContact").html(html);
jq("#displayContact").listview('refresh');
}
function loadContactFailure(result){
console.log("Inside loadContactError " + result);
}
As you can can see i am using jq("#displayContact")> instead of regular $("#displayContact") this is the nonconflict version of JQuery that you must use in the WorkLight, but your still allowed to use the prototype based syntax for looking up objects as well like i did in $('contactName').getValue()
is it still necessary to get this custom version of jquery using worklight version 5?
ReplyDeleteMeilleure information donne à nos blogs
ReplyDeletePrometteur solution est la meilleure entreprise de conception d'applications Android pour smartphone en France. Nous fournissons des services de développement d'applications mobiles à Paris, en France.
société de conception d'applications Android en france
société de conception d'applications Android à Paris
This comment has been removed by the author.
ReplyDelete"
ReplyDeleteAt the point when all activities and slimming down stage gets fizzled, Keto Primal works splendidly to give the coveted results by giving a thin and sharp body appearance since it is a characteristic craving boosting fat buster. The supplement additionally limits the nourishment desires or enthusiastic eating of people where they would encounter less appetite feel and that would offer them to stay in controlled calorie admission.
The supplement attempts to influence a person to go fit as a fiddle and carry on with a sound and a la mode way of life. The weight reduction process that begins after the admission of the pills go normally, and you may encounter the results inside 2-3 weeks of time. The expansion of every common concentrate here attempts to support the stomach related framework and furthermore clean the colon framework to stay free from hurtful poison squander. It supports the digestion level and gives a lift to vitality and stamina level where you would have the capacity to exercise more without getting worn out and stay dormant way of life. Visit for more informations:
Keto Primal
Health Care 350"
This comment has been removed by the author.
ReplyDelete"I like this post,And I guess that they having fun to read this post,they shall take a good site to make a information,thanks for sharing it to me.
ReplyDeleteRead more here:
kim kardashian sex tape
porn sex video hd
mia khalifa sex video
sunny leone sexy movie"