Creating A User Interface

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

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

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

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

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

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

Charms Bar
Presents specific and consistent set of buttons, the same in every app
Search Share Connect Settings Start

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

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

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
Dont use for primary command interface!

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
Dont use for primary command interface!

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

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

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

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

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

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

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

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

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 apps palette Use same color and layout for all error and warning
bars
Dont use X glyphuse Close button

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 apps palette Use same color and layout for all error and warning
bars

Message Dialogs
Use only if modal message is required

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

Message Dialogs
Use only if modal message is required

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 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:

Views that the app supports 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 its shown

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

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

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

View States
Handle snapped, fill or full screen modes

Screen Orientation
Need to handle both landscape and portrait orientations

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

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

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

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

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

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

DEMO 1
CSS for multiple layouts

Working with Controls

Two types of controls:
Standard HTML controls WinJS controls
Each is handled differently Another issue:

How to style WinJS controls

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

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",

DEMO 2
Add HTML controls to page

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

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

DEMO 3
Add event handlers for onclick and onchange events

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

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

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

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
o Designed to make developing Metro style applications using
JavaScript easier
WinJS contains objects that:

Handle activation, access storage Help define classes and namespaces

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

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

DatePicker Control
Enables the user to select a date

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

Flyout Control
Displays a message that requires user interaction

Unlike a dialog box, a Flyout does not create a
separate window

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

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
Folder structure of a computer, a library of
documents, or a photo album

SettingsPane Control
Provides access to app settings

TimePicker Control
Enables the user to select a time

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

ToolTip Control
Displays a tooltip that can support rich content

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

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

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

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-wincontrol attribute to class name of control
<div data-win-control="WinJS.UI.Rating">

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

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)
o data-win-options="{name1:value1, name2:value2}"
Property value a string? Wrap in apostrophes

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

Use winControl property of parent

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

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

DEMO 7

Retrieve reference in code Set property in code Use shortcut versions as well

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)

DEMO 8
Add event handler to deal with change event

Styling HTML Controls
To style HTML controls (button, textarea, etc.)

Use CSS, as you would any HTML control

Control Components

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

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

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 */ }
To style input box's Clear button:

Modify Reveal Button
Password control provides button to reveal password Make the button green, key white, with dashed red border?
Demo shows how!

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 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
o win-datepicker o win-datepicker-date o win-datepicker-month
o win-datepicker-year
Documentation describes all the CSS classes

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-xx-small
Using these styles allows apps to have a consistent look

DEMO 11
Use typography styles

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

DEMO 12
Create app bar

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?

Adding Buttons
Add <button> element, using the WinJS.UI.AppBar setting for data-win-control attribute Set various properties:
id label
icon (WinJS.UI.AppBarIconmany supplied)

section (global [right] or selection [left]) tooltip

DEMO 13
Modify App Bar

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

Flyout for Collecting Information

Flyouts for Warnings/Confirmations

Flyouts for Drop-down Menus

Flyouts for More Info

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

DEMO 14

Create flyout Create context menu

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!
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


Creating A User Interface

Uploaded by

Document Information

Original Title

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Creating A User Interface

Uploaded by

Copyright:

Creating a User Interface

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Investigating App Surfaces

Choosing the right surface is crucial

Learn More @ http://www.learnnowonline.com

App Window, or Canvas

Instead of pop-up for error

Learn More @ http://www.learnnowonline.com

App Window, or Canvas

Instead of pop-up for error

Learn More @ http://www.learnnowonline.com

Present navigation, commands, tools to user Hidden by default

Dismissed by edge swipe, timer, or action

Learn More @ http://www.learnnowonline.com

Present navigation, commands, tools to user Hidden by default

Dismissed by edge swipe, timer, or action

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Dont use for primary command interface!

Learn More @ http://www.learnnowonline.com

Dont use for primary command interface!

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Temporary, dismissable UI related to what the user is doing

Only show in response to user tap or click

Learn More @ http://www.learnnowonline.com

Temporary, dismissable UI related to what the user is doing

Only show in response to user tap or click

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Inline Error Text

Learn More @ http://www.learnnowonline.com

Inline Error Text

Learn More @ http://www.learnnowonline.com

Error or Warning Bar

Position at top of screen

Dont use X glyphuse Close button

Learn More @ http://www.learnnowonline.com

Error or Warning Bar

Position at top of screen

Learn More @ http://www.learnnowonline.com

Use only if modal message is required

Only use when absolutely required

Learn More @ http://www.learnnowonline.com

Use only if modal message is required

Only use when absolutely required

Learn More @ http://www.learnnowonline.com

Defining Layouts and Views

App should look good and work well on tablet or 30 monitor

Learn More @ http://www.learnnowonline.com

CSS and User Interface

Specifying the user interface of apps involves two factors:

CSS does the work!

Learn More @ http://www.learnnowonline.com

CSS: Cascading Style Sheets

Separation of what is shown from how its shown

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Handle snapped, fill or full screen modes

Learn More @ http://www.learnnowonline.com