Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Building Windows 8 Metro Style Applications with JavaScript and HTML5

VIEWS: 162 PAGES: 67

Get started creating Metro style applications Using Javascript, HTML5 and CSS3.

More Info
									Building Windows 8/Metro-
Style Applications using
Javascript and HTML5



       Learn More @ http://www.learnnowonline.com
          Copyright © by Application Developers Training Company
The Goal
• Get started creating Metro style applications
  • Using Javascript, HTML5 and CSS3
• Introduce the basic concepts
• Investigate some of the Windows Runtime
  Controls
• Use Asynchronous APIs




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Along the way…
• Learn to create a user interface using new Metro
  style features
• Handle navigation using Page Controls
• Add simple data binding




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
Assumptions…
• Basic knowledge of Web technologies:
  • HTML, JavaScript, CSS
• Basic knowledge of .NET development/tools
   • Visual Studio, Blend
• Basic knowledge of Metro style apps and
 Windows 8
  • See prior course, Exploring Windows 8 Metro Style
    Applications



           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Platform and Tools




       Learn More @ http://www.learnnowonline.com
          Copyright © by Application Developers Training Company
Platform and Tools
• Some things to note:
  • Stack for Metro apps in green
     • .NET/CLR apps in blue
  • Silverlight available only as plug-in for IE, and desktop
    mode available as well
  • .NET Framework and CLR appear on both sides (blue
    and green)




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Platform and Tools




       Learn More @ http://www.learnnowonline.com
          Copyright © by Application Developers Training Company
Basic CLR Facts
• Only one CLR—each app/app pool creates a
  process and uses the CLR
  • Desktop and Metro app using CLR use same CLR bits,
    but separate instance
• VB and C# apps still require .NET Framework
  4.5, even when creating Metro apps
  • Limited subset for Metro apps




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
.NET and Metro Style Apps
• Metro apps run in an app container that limits
  access
  • Protects user from malicious apps
  • Subset of .NET Client Profile which limits exposure
• Many changes in APIs to support Metro style
  apps and asynchronous behavior
  • All Metro APIs are asynchronous




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
What are the Options?
• Can build Metro style apps using:
  • C#, Visual Basic, or C++ and XAML
     • XAML provides both markup and style information
     • C#, Visual Basic, or C++ provide functionality
  • JavaScript, HTML5, and CSS3
     • HTML provides markup
     • CSS provides style information
     • JavaScript provides functionality




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Is One Better Than the Other?
• Use the language of your choice
• HTML5/CSS3/JavaScript useful if:
  • Comfortable with Web technologies
  • Want to use the power of HTML5 and CSS3 to create
    the user interface
• XAML and VB/C#/C++ useful if:
  • Comfortable with traditional programming
  • Want to create managed libraries




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO 1
• Hello, World using HTML5/CSS/JavaScript




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
Slightly More Complex App
• Work through old version of blog sample on
  Microsoft’s site
• New (more complex version) starts here:
  • http://msdn.microsoft.com/en-
    us/library/windows/apps/br211385.aspx
• Discuss the steps
• Application downloads RSS feed content
  • Displays formatted




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Modify the Markup
• Create simple layout
• Use div elements with id attribute set




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO 2
• Create markup




         Learn More @ http://www.learnnowonline.com
            Copyright © by Application Developers Training Company
Modify Styles
• Replace style information in default.css
• Note class and id-based styles




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO 3
• Add style information




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
Examine the Default Code




       Learn More @ http://www.learnnowonline.com
          Copyright © by Application Developers Training Company
Main Function
• Code in self-executing anonymous function
  • Recommended JavaScript practice
  • Avoids polluting the global namespace




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Han dle Events
• Next code hooks handler for onactivated event
  • Runs after app and its resources (default.html) have
    loaded
  • Good place for initialization


       app.onactivated = function (eventObject) {

       }




               Learn More @ http://www.learnnowonline.com
                   Copyright © by Application Developers Training Company
  Check for Activation Kind
   • Just to make sure, check that this is a launch
     activation before running initialization code:

WinJS.Application.onmainwindowactivated = function (e)
{
  if (eventObject.detail.kind ===
    Windows.ApplicationModel.Activation.ActivationKind.launch)
  {
    // Initialization code goes here…
  }
}




                    Learn More @ http://www.learnnowonline.com
                       Copyright © by Application Developers Training Company
Ready to Fire!
• Must indicate to the application that you’re ready
  to receive events
• Can appear anywhere in the main function
  • As long as it executes after initialization


      (function() {
        // Code removed here…

       app.start();

      }) ();



               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Downloading Data
• Need some means of making an HTTP request
• In WinJS, xhr function provides capability
  • xhr == XMLHttpRequest
  • xhr has a number of options
     • Which HTTP verb to use (GET is default)
     • Which HTTP headers to include (none by default)
     • Which URL to use




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Passing Information
• Supply a JSON object containing fields
  corresponding to the parameters:
  • type
  • url (required)
  • user
  • password
  • headers
  • data




           Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Synchronous or Asynchronous?
