Worklight learning-first Worlight Project

First, open Eclipse and click File> New> Worklight Project. If there is no Worklight Project, select File> New> Other> Worklight Project) to open the Project Creation Interface,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P44T3-0.jpg "title =" snapshot25.bmp "/>

The project name is FirstProject, and others are default. Click Next and enter the application name and select the JavaScript library to be loaded.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P42925-1.jpg "title =" snapshot26.bmp "/>

Enter HelloWorld as the project name. We will not select the following JavaScript library, and then manually add it later. Click Finish to complete the creation of the first Project, and the first application HelloWorld is also created. Eclipse project structure:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P4N10-2.jpg "title =" snapshot27.bmp "/>

These are the file structures automatically generated by Worklight. Among them, the common folder in apps is the place where all the files required to create the application are placed, including HTML, JavaScript, and CSS files. The project and application are created here.

Next, start the server. If you want to test your application, you must have a Worklight server. Here there will be a local server. We can test the created application.

Right-click the common folder in the project> Run As> Build All and Deploy

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P43H1-3.jpg "title =" 28.bmp "/>

Then, you can see the success message printed on the console.

Now you can open a browser to access the console of the local server. Access address: http: // localhost: 10080/FirstProject/console/

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P4BL-4.jpg "title =" snapshot29.bmp "/>

Here we can see our application HellWorld.

Next we will develop our HelloWorld program:

Select the JavaScript Library first. We skipped this step when creating the project. Now we select it manually. Here we use JQuery mobile. You can also choose to use libraries such as Dojo mobile or Sencha Touch. In addition, you can use JavaScript to develop your applications.

Something to download has JQuery and JQuery Mobile, and the JQuery I'm using is jquery-1.7.2.min.js JQuery Mobile is

Jquery. mobile-1.3.2.

After the download, place the following files in the common/js folder.

Jquery-1.7.2.min.js

Jquery. mobile-1.3.2.min.js

Place the following files and folders in the common/css folder

Jquery.mobile-1.3.2.css

Jquery.mobile.structure-1.3.2.min.css

Jquery. mobile-1.3.2/images

The JQuery library is referenced in the helloworld.html file.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P43921-5.jpg "title =" snapshot30.bmp "/>

Next, add the template code, which is the document code officially provided by JQueryMobile.

<div data-role="page">    <div data-role="header">        
This is a simple page example, put in the body,
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/103P45020-6.jpg "title =" snapshot32.bmp "/>
Such a simple application is complete. The next step is to deploy it on the simulator or on a real mobile phone.
Set up the environment for a specific device:
Right-click FirstProject> new> Worklight Environment
I chose android. After clicking finish, the android directory will appear under the HelloWorld directory.

This is your android application. Official Note: Worklight is namedCommonHTML, CSS, and JavaScript) and platform-specific files in their respective directories.AndroidApplicable to Android files,IphoneApplies to iPhone files, and so on. For example, because the iOS and Android build will use JQuery, The jquery. js file is located in common/jquery. js. If you have some iOS-specific code, the JavaScript code will be in the ios-plugin.js and will be placed in the iphone/js/iso-plugin.js rather than the commonjs/iso-plugin.js. Worklight will ensure that the common files in each specific device environment are synchronized .)
After the source code is ready for deployment, right-click the Android Application and choose "Run as...> Build All and Deploy" from the context menu.

Next, right-click the project and choose Run as...> Android Application
Then, test your application on the VM.
This is today.
This article is from the "Big Cheng Xi's little corner" blog, please be sure to keep this source http://dachengxi.blog.51cto.com/4658215/1286362