Win8 on Intel Programming Course
Modern UI : Features
Cédric Andreolli
www.Intel-Software-Academic-Program.com
paul.guermonprez@intel.com
Intel Software
2013-03-20
Application Style
Change the 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
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
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
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
http://msdn.microsoft.com/enus/library/windows/apps/hh872191.aspX
Create your application style
Forms
Forms
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
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
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
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
Navigation
Navigation
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
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 :
http://msdn.microsoft.com/enus/library/windows/apps/hh465165.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
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.
http://creativecommons.org/licenses/by/3.0/