Start Here! Build Windows 8 Apps with HTML5 and JavaScript

Table of contents

1. Dedication
2. Introduction
   1. Who should read this book
   2. Who should not read this book
   3. Organization of this book
      1. Finding your best starting point in this book
   4. Conventions and features in this book
   5. System requirements
   6. Code samples
      1. Installing the code samples
   7. Errata and book support
   8. We want to hear from you
   9. Stay in touch
3. Acknowledgements
4. 1. Using Visual Studio 2012 Express edition for Windows 8
   1. Getting ready for development
      1. The software you need
         1. Installing Windows 8
         2. Installing Visual Studio Express
      2. Configuring Visual Studio 2012
         1. Getting a product key
         2. Creating a developer account
         3. Windows Store account
      3. Start playing with Windows 8 apps
      4. The “Hello Windows 8” application
         1. Choosing a project template
         2. Creating the sample project
         3. Tweaking the sample project
         4. Admiring the app in action
      5. Adding a bit more action
         1. Adding style to the page
         2. Generating a random number
   2. Summary
5. 2. Making sense of HTML5
   1. Elements of a webpage
      1. Building the page layout with HTML5
         1. Preparing the sample application
         2. From generic blocks to semantic elements
         3. Header and footer elements
         4. Section and article elements
         5. The aside element
         6. The nav element
      2. Miscellany of other new elements
         1. The details element
         2. The mark element
         3. The dataList element
         4. Elements removed from older HTML versions
   2. Collecting data
      1. Adjusting input fields
         1. New input types
         2. Making input fields auto-focusable
         3. Giving hints to users
      2. Form submission
         1. Detecting required fields
         2. Validating against regular expressions
         3. Forms and input validation
   3. Multimedia elements
      1. The audio element
         1. Using the <audio> element
         2. The problem of codecs
         3. Supported codecs
      2. The video element
         1. Using the <video> element
         2. Supported codecs
   4. Summary
6. 3. Making sense of CSS
   1. Styling a webpage
      1. Adding CSS information to pages
         1. Inline styling
         2. Embedded styles
         3. Using external files
      2. Selecting elements to style
         1. Referencing elements by ID
         2. Referencing elements by name
         3. Referencing elements via custom classes
         4. The cascading model
   2. Basic style commands
      1. Setting colors
         1. Defining colors
         2. Changing the foreground color
         3. Changing the background color
         4. Using gradients
         5. Using a background bitmap
      2. Controlling text
         1. Choosing the font family and size
         2. Styling fonts
      3. HTML display modes
         1. Block elements
         2. Inline elements
         3. Floating elements around
         4. Inline-block elements
      4. Spacing and the boxing model
         1. Defining padding
         2. Defining borders
         3. Defining margins
         4. Defining width and height
   3. Advanced CSS scenarios
      1. CSS pseudo-classes
         1. Anchor pseudo-classes
         2. Pseudo-classes for input elements
         3. Attribute pseudo-classes
         4. Pseudo-classes for retrieving child elements
         5. Compound selectors
      2. Media Queries
         1. Dynamic selection of the CSS file
         2. Syntax of Media Queries
   4. Summary
7. 4. Making sense of JavaScript
   1. Language basics
      1. The JavaScript type system
         1. Primitive types and built-in objects
         2. The JavaScript global object
         3. Null vs. undefined
      2. Dealing with variables
         1. Local variables
         2. Global variables
         3. Protecting the global namespace
         4. Variables and hoisting
      3. Dealing with objects
         1. Structure of JavaScript objects
         2. The prototype common property
         3. Creating new object instances
      4. Dealing with functions
         1. Named functions for repeatable behavior
         2. Immediate functions and objects
         3. Extending existing objects with behavior
         4. Constructor functions
         5. Having fun with callback functions
         6. Contract-based callback functions
         7. Anonymous Functions
   2. Organizing your own JavaScript code
      1. Linking JavaScript code to pages
         1. Event attributes of an HTML element
         2. Embedded JavaScript code
         3. External files
      2. Practices and habits
         1. Group your globals
         2. Keep application state at hand
         3. Be ready for localization
   3. Summary
