Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli ...
-
Upload
jennifer-gregory -
Category
Documents
-
view
219 -
download
0
Transcript of Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli ...
![Page 1: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/1.jpg)
Win8 on Intel Programming CourseModern UI HelloWorld in HTML5/JS
Cédric Andreolliwww.Intel-Software-Academic-Program.com
[email protected] Software
2013-03-20
![Page 2: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/2.jpg)
Modern UI Coding
Technologies availableJavascript/HTML5C#/XAMLC++Visual Basic
![Page 3: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/3.jpg)
Modern UI Coding
What will be coveredJavascript/HTML5The course is based on Visual Studio 2012
LabA detailed lab is available in the ZIP file,with a doc file and sources.
![Page 4: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/4.jpg)
Visual Studio 2012
![Page 5: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/5.jpg)
Modern UI Hello World
VS 2012 New projectFile > New > ProjectSelect “Blank app” and enter an app name (“HelloWorld” ?)
![Page 6: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/6.jpg)
Modern UI Hello World
VS 2012 main window layout“Run” at the top, code at the center,solution explorer on the right
![Page 7: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/7.jpg)
Modern UI Hello World
VS 2012 solution = 1 or more projects
![Page 8: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/8.jpg)
Manifest
![Page 9: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/9.jpg)
Manifest
WhatThe manifest collect informationabout the applicationIt's a XML documentContainsThe application's nameThe application's logoOS supported versionsApplication startup page, …
![Page 10: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/10.jpg)
Manifest
![Page 11: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/11.jpg)
Manifest
![Page 12: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/12.jpg)
Manifest
What to rememberDefines the start page !Place to add new capabilities(webcam, microphone, etc)Information about your applications
![Page 13: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/13.jpg)
Resources
![Page 14: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/14.jpg)
Resources
Why resources ?It’s a very good practice is to avoid putting text strings directly into the code : use a resource file insteadYour app will be easy to maintain and translate
Here’s howCreate a directory named “strings” in your projectCreate a subfolder named “en-US”in the new “strings” folderCreate a new Resources filein the new “en-US” folder
![Page 15: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/15.jpg)
Resources
![Page 16: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/16.jpg)
Resources
![Page 17: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/17.jpg)
Resources
![Page 18: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/18.jpg)
Resources
![Page 19: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/19.jpg)
Start page
![Page 20: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/20.jpg)
Start page
A start page called « default.html »D
![Page 21: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/21.jpg)
Start page
The « default.html » fileHTML5 formatIt's a good practice to associate a HTML filewith a javascript file and a CSS fileThe default.html file is associatedwith js/default.js and css/default.css
![Page 22: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/22.jpg)
Start page
Anatomy of the « default.html » HTML5 file
![Page 23: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/23.jpg)
Start page
Vue and ControllerThe HTML5 is used to design the app window (Vue)It's possible to add texts, buttons, and a lot of other featuresEach element can be associated with handlers written in javascript (Controller)
![Page 24: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/24.jpg)
Start page
Let’s add some elements to the home pageA titleA text input and its associated labelA submit buttonA paragraph area to display some text
File to modifyResources file for user visible readable stringsStart page HTML5 file to add the elementsJavascript file to add the desired behavior
![Page 25: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/25.jpg)
Resources and HTML
Resources : strings/en-US/resources.resjon
HTML5 Start page : default.html
![Page 26: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/26.jpg)
Resources and HTML
StringsStrings are in the resources file, in JSON format, associated with keysKeysKeys are used in the HTML5 file instead of the stringsdata-win-resYou must use the data-win-res attribute in the HTML5, in the tag, or as a span markup
![Page 27: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/27.jpg)
Analysing the Javascript
JavascriptInsert the code for the behavior before “app.start();”
![Page 28: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/28.jpg)
Editing the Javascript
First load resources from Javascript
![Page 29: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/29.jpg)
Editing the Javascript
Then change the onactivated handler
![Page 30: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/30.jpg)
Editing the Javascript
setPromiseWill display the splash screen as long as necessaryWinJS.UI.processAll Will scan the associated HTML documentgetElementById(“send”)Will retrieve the send button in the UIaddEventListenerWill add a listener to the button
![Page 31: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/31.jpg)
Editing the Javascript
Add the handler before app.start()
![Page 32: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/32.jpg)
Launch HelloWorld
Click the Play button
![Page 33: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/33.jpg)
Next steps
![Page 34: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/34.jpg)
Next steps
HelloWorld detailed labWe propose you open the associated lab (doc file) and code HelloWorld yourself.
Plus/Minus appOn top of HelloWorld, you’ll find a slightly more complex example using the same technology, the Plus/Minus app.
![Page 35: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/35.jpg)
![Page 36: Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli paul.guermonprez@intel.com Intel.](https://reader038.fdocuments.us/reader038/viewer/2022110403/56649e735503460f94b7269a/html5/thumbnails/36.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/