Docstoc

Creating a User Interface

Document Sample
Creating a User Interface Powered By Docstoc
					Creating a User Interface




        Learn More @ http://www.learnnowonline.com
           Copyright © by Application Developers Training Company
The Goal
•   Investigate different ways of laying out Metro
    style applications
•   Work with controls, including styling
•   Try out several of the basic controls
•   Add app bars, flyouts, and context menus




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Investigating App Surfaces
•   Metro style applications supply a number of
    different surfaces onto which you can add user
    interface elements
    § App window
    § App bars
    § Popups
    § Dialogs
•   Choosing the right surface is crucial



                Learn More @ http://www.learnnowonline.com
                   Copyright © by Application Developers Training Company
App Window, or Canvas
•   Base of the UI
    § Holds content and controls
    § If at all possible, integrate UI elements into canvas
•   Instead of pop-up for error
    § Smoothly show, hide, display error messages using
      built-in animations




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
App Window, or Canvas
•   Base of the UI
    § Holds content and controls
    § If at all possible, integrate UI elements into canvas
•   Instead of pop-up for error
    § Smoothly show, hide, display error messages using
      built-in animations




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
App Bar
•   Secondary to app window
    § App Bar is primary command interface
    § Replaces menus
•   Present navigation, commands, tools to user
•   Hidden by default
    § Appears when user swipes top or bottom edge
    § Covers content
•   Dismissed by edge swipe, timer, or action


              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
App Bar
•   Secondary to app window
    § App Bar is primary command interface
    § Replaces menus
•   Present navigation, commands, tools to user
•   Hidden by default
    § Appears when user swipes top or bottom edge
    § Covers content
•   Dismissed by edge swipe, timer, or action


              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Charms Bar
•   Presents specific and consistent set of buttons,
    the same in every app
    § Search
    § Share
    § Connect
    § Settings
    § Start




                 Learn More @ http://www.learnnowonline.com
                    Copyright © by Application Developers Training Company
Charms Bar
•   Can appear to the right of the screen (if using a
    touch screen)
    § Can use win+c key to display, or hover in lower right-
      hand corner




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Charms Bar
•   Can appear to the right of the screen (if using a
    touch screen)
    § Can use win+c key to display, or hover in lower right-
      hand corner




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
    Context Menus
•   Also called popup menu
•   Shows actions users can perform on text or UI
    elements
•   Can use up to five (and no more) commands on
    each context menu
    § Like cut, copy, open with
    § Limit keeps menus uncluttered
•   Don’t use for primary command interface!


               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
    Context Menus
•   Also called popup menu
•   Shows actions users can perform on text or UI
    elements
•   Can use up to five (and no more) commands on
    each context menu
    § Like cut, copy, open with
    § Limit keeps menus uncluttered
•   Don’t use for primary command interface!


               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Message Dialogs
•   Modal dialogs that require explicit user
    interaction
•   Dim the app window
    § Demand response before continuing
•   Use message dialogs only when the intent is to
    stop the user and demand a response




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Message Dialogs
•   Modal dialogs that require explicit user
    interaction
•   Dim the app window
    § Demand response before continuing
•   Use message dialogs only when the intent is to
    stop the user and demand a response




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Flyouts
•   Temporary, dismissable UI related to what the
    user is doing
    § Confirm an action
    § Show more details
•   Only show in response to user tap or click
    § Always dismiss flyout when user taps outside it
    § Use Message Dialog if you want to interrupt




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Flyouts
•   Temporary, dismissable UI related to what the
    user is doing
    § Confirm an action
    § Show more details
•   Only show in response to user tap or click
    § Always dismiss flyout when user taps outside it
    § Use Message Dialog if you want to interrupt




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Toasts
•   Notifications to indicate activity to user when app
    is in background
•   Great for real-time update without requiring app
    in foreground
    § OK if user misses the information
•   Users tap on the toast to switch to your app and
    learn more




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Errors
•   Different kinds of errors require different kinds of
    user interface
•   App developer chooses surface for error based
    on content and consequences of the error




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Inline Error Text
•   App cannot fix the error, but user can
•   Users can continue to interact without fixing the
    error
•   Example: User enters invalid text
•   Use text inline on the canvas
    § Appears inline near the error




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Inline Error Text
•   App cannot fix the error, but user can
•   Users can continue to interact without fixing the
    error
•   Example: User enters invalid text
•   Use text inline on the canvas
    § Appears inline near the error




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Error or Warning Bar
•   Use error or warning bar to notify of important
    errors and warnings
    § Encourage user to take action
•   Position at top of screen
    § Use color from app’s palette
    § Use same color and layout for all error and warning
      bars
•   Don’t use X glyph—use Close button



              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Error or Warning Bar
•   Use error or warning bar to notify of important
    errors and warnings
    § Encourage user to take action
