Using JQuery Mobile in WorkLight application

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
  1. Create a simple WorkLight application that invokes a SQL query you can use the steps mentioned in Connecting to Database from WorkLight
  2. First download the Worklight Starter Application for JQuery Mobile from Worklight Getting started page
  3. Expand the WorklightStarter_jQueryMobile.zip some where on your local disk
  4. 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
  5. 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.
  6. 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()

7 comments:

James said...

is it still necessary to get this custom version of jquery using worklight version 5?

Harshita Lahare said...

Nice Information provided in the blog
#Bestmobileappdevelopmentagency firm in #Paris which provides custom #Android, #Iphone, #Ios application development services in #France #Paris, #Lyon, #Toulouse, #Nantes, #Strasbourg, #Bordeaux, #Lille
Best Mobile App Development Agency Paris


Ankita Desai said...

Nice Information provided in the blog.
Best Mobile Application Development Services Company in Paris France Provides Customized smartphone Android, iphone, ios apps in Paris, Lyon, Toulouse, Nantes, Strasbourg, Bordeaux, Lille
Mobile Application Development Services Company
Mobile Application Development Agencies in France
Top App Development Companies in France
Iphone Mobile App Development
Mobile App Design And Development
Top Mobile App Development Firms


Alwin Co Daan said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

rohini pabale said...

Meilleure information donne à nos blogs

Prometteur 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

helen shapiro said...

it is a beautiful post, and I want to say thank you so much for sharing this information.
digital marketing services in india

Ankita Jaswal said...

Nice Informations fournies dans le blog.
Prometteur Solutions est l'un des meilleurs développeurs d'applications mobiles en France. Nous figurons parmi les meilleures sociétés de développement d'applications mobiles à Paris Développement d'applications mobiles de commerce électronique à Paris