Win8 on Intel Programming Course
Modern UI HelloWorld in HTML5/JS
Cédric Andreolli
www.Intel-Software-Academic-Program.com
paul.guermonprez@intel.com
Intel Software
2013-03-20
Modern UI Coding
Technologies available
Javascript/HTML5
C#/XAML
C++
Visual Basic
Modern UI Coding
What will be covered
Javascript/HTML5
The course is based on Visual Studio 2012
Lab
A detailed lab is available in the ZIP file,
with a doc file and sources.
Visual Studio 2012
Modern UI Hello World
VS 2012 New project
File > New > Project
Select “Blank app” and enter an app name (“HelloWorld” ?)
Modern UI Hello World
VS 2012 main window layout
“Run” at the top, code at the center,
solution explorer on the right
Modern UI Hello World
VS 2012 solution = 1 or more projects
Manifest
Manifest
What
The manifest collect information
about the application
It's a XML document
Contains
The application's name
The application's logo
OS supported versions
Application startup page, …
Manifest
Manifest
Manifest
What to remember
Defines the start page !
Place to add new capabilities
(webcam, microphone, etc)
Information about your applications
Resources
Resources
Why resources ?
It’s a very good practice is to avoid putting text strings
directly into the code : use a resource file instead
Your app will be easy to maintain and translate
Here’s how
Create a directory named “strings” in your project
Create a subfolder named “en-US”
in the new “strings” folder
Create a new Resources file
in the new “en-US” folder
Resources
Resources
Resources
Resources
Start page
Start page
A start page called « default.html »
D
Start page
The « default.html » file
HTML5 format
It's a good practice to associate a HTML file
with a javascript file and a CSS file
The default.html file is associated
with js/default.js and css/default.css
Start page
Anatomy of the « default.html » HTML5 file
Start page
Vue and Controller
The HTML5 is used to design the app window
(Vue)
It's possible to add texts, buttons, and a lot of
other features
Each element can be associated with handlers
written in javascript (Controller)
Start page
Let’s add some elements to the home page
A title
A text input and its associated label
A submit button
A paragraph area to display some text
File to modify
Resources file for user visible readable strings
Start page HTML5 file to add the elements
Javascript file to add the desired behavior
Resources and HTML
Resources : strings/en-US/resources.resjon
HTML5 Start page : default.html
Resources and HTML
Strings
Strings are in the resources file, in JSON format,
associated with keys
Keys
Keys are used in the HTML5 file instead of the
strings
data-win-res
You must use the data-win-res attribute in the
HTML5, in the tag, or as a span markup
Analysing the Javascript
Javascript
Insert the code for the behavior before
“app.start();”
Editing the Javascript
First load resources from Javascript
Editing the Javascript
Then change the onactivated handler
Editing the Javascript
setPromise
Will display the splash screen as long as necessary
WinJS.UI.processAll
Will scan the associated HTML document
getElementById(“send”)
Will retrieve the send button in the UI
addEventListener
Will add a listener to the button
Editing the Javascript
Add the handler before app.start()
Launch HelloWorld
Click the Play button
Next steps
Next steps
HelloWorld detailed lab
We propose you open the associated lab (doc file)
and code HelloWorld yourself.
Plus/Minus app
On top of HelloWorld, you’ll find a slightly more
complex example using the same technology, the
Plus/Minus app.
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/