•   Position at top of screen
    § Use color from app’s palette
    § Use same color and layout for all error and warning
      bars




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Message Dialogs
•   Use only if modal message is required
    § Blocks user from further action until resolved
•   Only use when absolutely required




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Message Dialogs
•   Use only if modal message is required
    § Blocks user from further action until resolved
•   Only use when absolutely required




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Defining Layouts and Views
•   Your goal: Create apps that look good and work
    well across a variety of
    § Form factors
    § Display sizes
    § View states
•   App should look good and work well on tablet or
    30” monitor
    § Portrait or landscape, zoomed in or out




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
CSS and User Interface
•   Specifying the user interface of apps involves
    two factors:
    § Views that the app supports
    § Layouts that the app requires
•   CSS does the work!




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
CSS: Cascading Style Sheets
•   Standards-based mechanism for separating
    content from presentation
    § CSS provides the presentation information
•   Separation of what is shown from how it’s shown
    § Lets you deliver consistent user experiences
    § Across multiple devices, screen sizes, form factors




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Views
•   View defines the way your app is accessed and
    manipulated by a user:
    § Landscape or portrait orientation
    § Full screen, snapped, or fill view states
    § Pannable, zoomable, scaled or resized UI
    § Specific UI elements
       o Search results pane
       o Folder structure




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Handling Views
•   View describes the way users access and
    manipulate content
•   Can view app on devices of various sizes and
    orientations
•   Plan for different view states, screen
    orientations, and user interaction views




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
View States
•   Handle snapped, fill or full screen modes




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Screen Orientation
•   Need to handle both landscape and portrait
    orientations




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
User Interaction Views
•   If at all possible, allow the user to interact with
    data
    § Think about how to allow resizing, scrolling, panning,
      zooming, and semantic zoom
       o Semantic zoom allows content to change as users zoom




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
User Interaction Views
•   If at all possible, allow the user to interact with
    data
    § Think about how to allow resizing, scrolling, panning,
      zooming, and semantic zoom
       o Semantic zoom allows content to change as users zoom




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Layouts
•   Mechanisms by which your app can
    accommodate the views it supports
•   Style, structure, and present app content using
    CSS layout modules
    § Grids
    § Multi-columns
    § Connected frames
    § Flexible boxes




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Using CSS for Multiple Layouts
•   CSS provides media features that allow you to
    determine current media settings
    § Provides information about the device being used to
      display the application
•   Information is used to evaluate an expression
    § Result determines style rules to be applied
    § Rules like: Apply these rules on devices that…
       o Have a screen wider than 480 pixels
       o Are oriented vertically




                Learn More @ http://www.learnnowonline.com
                    Copyright © by Application Developers Training Company
Rules for Screen
•   CSS for screen rules generally looks like this:
    § @media screen and (feature) { rules }
•   Specific media could be something besides
    screen, but care about screen here
•   feature represents specific feature to test
    § For example: width:600px
    § Apply rules to screens that are exactly 600px wide




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Using Media Features with Metro
•   Microsoft supplies specific feature that supports
    Metro style apps
    § Determines current view state
       o ms-view-state

•   Value can be any of:
    § fullscreen-landscape: landscape, full screen
    § filled: landscape, not full screen, not snapped
    § snapped: landscape, not full screen, snapped
    § fullscreen-portrait: portrait, full screen




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 1
•   CSS for multiple layouts




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Working with Controls
•   Two types of controls:
    § Standard HTML controls
    § WinJS controls
•   Each is handled differently
•   Another issue:
    § How to style WinJS controls




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Working with HTML Controls
•   Can add HTML controls using markup, or using
    JavaScript
    § Style sheets affect the look and feel
    § Can obviously override with custom styles




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Working with HTML Controls
•   HTML controls (tags):
    § a, audio, button (or input type="button"), canvas
    § input type="checkbox", "email", "file", "number"
    § input type="password", "radio", "range"
    § input type="submit", "text", "url"
    § iframe, img, label, progress, select, textarea, video
    § div contentEditable, style="overflow:scroll",




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
DEMO 2
•   Add HTML controls to page




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Events
•   So far, nothing happens when you select item in
    list, or click button
•   Each control provides events enabling you to
    respond to actions
    § Button provides click event; raised when clicked
       o Create event handler to handle event
       o Register event handler with the control




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Creating Event Handlers
•   Two ways to create event handlers:
    § Declaratively
       o Set control's event attribute with name of the JavaScript
         event handler function
       o Although this works, it's a bad idea
    § Programmatically
       o In JavaScript, retrieve reference to control
       o Call addEventListener method, pass event handler
       o Preferred method




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 3
•   Add event handlers for onclick and onchange
    events




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Why Not Declarative Events?
•   By default, all JavaScript code in anonymous
    global function
    § Limits scope of code
    § Avoids polluting global namespace
