win8 on intel programming course modern ui : features cédric andreolli [email protected]...
TRANSCRIPT
![Page 1: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/1.jpg)
Win8 on Intel Programming CourseModern UI : Features
Cédric Andreolliwww.Intel-Software-Academic-Program.com
[email protected] Software
2013-03-20
![Page 2: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/2.jpg)
Application Style
![Page 3: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/3.jpg)
Change the application style
Change the application styleWindows 8 comes with a set of interesting designsIt is very easy to changeThe HTML5/Javascript applications use CSS files
![Page 4: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/4.jpg)
Change the application style
Change the application styleOpen the References in the Solution Explorer
The WinJS library provides 2 styles.You can point to the ui-light css instead of the ui-dark css.
![Page 5: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/5.jpg)
Create your application style
Create your application styleRemember, by default Visual Studio associates a HTML file with Javascript and CSS filesIf your HTML file is the default file, you should have :
You can modify the style in “default.css”
![Page 6: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/6.jpg)
Create your application style
Create your application styleModern UI offers an elegant UI but to help you,Microsoft would like you to :
Use a 120 pixels left marginUse at least a 50 pixels bottom marginThe content area must be 140 pixelsfrom the top of the screenThe bottom line of the titlemust be 100 pixels from the top of the screen
More informationhttp://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspX
![Page 7: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/7.jpg)
Create your application style
![Page 8: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/8.jpg)
Forms
![Page 9: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/9.jpg)
Forms
![Page 10: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/10.jpg)
Forms
Use VS autocomplete to list available types
![Page 11: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/11.jpg)
Controlling Forms
![Page 12: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/12.jpg)
Forms / Javascript
Javascript controlSome controls are not accessible in HTML5They belong to the Windows Javascript Library
WinjS.UI.ListViewWinJS.UI.DatePickerWinJS.UI.FlipView
Those elements must be included in a div
![Page 13: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/13.jpg)
Forms / Javascript
Javascript control example : DatePickerHere’s aWinJS.UI.DatePicker :
Add a div in your HTML file, and a listener on the div :
![Page 14: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/14.jpg)
Forms / Javascript
Javascript control example : FlipViewVery useful to display pictures
![Page 15: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/15.jpg)
Forms / Javascript
Javascript control example : FlipView
![Page 16: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/16.jpg)
Forms / Javascript
Javascript control example : FlipViewFirst add the pictures to the image folderTo add an existing item, right click on the image folder, select “Add” → “Existing item...”Then create an array like this :
![Page 17: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/17.jpg)
Forms / Javascript
Javascript control example : FlipViewThen create a template like this in your html file :
![Page 18: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/18.jpg)
Forms / Javascript
Javascript control example : FlipViewThen add the control in your html file :
![Page 19: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/19.jpg)
Forms / Javascript
Javascript control example : ListViewWorks just like FlipViewAllows to display small tiles on the same pageA full example is available in the lab
![Page 20: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/20.jpg)
Blend
![Page 21: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/21.jpg)
Blend
What is blend ?Blend is a visual editor that helps you create User InterfacesQuickly add content such as titles, images, etcYou will still need to manipulate CSS sometimes
![Page 22: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/22.jpg)
Blend
![Page 23: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/23.jpg)
Blend
How to use blend ?You can drag and drop elements from the assets view to the art board viewYou still have access to HTML and CSS code
![Page 24: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/24.jpg)
Navigation
![Page 25: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/25.jpg)
Navigation
More than just FlipView and ListViewWe saw how to display some components through FlipView and ListViewBut sometimes we need to display some completely new pages, with a new layoutLet’s see how to create complex applications
![Page 26: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/26.jpg)
Navigation
Application.PageControlNavigatorAllows you to define the page to display in your applicationYou can dynamically change the page through JavascriptYou can use the AppBar !Windows 8 maintains a navigation stack for you
![Page 27: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/27.jpg)
Navigation
Application.PageControlNavigatorCreate a new project with theNavigation Application template
![Page 28: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/28.jpg)
Navigation
Application.PageControlNavigatorOpen “home.html” and uncomment the app bar :
![Page 29: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/29.jpg)
Navigation
Application.PageControlNavigatorWhat you need to understand is the following :
On load, the page contains a PageControlNavigator
Its attribute home is set to the home.html pageThe application will display the contentof the home.html page
The App bar will help us to navigate throughthe 2 views that we will useJust follow the same templateif you need to add more pages
![Page 30: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/30.jpg)
Navigation
Application.PageControlNavigatorWe want to navigate between two pages,so lets create one more pageCreate a new folder as child of the folder “page”Name it “other”Create 3 files inthis new folder :
other.htmlother.cssother.js
![Page 31: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/31.jpg)
Navigation
Application.PageControlNavigatorEdit “other.html” :
![Page 32: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/32.jpg)
Navigation
Application.PageControlNavigatorEdit “default.js” :
![Page 33: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/33.jpg)
Navigation
Application.PageControlNavigatorEdit “default.js” to call “registerEvents()” :
![Page 34: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/34.jpg)
Navigation
Application.PageControlNavigatorYou can run your application nowTo make the app bar appear :
Mouse : right click in a blank spaceTouch : swipe from top/bottom border to the
screenThe following pictures will show youa very similar application with some CSS changes
![Page 35: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/35.jpg)
Navigation
![Page 36: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/36.jpg)
Navigation
![Page 37: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/37.jpg)
Navigation
![Page 38: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/38.jpg)
Navigation
Application.PageControlNavigatorThe lab contains a full example using PageControlNavigator
Note : you don't have to display the back button if you don't want to. Just remove the line in your HTML file :
![Page 39: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/39.jpg)
Animation
![Page 40: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/40.jpg)
Animation
AnimationsWindows 8 provides a set of animationsthat you can apply on HTML elements :
FadeIn/FadeOutPage transitionCrossfadeReposition…
You can find the list of available animations at : http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx
![Page 41: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/41.jpg)
Animation
An example animation :Change the handler of the previous example (PageControlNavigator)The next example creates a fade out effect followed by a fade in effect when you try to go on the home page
![Page 42: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/42.jpg)
Animation
An example animation :Lets focus on the AnimationIt returns a WinJS.Promise object that let you add some behavior when the animation is done
![Page 43: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/43.jpg)
App Lifecycle
![Page 44: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/44.jpg)
Lifecycle
3 states :Running : You are currently using the applicationSuspended : The application is still alive in the background but you are not using itNot running : You or the OS closed the application
![Page 45: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/45.jpg)
Lifecycle
State changes and data persistence :It's the developer's job to handle persistence
When you are not using your application,the OS can decide to shut it downWhen the user quit the application,unsaved data are lost
But windows 8 gives you a set of functionalitiesto avoid data lossJust remember that it is the developer's job
![Page 46: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/46.jpg)
Lifecycle
Test state changes in Visual Studio :
![Page 47: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/47.jpg)
Data persistence
State changes and data persistence :The application's data
Data that you want to be rememberedevery time your application is usedApplication's settings, best scores, etc
The session's dataData that you don't want to loose when theapplication is in pause (running in
background)Current opened project, etc
![Page 48: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/48.jpg)
Data persistence
State changes and data persistence :The best way is to save your data when it changes :
Best way to avoid forgetting some dataWhen you exit the application, you have a
limitedtime before the application is closed
Add handlers on change events
![Page 49: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/49.jpg)
Data persistence
An app with handlers on data changes :
![Page 50: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/50.jpg)
Data persistence
An app with handlers on data changes :
![Page 51: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/51.jpg)
Data persistence
An app with handlers on data changes :
![Page 52: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/52.jpg)
Data persistence
An app with handlers on data changes :
![Page 53: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/53.jpg)
Data persistence
Retrieve stored data during the launch :
![Page 54: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/54.jpg)
Data persistence
State changes and data persistence :Now you can try it :
Open your applicationPut some content in the inputClose your applicationRe-open your application
Your data should be saved and reloaded
Session data :Just like stored data, but for a session only.
![Page 55: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/55.jpg)
Views
![Page 56: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/56.jpg)
Views
Use Blend to simulate view changes :
![Page 57: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/57.jpg)
Views
Edit your CSS :Supporting the different views provides a better user experience. Keep in mind that you have to support all the views to fill the Microsoft store expectations.
![Page 58: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/58.jpg)
Views : Landscape
![Page 59: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/59.jpg)
Views : Filled
![Page 60: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/60.jpg)
Views : Snap
![Page 61: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/61.jpg)
Views : Portrait
![Page 62: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/62.jpg)
![Page 63: Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli paul.guermonprez@intel.com Intel Software](https://reader030.vdocuments.mx/reader030/viewer/2022032802/56649e0c5503460f94af4dc0/html5/thumbnails/63.jpg)
License Creative Commons – By 3.0
You are free:• to Share — to copy, distribute and transmit the work • to Remix — to adapt the work • to make commercial use of the work Under the following conditions:• Attribution — You must attribute the work in the manner specified by the author or licensor (but
not in any way that suggests that they endorse you or your use of the work).With the understanding that: • Waiver — Any of the above conditions can be waived if you get permission from the copyright
holder. • Public Domain — Where the work or any of its elements is in the public domain under applicable
law, that status is in no way affected by the license. • Other Rights — In no way are any of the following rights affected by the license:
– Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations; – The author's moral rights; – Rights other persons may have either in the work itself or in how the work is used, such as publicity or
privacy rights. • Notice — For any reuse or distribution, you must make clear to others the license terms of this
work. The best way to do this is with a link to this web page.
http://creativecommons.org/licenses/by/3.0/