How to fetch selected item of ListView in HTML based Windows 8 Metro Application

I had tough time get the value of selected item of a ListView. So in this post I am sharing the code snippet required to fetch selected item from the ListView.

Read this article for ListView Binding with Grouping and Semantic Zoom in Windows 8 JavaScript Metro Application

I strongly suggest you to read the above article for more detail on ListView. If you continue with above article and want to get the value of selected item you can do that as below,


lstMovies = document.getElementById("movieListView").winControl;  
lstMovies.addEventListener("iteminvoked", function (e) {
                e.detail.itemPromise.then(function (invokedItem) {


                    var titleOfData = invokedItem.data.title;
                    var selecteplayerImg = invokedItem.data.picture;
                });
            }, false);


In above code snippet

  • lstMovies is name of the ListView.
  • Iteminvoked is name of the event. This event gets fire when an item in the ListView is being selected.
  • There are two data bind to the List View item. They are Title and Picture. Any data can be fetched as following snippet. invokedItem is parameter of itemPromise.

image

Title and Picture are properties of the datasource bind to the ListView.

In this way you can fetch selected item from ListView in HTML based Windows 8 Metro Application. I hope this post is useful. Thanks for reading!

Learning HTML 5: Detecting HTML5 feature supported in browser using ModernIZR

Before you go ahead and use any of the features of HTML5, it is recommended to verify that whether that particular feature is supported by target browser or not. You can verify supported feature using open source java script file ModernIZR

ModernIZR is open source java script file allows you to detect whether particular feature of HTML is supported on the target device or browser or not. You can download java script file from here.

To use it download js file and add it as script source in the header.

Below code snippet will verify whether video tag of HTML 5 is supported in browser or not.


<!DOCTYPE html >
<html>
<head>
<title>
Demo
</title>
<script src=modernizr-latest.js ></script>
<script>
alert(Modernizr.video);
</script>
</head>
<body>
<h1>debugmode</h1>
</body>
</html>


If you run above code snippet on IE9 you should get True as alert whereas on IE8 you should be getting False as alert.

Learning HTML 5: HTML Design Principal and New tags

HTML 5 is the new version came after HTML4.01. HTML4.01 was released in 1999 and since then Web has been changed to very large extent. To embrace changes of new web, HTML 5 came as new standard. HTML5 is joint venture of W3C and WHATWG to standardize the web and that would be supported by all the browsers.

Design principal of HTML5

You can read HTML 5 Design Principles here. I have made gist out of that document and summarized few of the important points as below,

  • Support of existing content. For example a document written in previous version of HTML should be rendered exactly the same and can be processed as HTML5 document.
  • Unbroken Error handling. For example the way existing HTML is handling broken tags, HTML 5 should handle the errors in the same way.
  • Design features to be accessible to users with disabilities. For example blind user cannot see Image. So with the img tag there should be provision of alternate text.
  • Any feature should be independent of the devices and media.
  • If there is already popular technology being used for a particular purpose uses that rather creating new one for the same purpose.
  • If there is already a particular practice is popular uses that rather than obsoleting that and forcing to adhere to new practice. For example <br/> tag.
  • Support classical and existing HTML syntax
  • Ensure that any new feature will adhere to web security standard.
  • Feature should provide simple solutions over complex solutions
  • Error handling should be there for interoperable implementation
  • There should be more markups and markup should be replacing scripts as much as possible.
  • For media usage of external plugins should be minimal.

Newly introduced tags in HTML 5

  • Article
  • Aside
  • Audio
  • Canvas
  • Command
  • Datalist
  • Details
  • Embed
  • Figcaption
  • Figure
  • Footer
  • Header
  • Hgroup
  • Keygen
  • Mark
  • Meter
  • Nav
  • Output
  • Progress
  • Rp
  • Rt
  • Ruby
  • Section
  • Source
  • Summary
  • Time
  • Video
  • Wbr