Developing Windows Store Apps with HTML5 and JavaScript

Table of Contents

Developing Windows Store Apps with HTML5 and JavaScript

Credits

About the Author

Acknowledgments

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Instant Updates on New Packt Books

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. HTML5 Structure

Understanding semantic elements

Introducing built-in media elements

Advanced media with JavaScript

Introducing feature-rich form elements

An enriched tag

Easy validation

Assigning custom data attributes

Summary

2. Styling with CSS3

The power of CSS3 selectors

Attribute selectors

Combinator selectors

Pseudo-class selectors

Pseudo-element selectors

Creating fluid layouts with Grid and Flexbox

The Grid layout

The Flexbox layout

CSS-powered animations

CSS3 animations

CSS3 transforms

Introducing media queries

Summary

3. JavaScript for Windows Apps

Asynchronous programming with Promise objects

Querying the DOM with WinJS.Utilities

Understanding WinJS.xhr

Introducing a new set of controls

Summary

4. Developing Apps with JavaScript

Introducing the tools

Getting a free developer license

Using Visual Studio and its templates

Project item templates

Getting started with Blank App

Understanding the ListView control

Summary

5. Binding Data to the App

Getting the data

Displaying the data

Sorting and filtering the data

Summary

6. Making the App Responsive

Introducing app view states

Handling a view state

Understanding semantic zoom

Summary

7. Making the App Live with Tiles and Notifications

Introducing tiles, badges, and notifications

Working with live tiles

Sending notifications

Summary

8. Signing Users in

Introducing Live Connect

Signing in users to the app

Getting user info

Summary

9. Adding Menus and Commands

Understanding the app bar

Adding functionality to the commands

Summary

10. Packaging and Publishing

Introducing the Windows Store

Submitting the app for certification

The Store within Visual Studio

Creating an App Package

Summary

11. Developing Apps with XAML

Creating apps with different platforms

Introducing XAML apps

Adding a title, theme color, and content

Summary

Index

Developing Windows Store Apps with HTML5 and JavaScript

Developing Windows Store Apps with HTML5 and JavaScript

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2013

Production Reference: 1160813

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84968-710-2

www.packtpub.com

Cover Image by Michel Makhoul (<[email protected]>)

Credits

Author

Rami Sarieddine

Reviewers

Nidal Arabi

Juri Strumpflohner

Jenil Vasani

Acquisition Editor

Kevin Colaco

Commissioning Editor

Priyanka Shah

Lead Technical Editor

Ankita Shashi

Technical Editors

Ruchita Bhansali

Jalasha D'costa

Menza Mathew

Project Coordinator

Kranti Berde

Copy Editors

Mradula Hegde

Sayanee Mukherjee

Aditya Nair

Alfida Paiva

Proofreader

Stephen Copestake

Indexer

Priya Subramani

Monica Ajmera Mehta

Graphics

Ronak Dhruv

Production Coordinator

Manu Joseph

Cover Work

Manu Joseph

About the Author

Rami Sarieddine is a Technical Evangelist for Windows Azure and Windows 8 with Microsoft Gulf. Prior to joining Microsoft, he was working as a Software Engineer and Analyst at the American University of Beirut. He has a cumulative 7 years of experience in web development. In the span of these 7 years, he started with an independent venture for around 2 years. After that he directly embarked on an employment journey that was rich with experience, during which he had led numerous projects and held several positions from Web Developer to Information Systems Analyst and Lead Web Developer.

He was Microsoft Valued Professional awardee in 2013 and 2012 for his contributions in the technical communities of Visual C# and ASP.NET/IIS respectively. The MVP award is an annual award that recognizes exceptional technology community leaders worldwide who actively share their high quality, real-world expertise with users and Microsoft. With fewer than 5,000 awardees worldwide, Microsoft MVPs represent a highly select group of experts.

He was selected speaker at the first Tech.Days Beirut event by Microsoft Lebanon. Soon after, he had become a regular speaker on training sessions at their main events including Open Door and Tech Days. He has been heavily involved with Microsoft Lebanon's developer communities and activities, delivering hands-on workshops on Windows 8, HTML5, Azure, and Visual Studio. His passion for pursuing knowledge and experience, and consequently sharing it with fellow web developers and enthusiasts drove him into starting his own technical blog.

When not working, he enjoys running and spending time with his loved ones. And when on vacations, he enjoys traveling and visiting new places around the world.

He can be reached at <[email protected]> and you can follow his articles and blog posts on http://code4word.com.

Acknowledgments

Apart from the hard work put into researching and writing, the realization of this book would not have been possible without my publisher Packt Publishing, and the efforts of their Acquisition Editor, the team of Technical Editors, and Proof Readers in helping to complete the book. I would like to express my appreciation and gratitude to the Project Coordinator, Kranti Berde, and the Lead Technical Editor, Ankita Shashi, for their contribution and guidance.

