Developing Windows Store Applications with PhoneGap and jQuery Mobile

[Infragistics] Mihail Mateev / Sunday, February 10, 2013

WEB developers very often prefer to use jQuery and jQuery Mobile. In previous my blogs “Using PhoneGap in Windows 8 Store Applications” and “PhoneGap + jQuery Mobile for Windows Phone 8 Hybrid Applications” you learned how to start with PhoneGap / Apache Cordova for Windows Store applications and how to use PhoneGap and jQuery Mobile for Windows Phone 8 development.

If you try to create Cordova Windows Store applications with jQuery and jQuery Mobile it will be not so easy.

The very practical Javascript-library jQuery is the favored tool for lots of web developers. Since Windows Store applications support development using the standard webtechniques, jQuery immediately suggests itself. But because Microsoft has integrated a new security model in Windows Store Applications for Windows 8, jQuery has to be modified slightly in order to be usable for app development.

Microsofts security model comes into play when one of the standard Javascript functions innerHTML, outerHTML or document.write are used. For example:

<div id="test"></div>

<script>

    document.querySelector("#myselector").innerHTML = "<a onclick='document.body.style.backgroundColor=\"#F00\"'>Something dangerous</a>";

</script>

There will be a JavaScript runtime error that terminates the app, because dynamic content is injected via JavaScript.

Microsoft provides the method execUnsafeLocalFunction with which you can explicitly disable the security model and tell Windows “I know what I’m doing”. This should only be done when you control the executed code and are sure that no security problems could potentially happen. You have to wrap the code within the execUnsafeLocalFunction construct and let it execute for you. This code works without problems:

<script>

MSApp.execUnsafeLocalFunction(function () {

    document.querySelector("#myselector").innerHTML = "<a onclick='document.body.style.backgroundColor=\"#F00\"'>Something dangerous</a>";

});

</script>

When pulling in potentially unsafe content from an external source, you might want to consider using the toStaticHTML method or creating your nodes via DOM .

jQuery itself comes with lots of checks for the sake of browser compatibility. These checks contain code, that is considered to be potentially malicious and Visual Studio shows warnings when using jQuery 1.8.x

You can make jQuery ready for Windows 8 using instructions in this blog.

A patched version of jQuery 1.8.x for Windows 8 is available here.

In this article you will learn how to create a hybrid PhoneGap Windows Store application based on jQuery Mobile Twitter WEB application – same as in my previous post . It is a simple WEB application that uses twitter API to search for tweets containing a specific string.

Twitter search WEB application

The source code of the twitter WEB app is available below.

<!DOCTYPE html>

  

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta name="format-detection" content="telephone=no" />

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.2.0.css" />

        <script src="js/jquery.js"></script>
  

        <script src="js/jquery.mobile-1.2.0.js">

</script>  

        <title>Hello World</title>

    </head>

    <body>

  

        <script type="text/javascript" src="cordova-2.3.0.js">

</script>

        <script type="text/javascript" src="js/index.js">

</script>

        <script type="text/javascript">

  

        
</script>
  

        <!---- SEARCH PAGE ----->

    <div data-role="page" id="page1">

        <div data-role="header">

            <h1>Twitter</h1>

        </div><!-- /header -->

  

        <div data-role="content">

            <div data-role="fieldcontain">

                <input type="search" name="search" id="search" value="" style="-webkit-user-select: text;" />

                <input type="button" name="searchButt" id="searchButt"  value="Search"/>

            </div>

                <div data-role="content">    

            <div id="twitList">

                    

            </div>

        </div><!-- /content -->

            <a href="#prefs" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop">Preferences</a> 

        </div><!-- /content -->

  

        

    </div><!-- /page -->

  

  

        <!---- PREFERENCES ----->

        <div data-role="page" id="prefs">

            <div data-role="header">

                <h1>Preferences</h1>

            </div><!-- /header -->

  

            <div data-role="content">

                <div data-role="fieldcontain">

            

                    <label for="slider">Number of results:</label>

            

                    <input type="range" name="slider" id="slider" value="15" min="0" max="100"  />

                    <fieldset data-role="controlgroup">

                    <legend>Result Type:</legend>

                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="mixed" checked="checked" />

                        <label for="radio-choice-1">Mixed</label>

  

                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="recent"  />

                        <label for="radio-choice-2">Recent</label>

  

                        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="popular"  />

                        <label for="radio-choice-3">Popular</label>

                    </fieldset>

  

                </div>

            </div><!-- /content -->

  

        </div><!-- /page -->

  

    </body>

</html>

  

