Creating a User Interface

Creating a User Interface

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

The Goal


The Goal
• Investigate different ways of laying out Metro
style applications


The Goal
style applications
• Work with controls, including styling


The Goal
style applications
• Try out several of the basic controls


The Goal
style applications
• Try out several of the basic controls
• Add app bars, flyouts, and context menus


Investigating App Surfaces


• Metro style applications supply a number of
different surfaces onto which you can add user
interface elements


interface elements
• App window


interface elements
• App window
• App bars


interface elements
• App window
• App bars
• Popups


interface elements
• App window
• App bars
• Popups
• Dialogs


interface elements
• App window
• App bars
• Popups
• Dialogs
• Choosing the right surface is crucial


App Window, or Canvas


• Base of the UI


• Base of the UI
• Holds content and controls


• Base of the UI
• If at all possible, integrate UI elements into canvas


• Base of the UI
• Instead of pop-up for error


• Base of the UI
• Instead of pop-up for error
• Smoothly show, hide, display error messages using
built-in animations


App Bar


App Bar
• Secondary to app window


App Bar
• App Bar is primary command interface


App Bar
• Replaces menus


App Bar
• Replaces menus
• Present navigation, commands, tools to user


App Bar
• Replaces menus
• Hidden by default


App Bar
• Replaces menus
• Appears when user swipes top or bottom edge


App Bar
• Replaces menus
• Covers content


App Bar
• Replaces menus
• Covers content
• Dismissed by edge swipe, timer, or action


Charms Bar


Charms Bar
• Presents specific and consistent set of buttons,
the same in every app


Charms Bar
• Search


Charms Bar
• Search
• Share


Charms Bar
• Search
• Share
• Connect


Charms Bar
• Search
• Share
• Connect
• Settings


Charms Bar
• Search
• Share
• Connect
• Settings
• Start


Charms Bar
• Can appear to the right of the screen (if using a
touch screen)


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


Context Menus


Context Menus
• Also called popup menu


Context Menus
• Shows actions users can perform on text or UI
elements


Context Menus
elements
• Can use up to five (and no more) commands on
each context menu


Context Menus
elements
each context menu
• Like cut, copy, open with


Context Menus
elements
each context menu
• Limit keeps menus uncluttered


Context Menus
elements
each context menu
• Limit keeps menus uncluttered
• Don’t use for primary command interface!


Message Dialogs


Message Dialogs
• Modal dialogs that require explicit user
interaction


Message Dialogs
interaction
• Dim the app window


Message Dialogs
interaction
• Demand response before continuing


Message Dialogs
interaction
• Demand response before continuing
• Use message dialogs only when the intent is to
stop the user and demand a response


Flyouts


Flyouts
• Temporary, dismissable UI related to what the
user is doing


Flyouts
user is doing
• Confirm an action


Flyouts
user is doing
• Show more details


Flyouts
user is doing
• Only show in response to user tap or click


Flyouts
user is doing
• Always dismiss flyout when user taps outside it


Flyouts
user is doing
• Always dismiss flyout when user taps outside it
• Use Message Dialog if you want to interrupt


Toasts


Toasts
• Notifications to indicate activity to user when
app is in background


Toasts
• Great for real-time update without requiring app
in foreground


Toasts
in foreground
• OK if user misses the information


Toasts
in foreground
• OK if user misses the information
• Users tap on the toast to switch to your app and
learn more


Errors


Errors
• Different kinds of errors require different kinds of
user interface


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


Inline Error Text


Inline Error Text
• App cannot fix the error, but user can


Inline Error Text
• Users can continue to interact without fixing the
error


Inline Error Text
error
• Example: User enters invalid text


Inline Error Text
error
• Use text inline on the canvas


Inline Error Text
error
• Use text inline on the canvas
• Appears inline near the error


Error or Warning Bar


• Use error or warning bar to notify of important
errors and warnings


errors and warnings
• Encourage user to take action


errors and warnings
• Position at top of screen


errors and warnings
• Use color from app’s palette


errors and warnings
• Use same color and layout for all error and warning
bars