8. 5. First steps with Windows 8 development
   1. The Windows 8 Runtime (WinRT)
      1. Windows Store apps and other apps
         1. Fate of old-fashioned Windows applications
         2. Supported programming languages
      2. An overview of the WinRT API
         1. The Windows 8 stack
         2. Capabilities of the WinRT API
         3. Aspects of the WinRT API
   2. The Windows Store app user interface
      1. Aspects of the Windows 8 UI
         1. The Windows 8 UI at a glance
         2. Device-centric design
      2. Inspiring principles of the Windows 8 UI
         1. Design for touch
         2. Be responsive and ready
         3. Zero redundancy
         4. Do as Romans do
         5. Do as Romans do (and don’t reinvent the wheel)
         6. Collaborate (and don’t reinvent the wheel)
         7. Above us only cloud
      3. Components for the presentation layer
         1. Visual elements of WinJS
         2. On-demand user interface
         3. Creating a sample app bar
      4. Data binding
         1. Programmatic manipulation of the HTML page
         2. Declarative manipulation of the HTML page
   3. Understanding the application’s lifecycle
      1. States of a Windows Store application
         1. Launching an application
         2. Suspending an application
         3. Resuming an application
      2. Background tasks
   4. Summary
9. 6. The user interface of Windows Store applications
   1. Foundation of Windows Store applications
      1. Defining the layout of the application
         1. Examining the project structure
         2. Examining standard style and script references
         3. Adding fixed user interface blocks
      2. Application attributes
         1. The manifest file
         2. Adding logo images
         3. Adding a splash screen
   2. Getting serious with the TodoList application
      1. Building an interactive form
         1. Defining the task object
         2. Collecting text and dates
         3. Setting the task priority
         4. Setting the task status
         5. Adding a button and tooltips
      2. Putting data into the form
         1. Initializing the input form
         2. Validating input data
         3. Summarizing results
   3. Summary
10. 7. Navigating through multimedia content
    1. Foundation of page navigation
       1. The navigation model of Windows Store applications
          1. Jumping to a different page
          2. Displaying a different page
       2. Inside the Navigation App template
          1. Creating a navigation app
          2. Setting up the home screen
    2. Building a gallery of pictures
       1. Introducing the FlipView component
          1. Defining the item to display
          2. Creating the FlipView component
          3. Adding a template for the item
       2. Navigating to a detail page
          1. Retrieving the bound item
          2. Defining the detail page
          3. Passing data between pages
          4. Persisting information across page navigation
       3. Zooming the image in and out
          1. Defining the template for the detail page
          2. Adding a slider to select the zoom level
          3. Manipulating the image
    3. Building a video clip gallery
       1. Introducing the SemanticZoom component
          1. What’s semantic zoom, anyway?
          2. Preparing the ground for semantic zoom
          3. Defining ad hoc data for semantic zoom
          4. Grouping data for semantic zoom
          5. Binding data for semantic zoom
          6. Using gradients for the background
       2. Dealing with video
          1. Handling selection
          2. Playing YouTube video clips
    4. Summary
11. 8. States of a Windows 8 application
    1. States of a Windows Store application
       1. Full-screen view states
          1. Landscape mode
          2. Portrait mode
       2. Snapping applications
          1. The snapped view state
          2. The filled view state
       3. Making the application reactive
          1. Introducing new practices for application development
          2. Detecting view state changes
          3. Adapting the application’s content
    2. Towards an adaptive layout
       1. General principles of snapped and filled views
          1. Be aware of view changes
          2. Parity of features across states
          3. Unsnap with care
          4. Use a proportional design
       2. Fluid layouts
          1. Flexible boxes
          2. CSS media queries
          3. CSS media queries vs. resize events
          4. Adjusting the video application
    3. Summary
12. 9. Integrating with the Windows 8 environment
    1. Contracts and common tasks
       1. Aspects of Windows 8 contracts
          1. The Charms bar
          2. Consuming and publishing services
       2. Contracts and extensions
          1. Supported contracts
          2. Extensions
    2. Consuming the File picker contract
       1. Choosing a file to save data
          1. Preliminary changes to the TodoList application
          2. Unsnap before you pick
          3. Dealing with the default File save picker
          4. Preferred settings
          5. Getting the name of the file to create
       2. Choosing a file to load data
          1. Dealing with the File open picker
          2. Multiple selections
          3. Selecting a folder
    3. The Share contract
       1. Publishing an application’s data
          1. Choosing the data format
          2. The data package
       2. Adding share source capabilities to TodoList
          1. Handling requests for data
          2. Sharing data as plain text
          3. Sharing data as HTML
          4. Conditional sharing
          5. Programmatic sharing
    4. Providing a Settings page
       1. Populating the Settings charm
          1. Creating the settings flyout
          2. Creating a read-only page
       2. Creating a functional Settings page
          1. Defining an application-wide settings object
          2. Persisting application settings
          3. Creating the Settings page
    5. Summary
