Tuesday, February 12, 2013

Windows Store Apps Problems iframe, HTML5/JS and C#/XAML

This post would be very useful for developers for making a choice before choosing a path for windows store app development.

Actually my first encounter with windows store app development was well before windows 8 was released to consumers. My boss asked me to develop training and  skills assessment app(similar to pluralsight). We had to give up that project as some other higher priority items came up. but the lessons i learnt was very useful.

For my first project, we chosen c#/XAML because we had done some development in WPF earlier and we did not have any prior experience in HTML/JS and hence the choice was obvious. But as the project progressed,we hit a road block when we had to display a chart to show performance comparison with peers. we ran from pillar to posts and we had to drop adding charts to app . there was no controls available then. fortunately we have some third party controls like component art but still there is no inbuilt chart control from microsoft.  But Who would like to pay for controls when plenty of them available for free all over the web in Javascript?..

After going through what i explained above, we were all for the HTML5/JS for our next project. It was fun and fast. I started with the jump start videos series1 and series 2 for windows store app development by Jereme and Palermo. Those are two amazing guys. It was really helpful in strengthening my fundamentals. I was also helped by this book from miscrosoft press "Programming Windows 8 Apps with HTML, CSS, and JavaScript," which is free.  I strognly recommend this book. you can also see other resources available here. I usually don't dive deep into the development at the very beginning itself unless otherwise I have some grab on the fundamentals. after watching those videos and some book readings I was all set to go.

  Fun and Fast
      so my first windows store app development started and It was a fast phased development in JS/HTML5. I have implemented everything in my app like bringing data from web service, search, share, live tile notifications etc. but I kept one important item pending which
proved to be fatal.
           when you click a link (<a href="facebook.com">), by default the metro IE browser will be opened(due to the URI schema association). but if your app has to display more web site contents to the user, then it will not be a smooth app experience if the user has to move back and forth between metro IE
and your app. the one item that was pending in my project was a browser window. when user clicks a web link, then the website should be shown inside your app instead of opening IE and hence it will not annoy the
user.

iframe :((
      When i started exploring about the options available for browser like control in HTML/JS in windows store app development I came to know that the only option available is iframe for loading external web contents(please study about localcontext and webcontext which is important). I kept an iframe inside a div control and set the target property of all the links to this iframe and when i clicked the above link "<a href="facebook.com">" inside my app, nothing happened. After googling i found out that It is because some of the web sites does not allow to be loaded on an iframe. to avoid clickjacking(tricking the user to click someother website but showing different website content more on this here) some of the web sites does not allow to be loaded on iframes. there is a small consolation as you can include an "msapp-error.html" and "msapp-error.js" in your project. whenever there is any navigation error to external web site, iframe by default navigate to this msapp-error.html page and passing in some valuable informations that are "response Status received", "Failure Name", "Failed Url"  . you can capture this and launch the metro IE browser for the sites that cannot be loaded into iframes.

Solution
  function id(elementId) {
        return document.getElementById(elementId); 
    }
    
    function initialize() {
        for (var i = 0; i < 3; i++) {
            var parameter = parameters[i];
            var parameterValue = getQueryParameter(parameter);
            //use this query parameters to display information to user or launch IE 
            if (parameterValue) {
                id(parameter + "Value").innerHTML = unescape(parameterValue);
            } else {
                id(parameter + "Value").innerHTML = "N/A";
            }
        }
    }

    function getQueryParameter(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return "";
    }

    document.addEventListener("DOMContentLoaded", initialize, false);
}

I would place a button "Open Browser" and display this message "This page cannot be loaded here. But
you can have a coffee and click "Open Browser" to open it in IE. when the user clicks the button we can
launch the IE browser using


var uri = new Windows.Foundation.Uri(url);
Windows.System.Launcher.launchUriAsync(uri);




this is really not a solution but at least we are providing an option for the user when the external sites are not
loaded.

C#/XAML
           that said, there is something called webview control in XAML and it works very fine like a browser.had i developed my app in c#/xaml, i would not have had this problem at all and my app
would provide nice user experience.

since i have reasonable knowledge in developing apps in both XAML and HTML5, I will choose the
development option based on the problem in hand and features to implement. I prefer HTML5/JS over C#/XAML. because you can easily manipulate the UI with css and it incorporates powerful HTML5 standards. You also have plenty of javascript snippets available in web which we can make use of (even though we may not be able to use them as they are, with some modifications we can).

so choose the right choice before diving into the development and hitting the road block.

I hope microsoft will come up with some solution for this. we cannot have two languages targeting the same platform but one is superior to other in one area and vice versa.



                  

Windows Store Apps - Initial impressions

I was very excited about WinRT when windows 8 came out. One thing that I like very much about developing for windows store is that there are plenty of resources and guidance available directly from microsoft.

I took HTML5/JS supported by WinJS MS java script library route as I thought it would be the way going forward for developing apps for all the platforms. But the HTML5/JS for WinRT is platform specific. And I was HEART BROKEN when i came to know that there is no HTML5/JS option for Windows Phone 8 app development. It is like telling the developers who are willing to develop apps for microsoft, "Hey , You know what?..If you want to develop app for microsoft, develop only for windows store and not for windows phone store". Again a lot of us do not understand the logic behind separate stores for windows phone 8 and Windows 8. We hope Microsoft will come with some good news for developers sooner than later.