Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli Intel Software

Application Style

Change the application style Windows 8 comes with a set of interesting designs It is very easy to change The HTML5/Javascript applications use CSS files

Change the application style Open 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.

Create your application style Remember, by default Visual Studio associates a HTML file with Javascript and CSS files If your HTML file is the default file, you should have : You can modify the style in “default.css”

Create your application style Modern UI offers an elegant UI but to help you, Microsoft would like you to : Use a 120 pixels left margin Use at least a 50 pixels bottom margin The content area must be 140 pixels from the top of the screen The bottom line of the title must be 100 pixels from the top of the screen More information us/library/windows/apps/hh aspX

Create your application style

Forms

Use VS autocomplete to list available types

Controlling Forms

Forms / Javascript Javascript control Some controls are not accessible in HTML5 They belong to the Windows Javascript Library WinjS.UI.ListView WinJS.UI.DatePicker WinJS.UI.FlipView Those elements must be included in a div

Forms / Javascript Javascript control example : DatePicker Here’s a WinJS.UI.DatePicker : Add a div in your HTML file, and a listener on the div :

Forms / Javascript Javascript control example : FlipView Very useful to display pictures

Forms / Javascript Javascript control example : FlipView

Forms / Javascript Javascript control example : FlipView First add the pictures to the image folder To add an existing item, right click on the image folder, select “Add” → “Existing item...” Then create an array like this :

Forms / Javascript Javascript control example : FlipView Then create a template like this in your html file :

Forms / Javascript Javascript control example : FlipView Then add the control in your html file :

Forms / Javascript Javascript control example : ListView Works just like FlipView Allows to display small tiles on the same page A full example is available in the lab

Blend

What is blend ? Blend is a visual editor that helps you create User Interfaces Quickly add content such as titles, images, etc You will still need to manipulate CSS sometimes

Blend

How to use blend ? You can drag and drop elements from the assets view to the art board view You still have access to HTML and CSS code

Navigation

More than just FlipView and ListView We saw how to display some components through FlipView and ListView But sometimes we need to display some completely new pages, with a new layout Let’s see how to create complex applications

Navigation Application.PageControlNavigator Allows you to define the page to display in your application You can dynamically change the page through Javascript You can use the AppBar ! Windows 8 maintains a navigation stack for you

Navigation Application.PageControlNavigator Create a new project with the Navigation Application template

Navigation Application.PageControlNavigator Open “home.html” and uncomment the app bar :

Navigation Application.PageControlNavigator What you need to understand is the following : On load, the page contains a PageControlNavigator Its attribute home is set to the home.html page The application will display the content of the home.html page The App bar will help us to navigate through the 2 views that we will use Just follow the same template if you need to add more pages

Navigation Application.PageControlNavigator We want to navigate between two pages, so lets create one more page Create a new folder as child of the folder “page” Name it “other” Create 3 files in this new folder : other.html other.css other.js

Navigation Application.PageControlNavigator Edit “other.html” :

Navigation Application.PageControlNavigator Edit “default.js” :

Navigation Application.PageControlNavigator Edit “default.js” to call “registerEvents()” :

Navigation Application.PageControlNavigator You can run your application now To make the app bar appear : Mouse : right click in a blank space Touch : swipe from top/bottom border to the screen The following pictures will show you a very similar application with some CSS changes

Navigation

Application.PageControlNavigator The 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 :

Animation

Animations Windows 8 provides a set of animations that you can apply on HTML elements : FadeIn/FadeOut Page transition Crossfade Reposition … You can find the list of available animations at : us/library/windows/apps/hh aspx

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

Animation An example animation : Lets focus on the Animation It returns a WinJS.Promise object that let you add some behavior when the animation is done

App Lifecycle

Lifecycle 3 states : Running : You are currently using the application Suspended : The application is still alive in the background but you are not using it Not running : You or the OS closed the application

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 down When the user quit the application, unsaved data are lost But windows 8 gives you a set of functionalities to avoid data loss Just remember that it is the developer's job

Lifecycle Test state changes in Visual Studio :

Data persistence State changes and data persistence : The application's data Data that you want to be remembered every time your application is used Application's settings, best scores, etc The session's data Data that you don't want to loose when the application is in pause (running in background) Current opened project, etc

Data persistence State changes and data persistence : The best way is to save your data when it changes : Best way to avoid forgetting some data When you exit the application, you have a limited time before the application is closed Add handlers on change events

Data persistence An app with handlers on data changes :

Data persistence An app with handlers on data changes :

Data persistence An app with handlers on data changes :

Data persistence An app with handlers on data changes :

Data persistence Retrieve stored data during the launch :

Data persistence State changes and data persistence : Now you can try it : Open your application Put some content in the input Close your application Re-open your application Your data should be saved and reloaded Session data : Just like stored data, but for a session only.

Views

Use Blend to simulate view changes :

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.

Views : Landscape

Views : Filled

Views : Snap

Views : Portrait

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.