Creating a User Interface by LearnNowOnline

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

• Don’t 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

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

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

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 it’s 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 • Search results pane • 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 â&#x20AC;˘ Handle snapped, fill or full screen modes

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

Screen Orientation â&#x20AC;˘ 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

• 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

• 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… • Have a screen wider than 480 pixels • 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 • 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 • Create event handler to handle event • Register event handler with the control

Creating Event Handlers • Two ways to create event handlers: • Declaratively • Set control's event attribute with name of the JavaScript

event handler function • Although this works, it's a bad idea

• Programmatically • In JavaScript, retrieve reference to control • Call addEventListener method, pass event handler • Preferred method

DEMO 3 â&#x20AC;˘ 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 • 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 • 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 • Need to handle the namespace problem • If placed in the anonymous function, won't run • 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

• 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 â&#x20AC;˘ 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

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 â&#x20AC;˘ 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

SettingsPane Control â&#x20AC;˘ Provides access to app settings

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

TimePicker Control â&#x20AC;˘ Enables the user to select a time

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

Toggle Control â&#x20AC;˘ 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

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)

• 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 • win-datepicker • win-datepicker-date • win-datepicker-month • 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") • 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.AppBarIcon—many 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

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

• 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