Worklight's cross platform ability

Just to experiment with Worklight's cross platform ability I made a quick "Morse Code Translator" app to try on the different platforms.  Unfortunately I didn't have an actual Android Phone or a BlackBerry Phone to test my app on, but I was able to test it using the emulators.  Directions for how to set up the different emulators can be found on the Worklight tutorial site.  I would have tested my app on a iPhone as well, but I am working on a Windows computer.  By simply adding a new environment for each platform I wanted I was able to run my app on the emulators of a Windows Phone, Android Phone, and BlackBerry Phone.  No change in code was necessary for each platform.

Setting up an HTTP Adapter in Worklight

As one goes down the list of Worklight tutorials found on the Worklight website, the tutorials following the Worklight basics start to include Worklight adapters.  The definition given by the tutorial states "An adapter is a transport layer used by the Worklight® Platform to connect to various back-end systems."

Creating an adapter is simple.  Simply select "Worklight Adapter" from the Worklight drop down menu.  Eclipse will then ask you what project you want to create it in, what kind of adapter you would like to create (SQL, HTTP, or Cast Iron), and finally what you would like to name it.  Once the adapter is created there will be three files in the adapter folder: filtered.xls, adaptername.xml, and adaptername-impl.js.  Inside the javascript file there should be this code:

function getStories(interest) {
    path = getPath(interest);
    var input = {
        method : 'get',
        returnedContentType : 'xml',
        path : path
    };
    return WL.Server.invokeHttp(input);
}

function getStoriesFiltered(interest) {
    path = getPath(interest);
    var input = {
        method : 'get',
        returnedContentType : 'xml',
        path : path,
        transformation : {
            type : 'xslFile',
            xslFile : 'filtered.xsl'
        }
    };
    return WL.Server.invokeHttp(input);
}

function getPath(interest) {
    if (interest == undefined || interest == '') {
        interest = '';
    }

    else {
        interest = '_' + interest;
    }
    return 'rss/edition' + interest + '.rss';
}



To activate the adapter right click on the adapter and select "Run As > Deploy Worklight Adapter."  Now all that needs to be done is to call on the adapter from the app's JavaScript.  The tutorial from the Worklight website does an excellent job describing how to do so, so I won't waste time explaining something the tutorial can explain better.  The tutorial also comes with a sample program that retrieves a feed from Engadget for reference and experimenting.

Using a Windows Phone Environment I had one issue testing the sample program.  For an unknown reason the feed would not load in the app, even though I knew the adapter was working.  I was confident it was not the code since it was taken directly from the sample program.  After an extensive search for the issue a fellow IBMer found and pointed out the issue.  In the function "loadFeeds()" there is the code:

WL.Client.invokeProcedure(invocationData,{
    onSuccess : loadFeedsSuccess,
    onFailure : loadFeedsFailure,
});

The comma after loadFeedsFailure must be removed for the feed to load in a Windows Phone Environment.  I do not know if this is necessary for other environments.  (note: this issue has been fixed in an updated version of the sample code)  That is only the basic setup for a Worklight adapter, and from there one can learn and do much more with adapters.

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!