•   Button event handler (declarative) must exist in
    global namespace
    § So markup can access
    § In anonymous function, it couldn't run
       o Could create specific namespace for it, of course




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Why Not Declarative Events?
•   Event information passed to handler in
    declarative markup isn't as useful
    § When use addEventListener to hook up event
       o Event information parameter's target property returns
         reference to the control
       o If you use declarative hookup, the target property returns
         reference to the window




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Solving Namespace Problem
•   If you still prefer to create event handlers in
    markup
    § Need to handle the namespace problem
    § If placed in the anonymous function, won't run
       o JavaScript can't "find" the handler

•   Solution: Create an explicit namespace
    § Place handler in new namespace
    § Update markup to reference




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 4
•   Add namespace and modify Click event




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Working with WinJS Controls
•   Windows Library for JavaScript (WinJS)
    § Library of CSS and JavaScript files
    § Contains JavaScript objects, organized into
      namespaces
       o Designed to make developing Metro style applications using
         JavaScript easier
•   WinJS contains objects that:
    § Handle activation, access storage
    § Help define classes and namespaces



                Learn More @ http://www.learnnowonline.com
                   Copyright © by Application Developers Training Company
WinJS Controls
•   Large set of controls
•   Each abstracted as HTML (and CSS and
    JavaScript)
•   Provide basis for Metro style applications
•   Following slides introduce most of the WinJS
    controls
    § Images from set of Metro style samples from Microsoft




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
AppBar Control
•   App toolbar that displays commands
•   Covers application content
•   Appear using edge swipe, Win+Z, or right-click
    § Dismiss with app interaction, another edge swipe, or
      timer




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
DatePicker Control
•   Enables the user to select a date




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
FlipView Control
•   Displays a collection of items, one item at a time




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Flyout Control
•   Displays a message that requires user interaction
    § Unlike a dialog box, a Flyout does not create a
      separate window




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
ListView Control
•   Displays a collection of items in a grid or list
    layout




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Rating Control
•   Enables the user to rate an item




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
SemanticZoom Control
•   Provides a way to manage and present two
    semantic views (abstractions)
•   Single set of hierarchical data or content
    § Folder structure of a computer, a library of
      documents, or a photo album




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
SettingsPane Control
•   Provides access to
    app settings




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
TimePicker Control
•   Enables the user to select a time




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Toggle Control
•   Represents an item that can be turned on or off




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
ToolTip Control
•   Displays a tooltip that can support rich content
    § such as images and formatted text
•   Shows more info about an object on demand




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
ViewBox Control
•   Scales a single child element to fill the available
    space without resizing it
    § Reacts to changes in the size of the container
    § And changes in size of the child element
•   For example, responds if a media query results in
    a change in aspect ratio




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Add WinJS to Your Pages
•   To use WinJS in an app
    § Must include Windows Library for JavaScript files
    § Each page that uses WinJS features must include
      proper CSS and script references
•   All Visual Studio templates include all the
    necessary files
    § Templates include required references
    § For controls, need ui.js




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Adding Control in Markup
•   Unlike HTML controls, WinJS controls don't have
    dedicated markup elements
    § Can't create Rating control by adding <rating/> to the
      markup
•   Instead, create <div> element and set data-win-
    control attribute to class name of control
    § <div data-win-control="WinJS.UI.Rating">




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Hooking Things Up
•   Just creating the <div> elements isn't enough
•   Must also call WinJS.UI.processAll in order to
    instantiate WinJS controls
•   WinJS.UI.processAll returns a Promise
    § Put any code that needs to run after the call to
      processAll in the then method call of the promise




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
DEMO 5
•   Add a WinJS control, interact with it




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Setting WinJS Control Properties
•   Setting properties of an HTML control is easy:
    § <input type="range" min="0" max="20" />
•   Not so for WinJS controls
    § No dedicated attributes that set properties
    § Instead, use data-win-options attribute, and specific a
      JSON object (property/value pairs)
       o data-win-options="{name1:value1, name2:value2}"
    § Property value a string? Wrap in apostrophes




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
DEMO 6
•   Set properties in markup




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Setting Properties in Code
•   Can set properties of WinJS controls in code
•   WinJS control is child of <div> container
    § Retrieve a reference to <div> container
    § Use <div> to retrieve reference to WinJS control
•   To retrieve reference to <div>
    § Can use document.getElementById
•   To retrieve reference to child
    § Use winControl property of parent



               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
Shortcut
•   Rather than calling document.getElementById
    § Can count on JavaScript creating variable with same
      name as id property of <div> element




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Asynchronous Behavior!
•   Watch out! Call to WinJS.UI.processAll is
    asynchronous
    § Can't execute code that uses WinJS controls
      immediately after
    § It may not have completed!