errors and warnings
• Use same color and layout for all error and warning
bars
• Don’t use X glyph—use Close button


Message Dialogs
• Use only if modal message is required


Message Dialogs
• Blocks user from further action until resolved


Message Dialogs
• Blocks user from further action until resolved
• Only use when absolutely required


Defining Layouts and Views


• Your goal: Create apps that look good and work
well across a variety of


• Form factors


• Form factors
• Display sizes


• Form factors
• Display sizes
• View states


• Form factors
• Display sizes
• View states
• App should look good and work well on tablet or
30” monitor


• 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


CSS and User Interface


• Specifying the user interface of apps involves
two factors:


two factors:
• Views that the app supports


two factors:
• Layouts that the app requires


two factors:
• Layouts that the app requires
• CSS does the work!


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


• Lets you deliver consistent user experiences
• Across multiple devices, screen sizes, form factors


Views


Views
• View defines the way your app is accessed and
manipulated by a user:


Views
• Landscape or portrait orientation


Views
• Full screen, snapped, or fill view states


Views
• Pannable, zoomable, scaled or resized UI


Views
• Specific UI elements


Views
• Search results pane


Views
• Search results pane
• Folder structure


Handling Views


Handling Views
• View describes the way users access and
manipulate content


Handling Views
manipulate content
• Can view app on devices of various sizes and
orientations


Handling Views
manipulate content
• Can view app on devices of various sizes and
orientations
• Plan for different view states, screen
orientations, and user interaction views


View States


View States
• Handle snapped, fill or full screen modes


Screen Orientation


Screen Orientation
• Need to handle both landscape and portrait
orientations


User Interaction Views


• If at all possible, allow the user to interact with
data


data
• Think about how to allow resizing, scrolling, panning,
zooming, and semantic zoom


data
• Think about how to allow resizing, scrolling, panning,
zooming, and semantic zoom
• Semantic zoom allows content to change as users zoom


Layouts


Layouts
• Mechanisms by which your app can
accommodate the views it supports


Layouts
• Style, structure, and present app content using
CSS layout modules


Layouts
CSS layout modules
• Grids


Layouts
CSS layout modules
• Grids
• Multi-columns


Layouts
CSS layout modules
• Grids
• Multi-columns
• Connected frames


Layouts
CSS layout modules
• Grids
• Multi-columns
• Connected frames
• Flexible boxes


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…


• Have a screen wider than 480 pixels


• Have a screen wider than 480 pixels
• Are oriented vertically


Rules for Screen


Rules for Screen
• CSS for screen rules generally looks like this:


Rules for Screen
• @media screen and (feature) { rules }


Rules for Screen
• Specific media could be something besides
screen, but care about screen here


Rules for Screen
• feature represents specific feature to test


Rules for Screen
• For example: width:600px


Rules for Screen
• For example: width:600px
• Apply rules to screens that are exactly 600px wide


Using Media Features with Metro


• Microsoft supplies specific feature that supports
Metro style apps


Metro style apps
• Determines current view state


Metro style apps
• ms-view-state


Metro style apps
• ms-view-state

• Value can be any of:


Metro style apps
• ms-view-state

• fullscreen-landscape: landscape, full screen


Metro style apps
• ms-view-state

• filled: landscape, not full screen, not snapped


Metro style apps
• ms-view-state

• snapped: landscape, not full screen, snapped


Metro style apps
• ms-view-state

• snapped: landscape, not full screen, snapped
• fullscreen-portrait: portrait, full screen


DEMO 1


DEMO 1
• CSS for multiple layouts


Working with Controls


• Two types of controls:


• Standard HTML controls


• WinJS controls


• WinJS controls
• Each is handled differently


• WinJS controls
• Another issue:


• WinJS controls
• Another issue:
• How to style WinJS controls


Working with HTML Controls


• Can add HTML controls using markup, or using
JavaScript


JavaScript
• Style sheets affect the look and feel


JavaScript
• Style sheets affect the look and feel
• Can obviously override with custom styles


• 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


• iframe, img, label, progress, select, textarea, video
• div contentEditable, style="overflow:scroll",


DEMO 2


DEMO 2
• Add HTML controls to page


