Book Image

Developing Windows Store Apps with HTML5 and JavaScript

By : Rami Sarieddine
Book Image

Developing Windows Store Apps with HTML5 and JavaScript

By: Rami Sarieddine

Overview of this book

Windows 8 has already been launched and been installed on millions of devices while the store is getting populated with apps, and soon enough everyone will want a Windows Store app. So start now and learn how to develop apps for Windows 8 using HTML5, CSS3, and JavaScript and you will be killing two birds with one stone by getting introduced to important features in HTML5 and CSS3 at the same time. You will gain the advantage of utilizing your web development skills to transform your website into an app or the other way round. Developing Windows Store Apps with HTML5 and JavaScript is a practical, hands-on guide that covers the basic and important features of a Windows Store App along with code examples which will show you how to develop these features, all the while learning some of the new features in HTML5 and CSS3 which you can utilize in other areas of development. This book starts with the new features in HTML5 and CSS3 that are incorporated with Windows 8 development, and then moves on to creating a blank Windows Store app and add features to it as we move through the chapters till we package the app and make it ready for publishing. Finally, we will have a look at how similar it is to develop the same app with XAML. You will also learn how to add and use new controls dedicated for Windows 8 and then see how to fetch data for the app and bind it to the controls. We will also take a look at making the app adapt to change in screen sizes and rotation as well as how to make the app live with tiles and allow users to sign in using their email accounts. Also you will learn how to add an app bar, and lastly you learn how to finalize the app and publish it. If you want to leverage your web development skills and utilize it in developing for Windows 8, then you came to the right place. Developing Windows Store Apps with HTML5 and JavaScript is packed with examples and screenshots which will make it easy for you to implement all the things you learned throughout the book.
Table of Contents (19 chapters)
Developing Windows Store Apps with HTML5 and JavaScript
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Understanding the ListView control


In the previous chapter we introduced a new set of controls provided by the Windows Library for JavaScript; one of these controls was the ListView control, marked as WinJS.UI.ListView. What this object basically does is displays data items in a customizable list or grid. To create a ListView control, we need to add the data-win-control property to a div element and set its property to WinJS.UI.ListView. In the default.html page, add the following code inside the body tag:

<body>
  <div id="sampleListView" data-win-control="WinJS.UI.ListView">
  </div>
</body>

This will create an empty ListView. So, if we run the app, there will be nothing to see. Since it is a WinJS control, it will not be rendered in the markup until after we call the WinJS.UI.processAll function.

Let's add some data for the sampleListView control to display. The data that might come from a database from the Web or from a JSON data source, will create a data source...