Moreover, I wish to acknowledge Microsoft Lebanon for providing me with the opportunity of delivering training sessions on Windows 8, which contributed to my experience on the subject matter. I would like to express my gratitude for my friend and creative UI designer Michel Makhoul for his work on the cover image. I also wish to express my appreciation for the people who supported me throughout this journey, namely, my colleague Chukri Soueidi for providing me with technical advice and encouragement and my technical mentor Firas Hamdan for his contribution to my knowledge and professional advice.

I would also like to take this opportunity to thank my family who supported my efforts while writing the book.

Above all, I want to express my appreciation and to thank my loved one Elissar Mezher for believing in me, supporting and ever motivating me, and mostly for understanding my long nights at work. Thank you.

About the Reviewers

Nidal Arabi is a Software Engineer graduate of computer science from Lebanese American University in Lebanon, Beirut. He has worked in several companies in the banking sector as well as in the technology sector. He has been designated as Microsoft ASP.NET MVP and he has also written many articles on ASP Alliance website. He has experience in different technologies ranging from Java to .NET.

I would like to thank my wife Nivine Jundi for supporting me and providing the time to review the book.

Juri Strumpflohner currently works as a Software Architect for an e-government company, where his main responsibility is to coach developers to create appealing rich client web applications with HTML5, JavaScript, and the .NET technology stack. If you're interested in web development and best practices in software development, you can visit his website at juristr.com, where he actively blogs about such topics. He also participates in online communities such as StackOverflow, and on open source projects on GitHub. When he is not in front of his computer, he is probably practicing Yoseikan Budo where he currently owns a 2nd DAN. He holds a degree of Master of Science in Computer Science.

Jenil Vasani has completed Engineering in Information Technology from Atharva College of Engineering. He is a tech enthusiast, developer, and Microsoft Student Partner, Gamer, and Blogger.

I would like to express my special thanks of gratitude to my parents, God, and Packt Publishing who gave me the opportunity to review this book. This book has helped me in doing a lot of research. I would also like to thank my friends who contributed their suggestions.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here you can access, read, and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Instant Updates on New Packt Books

Get notified! Find out when new books are published by following @PacktEnterprise on Twitter, or the Packt Enterprise Facebook page.

Preface

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 that will show you how to develop these features, all the while learning some of the new features in HTML5 and CSS3, which allows you to leverage your web development skills.

What this book covers

Chapter 1, HTML5 Structure, presents an introduction to the new Semantic elements, Media elements, Form elements, and Custom data attributes in the new HTML5 specs.

Chapter 2, Styling with CSS3, introduces the new enhancements and features introduced by CSS3 that will be frequently needed when developing a Windows Store app with JavaScript. This chapter covers the following topics: CSS3 Selectors, Grid and Flexbox, Animation and Transforms, and Media Queries.

Chapter 3, JavaScript for Windows Apps, covers the Windows Library for JavaScript and its features, as well as highlighting the namespaces and controls used for developing the apps.

Chapter 4, Developing Apps with JavaScript, covers the tools needed and the templates provided to get started with developing a Windows 8 app using JavaScript.

Chapter 5, Binding Data to the App, describes how to implement data binding in an app.

Chapter 6, Making the App Responsive, describes how to make the app responsive so that it handles screen sizes and view state changes and responds to zooming in and out.

Chapter 7, Making the App Live with Tiles and Notifications, describes the concept of app tiles and notifications, and how to create a simple notification for an app.

Chapter 8, Signing Users in, describes the Live Connect API and how to integrate the apps with this API to enable user authentication, and sign-on, and retrieve user profile information.

Chapter 9, Adding Menus and Commands, describes the app bar, how it works, and where it is found on the app. Moreover, we will learn how to declare an app bar and add controls to it.

Chapter 10, Packaging and Publishing, covers how we will get introduced to the Store and learn how to get an app through all the stages into publishing. Also, we will see how we can interact with the Store from within Visual Studio.

Chapter 11, Developing Apps with XAML, describes the other platforms and programming languages that are available for developers. We will also cover the basics of creating an app with XAML/C#.

What you need for this book

In order to implement what you will be learning in this book and start developing Windows Store apps, you'll first need Windows 8. Additionally, you'll require the following development tools and toolkits:

Microsoft Visual Studio Express 2012 for Windows 8 is the tool to build Windows apps. It includes the Windows 8 SDK, Blend for Visual Studio, and project templates.

Windows App Certification Kit

Live SDK

Who this book is for

This book is for all developers who want to start creating apps for Windows 8. Also, it targets developers who want to get introduced to the advancements in standards-based web technology with HTML5 and CSS3. Additionally, the book targets web developers who want to leverage their existing skills, code assets in web development, and direct it to building JavaScript apps for the Windows Store. In short, this book is for everyone who wants to learn the basics of developing a Windows Store app.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meanings.

Code words in text are shown as follows: The createGrouped method creates a grouped projection over a list and takes three function parameters.

A block of code is set as follows:

// Get the group key that an item belongs to.

  function getGroupKey(dataItem) {

  return dataItem.name.toUpperCase().charAt(0); 

}

// Get a title for a group

  function getGroupData(dataItem) {

  return {

    title: dataItem.name.toUpperCase().charAt(0);

  };

}

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "You will be able to set up