Events


Events
• So far, nothing happens when you select item in
list, or click button


Events
• Each control provides events enabling you to
respond to actions


Events
respond to actions
• Button provides click event; raised when clicked


Events
respond to actions
• Create event handler to handle event


Events
respond to actions
• Create event handler to handle event
• Register event handler with the control


Creating Event Handlers


• Two ways to create event handlers:


• Declaratively


• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function


• Declaratively
• Although this works, it's a bad idea


• Declaratively
• Programmatically


• Declaratively
• In JavaScript, retrieve reference to control


• Declaratively
• Call addEventListener method, pass event handler


• Declaratively
• Call addEventListener method, pass event handler
• Preferred method


DEMO 3


DEMO 3
• Add event handlers for onclick and onchange
events


Why Not Declarative Events?


• By default, all JavaScript code in anonymous
global function


global function
• Limits scope of code


global function
• Avoids polluting global namespace


global function
• Button event handler (declarative) must exist in
global namespace


global function
global namespace
• So markup can access


global function
global namespace
• In anonymous function, it couldn't run


global function
global namespace
• In anonymous function, it couldn't run
• Could create specific namespace for it, of course


• Event information passed to handler in
declarative markup isn't as useful


• When use addEventListener to hook up event


• Event information parameter's target property returns
reference to the control


• Event information parameter's target property returns
reference to the control
• If you use declarative hookup, the target property returns
reference to the window


Solving Namespace Problem


• If you still prefer to create event handlers in
markup


markup
• Need to handle the namespace problem


markup
• If placed in the anonymous function, won't run


markup
• JavaScript can't "find" the handler


markup

• Solution: Create an explicit namespace


markup

• Place handler in new namespace


markup

• Place handler in new namespace
• Update markup to reference


DEMO 4


DEMO 4
• Add namespace and modify Click event


Working with WinJS Controls


• Windows Library for JavaScript (WinJS)


• Library of CSS and JavaScript files


• Contains JavaScript objects, organized into
namespaces


namespaces
• Designed to make developing Metro style applications using
JavaScript easier


namespaces
JavaScript easier
• WinJS contains objects that:


namespaces
JavaScript easier
• Handle activation, access storage


namespaces
JavaScript easier
• Handle activation, access storage
• Help define classes and namespaces


WinJS Controls


WinJS Controls
• Large set of controls


WinJS Controls
• Each abstracted as HTML (and CSS and
JavaScript)


WinJS Controls
JavaScript)
• Provide basis for Metro style applications


WinJS Controls
JavaScript)
• Following slides introduce most of the WinJS
controls


WinJS Controls
JavaScript)
• Following slides introduce most of the WinJS
controls
• Images from set of Metro style samples from
Microsoft


AppBar Control


AppBar Control
• App toolbar that displays commands


AppBar Control
• Covers application content


AppBar Control
• Appear using edge swipe, Win+Z, or right-click


AppBar Control
• Appear using edge swipe, Win+Z, or right-click
• Dismiss with app interaction, another edge swipe, or
timer


DatePicker Control


DatePicker Control
• Enables the user to select a date


FlipView Control


FlipView Control
• Displays a collection of items, one item at a time


Flyout Control


Flyout Control
• Displays a message that requires user interaction


Flyout Control
• Displays a message that requires user interaction
• Unlike a dialog box, a Flyout does not create a
separate window


ListView Control


ListView Control
• Displays a collection of items in a grid or list
layout


Rating Control


Rating Control
• Enables the user to rate an item


SemanticZoom Control


• Provides a way to manage and present two
semantic views (abstractions)


• Single set of hierarchical data or content


• Single set of hierarchical data or content
• Folder structure of a computer, a library of
documents, or a photo album


SettingsPane Control


SettingsPane Control
• Provides access to
app settings


TimePicker Control


TimePicker Control
• Enables the user to select a time


Toggle Control


Toggle Control
• Represents an item that can be turned on or off


ToolTip Control


ToolTip Control
• Displays a tooltip that can support rich content


ToolTip Control
• such as images and formatted text


ToolTip Control
• such as images and formatted text
• Shows more info about an object on demand


