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!

Here are some examples of what you can do using jQuery Mobile:

<div data-role="content" style="text-align: center">
        <div data-role="header" data-theme="b"><h1><b>Header</b></h1></div>
        <br />
        <a data-role="button" data-inline="true" data-icon="star">Click Me!</a>
        <div data-role="controlgroup" data-type="vertical" data-mini="true">
            <input name="checkbox" id="checkbox" type="checkbox">
            <label for="checkbox">
                Do you feel like <i>not</i> checking this box?
            </label>
        </div>
        <fieldset data-role="controlgroup">
            <label for="toggleswitch">
                <b>Select your mood:</b>
            </label>
            <select name="toggleswitch" id="toggleswitch" data-theme="" data-role="slider"
            data-mini="true">
                <option value="happy">
                    :)
                </option>
                <option value="sad">
                    :(
                </option>
            </select>
        </fieldset>
</div>