13. 10. Adding persistent data to applications
    1. Persisting application objects
       1. Making Task objects persistent
          1. The add-task use case
          2. Saving data to a file
          3. Creating your own files
          4. Appending text versus just writing text
          5. Deleting files
       2. Choosing a serialization format
          1. Adding a data serialization component
          2. The JSON format
          3. Serializing the Task object to JSON
       3. Creating Task objects from files
          1. Making changes to the user interface
          2. Locating the file to open
          3. Reading file content
          4. Deserializing Task objects
    2. Using the application’s private storage
       1. Storage options in Windows 8
          1. Saving to the localSettings storage
          2. Saving to the local disk
          3. Saving to the isolated storage
       2. Creating tasks in the isolated storage
          1. Reworking the user interface of TodoList
          2. Retrieving current tasks
          3. Saving tasks to the roaming folder
          4. Selecting tasks for editing
          5. Deleting tasks
    3. Summary
14. 11. Working with remote data
    1. Working with RSS data
       1. Getting remote data
          1. Getting familiar with XHR
          2. Configuring the WinJS.xhr object
          3. Handling errors during HTTP requests
          4. Giving requests a timeout
          5. A look at the application’s manifest
       2. Parsing and displaying downloaded data
          1. Extending the RSS Reader application
          2. Parsing the RSS content
          3. Mapping an RSS feed item to the user interface
       3. Drilling down into data
          1. Making any displayed news item clickable
          2. Displaying raw HTML
    2. Working with JSON data
       1. Laying out a Flickr viewer
          1. Setting up the Flickr Viewer app
          2. Looking at the Flickr public feed
          3. Preparing the Flickr URL
          4. Getting the JSON data
          5. Adding pictures to the user interface
       2. Enhancing the application
          1. Dealing with invalid JSON
          2. Fixing invalid JSON
          3. Displaying a different set of photos
    3. Summary
15. 12. Accessing devices and sensors
    1. Working with the webcam
       1. Capturing the webcam stream
          1. Setting up the project
          2. Checking the webcam capability
          3. Configuring the webcam
          4. Accessing the webcam programmatically
       2. Processing captured items
          1. Displaying the captured picture
          2. Adding the Pictures Library capability
          3. Creating a subfolder for photos
          4. Saving a copy of the picture
    2. Working with the printer
       1. The Print contract
          1. Setting up the sample application
          2. Registering the Print contract
          3. The printing user interface
       2. Printing context-specific content
          1. Splitting content in subdocuments
          2. The print media
          3. Preparing the document for printing
    3. Working with the GPS system
       1. Detecting latitude and longitude
          1. Setting up the project
          2. Reading geographical position
       2. Making use of geolocation data
          1. Adding the Bing SDK to the application
          2. Showing the location on a map
          3. Getting address information
    4. Summary
16. 13. Adding Live tiles
    1. What’s a Live tile anyway?
       1. Tiles in action
          1. Moving Live tiles around
          2. Resizing tiles
          3. Unpinned applications
       2. Creating Live tiles for a basic application
          1. Preparing the application
          2. The notification object
          3. Creating an application notification
    2. Adding Live tiles to an existing application
       1. Bringing back the TodoList application
          1. Preparing the ground
          2. Identifying project files to edit
       2. Implementation of Live tiles
          1. Preparing the ground for Live tiles
          2. Choosing the tile templates
          3. Selecting data to display in tiles
          4. Combining small and large template together
          5. Connecting tiles and application
    3. Summary
17. 14. Publishing an application
    1. Getting a developer account
       1. Registering as a developer of free applications
          1. Account information
          2. Payment details
       2. Registering as a developer of paid applications
    2. Steps required to publish an application
       1. Choosing a name for the application
          1. Reserving an application name
          2. Localizing an application name
       2. Packaging an application
          1. Compiling in Release mode store logo.png
          2. Preparing the app package
          3. The Windows App Certification Kit
          4. Uploading the application
       3. Sideloaded applications
    3. Summary
18. A. About the authors
19. Index
20. About the Authors
21. Copyright