Creating a User Interface      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Tr...
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.learnnowonl...
The Goal• Investigate different ways of laying out Metro  style applications• Work with controls, including styling       ...
The Goal• Investigate different ways of laying out Metro  style applications• Work with controls, including styling• Try o...
The Goal• Investigate different ways of laying out Metro  style applications• Work with controls, including styling• Try o...
Investigating App Surfaces       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers...
Investigating App Surfaces• Metro style applications supply a number of  different surfaces onto which you can add user  i...
Investigating App Surfaces• Metro style applications supply a number of  different surfaces onto which you can add user  i...
Investigating App Surfaces• Metro style applications supply a number of  different surfaces onto which you can add user  i...
Investigating App Surfaces• Metro style applications supply a number of  different surfaces onto which you can add user  i...
Investigating App Surfaces• Metro style applications supply a number of  different surfaces onto which you can add user  i...
Investigating App Surfaces• Metro style applications supply a number of  different surfaces onto which you can add user  i...
App Window, or Canvas       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
App Window, or Canvas• Base of the UI           Learn More @ http://www.learnnowonline.com              Copyright © by App...
App Window, or Canvas• Base of the UI  • Holds content and controls           Learn More @ http://www.learnnowonline.com  ...
App Window, or Canvas• Base of the UI  • Holds content and controls  • If at all possible, integrate UI elements into canv...
App Window, or Canvas• Base of the UI  • Holds content and controls  • If at all possible, integrate UI elements into canv...
App Window, or Canvas• Base of the UI  • Holds content and controls  • If at all possible, integrate UI elements into canv...
App Window, or Canvas       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
App Window, or Canvas• Base of the UI           Learn More @ http://www.learnnowonline.com              Copyright © by App...
App Window, or Canvas• Base of the UI  • Holds content and controls           Learn More @ http://www.learnnowonline.com  ...
App Window, or Canvas• Base of the UI  • Holds content and controls  • If at all possible, integrate UI elements into canv...
App Window, or Canvas• Base of the UI  • Holds content and controls  • If at all possible, integrate UI elements into canv...
App Window, or Canvas• Base of the UI  • Holds content and controls  • If at all possible, integrate UI elements into canv...
App Bar          Learn More @ http://www.learnnowonline.com             Copyright © by Application Developers Training Com...
App Bar• Secondary to app window           Learn More @ http://www.learnnowonline.com              Copyright © by Applicat...
App Bar• Secondary to app window  • App Bar is primary command interface            Learn More @ http://www.learnnowonline...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus            Learn More @ http://...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar          Learn More @ http://www.learnnowonline.com             Copyright © by Application Developers Training Com...
App Bar• Secondary to app window           Learn More @ http://www.learnnowonline.com              Copyright © by Applicat...
App Bar• Secondary to app window  • App Bar is primary command interface            Learn More @ http://www.learnnowonline...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus            Learn More @ http://...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
App Bar• Secondary to app window  • App Bar is primary command interface  • Replaces menus• Present navigation, commands, ...
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.lear...
Charms Bar• Presents specific and consistent set of buttons,  the same in every app  • Search             Learn More @ htt...
Charms Bar• Presents specific and consistent set of buttons,  the same in every app  • Search  • Share             Learn M...
Charms Bar• Presents specific and consistent set of buttons,  the same in every app  • Search  • Share  • Connect         ...
Charms Bar• Presents specific and consistent set of buttons,  the same in every app  • Search  • Share  • Connect  • Setti...
Charms Bar• Presents specific and consistent set of buttons,  the same in every app  • Search  • Share  • Connect  • Setti...
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.learnnowonl...
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 ...
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.learnnowonl...
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 ...
Context Menus       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Com...
Context Menus• Also called popup menu           Learn More @ http://www.learnnowonline.com              Copyright © by App...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements            Learn More @ htt...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Com...
Context Menus• Also called popup menu           Learn More @ http://www.learnnowonline.com              Copyright © by App...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements            Learn More @ htt...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Context Menus• Also called popup menu• Shows actions users can perform on text or UI  elements• Can use up to five (and no...
Message Dialogs       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training C...
Message Dialogs• Modal dialogs that require explicit user  interaction           Learn More @ http://www.learnnowonline.co...
Message Dialogs• Modal dialogs that require explicit user  interaction• Dim the app window           Learn More @ http://w...
Message Dialogs• Modal dialogs that require explicit user  interaction• Dim the app window  • Demand response before conti...
Message Dialogs• Modal dialogs that require explicit user  interaction• Dim the app window  • Demand response before conti...
Message Dialogs       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training C...
Message Dialogs• Modal dialogs that require explicit user  interaction           Learn More @ http://www.learnnowonline.co...
Message Dialogs• Modal dialogs that require explicit user  interaction• Dim the app window           Learn More @ http://w...
Message Dialogs• Modal dialogs that require explicit user  interaction• Dim the app window  • Demand response before conti...
Message Dialogs• Modal dialogs that require explicit user  interaction• Dim the app window  • Demand response before conti...
Flyouts          Learn More @ http://www.learnnowonline.com             Copyright © by Application Developers Training Com...
Flyouts• Temporary, dismissable UI related to what the  user is doing           Learn More @ http://www.learnnowonline.com...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action           Learn More @ http://w...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details           ...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details• Only show...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details• Only show...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details• Only show...
Flyouts          Learn More @ http://www.learnnowonline.com             Copyright © by Application Developers Training Com...
Flyouts• Temporary, dismissable UI related to what the  user is doing           Learn More @ http://www.learnnowonline.com...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action           Learn More @ http://w...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details           ...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details• Only show...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details• Only show...
Flyouts• Temporary, dismissable UI related to what the  user is doing  • Confirm an action  • Show more details• Only show...
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.learnnowo...
Toasts• Notifications to indicate activity to user when  app is in background• Great for real-time update without requirin...
Toasts• Notifications to indicate activity to user when  app is in background• Great for real-time update without requirin...
Toasts• Notifications to indicate activity to user when  app is in background• Great for real-time update without requirin...
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.learnnowon...
Errors• Different kinds of errors require different kinds of  user interface• App developer chooses surface for error base...
Inline Error Text        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Traini...
Inline Error Text• App cannot fix the error, but user can           Learn More @ http://www.learnnowonline.com            ...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error       ...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error• Examp...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error• Examp...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error• Examp...
Inline Error Text        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Traini...
Inline Error Text• App cannot fix the error, but user can           Learn More @ http://www.learnnowonline.com            ...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error       ...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error• Examp...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error• Examp...
Inline Error Text• App cannot fix the error, but user can• Users can continue to interact without fixing the  error• Examp...
Error or Warning Bar       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Train...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings           Learn More @ http://w...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Train...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings           Learn More @ http://w...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Error or Warning Bar• Use error or warning bar to notify of important  errors and warnings  • Encourage user to take actio...
Message Dialogs       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training C...
Message Dialogs• Use only if modal message is required           Learn More @ http://www.learnnowonline.com              C...
Message Dialogs• Use only if modal message is required  • Blocks user from further action until resolved            Learn ...
Message Dialogs• Use only if modal message is required  • Blocks user from further action until resolved• Only use when ab...
Message Dialogs       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training C...
Message Dialogs• Use only if modal message is required           Learn More @ http://www.learnnowonline.com              C...
Message Dialogs• Use only if modal message is required  • Blocks user from further action until resolved            Learn ...
Message Dialogs• Use only if modal message is required  • Blocks user from further action until resolved• Only use when ab...
Defining Layouts and Views       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers...
Defining Layouts and Views• Your goal: Create apps that look good and work  well across a variety of           Learn More ...
Defining Layouts and Views• Your goal: Create apps that look good and work  well across a variety of  • Form factors      ...
Defining Layouts and Views• Your goal: Create apps that look good and work  well across a variety of  • Form factors  • Di...
Defining Layouts and Views• Your goal: Create apps that look good and work  well across a variety of  • Form factors  • Di...
Defining Layouts and Views• Your goal: Create apps that look good and work  well across a variety of  • Form factors  • Di...
Defining Layouts and Views• Your goal: Create apps that look good and work  well across a variety of  • Form factors  • Di...
CSS and User Interface       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Tra...
CSS and User Interface• Specifying the user interface of apps involves  two factors:           Learn More @ http://www.lea...
CSS and User Interface• Specifying the user interface of apps involves  two factors:  • Views that the app supports       ...
CSS and User Interface• Specifying the user interface of apps involves  two factors:  • Views that the app supports  • Lay...
CSS and User Interface• Specifying the user interface of apps involves  two factors:  • Views that the app supports  • Lay...
CSS: Cascading Style Sheets       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developer...
CSS: Cascading Style Sheets• Standards-based mechanism for separating  content from presentation          Learn More @ htt...
CSS: Cascading Style Sheets• Standards-based mechanism for separating  content from presentation  • CSS provides the prese...
CSS: Cascading Style Sheets• Standards-based mechanism for separating  content from presentation  • CSS provides the prese...
CSS: Cascading Style Sheets• Standards-based mechanism for separating  content from presentation  • CSS provides the prese...
CSS: Cascading Style Sheets• Standards-based mechanism for separating  content from presentation  • CSS provides the prese...
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.learnnowonl...
Views• View defines the way your app is accessed and  manipulated by a user:  • Landscape or portrait orientation         ...
Views• View defines the way your app is accessed and  manipulated by a user:  • Landscape or portrait orientation  • Full ...
Views• View defines the way your app is accessed and  manipulated by a user:  • Landscape or portrait orientation  • Full ...
Views• View defines the way your app is accessed and  manipulated by a user:  • Landscape or portrait orientation  • Full ...
Views• View defines the way your app is accessed and  manipulated by a user:  • Landscape or portrait orientation  • Full ...
Views• View defines the way your app is accessed and  manipulated by a user:  • Landscape or portrait orientation  • Full ...
Handling Views       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Handling Views• View describes the way users access and  manipulate content           Learn More @ http://www.learnnowonli...
Handling Views• View describes the way users access and  manipulate content• Can view app on devices of various sizes and ...
Handling Views• View describes the way users access and  manipulate content• Can view app on devices of various sizes and ...
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              C...
View States• Handle snapped, fill or full screen modes           Learn More @ http://www.learnnowonline.com              C...
Screen Orientation       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Screen Orientation• Need to handle both landscape and portrait  orientations           Learn More @ http://www.learnnowonl...
Screen Orientation• Need to handle both landscape and portrait  orientations           Learn More @ http://www.learnnowonl...
User Interaction Views       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Tra...
User Interaction Views• If at all possible, allow the user to interact with  data            Learn More @ http://www.learn...
User Interaction Views• If at all possible, allow the user to interact with  data   • Think about how to allow resizing, s...
User Interaction Views• If at all possible, allow the user to interact with  data   • Think about how to allow resizing, s...
User Interaction Views       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Tra...
User Interaction Views• If at all possible, allow the user to interact with  data            Learn More @ http://www.learn...
User Interaction Views• If at all possible, allow the user to interact with  data   • Think about how to allow resizing, s...
User Interaction Views• If at all possible, allow the user to interact with  data   • Think about how to allow resizing, s...
User Interaction Views• If at all possible, allow the user to interact with  data   • Think about how to allow resizing, s...
User Interaction Views• If at all possible, allow the user to interact with  data   • Think about how to allow resizing, s...
Layouts          Learn More @ http://www.learnnowonline.com             Copyright © by Application Developers Training Com...
Layouts• Mechanisms by which your app can  accommodate the views it supports          Learn More @ http://www.learnnowonli...
Layouts• Mechanisms by which your app can  accommodate the views it supports• Style, structure, and present app content us...
Layouts• Mechanisms by which your app can  accommodate the views it supports• Style, structure, and present app content us...
Layouts• Mechanisms by which your app can  accommodate the views it supports• Style, structure, and present app content us...
Layouts• Mechanisms by which your app can  accommodate the views it supports• Style, structure, and present app content us...
Layouts• Mechanisms by which your app can  accommodate the views it supports• Style, structure, and present app content us...
Using CSS for Multiple Layouts        Learn More @ http://www.learnnowonline.com           Copyright © by Application Deve...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings           ...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings  • Provide...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings  • Provide...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings  • Provide...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings  • Provide...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings  • Provide...
Using CSS for Multiple Layouts• CSS provides media features that allow you to  determine current media settings  • Provide...
Rules for Screen       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training ...
Rules for Screen• CSS for screen rules generally looks like this:            Learn More @ http://www.learnnowonline.com   ...
Rules for Screen• CSS for screen rules generally looks like this:   • @media screen and (feature) { rules }            Lea...
Rules for Screen• CSS for screen rules generally looks like this:   • @media screen and (feature) { rules }• Specific medi...
Rules for Screen• CSS for screen rules generally looks like this:   • @media screen and (feature) { rules }• Specific medi...
Rules for Screen• CSS for screen rules generally looks like this:   • @media screen and (feature) { rules }• Specific medi...
Rules for Screen• CSS for screen rules generally looks like this:   • @media screen and (feature) { rules }• Specific medi...
Using Media Features with Metro       Learn More @ http://www.learnnowonline.com          Copyright © by Application Devel...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps           Learn More ...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
Using Media Features with Metro• Microsoft supplies specific feature that supports  Metro style apps  • Determines current...
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 Applicat...
Working with Controls       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
Working with Controls• Two types of controls:           Learn More @ http://www.learnnowonline.com              Copyright ...
Working with Controls• Two types of controls:  • Standard HTML controls           Learn More @ http://www.learnnowonline.c...
Working with Controls• Two types of controls:  • Standard HTML controls  • WinJS controls           Learn More @ http://ww...
Working with Controls• Two types of controls:  • Standard HTML controls  • WinJS controls• Each is handled differently    ...
Working with Controls• Two types of controls:  • Standard HTML controls  • WinJS controls• Each is handled differently• An...
Working with Controls• Two types of controls:  • Standard HTML controls  • WinJS controls• Each is handled differently• An...
Working with HTML Controls       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers...
Working with HTML Controls• Can add HTML controls using markup, or using  JavaScript          Learn More @ http://www.lear...
Working with HTML Controls• Can add HTML controls using markup, or using  JavaScript  • Style sheets affect the look and f...
Working with HTML Controls• Can add HTML controls using markup, or using  JavaScript  • Style sheets affect the look and f...
Working with HTML Controls       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers...
Working with HTML Controls• HTML controls (tags):           Learn More @ http://www.learnnowonline.com              Copyri...
Working with HTML Controls• HTML controls (tags):  • a, audio, button (or input type="button"), canvas            Learn Mo...
Working with HTML Controls• HTML controls (tags):  • a, audio, button (or input type="button"), canvas  • input type="chec...
Working with HTML Controls• HTML controls (tags):  • a, audio, button (or input type="button"), canvas  • input type="chec...
Working with HTML Controls• HTML controls (tags):  • a, audio, button (or input type="button"), canvas  • input type="chec...
Working with HTML Controls• HTML controls (tags):  • a, audio, button (or input type="button"), canvas  • input type="chec...
Working with HTML Controls• HTML controls (tags):  • a, audio, button (or input type="button"), canvas  • input type="chec...
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 Applicati...
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.learnnowo...
Events• So far, nothing happens when you select item in  list, or click button• Each control provides events enabling you ...
Events• So far, nothing happens when you select item in  list, or click button• Each control provides events enabling you ...
Events• So far, nothing happens when you select item in  list, or click button• Each control provides events enabling you ...
Events• So far, nothing happens when you select item in  list, or click button• Each control provides events enabling you ...
Creating Event Handlers       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Tr...
Creating Event Handlers• Two ways to create event handlers:           Learn More @ http://www.learnnowonline.com          ...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively            Learn More @ http://www.learnnowon...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively     • Set controls event attribute with name ...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively     • Set controls event attribute with name ...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively     • Set controls event attribute with name ...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively     • Set controls event attribute with name ...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively     • Set controls event attribute with name ...
Creating Event Handlers• Two ways to create event handlers:  • Declaratively     • Set controls event attribute with name ...
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          ...
Why Not Declarative Events?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developer...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function           Learn More @ http://w...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function  • Limits scope of code        ...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function  • Limits scope of code  • Avoi...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function  • Limits scope of code  • Avoi...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function  • Limits scope of code  • Avoi...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function  • Limits scope of code  • Avoi...
Why Not Declarative Events?• By default, all JavaScript code in anonymous  global function  • Limits scope of code  • Avoi...
Why Not Declarative Events?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developer...
Why Not Declarative Events?• Event information passed to handler in  declarative markup isnt as useful           Learn Mor...
Why Not Declarative Events?• Event information passed to handler in  declarative markup isnt as useful  • When use addEven...
Why Not Declarative Events?• Event information passed to handler in  declarative markup isnt as useful  • When use addEven...
Why Not Declarative Events?• Event information passed to handler in  declarative markup isnt as useful  • When use addEven...
Solving Namespace Problem       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers ...
Solving Namespace Problem• If you still prefer to create event handlers in  markup            Learn More @ http://www.lear...
Solving Namespace Problem• If you still prefer to create event handlers in  markup   • Need to handle the namespace proble...
Solving Namespace Problem• If you still prefer to create event handlers in  markup   • Need to handle the namespace proble...
Solving Namespace Problem• If you still prefer to create event handlers in  markup   • Need to handle the namespace proble...
Solving Namespace Problem• If you still prefer to create event handlers in  markup   • Need to handle the namespace proble...
Solving Namespace Problem• If you still prefer to create event handlers in  markup   • Need to handle the namespace proble...
Solving Namespace Problem• If you still prefer to create event handlers in  markup   • Need to handle the namespace proble...
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 © b...
Working with WinJS Controls       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developer...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)           Learn More @ http://www.learnnowonline.com  ...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)  • Library of CSS and JavaScript files             Lea...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)  • Library of CSS and JavaScript files  • Contains Jav...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)  • Library of CSS and JavaScript files  • Contains Jav...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)  • Library of CSS and JavaScript files  • Contains Jav...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)  • Library of CSS and JavaScript files  • Contains Jav...
Working with WinJS Controls• Windows Library for JavaScript (WinJS)  • Library of CSS and JavaScript files  • Contains Jav...
WinJS Controls       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
WinJS Controls• Large set of controls           Learn More @ http://www.learnnowonline.com              Copyright © by App...
WinJS Controls• Large set of controls• Each abstracted as HTML (and CSS and  JavaScript)          Learn More @ http://www....
WinJS Controls• Large set of controls• Each abstracted as HTML (and CSS and  JavaScript)• Provide basis for Metro style ap...
WinJS Controls• Large set of controls• Each abstracted as HTML (and CSS and  JavaScript)• Provide basis for Metro style ap...
WinJS Controls• Large set of controls• Each abstracted as HTML (and CSS and  JavaScript)• Provide basis for Metro style ap...
AppBar Control       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
AppBar Control• App toolbar that displays commands          Learn More @ http://www.learnnowonline.com             Copyrig...
AppBar Control• App toolbar that displays commands• Covers application content          Learn More @ http://www.learnnowon...
AppBar Control• App toolbar that displays commands• Covers application content• Appear using edge swipe, Win+Z, or right-c...
AppBar Control• App toolbar that displays commands• Covers application content• Appear using edge swipe, Win+Z, or right-c...
AppBar Control• App toolbar that displays commands• Covers application content• Appear using edge swipe, Win+Z, or right-c...
DatePicker Control       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
DatePicker Control• Enables the user to select a date           Learn More @ http://www.learnnowonline.com              Co...
DatePicker Control• Enables the user to select a date           Learn More @ http://www.learnnowonline.com              Co...
DatePicker Control• Enables the user to select a date           Learn More @ http://www.learnnowonline.com              Co...
FlipView Control        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Trainin...
FlipView Control• Displays a collection of items, one item at a time           Learn More @ http://www.learnnowonline.com ...
FlipView Control• Displays a collection of items, one item at a time           Learn More @ http://www.learnnowonline.com ...
FlipView Control• Displays a collection of items, one item at a time           Learn More @ http://www.learnnowonline.com ...
FlipView Control• Displays a collection of items, one item at a time           Learn More @ http://www.learnnowonline.com ...
Flyout Control        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training ...
Flyout Control• Displays a message that requires user interaction           Learn More @ http://www.learnnowonline.com    ...
Flyout Control• Displays a message that requires user interaction  • Unlike a dialog box, a Flyout does not create a    se...
Flyout Control• Displays a message that requires user interaction  • Unlike a dialog box, a Flyout does not create a    se...
ListView Control        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Trainin...
ListView Control• Displays a collection of items in a grid or list  layout            Learn More @ http://www.learnnowonli...
ListView Control• Displays a collection of items in a grid or list  layout            Learn More @ http://www.learnnowonli...
ListView Control• Displays a collection of items in a grid or list  layout            Learn More @ http://www.learnnowonli...
Rating Control       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Rating Control• Enables the user to rate an item           Learn More @ http://www.learnnowonline.com              Copyrig...
Rating Control• Enables the user to rate an item           Learn More @ http://www.learnnowonline.com              Copyrig...
SemanticZoom Control       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Train...
SemanticZoom Control• Provides a way to manage and present two  semantic views (abstractions)          Learn More @ http:/...
SemanticZoom Control• Provides a way to manage and present two  semantic views (abstractions)• Single set of hierarchical ...
SemanticZoom Control• Provides a way to manage and present two  semantic views (abstractions)• Single set of hierarchical ...
SemanticZoom Control• Provides a way to manage and present two  semantic views (abstractions)• Single set of hierarchical ...
SemanticZoom Control• Provides a way to manage and present two  semantic views (abstractions)• Single set of hierarchical ...
SettingsPane Control       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Train...
SettingsPane Control• Provides access to  app settings           Learn More @ http://www.learnnowonline.com              C...
SettingsPane Control• Provides access to  app settings           Learn More @ http://www.learnnowonline.com              C...
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Creating a User Interface
Upcoming SlideShare
Loading in...5
×

