Using jQuery Mobile with Worklight

After the lengthy task of setting up Worklight for use my next assignment was to use jQuery Mobile in Worklight.  Conveniently, Worklight comes with jQuery already a part of it.  However, jQuery Mobile still needs to be installed.

When one creates a new Worklight project, Worklight provides the convenient option of adding the jQuery Mobile library right away, which can be easily downloaded from the website at no cost.  All one has to do is select the folder jQuery Mobile is saved in.  Once that is done and the project is created, inside the js folder there will a folder for jQuery Mobile.  Inside that folder there will be multiple .css and .js files, and two folders: images and demos.  Simply move all the .css files and images folder in the css folder, and all the .js files into the js folder.  The demo folder can be left behind.

 

Although Worklight has jQuery installed I still found it necessary to include the jQuery file.  After saving the file I dragged and dropped it in the js folder in the Project Explorer sidebar in Eclipse.  Now that all that was finished all I had to do was add three simple lines of code.  Right before the </head> (right above where one enters the HTML code for his or her app) I inserted these three lines:
        <link rel="stylesheet" href="css/jquerymobile-111.css" />
        <script src="js/jquery-172.js"></script>
        <script src="js/jquerymobile-111.js"></script>
(thank you Stephen Williamson for helping me with this!)
These three lines allow one to access the styles provided by jQuery Mobile and well as jQuery Mobile itself (if you copy this code make sure to change the location to wherever you have your own
files).  To then use the jQuery Mobile library one must go into the .js file and at the very top change
        window.$ = WLJQ;
to
        window.$ = window.jQuery = WLJQ;
After that jQuery Mobile should be ready for use!

Creating HelloWorklight on a Windows Phone Emulator

As part of my summer internship at IBM my first assignment was to set up and get familiar enough with Worklight to write the classic "Hello World" app for a Windows Phone, and write about the steps required to do so.  While not teaching one code such as HTML and JavaScript, the Worklight tutorials provide everything needed to get started with Worklight.

Set up in any situation, as I'm sure plenty would agree, is the worst and most boring part of any task.  In this case it took me almost a week.  There are four things required to download before one can start.  Eclipse, Worklight, Visual Studio Express for Windows Phone, and (if you want to put your app on a real phone instead of the emulator that comes with Visual Studio) Zune.  Unfortunately the computer I was given for the summer had the operating system Windows XP, which doesn't run Visual Studio.  After a few days I was given a new computer with Windows 7, during which I did my best to prepare myself to jump right in once everything was downloaded.  The new computer did not solve all my problems however, as downloading Visual Studio continued to cause issues.  The download could not make it more than halfway before freezing, and required restarting the computer to retry, making multiple attempts lengthy and frustrating.  Finally, after many hours, I was able to download the trial version of Visual Studio with the help of Virtual Clone Drive.

As if the many hours spent trying to download just one program wasn't enough, Eclipse started to act funny almost immediately after Visual Studio had finally been set up.  After every click or key pressed the error message "The connection was refused when attempting to contact localhost:0." would appear.  Not knowing how to solve this problem (or even what it meant) I reinstalled Eclipse and Worklight in hopes the error would disappear.  Fortunately it did.  Finally I could start and preview my app.

The tutorial "Writing Your First Application" is very thorough in teaching how to write the most basic app, so I won't repeat what it says.  The tutorial doesn't not teach one the coding knowledge required to write the app, but teaches the reader everything he or she needs to know about using Worklight.  All other required coding knowledge can be found at w3schools.  Once the app is written the next tutorial "Previewing your Application in Windows Phone environment" helps one preview their app in both the Windows Phone emulator and an actual Windows Phone

Previewing my app in the Windows Phone emulator was fairly simple.  The tutorial does an excellent job explaining how to do so, so I won't waste time going through each step that the tutorial can explain better.  The only problem I had when attempting to preview my app in the emulator is that for some unknown reason I can't open the .csproj file from Eclipse as the tutorial suggests.  I assume however that this is a problem exclusive to my computer.  Instead I had to open explorer and find the file itself.  From there I had to right click and select "Open with > Microsoft Visual Studio Express 2010 for Windows Phone".  Even though Visual Express is the first option simply clicking "Open" also did not work; I had to specifically tell the computer to open it with Visual Studio.  When opened Visual Studio appears blank, but all I needed was the small green arrow up top.

Once I selected Windows Phone Emulator and hit "Start Debugging (F5)" the result was quite satisfying.  (Side note: a few times when I attempted to run the app it would start up but after a few seconds a error would appear the said "the application failed to connect to the service" and the app would be unresponsive.  I would exit out of Visual Studio and in Eclipse right click the App folder "Run As > Build All and Deploy" (as one needs to do before they can preview the app at all and every time he or she makes changes to his or her app) and the problem would go away.)  As long as everything is done correctly you should have an app up and running app!