• XMLHttpRequest object allows developer to
  select synchronous or asynchronous result
  • xhr forces asynchronous
     • UI isn’t blocked while awaiting result
  • All Metro API calls are asynchronous
     • Allows you to create more responsive applications

• Sample updates div element with progress




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Return Value
• Asynchronous function in WinJS return object
  called a promise (called deferred in some APIs)
• Promise must handle successful completion
  • And error conditions
• Provides then method, which specifies:
  • Work to do on fulfillment of the promised value
  • Error handling to be performed if Promise fails
  • Handling of progress notifications




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Promise.then Method
• Understand that the then method indicates
  functions to call on success and failure
• Call to xhr returns the Promise object
  immediately
  • Set the functions to call on success and failure
  • This example ignores progress




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO 4
• Add code to set up downloads
• Discuss




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
What Happened?
• Once the xhr call completes
  • Code calls processPosts function
  • Passes request content as parameter
     • Contains requested RSS data

• Code uses XPath expressions to select set of
  item nodes
  • Retrieves individual child elements for display




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
What’s Next?
• Modify application
  • Add support for Windows Runtime methods
     • Easier to use Windows.Web.Syndication namespace rather
       than hand-parsing XML from RSS feed
  • Use templates and binding
     • Rather than hand-copying data into the user interface
  • Use WinRT controls
     • Specifically, the ListView control




            Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Using Windows Runtime
• Haven’t yet really used Windows
  • Instead, used Web technologies
• In addition to WinJS, Metro style apps can
  access classes in Windows Runtime
  • Windows.Web.Syndication namespace supports RSS
    feeds:
     • SyndicationClient class makes it all easier!




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
DEMO 5
• Replace code, using SyndicationClient




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
Adding Data Binding
• Current code manually pushes data into <div>
  elements
• Would be simpler to create a template that
  contains the <div> elements
  • And bind the data source, using template to manage
    the display of the data
• Of course, that’s possible!




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
References and Attributes
• In order to use templates, must add more
  JavaScript content, in default.html
  • Much like adding references
• Provide styles and behavior for the data-win-
  control attribute (required for templates)
• HTML5 defines set of data-* attributes for
  associating app-specific information with element




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
References and Attributes
• In this case, set data-win-control attribute to
  WinJS.Binding.Template
  • Acts as constructor for class
  • Attaches behavior to div and adds behavior
  • Foundation for declarative WinJS controls
• Do not forget:
  • In order to cause data-win-control attributes to take
    effect, must call WinJS.UI.ProcessAll




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Binding Data
• WinJS.Binding.Template class connects
  properties of elements with data
• Looks for data-win-bind attribute in elements
  • Format looks like this:
     • data-win-bind="innerText: title"
  • Part before ":" indicates property of the element
  • Part after ":" indicates JavaScript property to bind




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
DEMO 6
•   Add references
•   Add template
•   Modify code
•   Run




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Things to Note
• Calling document.getElementById retrieves
  reference to HTML element
  • Provided property with same name as element
       • Works in IE only, but fine for Metro apps
  • winControl property retrieves reference to associated
     WinRT control:


 var templateControl =
   document.getElementById("template").winControl;
 // or
 templateControl = template.winControl;


              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Things to Note
• For each item in the RSS feed, the code creates
  JSON object named post containing the
  information:

          var item = feed.items[i];
          var post = {
             title: item.title.text,
             date: item.publishedDate,
             content: item.summary.text,
          };




          Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Things to Note
• The template provides render method
  • Stamps out instance of the template for each item you
    supply
     • Like createElement method call previously
  • Supply data to be rendered
  • Returns a promise
     • In the completion function, append new element to the parent
       posts element
     • Note no extra code needed for reference to posts




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Current Status
• Have used WinJS and Windows Runtime to make
  the code clearer
• Have used templates and simple binding to make
  it easier to modify the layout
• Wouldn't it be nicer to view list of topics
  • And then click on one to see its contents?
  • ListView control makes that easier
  • Also handles repetitive binding




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Adding a ListView
• In addition to template control and intrinsic
  HTML controls
  • WinJS provides several other built-in controls
  • ListView control allows arrangement of data into list or
    grid
• Each item in ListView is expansion of template
• Want to create a list of posts?
  • Good use for ListView control




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Show Post Titles in ListView
• Modify existing template, removing content
• Add ListView declaratively using data-win-control
  attribute
  • Existing call to WinJS.UI.ProcessAll hooks it up




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
ListView Markup
   <div id="posts" data-win-control="WinJS.UI.ListView"
         data-win-options="{itemTemplate: template,
          layout: {type: WinJS.UI.ListLayout}}"></div>
• data-win-options attribute specifies parameters
  to pass to WinJS.UI.ListView constructor
  • Attribute value is JSON object
  • Some parameters are JSON objects (layout)




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
DEMO 7
•   Modify markup
•   Look at documentation for WinJS.UI.ListView
•   Modify processPosts()
•   Note dataSource property of ListView




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
What's Next?
• Current demo implementation shows only blog
  entry titles
  • Need user interface to display content of selected