<script type="text/javascript">

            $(function () {

                $('#searchButt').click(function () {

                    doSearch();

                });

            });

  

            function doSearch() {

                $.ajax({

  

  

                    url: "http://search.twitter.com/search.json?q=" + $('#search').val() + "&result_type=" + $('input:radio[name=radio-choice-1]:checked').val() + "&rpp=" + $('#slider').val(),

                    dataType: 'jsonp',

                    success: function (json_results) {

                        // Remove any list - so the new one can be added.

                        $('#twitList ul').remove();

                        // Need to add UL on AJAX call or formatting of userlist is not displayed

                        $('#twitList').append('<ul data-role="listview"></ul>');

                        listItems = $('#twitList').find('ul');

                        $.each(json_results.results, function (key) {

                            html = '<img src="' + json_results.results[key].profile_image_url + '"/>';

                            html += '<h3><a href="#">' + json_results.results[key].text + '</a></h3>';

                            html += '<p>From: ' + json_results.results[key].from_user + ' Created: ' + json_results.results[key].created_at + '</p>';

                            listItems.append('<li>' + html + '</li>');

                        });

                        // Need to refresh list after AJAX call

                        $('#twitList ul').listview();

                    }

                });

            }
</script>

Before to start with PhoneGap / Cordova and Windows 8

If you have no experience with PhoneGap in general or/and with Cordova for Windows Store Applications you could read the article “Using PhoneGap in Windows 8 Store Applications”.

PhoneGap for Windows Store applications is based on WinJS projects. WinJS API is handled from cordova script to be possible to have the same API for Cordova apps for all mobile platforms and Windows Store.

Cordova projects for Windows 8 have the same security restrictions like WinJS applications. More information about Windows Store applications security you can find here.

We will use two different approaches to use our jQuery Mobile code in Windows Store applications.

Implementing the whole UI in iframe
Communication Between Contexts (exchange data between local and Web context)

The first approach is easier and you could use it when you just want to “move” your mobile WEB application to Windows 8.

The second approach ( using iframe only for Ajax requests and maintain data via messages between frames) provides possibility to have a fully functional Windows Store hybrid application .

Implementing the whole UI in iframe

It is possible to have only iframe in your main page (index.html). You have no need to add jQuery references in your index.html file.

Index.html file source code:

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta name="format-detection" content="telephone=no" />

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.2.0.css" />

        <script src="js/jquery.js"></script>
  

        <script src="js/jquery.mobile-1.2.0.js">
</script>

        <title>Hello World</title>

    </head>

    <body>

         <div>

             <iframe id="inlineWebContentIframe" src="ms-appx-web:///www/twitterSearch.html" width="100%" height="700"></iframe>

         </div>

    </body>

</html>

twitterSearch.html file source code:

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta name="format-detection" content="telephone=no" />

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.2.0.css" />

        <script src="js/jquery.js"></script>
  

        <script src="js/jquery.mobile-1.2.0.js">

</script>  

        <title>Hello World</title>

    </head>

    <body>

  

        <!---- SEARCH PAGE ----->

        <div data-role="page" id="page1">

            <div data-role="header">

                <h1>Twitter</h1>

            </div><!-- /header -->

  

            <div data-role="content">

                <div data-role="fieldcontain">

                    <input type="search" name="search" id="search" value="" />

                    <input type="button" name="searchButt" id="searchButt"  value="Search"/>

                </div>

                <div data-role="content">    

                <div id="twitList">

                

                </div>

            </div><!-- /content -->

                <a href="#prefs" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop">Preferences</a> 

            </div><!-- /content -->

  

    

        </div><!-- /page -->

  

  

        <!---- PREFERENCES ----->

        <div data-role="page" id="prefs">

            <div data-role="header">

                <h1>Preferences</h1>

            </div><!-- /header -->

  

            <div data-role="content">

                <div data-role="fieldcontain">

            

                    <label for="slider">Number of results:</label>

            

                    <input type="range" name="slider" id="slider" value="15" min="0" max="100"  />

                    <fieldset data-role="controlgroup">

                    <legend>Result Type:</legend>

                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="mixed" checked="checked" />

                        <label for="radio-choice-1">Mixed</label>

  

                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="recent"  />

                        <label for="radio-choice-2">Recent</label>

  

                        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="popular"  />

                        <label for="radio-choice-3">Popular</label>

                    </fieldset>

  

                </div>

            </div><!-- /content -->

  

        </div><!-- /page -->

  

    </body>

</html>

  

