In this section, you will learn how to build a very simple mobile application that contains some basic Dojo components in only a few steps using Worklight Studio. You will also learn how to use the Dojo Mobile Application architecture with page views, listItems
, and Dojo Toolkit implementation. It is a JavaScript framework that enables cross-platform development of mobile applications.
The following steps show you how to create a mobile application, using the browser visualization, Worklight Studio virtualization.
DojoFirstApp
, which includes complete Dojo Toolkit.apps
/HelloWorld
/common
/HelloWorld.html
. Select its Design view instead of Source or Split.HelloWorld.html
. Define the parameters as shown in the following screenshot and then hit Finish:<div data-dojo-type="dojox.mobile.View" id="HelloWorld" data-dojo-props="selected:true"> <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Worklight Dojo Mobile',moveTo:'HelloWorld'"></h1> </div>
The following is the complete code after adding the header and ListItem into our mobile application:
<body onload="WL.Client.init({})" id="content" style="display: none"> <div data-dojo-type="dojox.mobile.View" id="HelloWorld" data-dojo-props="selected:true"> <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Worklight Dojo Mobile',moveTo:'HelloWorld'"></h1> <div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'ListItem3'"></div> <div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'ListItem2'"></div> <div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'ListItem3'"></div> </div> <!-- application UI goes here --> <script src="js/HelloWorld.js"></script> <script src="js/messages.js"></script> <script src="js/auth.js"></script> </body>
3.143.235.23