•   WinJS.UI.processAll returns a promise
    § Use the then method to call code that needs to run
      immediately after the call




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
DEMO 7
•   Retrieve reference in code
•   Set property in code
•   Use shortcut versions as well




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Handling Events for WinJS Controls
•   Basic concept same as event hookup for HTML
    controls
    § Still need to call addEventListener
•   In JavaScript, retrieve control reference
    § Then call addEventListener for the control
•   Example handles the change event for
    TimePicker control
    § Event can accept event info parameter (optional)




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 8
•   Add event handler to deal with change event




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Styling HTML Controls
•   To style HTML controls (button, textarea, etc.)
    § Use CSS, as you would any HTML control




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Control Components
•   Typical control has several sub-parts
•   Text control has two parts: text value and clear
    button




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
CSS Pseudo-Elements
•   Metro style apps using JavaScript provide CSS
    pseudo-elements
    § Let you style individual parts of controls
    § -ms-value and -ms-clear, for Text controls




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Available Parts
•   See documentation for complete list
    § This list may be out of date




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Using Pseudo-Elements
•   Use CSS syntax like this:
    § element selector::part name { /* Your styles */ }
•   To style input box's Clear button:




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Modify Reveal Button
•   Password control provides button to reveal
    password
•   Make the button green, key white, with dashed
    red border?
    § Demo shows how!




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
DEMO 9
•   Style Reveal Button




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Styling Intrinsic HTML Controls
•   Built-in style sheets include CSS classes
    § Can assign to HTML controls
    § Change look and feel
•   Assign specific class to control to modify its
    behavior
•   Documentation lists all available classes
    § <button class="win-backbutton"></button>




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Styling WinJS Controls
•   Override WinJS CSS classes for the control
    § For app bar, override win-appbar class in CSS
    § For DatePicker, override one of
       o win-datepicker
       o win-datepicker-date
       o win-datepicker-month
       o win-datepicker-year

•   Documentation describes all the CSS classes



               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 10
•   Modify style for DatePicker control




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Using Typography Classes
•   Built-in style sheets also provide support for
    specific styles for text
    § win-type-xx-large
    § win-type-medium
    § win-type-xx-small
•   Using these styles allows apps to have a
    consistent look




              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
DEMO 11
•   Use typography styles




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
Adding App Bars
•   App bar presents navigation, commands, and
    tools to users
•   App bar appears when user swipes from top or
    bottom edge of screen
    § Or when opened programmatically
•   Covers the bottom and top content of app
•   Dismiss by user with edge swipe
    § Or by app interaction



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




             Learn More @ http://www.learnnowonline.com
                Copyright © by Application Developers Training Company
App Bar Properties
•   Demo used these properties:
    § position: location of the bar ("top" or "bottom")
       o undefined (default value) or any other value allows app bar to
         handle its own positioning
    § transient: should AppBar automatically show or hide;
      if false, must show or hide in code
    § autoHide: milliseconds before app bar hides
    § lightDismiss: should AppBar hide when user clicks
      outside of app bar element?



                Learn More @ http://www.learnnowonline.com
                   Copyright © by Application Developers Training Company
Adding Buttons
•   Add <button> element, using the
    WinJS.UI.AppBar setting for data-win-control
    attribute
•   Set various properties:
    § id
    § label
    § icon (WinJS.UI.AppBarIcon—many supplied)
    § section (global [right] or selection [left])
    § tooltip




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




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Add a Flyout
•   Flyouts show content you don't want onscreen all
    the time
    § Users open and dismiss flyouts at any time
•   Useful for:
    § Collecting information
    § Displaying warnings/confirmations
    § Showing drop-down menus
    § Providing more Info




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




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




        Learn More @ http://www.learnnowonline.com
           Copyright © by Application Developers Training Company
Flyouts for Drop-down Menus




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




        Learn More @ http://www.learnnowonline.com
           Copyright © by Application Developers Training Company
Flyout Guidelines
•   Do not use flyouts for:
    § Unexpected messages
    § Presenting complex or persistent selections of
      commands
       o Especially if they would be more convenient to the user on
         the app's canvas or app bar
•   Make the design of the flyout as simple as
    possible




               Learn More @ http://www.learnnowonline.com
                  Copyright © by Application Developers Training Company
DEMO 14
•   Create flyout
•   Create context menu




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Closing Head Shot
•   Covered a little of what it takes to create a User
    Interface using HTML, JavaScript, and CSS
•   Obviously, tons more
    § Many more HTML and WinJS controls
    § Lots more details
•   Any project requiring even simple controls will
    require some study of the documentation
    § All these skills expandable to other controls.




              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 about Metro Style Applications on
  SlideShare:
  • Building Windows 8 Metro Style Applications
    Using JavaScript and HTML5




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

				
DOCUMENT INFO
Description: Investigate different ways of laying out Metro style applications.