<script type="text/javascript">

    $(function () {

        $('#searchButt').click(function () {

                doSearch();

        });

    });

  

    function doSearch() {

        $.ajax({

  

  

            url: "http://search.twitter.com/search.json?q=" + $('#search').val() + "&result_type=" + $('input:radio[name=radio-choice-1]:checked').val() + "&rpp=" + $('#slider').val(),

            dataType: 'jsonp',

            success: function (json_results) {

                // Remove any list - so the new one can be added.

                $('#twitList ul').remove();

                // Need to add UL on AJAX call or formatting of userlist is not displayed

                $('#twitList').append('<ul data-role="listview"></ul>');

                listItems = $('#twitList').find('ul');

                $.each(json_results.results, function (key) {

                    html = '<img src="' + json_results.results[key].profile_image_url + '"/>';

                    html += '<h3><a href="#">' + json_results.results[key].text + '</a></h3>';

                    html += '<p>From: ' + json_results.results[key].from_user + ' Created: ' + json_results.results[key].created_at + '</p>';

                    listItems.append('<li>' + html + '</li>');

                });

                // Need to refresh list after AJAX call

                $('#twitList ul').listview();

  

            }

        });

    }
</script>

Twitter application (iframe implementation)

Using Communication Between Contexts(exchange data between local and Web context )

With Windows 8, JavaScript plays an important part in the overall security of your app by providing the tools necessary to secure data, validate input and separate potentially malicious content.

Communication Between Contexts

How does the top-level document communicate with an iframe running in the Web context? Using the postMessage features of HTML5, Windows Store apps can pass data between contexts. This allows developers to structure how the two origins communicate and to allow only known good providers (the allow list again) through to the local context. Pages that need to run in the Web context are referenced using an iframe with the src attribute set to http://, https:// or ms-appx-web://.

Sampe Windows Store twitter app uses twitterSearch.html page, which is used to communicate with the TwitterAPI via the jQuery $ajax object. Because of the remote resource, twitterSearch.html needs to execute in the Web context, which means that it needs to run within an iframe. Setting up the iframe isn’t different than in any other Web application except for how the page is referenced. Because the twitterSearch.html page is part of the local app package but needs to run in the Web context, you load it using ms-appx-web:

The doSearch method processes the message from the local context.

<script type="text/javascript">

    $(function () {

        $('#searchButt').click(function () {

  

                doSearch();

  

        });

    });

  

    function doSearch() {

  

  

        var twitterOptions = $('#search').val() + "&result_type=" + $('input:radio[name=radio-choice-1]:checked').val() + "&rpp=" + $('#slider').val();

  

        var msg = {

            opt: twitterOptions

        }

  

        var msgData = JSON.stringify(msg)

        var domain = "ms-appx-web://" + document.location.host;

        try {

            var iframe = document.getElementById("inlineWebContentIframe");

            iframe.contentWindow.postMessage(msgData, domain);

        }

        catch (ex) {

            document.getElementById("twitList").innerText = "Error has occurred!";

        }

    }

</script>

The argument of receiveMsg (receiveMsg is implementer in twitterSearch.html) is the data provided to the postMessage event. This function (receiveMsg ) contains ajax call to the Twitter API. It returns data like a content of the listview component.

<script>

    function receiveMsg(e) {

        if (e.origin === "ms-appx://" + document.location.host) {

            var output = null;

            var result = "";

            var parameters = JSON.parse(e.data);

  

            var url = "http://search.twitter.com/search.json?q=" + parameters.opt;

  

            var options = {

                dataType: "jsonp",

                jsonpCallback: "jsonpCallback",

                success: function (json_results) {

                    //result += '<ul data-role="listview">';

                    $.each(json_results.results, function (key) {

                        html = '<img src="' + json_results.results[key].profile_image_url + '"/>';

                        html += '<h3><a href="#">' + json_results.results[key].text + '</a></h3>';

                        html += '<p>From: ' + json_results.results[key].from_user + ' Created: ' + json_results.results[key].created_at + '</p>';

                        result += '<li>' + html + '</li>';

                    });

  

                    output = JSON.stringify(result);

                    window.parent.postMessage(output, "ms-appx://"

                    + document.location.host);

                },

                error: function (ex) {

                    output = ex;

                }

            };

            $.ajax(url, options);

        }

    }

  

    function init() {

        window.addEventListener('message', receiveMsg, false);

    }

  

    window.onload = init;

</script>

The processResult function to consume the data from the Web context back into the local context: it receives JSON as a string. The received data should be parsed an add as a content of the listview control.

<script>

    function processResult(e) {

        if (e.origin === "ms-appx-web://" + document.location.host) {

            var res = JSON.parse(e.data);

            $('#twitList').append(res);

            $('#twitList').listview('refresh');

        }

    }

  

    function init() {

        window.addEventListener('message', processResult, false);

    }

  

    window.onload = init;

</script>

Twitter application (implementation with communication between frames / exchange data between local and Web context )

You can use PhoneGap to package this application for different platforms.
This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc).

Source code version that is implemented entirely in iframe is available here.

Demo version that uses communication between contexts is available here.

You can find version of the same application built using plain jQuery & jQuery Mobile here.

Expect next blogs where you will learn more about Windows Store PhoneGap applications and Cordova extensions for Windows Phone.

Follow news from Infragistics for more information about new Infragistics events.

As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook, Google+andLinkedIn!