Download presentation
Presentation is loading. Please wait.
Published byJennifer Gregory Modified over 9 years ago
1
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
2
Modern UI Coding Technologies available Javascript/HTML5 C#/XAML C++ Visual Basic
3
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.
4
Visual Studio 2012
5
Modern UI Hello World VS 2012 New project File > New > Project Select “Blank app” and enter an app name (“HelloWorld” ?)
6
Modern UI Hello World VS 2012 main window layout “Run” at the top, code at the center, solution explorer on the right
7
Modern UI Hello World VS 2012 solution = 1 or more projects
8
Manifest
9
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, …
10
Manifest
12
What to remember Defines the start page ! Place to add new capabilities (webcam, microphone, etc) Information about your applications
13
Resources
14
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
15
Resources
19
Start page
20
A start page called « default.html » D
21
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
22
Start page Anatomy of the « default.html » HTML5 file
23
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)
24
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
25
Resources and HTML Resources : strings/en-US/resources.resjon HTML5 Start page : default.html
26
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
27
Analysing the Javascript Javascript Insert the code for the behavior before “app.start();”
28
Editing the Javascript First load resources from Javascript
29
Editing the Javascript Then change the onactivated handler
30
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
31
Editing the Javascript Add the handler before app.start()
32
Launch HelloWorld Click the Play button
33
Next steps
34
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.
36
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/
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.