Tuesday, March 26, 2013
by

Preview your Worklight Mobile Application in Simulators


In Using JQuery Mobile in Worklight 5 we have seen how we can start developing our mobile application with jQuery mobile library. In this article I am going to simulate and preview our company mobile application on different simulators.

First let's create "Worklight Hybrid Application" and add some markup to the main page;

<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
</head>

 <body>
 <!-- **************** Page ***************** -->
  <div data-role="page" id="page_main" >

            <!-- **************** Header ***************** -->
            <div data-role="header" data-theme="b">
                   <h2>MAK Informatics</h2>
            </div>

            <!-- **************** Content ***************** -->
            <div data-role="content" style="text-align: center; padding: 0 50 0 50">
                   <span style="text-align: center">Welcome to MAK Informatics</span>
                   <div style="margin: 0 10 0 10">
                      <ul data-role="listview" data-inset="true">
                          <li><a href="#page_company">Company</a></li>
                          <li><a href="services.html">Services</a></li>
                          <li><a href="contacts.html">Contacts</a></li>
                      </ul>
                  </div>
            </div>
          <!-- **************** Footer ****************** -->
           <div data-role="footer" data-position="fixed" data-theme="b" class="d-copyright-text">
                <span>Copyright&nbsp;&copy;&nbsp;2013, MAK Informatics</span>
            </div>
  </div>
</body>

Here's our application running on Chrome


Now let's see how we can simulate and preview our page on different Simulators.

The first one which comes handy is the Ripple Emulator which is an extension to Chrome browser. Go ahead and Install it as a Chrome extension;

Here we go. "Preview as a common resources" on Worklight Console and Enable Ripple Emulator to see your application in action as shown;



Worklight comes with it's on Mobile Browser Simulator. All you need to add Worklight Environment like Android or Blackberry and you would be able to simulate your application on Mobile Browser Simulator by clicking on your device platform



When you add Worklight Environment you have noticed that an Android Application is generated and added to your working set with the name of your project + application + android


This time we are simulating our generated Android application on Android Emulator which is used to simulates Android Native Applications. Let's try this on our html application



This is how we can preview our mobile applications in different ways