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


Creating a User Interface

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Creating a User Interface

Similaire à Creating a User Interface (20)

Plus de LearnNowOnline

Plus de LearnNowOnline (20)

Dernier

Dernier (20)

Creating a User Interface

Notes de l'éditeur