Creating a User Interface

736

Published on

Investigate different ways of laying out Metro style applications.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
736
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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

    1. 1. Creating a User Interface Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    2. 2. The Goal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    3. 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. 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. 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. 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
    7. 7. Investigating App Surfaces Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    8. 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. 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. 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. 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. 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. 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. 14. App Window, or Canvas Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    15. 15. App Window, or Canvas• Base of the UI Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    16. 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. 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. 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. 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. 20. App Window, or Canvas Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    21. 21. App Window, or Canvas• Base of the UI Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    22. 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. 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. 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. 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. 26. App Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    27. 27. App Bar• Secondary to app window Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    28. 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. 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. 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. 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. 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. 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. 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. 35. App Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    36. 36. App Bar• Secondary to app window Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    37. 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. 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. 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. 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. 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. 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. 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. 44. Charms Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    45. 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. 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. 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. 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. 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. 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. 51. Charms Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    52. 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. 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. 54. Charms Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    55. 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. 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. 57. Context Menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    58. 58. Context Menus• Also called popup menu Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    59. 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. 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. 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. 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. 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. 64. Context Menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    65. 65. Context Menus• Also called popup menu Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    66. 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. 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. 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. 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. 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. 71. Message Dialogs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    72. 72. Message Dialogs• Modal dialogs that require explicit user interaction Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    73. 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. 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. 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. 76. Message Dialogs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    77. 77. Message Dialogs• Modal dialogs that require explicit user interaction Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    78. 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. 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. 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. 81. Flyouts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    82. 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. 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. 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. 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. 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. 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. 88. Flyouts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    89. 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. 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. 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. 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. 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. 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. 95. Toasts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    96. 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. 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. 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. 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. 100. Errors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    101. 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. 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. 103. Inline Error Text Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    104. 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. 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. 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. 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. 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. 109. Inline Error Text Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    110. 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. 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. 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. 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. 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. 115. Error or Warning Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    116. 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. 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. 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. 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. 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. 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. 122. Error or Warning Bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    123. 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. 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. 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. 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. 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. 128. Message Dialogs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    129. 129. Message Dialogs• Use only if modal message is required Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    130. 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. 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. 132. Message Dialogs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    133. 133. Message Dialogs• Use only if modal message is required Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    134. 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. 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. 136. Defining Layouts and Views Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    137. 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. 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. 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. 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. 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. 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. 143. CSS and User Interface Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    144. 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. 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. 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. 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. 148. CSS: Cascading Style Sheets Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    149. 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. 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. 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. 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. 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. 154. Views Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    155. 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. 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. 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. 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. 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. 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. 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. 162. Handling Views Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    163. 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. 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. 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. 166. View States Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    167. 167. View States• Handle snapped, fill or full screen modes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    168. 168. View States• Handle snapped, fill or full screen modes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    169. 169. Screen Orientation Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    170. 170. Screen Orientation• Need to handle both landscape and portrait orientations Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    171. 171. Screen Orientation• Need to handle both landscape and portrait orientations Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    172. 172. User Interaction Views Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    173. 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. 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. 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. 176. User Interaction Views Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    177. 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. 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. 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. 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. 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. 182. Layouts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    183. 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. 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. 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. 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. 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. 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. 189. Using CSS for Multiple Layouts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    190. 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. 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. 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. 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. 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. 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. 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. 197. Rules for Screen Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    198. 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. 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. 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. 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. 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. 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. 204. Using Media Features with Metro Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    205. 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. 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. 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. 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. 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. 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. 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. 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. 213. DEMO 1 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    214. 214. DEMO 1• CSS for multiple layouts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    215. 215. Working with Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    216. 216. Working with Controls• Two types of controls: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    217. 217. Working with Controls• Two types of controls: • Standard HTML controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    218. 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. 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. 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. 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. 222. Working with HTML Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    223. 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. 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. 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. 226. Working with HTML Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    227. 227. Working with HTML Controls• HTML controls (tags): Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    228. 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. 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. 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. 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. 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. 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. 234. DEMO 2 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    235. 235. DEMO 2• Add HTML controls to page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    236. 236. Events Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    237. 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. 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. 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. 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. 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. 242. Creating Event Handlers Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    243. 243. Creating Event Handlers• Two ways to create event handlers: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    244. 244. Creating Event Handlers• Two ways to create event handlers: • Declaratively Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    245. 245. 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
    246. 246. 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
    247. 247. 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
    248. 248. 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
    249. 249. 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
    250. 250. 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
    251. 251. DEMO 3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    252. 252. DEMO 3• Add event handlers for onclick and onchange events Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    253. 253. Why Not Declarative Events? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    254. 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. 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. 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. 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. 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. 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 couldnt run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    260. 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 couldnt run • Could create specific namespace for it, of course Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    261. 261. Why Not Declarative Events? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    262. 262. 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
    263. 263. 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
    264. 264. 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
    265. 265. 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
    266. 266. Solving Namespace Problem Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    267. 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. 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. 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, wont run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    270. 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, wont run • JavaScript cant "find" the handler Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    271. 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, wont run • JavaScript cant "find" the handler• Solution: Create an explicit namespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    272. 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, 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
    273. 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, 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
    274. 274. DEMO 4 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    275. 275. DEMO 4• Add namespace and modify Click event Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    276. 276. Working with WinJS Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    277. 277. Working with WinJS Controls• Windows Library for JavaScript (WinJS) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    278. 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. 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. 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. 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. 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. 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. 284. WinJS Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    285. 285. WinJS Controls• Large set of controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    286. 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. 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. 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. 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. 290. AppBar Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    291. 291. AppBar Control• App toolbar that displays commands Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    292. 292. AppBar Control• App toolbar that displays commands• Covers application content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    293. 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. 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. 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. 296. DatePicker Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    297. 297. DatePicker Control• Enables the user to select a date Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    298. 298. DatePicker Control• Enables the user to select a date Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    299. 299. DatePicker Control• Enables the user to select a date Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    300. 300. FlipView Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    301. 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. 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. 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. 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. 305. Flyout Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    306. 306. Flyout Control• Displays a message that requires user interaction Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    307. 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. 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. 309. ListView Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    310. 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. 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. 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. 313. Rating Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    314. 314. Rating Control• Enables the user to rate an item Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    315. 315. Rating Control• Enables the user to rate an item Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    316. 316. SemanticZoom Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    317. 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. 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. 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. 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. 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. 322. SettingsPane Control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    323. 323. SettingsPane Control• Provides access to app settings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    324. 324. SettingsPane Control• Provides access to app settings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

    ×