• Save
Creating a User Interface
Upcoming SlideShare
Loading in...5
×
 

Creating a User Interface

on

  • 852 views

Investigate different ways of laying out Metro style applications.

Investigate different ways of laying out Metro style applications.

Statistics

Views

Total Views
852
Views on SlideShare
852
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n

Creating a User Interface Creating a User Interface Presentation Transcript

  • Creating a User Interface Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • The Goal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • The Goal• Investigate different ways of laying out Metro style applications 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 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 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 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Window, or Canvas• Base of the UI Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Window, or Canvas• Base of the UI • Holds content and controls 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Window, or Canvas• Base of the UI Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Window, or Canvas• Base of the UI • Holds content and controls 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Bar• Secondary to app window Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Bar• Secondary to app window • App Bar is primary command interface 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Bar• Secondary to app window Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Bar• Secondary to app window • App Bar is primary command interface 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 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 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 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 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 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 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 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 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 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 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 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 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) 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 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) 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Context Menus• Also called popup menu 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Context Menus• Also called popup menu 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Message Dialogs• Modal dialogs that require explicit user interaction 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Message Dialogs• Modal dialogs that require explicit user interaction 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Flyouts• Temporary, dismissable UI related to what the user is doing 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Flyouts• Temporary, dismissable UI related to what the user is doing 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Toasts• Notifications to indicate activity to user when app is in background 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Errors• Different kinds of errors require different kinds of user interface 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Inline Error Text• App cannot fix the error, but user can 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Inline Error Text• App cannot fix the error, but user can 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 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 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 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 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 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 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 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 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
  • 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Message Dialogs• Use only if modal message is 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Message Dialogs• Use only if modal message is 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 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 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 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 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 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 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 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 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: 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • CSS: Cascading Style Sheets• Standards-based mechanism for separating content from presentation 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 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 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 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 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: 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 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 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 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 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 • Search results pane 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 • Search results pane • Folder structure Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Handling Views Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Handling Views• View describes the way users access and manipulate content 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 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 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
  • View States• Handle snapped, fill or full screen modes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Screen Orientation 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
  • 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • User Interaction Views 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Layouts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Layouts• Mechanisms by which your app can accommodate the views it supports 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 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 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 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 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 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 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 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 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 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… 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… • Have a screen wider than 480 pixels 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… • Have a screen wider than 480 pixels • Are oriented vertically Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Rules for Screen Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Rules for Screen• CSS for screen rules generally looks like this: 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 } 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 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 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 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 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 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 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 • ms-view-state 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 • ms-view-state• Value can be any of: 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 • ms-view-state• Value can be any of: • fullscreen-landscape: landscape, full screen 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 • ms-view-state• Value can be any of: • fullscreen-landscape: landscape, full screen • filled: landscape, not full screen, not snapped 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 • 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 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 • 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Working with Controls• Two types of controls: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Working with Controls• Two types of controls: • Standard HTML controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Working with Controls• Two types of controls: • Standard HTML controls • WinJS controls 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 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: 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Working with HTML Controls• HTML controls (tags): 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 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" 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" 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" 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 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 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 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 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 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 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 • Create event handler to handle event 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 • Create event handler to handle event • Register event handler with the control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively • Set controls event attribute with name of the JavaScript event handler function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively • Set controls event attribute with name of the JavaScript event handler function • Although this works, its a bad idea Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively • Set controls event attribute with name of the JavaScript event handler function • Although this works, its a bad idea • Programmatically Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively • Set controls event attribute with name of the JavaScript event handler function • Although this works, its a bad idea • Programmatically • In JavaScript, retrieve reference to control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively • Set controls event attribute with name of the JavaScript event handler function • Although this works, its a bad idea • Programmatically • In JavaScript, retrieve reference to control • Call addEventListener method, pass event handler Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Creating Event Handlers• Two ways to create event handlers: • Declaratively • Set controls event attribute with name of the JavaScript event handler function • Although this works, its a bad idea • Programmatically • In JavaScript, retrieve reference to control • Call addEventListener method, pass event handler • Preferred method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • DEMO 3 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? 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 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 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 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 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 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 couldnt run 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 couldnt run • Could create specific namespace for it, of course Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Why Not Declarative Events? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Why Not Declarative Events?• Event information passed to handler in declarative markup isnt as useful Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Why Not Declarative Events?• Event information passed to handler in declarative markup isnt as useful • When use addEventListener to hook up event Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Why Not Declarative Events?• Event information passed to handler in declarative markup isnt as useful • When use addEventListener to hook up event • Event information parameters target property returns reference to the control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Why Not Declarative Events?• Event information passed to handler in declarative markup isnt as useful • When use addEventListener to hook up event • Event information parameters target property returns reference to the control • 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 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 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 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, wont run 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, wont run • JavaScript cant "find" the handler 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, wont run • JavaScript cant "find" the handler• Solution: Create an explicit namespace 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, wont run • JavaScript cant "find" the handler• Solution: Create an explicit namespace • Place handler in new namespace 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, wont run • JavaScript cant "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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Working with WinJS Controls• Windows Library for JavaScript (WinJS) 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 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 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 • Designed to make developing Metro style applications using JavaScript easier 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 • Designed to make developing Metro style applications using JavaScript easier• WinJS contains objects that: 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 • Designed to make developing Metro style applications using JavaScript easier• WinJS contains objects that: • Handle activation, access storage 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 • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • WinJS Controls• Large set of controls 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) 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • AppBar Control• App toolbar that displays commands Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • AppBar Control• App toolbar that displays commands• Covers application content 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 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
  • 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 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
  • DatePicker Control• Enables the user to select a date 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 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
  • FlipView Control• Displays a collection of items, one item at a time 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
  • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Flyout Control• Displays a message that requires user interaction 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
  • 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 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
  • 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
  • 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 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
  • Rating Control• Enables the user to rate an item Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • SemanticZoom Control 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) 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 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
  • 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
  • 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 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
  • SettingsPane Control• Provides access to app settings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • TimePicker Control 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
  • TimePicker Control• Enables the user to select a time 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 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
  • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • ToolTip Control• Displays a tooltip that can support rich content 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 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
  • 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
  • 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add WinJS to Your Pages• To use WinJS in an app 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Adding Control in Markup• Unlike HTML controls, WinJS controls dont have dedicated markup elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Adding Control in Markup• Unlike HTML controls, WinJS controls dont have dedicated markup elements • Cant create Rating control by adding <rating/> to the markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Adding Control in Markup• Unlike HTML controls, WinJS controls dont have dedicated markup elements • Cant create Rating control by adding <rating/> to the markup• Instead, create <div> element and set data-win- control attribute to class name of control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Adding Control in Markup• Unlike HTML controls, WinJS controls dont have dedicated markup elements • Cant 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Hooking Things Up• Just creating the <div> elements isnt enough Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Hooking Things Up• Just creating the <div> elements isnt enough• Must also call WinJS.UI.processAll in order to instantiate WinJS controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Hooking Things Up• Just creating the <div> elements isnt enough• Must also call WinJS.UI.processAll in order to instantiate WinJS controls• WinJS.UI.processAll returns a Promise Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Hooking Things Up• Just creating the <div> elements isnt 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Setting WinJS Control Properties• Setting properties of an HTML control is easy: 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" /> 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 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 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) 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) • data-win-options="{name1:value1, name2:value2}" 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) • 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Setting Properties in Code• Can set properties of WinJS controls in code 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 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 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 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> 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Shortcut• Rather than calling document.getElementById 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! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Asynchronous Behavior!• Watch out! Call to WinJS.UI.processAll is asynchronous Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Asynchronous Behavior!• Watch out! Call to WinJS.UI.processAll is asynchronous • Cant execute code that uses WinJS controls immediately after Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Asynchronous Behavior!• Watch out! Call to WinJS.UI.processAll is asynchronous • Cant execute code that uses WinJS controls immediately after • It may not have completed! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Asynchronous Behavior!• Watch out! Call to WinJS.UI.processAll is asynchronous • Cant execute code that uses WinJS controls immediately after • It may not have completed!• WinJS.UI.processAll returns a promise Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Asynchronous Behavior!• Watch out! Call to WinJS.UI.processAll is asynchronous • Cant 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • DEMO 7• Retrieve reference in code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • DEMO 7• Retrieve reference in code• Set property in code 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 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 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Styling HTML Controls• To style HTML controls (button, textarea, etc.) 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
  • 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
  • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Control Components• Typical control has several sub-parts 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
  • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • CSS Pseudo-Elements• Metro style apps using JavaScript provide CSS pseudo-elements 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 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
  • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Available Parts• See documentation for complete list 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
  • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Using Pseudo-Elements• Use CSS syntax like this: 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 */ } 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 boxs Clear button: 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 boxs Clear button: 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 boxs Clear button: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Modify Reveal Button Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Modify Reveal Button• Password control provides button to reveal password 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? 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Styling Intrinsic HTML Controls• Built-in style sheets include CSS classes 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Styling WinJS Controls• Override WinJS CSS classes for the control 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 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 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 • win-datepicker 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 • win-datepicker • win-datepicker-date 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 • win-datepicker • win-datepicker-date • win-datepicker-month 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 • win-datepicker • win-datepicker-date • win-datepicker-month • win-datepicker-year 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 • win-datepicker • win-datepicker-date • win-datepicker-month • win-datepicker-year• Documentation describes all the CSS classes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • DEMO 10 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 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Adding App Bars• App bar presents navigation, commands, and tools to users 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 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 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 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 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • App Bar Properties• Demo used these properties: 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") 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") • undefined (default value) or any other value allows app bar to handle its own positioning 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") • 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 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") • 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 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") • 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 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 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: 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 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 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) 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]) 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 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont want onscreen all the time Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont want onscreen all the time • Users open and dismiss flyouts at any time Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont want onscreen all the time • Users open and dismiss flyouts at any time• Useful for: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont want onscreen all the time • Users open and dismiss flyouts at any time• Useful for: • Collecting information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont want onscreen all the time • Users open and dismiss flyouts at any time• Useful for: • Collecting information • Displaying warnings/confirmations Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont want onscreen all the time • Users open and dismiss flyouts at any time• Useful for: • Collecting information • Displaying warnings/confirmations • Showing drop-down menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Add a Flyout• Flyouts show content you dont 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
  • Flyout for Collecting Information 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 Warnings/Confirmations 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 Drop-down Menus 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
  • Flyouts for More Info 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Flyout Guidelines• Do not use flyouts for: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • Flyout Guidelines• Do not use flyouts for: • Unexpected messages 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 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 apps canvas or app bar 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 apps 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • DEMO 14• Create flyout 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 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 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 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 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 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 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! 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 @ 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 @ 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: 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