ViewBox Control


ViewBox Control
• Scales a single child element to fill the available
space without resizing it


ViewBox Control
• Reacts to changes in the size of the container


ViewBox Control
• And changes in size of the child element


ViewBox Control
• And changes in size of the child element
• For example, responds if a media query results
in a change in aspect ratio


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


necessary files
• Templates include required references


necessary files
• Templates include required references
• For controls, need ui.js


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


markup
• Instead, create <div> element and set data-win-
control attribute to class name of control


markup
• Instead, create <div> element and set data-win-
control attribute to class name of control
• <div data-win-control="WinJS.UI.Rating">


Hooking Things Up


Hooking Things Up
• Just creating the <div> elements isn't enough


Hooking Things Up
• Must also call WinJS.UI.processAll in order to
instantiate WinJS controls


Hooking Things Up
• WinJS.UI.processAll returns a Promise


Hooking Things Up
• 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


DEMO 5


DEMO 5
• Add a WinJS control, interact with it


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)


• data-win-options="{name1:value1, name2:value2}"


• data-win-options="{name1:value1, name2:value2}"
• Property value a string? Wrap in apostrophes


DEMO 6


DEMO 6
• Set properties in markup


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


• To retrieve reference to child
• Use winControl property of parent


Shortcut


Shortcut
• Rather than calling document.getElementById


Shortcut
• Rather than calling document.getElementById
• Can count on JavaScript creating variable with same
name as id property of <div> element


Asynchronous Behavior!


• Watch out! Call to WinJS.UI.processAll is
asynchronous


asynchronous
• Can't execute code that uses WinJS controls
immediately after


asynchronous
immediately after
• It may not have completed!


asynchronous
immediately after
• WinJS.UI.processAll returns a promise


asynchronous
immediately after
• WinJS.UI.processAll returns a promise
• Use the then method to call code that needs to run
immediately after the call


DEMO 7


DEMO 7
• Retrieve reference in code


DEMO 7
• Set property in code


DEMO 7
• Set property in code
• Use shortcut versions as well


Handling Events for WinJS Controls


• Basic concept same as event hookup for HTML
controls


controls
• Still need to call addEventListener


controls
• In JavaScript, retrieve control reference


controls
• Then call addEventListener for the control


controls
• Example handles the change event for
TimePicker control


controls
• Example handles the change event for
TimePicker control
• Event can accept event info parameter (optional)


DEMO 8


DEMO 8
• Add event handler to deal with change event


Styling HTML Controls


• To style HTML controls (button, textarea, etc.)


• To style HTML controls (button, textarea, etc.)
• Use CSS, as you would any HTML control


Control Components


Control Components
• Typical control has several sub-parts


Control Components
• Typical control has several sub-parts
• Text control has two parts: text value and clear
button


CSS Pseudo-Elements


CSS Pseudo-Elements
• Metro style apps using JavaScript provide CSS
pseudo-elements


CSS Pseudo-Elements
pseudo-elements
• Let you style individual parts of controls


CSS Pseudo-Elements
pseudo-elements
• Let you style individual parts of controls
• -ms-value and -ms-clear, for Text controls


Available Parts


Available Parts
• See documentation for complete list


Available Parts
• See documentation for complete list
• This list may be out of date


Using Pseudo-Elements


• Use CSS syntax like this:


• element selector::part name { /* Your styles */ }


• element selector::part name { /* Your styles */ }
• To style input box's Clear button:


Modify Reveal Button


• Password control provides button to reveal
password


password
• Make the button green, key white, with dashed
red border?


password
• Make the button green, key white, with dashed
red border?
• Demo shows how!


DEMO 9


DEMO 9
• Style Reveal Button


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


behavior
• Documentation lists all available classes


behavior
• Documentation lists all available classes
• <button class="win-backbutton"></button>


Styling WinJS Controls


• Override WinJS CSS classes for the control


• For app bar, override win-appbar class in CSS


• For DatePicker, override one of


• win-datepicker


• win-datepicker
• win-datepicker-date


• win-datepicker
• win-datepicker-month


• win-datepicker
• win-datepicker-year