• Add a second control to display content
• Perhaps a grid of
  • Two rows (one for title and one for data)
  • Two columns—ListView on the left and content on the
    right



            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Modify Layout
• Layout is defined in CSS
• Start by modifying body, #posts, and #content
  elements
  • So layout is appropriate for two-column display




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO 8
• Modify CSS




         Learn More @ http://www.learnnowonline.com
            Copyright © by Application Developers Training Company
Things to Note
                                                             display: -ms-grid;
                                                              -ms-grid-rows: auto 1fr;
                                                              -ms-grid-columns: 1fr 1fr;




• body: display set to –ms-grid
  • Part of Microsoft extension to CSS for grid
  • -ms-grid-rows: first column set to auto-size, second
    takes up the rest (fr like * in XAML)
  • -ms-grid-columns: 1fr 1fr
     • Two columns, each taking half the space


             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Things to Note
• #posts and #content element descriptions
  indicate row and column locations (1-based):
 #posts {
   width: 99%; height: 100%; overflow: auto;
   -ms-grid-row: 2;
   -ms-grid-column: 1;
 }

 #content {
   width: 95%; height: 100%; overflow-y: auto; margin-right: 64px;
   -ms-grid-row: 2;
   -ms-grid-column: 2;
 }


              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Modify Markup
• Once CSS completed
  • Modify markup
  • Re-adding template for content




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Things to Note
• Modified markup for ListView
 <div id="posts" data-win-control="WinJS.UI.ListView"
      data-win-options="{itemTemplate: template,
       layout: {type: WinJS.UI.ListLayout},
       selectionMode: 'single', onselectionchanged: selectionChanged}">
  </div>
• selectionMode: allow single selection only
• onselectionchanged: provide event handler
  declaratively



               Learn More @ http://www.learnnowonline.com
                   Copyright © by Application Developers Training Company
Things to Note
• Markup for content template:
<div id="contentTemplate" data-win-control="WinJS.Binding.Template">
  <div data-win-bind="innerText: title" class="postTitle"></div>
  <div data-win-bind="innerText: date" class="postDate"></div>
  <div data-win-bind="innerHTML: content" class="postContent"></div>
</div>
• CSS classes all still exist in default.css
• Three <div> elements for title, date, content
   • Bound to innerText/HTML properties of element




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 9
• Add new markup




         Learn More @ http://www.learnnowonline.com
            Copyright © by Application Developers Training Company
Add Event Handler
• To finish, must add event handler for ListView
  control's onselectionchanged event
• Gather information about first selected item in
  ListView
  • May be overkill because selectionMode is set to single!
  • Get reference to the contentTemplate
     • Render the data




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO 10
•   Add event handler
•   Run
•   Fix namespace
•   Run




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Things to Note
• Can define namespace and specify public names
  for members:

         WinJS.Namespace.define('rssReader', {
             selectionChanged: selectionChanged
         });
• Name before colon (:) specifies public name for
  member
  • Change that here, also change in markup




          Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
Look Ma, No Designer!
• Yes, it’s true
  • Visual Studio 11 doesn’t include a visual designer for
     JavaScript/HTML Metro style applications
• The Good News:
  • Microsoft Expression Blend does a great job
  • Just doesn’t handle code chores particularly well
      • For JavaScript, it’s acceptable
      • Minimal code editor




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Using Visual Studio with Blend
• Easy to open a Visual Studio project in
  Expression Blend
• Can modify design and code there
• Can execute application in current device, or in
  simulator
• Can select to edit in Visual Studio
  • Can debug from there




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO
• Edit project in Expression Blend




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
Visual Studio Application Templates
• Visual Studio 11 Express for Windows ships with
  a set of Metro style application templates
• Slightly different set of templates for HTML apps
  vs. XAML apps




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
HTML Templates




      Learn More @ http://www.learnnowonline.com
         Copyright © by Application Developers Training Company
HTML Templates
• Blank Application
  • Minimal application using Metro style frameworks
• Fixed Layout Application
  • Minimal support for developing a Windows Metro style
    application using a fixed layout
• Grid Application
  • Multi-page project navigating multiple layers of
    content with item details on a dedicated page




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
HTML Templates
• Navigation Application
  • Minimal application using Windows Metro style
    frameworks and includes navigation support
• Split Application
  • A more complex project supporting navigation in a
    master list of items while viewing their details on the
    same page




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
DEMO
• HTML Templates




         Learn More @ http://www.learnnowonline.com
            Copyright © by Application Developers Training Company
Closing Head Shot
• JavaScript/HTML/CSS a great set of mature tools
  for building Metro style applications
• WinJS makes it easy to interact with WinRT
  controls and other Windows-specific features
• Sample application (thanks to Chris Sells at
  Microsoft) shows off lots of important features
• For homework—retool the Split application




          Learn More @ http://www.learnnowonline.com
             Copyright © by Application Developers Training Company
Learn More!
• This is an excerpt from a larger course. Visit
  www.learnnowonline.com for the full details!




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company

								
To top