Más contenido relacionado
La actualidad más candente (20)
Similar a Creating a User Interface (20)
Más de LearnNowOnline (20)
Creating a User Interface
- 1. Creating a User Interface
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 2. The Goal
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 3. The Goal
• Investigate different ways of laying out Metro
style applications
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 4. 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
- 5. 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
- 6. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. App Window, or Canvas
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 15. App Window, or Canvas
• Base of the UI
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 16. App Window, or Canvas
• Base of the UI
• Holds content and controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 17. 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
- 18. 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
- 19. 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
- 20. App Window, or Canvas
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 21. App Window, or Canvas
• Base of the UI
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 22. App Window, or Canvas
• Base of the UI
• Holds content and controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 23. 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
- 24. 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
- 25. 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
- 26. App Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 27. App Bar
• Secondary to app window
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 28. App Bar
• Secondary to app window
• App Bar is primary command interface
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 29. 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
- 30. 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
- 31. 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
- 32. 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
- 33. 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
- 34. 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
- 35. App Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 36. App Bar
• Secondary to app window
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 37. App Bar
• Secondary to app window
• App Bar is primary command interface
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 38. 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
- 39. 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
- 40. 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
- 41. 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
- 42. 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
- 43. 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
- 44. Charms Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 45. 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
- 46. 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
- 47. 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
- 48. 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
- 49. 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
- 50. 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
- 51. Charms Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 52. 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
- 53. 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
- 54. Charms Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 55. 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
- 56. 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
- 57. Context Menus
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 58. Context Menus
• Also called popup menu
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 59. 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
- 60. 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
- 61. 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
- 62. 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
- 63. 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
- 64. Context Menus
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 65. Context Menus
• Also called popup menu
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 66. 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
- 67. 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
- 68. 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
- 69. 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
- 70. 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
- 71. Message Dialogs
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 72. Message Dialogs
• Modal dialogs that require explicit user
interaction
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 73. 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
- 74. 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
- 75. 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
- 76. Message Dialogs
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 77. Message Dialogs
• Modal dialogs that require explicit user
interaction
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 78. 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
- 79. 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
- 80. 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
- 81. Flyouts
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 82. Flyouts
• Temporary, dismissable UI related to what the
user is doing
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 83. 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
- 84. 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
- 85. 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
- 86. 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
- 87. 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
- 88. Flyouts
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 89. Flyouts
• Temporary, dismissable UI related to what the
user is doing
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 90. 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
- 91. 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
- 92. 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
- 93. 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
- 94. 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
- 95. Toasts
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 96. Toasts
• Notifications to indicate activity to user when
app is in background
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 97. 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
- 98. 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
- 99. 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
- 100. Errors
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 101. Errors
• Different kinds of errors require different kinds of
user interface
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 102. 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
- 103. Inline Error Text
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 104. Inline Error Text
• App cannot fix the error, but user can
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 105. 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
- 106. 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
- 107. 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
- 108. 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
- 109. Inline Error Text
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 110. Inline Error Text
• App cannot fix the error, but user can
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 111. 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
- 112. 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
- 113. 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
- 114. 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
- 115. Error or Warning Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 116. 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
- 117. 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
- 118. 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
- 119. 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
- 120. 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
- 121. 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
- 122. Error or Warning Bar
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 123. 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
- 124. 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
- 125. 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
- 126. 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
- 127. 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
- 128. Message Dialogs
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 129. Message Dialogs
• Use only if modal message is required
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 130. 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
- 131. 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
- 132. Message Dialogs
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 133. Message Dialogs
• Use only if modal message is required
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 134. 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
- 135. 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
- 136. Defining Layouts and Views
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 137. 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
- 138. 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
- 139. 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
- 140. 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
- 141. 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
- 142. 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
- 143. CSS and User Interface
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 144. 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
- 145. 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
- 146. 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
- 147. 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
- 148. CSS: Cascading Style Sheets
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 149. CSS: Cascading Style Sheets
• Standards-based mechanism for separating
content from presentation
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 150. 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
- 151. 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
- 152. 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
- 153. 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
- 154. Views
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 155. 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
- 156. 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
- 157. 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
- 158. 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
- 159. 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
- 160. 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
- 161. 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
- 162. Handling Views
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 163. Handling Views
• View describes the way users access and
manipulate content
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 164. 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
- 165. 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
- 166. View States
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 167. View States
• Handle snapped, fill or full screen modes
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 168. View States
• Handle snapped, fill or full screen modes
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 169. Screen Orientation
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 170. Screen Orientation
• Need to handle both landscape and portrait
orientations
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 171. Screen Orientation
• Need to handle both landscape and portrait
orientations
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 172. User Interaction Views
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 173. 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
- 174. 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
- 175. 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
- 176. User Interaction Views
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 177. 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
- 178. 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
- 179. 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
- 180. 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
- 181. 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
- 182. Layouts
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 183. Layouts
• Mechanisms by which your app can
accommodate the views it supports
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 184. 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
- 185. 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
- 186. 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
- 187. 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
- 188. 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
- 189. Using CSS for Multiple Layouts
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 190. 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
- 191. 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
- 192. 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
- 193. 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
- 194. 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
- 195. 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
- 196. 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
- 197. Rules for Screen
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 198. Rules for Screen
• CSS for screen rules generally looks like this:
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 199. 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
- 200. 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
- 201. 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
- 202. 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
- 203. 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
- 204. Using Media Features with Metro
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 205. 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
- 206. 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
- 207. 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
- 208. 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
- 209. 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
- 210. 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
- 211. 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
- 212. 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
- 213. DEMO 1
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 214. DEMO 1
• CSS for multiple layouts
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 215. Working with Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 216. Working with Controls
• Two types of controls:
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 217. Working with Controls
• Two types of controls:
• Standard HTML controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 218. Working with Controls
• Two types of controls:
• Standard HTML controls
• WinJS controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 219. 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
- 220. 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
- 221. 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
- 222. Working with HTML Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 223. 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
- 224. 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
- 225. 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
- 226. Working with HTML Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 227. Working with HTML Controls
• HTML controls (tags):
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 228. 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
- 229. 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
- 230. 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
- 231. 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
- 232. 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
- 233. 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
- 234. DEMO 2
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 235. DEMO 2
• Add HTML controls to page
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 236. Events
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 237. 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
- 238. 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
- 239. 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
- 240. 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
- 241. 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
- 242. Creating Event Handlers
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 243. Creating Event Handlers
• Two ways to create event handlers:
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 244. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 245. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 246. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function
• Although this works, it's a bad idea
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 247. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function
• Although this works, it's a bad idea
• Programmatically
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 248. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function
• Although this works, it's a bad idea
• Programmatically
• In JavaScript, retrieve reference to control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 249. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function
• Although this works, it's a bad idea
• Programmatically
• In JavaScript, retrieve reference to control
• Call addEventListener method, pass event handler
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 250. Creating Event Handlers
• Two ways to create event handlers:
• Declaratively
• Set control's event attribute with name of the JavaScript
event handler function
• Although this works, it's a bad idea
• Programmatically
• In JavaScript, retrieve reference to control
• Call addEventListener method, pass event handler
• Preferred method
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 251. DEMO 3
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 252. DEMO 3
• Add event handlers for onclick and onchange
events
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 253. Why Not Declarative Events?
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 254. 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
- 255. 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
- 256. 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
- 257. 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
- 258. 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
- 259. Why Not Declarative Events?
• By default, all JavaScript code in anonymous
global function
• Limits scope of code
• Avoids polluting global namespace
• Button event handler (declarative) must exist in
global namespace
• So markup can access
• In anonymous function, it couldn't run
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 260. Why Not Declarative Events?
• By default, all JavaScript code in anonymous
global function
• Limits scope of code
• Avoids polluting global namespace
• Button event handler (declarative) must exist in
global namespace
• So markup can access
• In anonymous function, it couldn't run
• Could create specific namespace for it, of course
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 261. Why Not Declarative Events?
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 262. Why Not Declarative Events?
• Event information passed to handler in
declarative markup isn't as useful
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 263. Why Not Declarative Events?
• Event information passed to handler in
declarative markup isn't as useful
• When use addEventListener to hook up event
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 264. Why Not Declarative Events?
• Event information passed to handler in
declarative markup isn't as useful
• When use addEventListener to hook up event
• Event information parameter's target property returns
reference to the control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 265. Why Not Declarative Events?
• Event information passed to handler in
declarative markup isn't as useful
• When use addEventListener to hook up event
• Event information parameter's target property returns
reference to the control
• If you use declarative hookup, the target property returns
reference to the window
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 266. Solving Namespace Problem
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 267. 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
- 268. 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
- 269. Solving Namespace Problem
• If you still prefer to create event handlers in
markup
• Need to handle the namespace problem
• If placed in the anonymous function, won't run
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 270. Solving Namespace Problem
• If you still prefer to create event handlers in
markup
• Need to handle the namespace problem
• If placed in the anonymous function, won't run
• JavaScript can't "find" the handler
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 271. Solving Namespace Problem
• If you still prefer to create event handlers in
markup
• Need to handle the namespace problem
• If placed in the anonymous function, won't run
• JavaScript can't "find" the handler
• Solution: Create an explicit namespace
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 272. Solving Namespace Problem
• If you still prefer to create event handlers in
markup
• Need to handle the namespace problem
• If placed in the anonymous function, won't run
• JavaScript can't "find" the handler
• Solution: Create an explicit namespace
• Place handler in new namespace
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 273. Solving Namespace Problem
• If you still prefer to create event handlers in
markup
• Need to handle the namespace problem
• If placed in the anonymous function, won't run
• JavaScript can't "find" the handler
• Solution: Create an explicit namespace
• Place handler in new namespace
• Update markup to reference
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 274. DEMO 4
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 275. DEMO 4
• Add namespace and modify Click event
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 276. Working with WinJS Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 277. Working with WinJS Controls
• Windows Library for JavaScript (WinJS)
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 278. 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
- 279. 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
- 280. 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
- 281. 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
- 282. 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
- 283. 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
- 284. WinJS Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 285. WinJS Controls
• Large set of controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 286. 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
- 287. 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
- 288. 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
- 289. 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
- 290. AppBar Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 291. AppBar Control
• App toolbar that displays commands
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 292. AppBar Control
• App toolbar that displays commands
• Covers application content
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 293. 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
- 294. 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
- 295. 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
- 296. DatePicker Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 297. DatePicker Control
• Enables the user to select a date
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 298. DatePicker Control
• Enables the user to select a date
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 299. DatePicker Control
• Enables the user to select a date
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 300. FlipView Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 301. FlipView Control
• Displays a collection of items, one item at a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 302. FlipView Control
• Displays a collection of items, one item at a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 303. FlipView Control
• Displays a collection of items, one item at a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 304. FlipView Control
• Displays a collection of items, one item at a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 305. Flyout Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 306. Flyout Control
• Displays a message that requires user interaction
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 307. 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
- 308. 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
- 309. ListView Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 310. 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
- 311. 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
- 312. 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
- 313. Rating Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 314. Rating Control
• Enables the user to rate an item
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 315. Rating Control
• Enables the user to rate an item
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 316. SemanticZoom Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 317. 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
- 318. 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
- 319. 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
- 320. 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
- 321. 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
- 322. SettingsPane Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 323. SettingsPane Control
• Provides access to
app settings
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 324. SettingsPane Control
• Provides access to
app settings
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 325. TimePicker Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 326. TimePicker Control
• Enables the user to select a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 327. TimePicker Control
• Enables the user to select a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 328. TimePicker Control
• Enables the user to select a time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 329. Toggle Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 330. Toggle Control
• Represents an item that can be turned on or off
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 331. Toggle Control
• Represents an item that can be turned on or off
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 332. ToolTip Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 333. ToolTip Control
• Displays a tooltip that can support rich content
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
- 334. 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
- 335. 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
- 336. 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
- 337. 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
- 338. ViewBox Control
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company