• win-datepicker
• win-datepicker-year

• Documentation describes all the CSS classes


DEMO 10


DEMO 10
• Modify style for DatePicker control


Using Typography Classes


• Built-in style sheets also provide support for
specific styles for text


• win-type-xx-large


• win-type-medium


• win-type-medium
• win-type-xx-small


• win-type-medium
• win-type-xx-small
• Using these styles allows apps to have a
consistent look


DEMO 11


DEMO 11
• Use typography styles


Adding App Bars


Adding App Bars
• App bar presents navigation, commands, and
tools to users


Adding App Bars
tools to users
• App bar appears when user swipes from top or
bottom edge of screen


Adding App Bars
tools to users
• Or when opened programmatically


Adding App Bars
tools to users
• Covers the bottom and top content of app


Adding App Bars
tools to users
• Dismiss by user with edge swipe


Adding App Bars
tools to users
• Dismiss by user with edge swipe
• Or by app interaction


DEMO 12


DEMO 12
• Create app bar


App Bar Properties


App Bar Properties
• Demo used these properties:


App Bar Properties
• position: location of the bar ("top" or "bottom")


App Bar Properties
• undefined (default value) or any other value allows app bar to
handle its own positioning


App Bar Properties
• transient: should AppBar automatically show or hide;
if false, must show or hide in code


App Bar Properties
• autoHide: milliseconds before app bar hides


App Bar Properties
• autoHide: milliseconds before app bar hides
• lightDismiss: should AppBar hide when user clicks
outside of app bar element?


Adding Buttons


Adding Buttons
• Add <button> element, using the
WinJS.UI.AppBar setting for data-win-control
attribute


Adding Buttons
attribute
• Set various properties:


Adding Buttons
attribute
• id


Adding Buttons
attribute
• id
• label


Adding Buttons
attribute
• id
• label
• icon (WinJS.UI.AppBarIcon—many supplied)


Adding Buttons
attribute
• id
• label
• section (global [right] or selection [left])


Adding Buttons
attribute
• id
• label
• section (global [right] or selection [left])
• tooltip


DEMO 13


DEMO 13
• Modify App Bar


Add a Flyout


Add a Flyout
• Flyouts show content you don't want onscreen all
the time


Add a Flyout
the time
• Users open and dismiss flyouts at any time


Add a Flyout
the time
• Useful for:


Add a Flyout
the time
• Useful for:
• Collecting information


Add a Flyout
the time
• Useful for:
• Displaying warnings/confirmations


Add a Flyout
the time
• Useful for:
• Showing drop-down menus


Add a Flyout
the time
• Useful for:
• Showing drop-down menus
• Providing more Info


Flyout for Collecting Information


Flyouts for Warnings/Confirmations


Flyouts for Drop-down Menus


Flyouts for More Info


Flyout Guidelines


Flyout Guidelines
• Do not use flyouts for:


Flyout Guidelines
• Unexpected messages


Flyout Guidelines
• Presenting complex or persistent selections of
commands


Flyout Guidelines
commands
• Especially if they would be more convenient to the user on
the app's canvas or app bar


Flyout Guidelines
commands
• 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


DEMO 14


DEMO 14
• Create flyout


DEMO 14
• Create flyout
• Create context menu


Closing Head Shot


Closing Head Shot
• Covered a little of what it takes to create a User
Interface using HTML, JavaScript, and CSS


Closing Head Shot
• Obviously, tons more


Closing Head Shot
• Many more HTML and WinJS controls


Closing Head Shot
• Lots more details


Closing Head Shot
• Any project requiring even simple controls will
require some study of the documentation


Closing Head Shot
• Any project requiring even simple controls will
require some study of the documentation
• All these skills expandable to other controls.


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


Learn More!

• Learn more about Metro Style Applications on
SlideShare:


Learn More!

• Learn more about Metro Style Applications on
SlideShare:
• Building Windows 8 Metro Style Applications
Using JavaScript and HTML5


Creating a User Interface

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Creating a User Interface (20)

More from LearnNowOnline (20)

Recently uploaded (20)

Creating a User Interface

Editor's Notes