Introduction to Windows 8 Development HTML5 Objectives Introduction to Windows 8 ...€¦ · ·...
Transcript of Introduction to Windows 8 Development HTML5 Objectives Introduction to Windows 8 ...€¦ · ·...
Introduction to Windows 8 Development HTML5 Objectives
www.netcomlearning.com
• Introduction to Windows 8 Operation System
• Windows 8 Platform
• Windows Store Apps Design Guidelines
• Developing a Windows Store App Using HTML5 and JavaScript
• The WinJS Library
• Q&A
• PART 1: Introduction to Windows 8 Platform
• PART 2: Metro Style App Principles
• PART 3: Developing Metro Style Apps with HTML5 and JavaScript
• PART 4: Integrating with Windows 8 Experiences
• PART 5: Implementing Tiles and Notifications
• PART 6: Deploying to the Windows Store
www.netcomlearning.com
Lesson 1: Introduction to Windows 8 Operating System
• Windows 8 Platform Investments
www.netcomlearning.com
Lesson 2: Windows 8 Platform
• Windows 8 Platform
• Metro Style App APIs
• WinRT Language Projections
www.netcomlearning.com
Metro Style App Principles
• Metro Style App Principles
• Fast and Fluid
• Snap and Scale Beautifully
• Contracts, Tiles, Notifications and Other Guidelines
www.netcomlearning.com
Module Overview
• Developing a Metro Style App Using HTML5 and JavaScript
• The WinJS Library
www.netcomlearning.com
Lesson 1: Developing a Metro Style App Using HTML5 and JavaScript
• Creating Metro Style Apps with HTML5 and JavaScript
www.netcomlearning.com
Lesson 2: The WinJS Library
• WinJS
• Everyday Controls
• How to Get Started with ListView
• ListView Data Templating
• AppBar
www.netcomlearning.com
ListView Data Templating
<div data-win-control="WinJS.Binding.Template" id="myTemplate" >
<div style="width: 110px; margin: 10px">
<img data-win-bind="src: picture" style="height: 60px;
width: 60px" />
<input type="button" data-win-bind="value: buttonText" />
</div>
</div>
<div height="400"
data-win-control="WinJS.UI.ListView" id="listview1"
data-win-options="{dataSource: myData, itemRenderer: myTemplate}">
</div>
www.netcomlearning.com
Module Overview
• Windows 8 Contracts
• Implementing the Search and Share Contracts
www.netcomlearning.com
Windows 8 Contracts
• 1+1=3. Leverage other apps to complete scenarios
• provide a consistent invocation model that users can always confidently rely on
• Start with the VS (available for Search, Share, File Picker extension)
www.netcomlearning.com
Lesson 4: Implementing the Search and Share Contracts
• Search Anatomy
• Search Settings & Events
• Sharing From Source to Target
• Adding Settings Flyout to Settings Charm
• Demonstration: Implementing Windows 8 Contracts
www.netcomlearning.com
Adding Settings Flyout to Settings Charm
function scenario2AddSettingsFlyout() {
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = { "helpDiv": {
title: "Help",
href: "/html/2-SettingsFlyout-Help.html" } };
WinJS.UI.SettingsFlyout.populateSettings(e);
};
}
www.netcomlearning.com
Module Overview
• Using App Tiles in Windows 8 Metro Style apps
• Using Notifications in Metro Style apps
www.netcomlearning.com
Lesson 5: Using App Tiles in Windows 8 Metro Style apps
• App Tiles
• Basic App Tiles
• Live App Tiles
• Secondary App Tiles
www.netcomlearning.com
Lesson 6: Using Notifications in Metro Style apps
• Toast Notifications
• Toast Templates
www.netcomlearning.com
Lesson 8: Monetizing Using the Windows Store
• Trial apps in Windows 8
• In-App Purchase
• Adding advertising to Windows 8 Apps
www.netcomlearning.com
In-App Purchase
var licenceInformation = Windows.ApplicationModel.Store.CurrentApp.LicenseInformation; // can’t do in-app purchase in trial mode, must convert first if (!licenceInformation.IsTrial) {//load the listings with all the products var listing = await Windows.ApplicationModel.Store.CurrentApp.LoadListingInformationAsync(); if (!licenceInformation.ProductLicenses["product1"].IsActive) { try { // The customer doesn't own this feature, so show the purchase dialog. await Windows.ApplicationModel.Store.CurrentApp. RequestProductPurchaseAsync("product1"); // the in-app purchase was successful } catch (Exception) {// The in-app purchase was not completed because the // customer canceled it or an error occurred.} } }
www.netcomlearning.com
Upcoming Webinars
• Free Webinar: Microsoft SQL Server 2012 - Managing Database Applications
• Free Webinar: Windows Server 2012 - Server Management
• Free Webinar: Intro. to System Center Configuration Manager 2012 (SCCM)
• Free Webinar: Introduction to Windows 8 Development - C#
• Free Webinar: CISSP | The 10 Essential Domains Revisited
• Free Webinar: Microsoft Dynamics GP | Excel, as a GP Report Writer
• Free Webinar: Microsoft Dynamics AX 2012 - The Complete ERP Solution
• Free Webinar: Lync Server 2013 Part 1 | Features and Functionality
• Free Webinar: Windows 8 Virtualization
• Free Webinar: Windows 8 Development - HTML5 with Live Demo
• Free Webinar: Lync Server 2013 Part 2 | Architecture and Deployment Changes
• Free Webinar: Lync Server 2013 Part 3 | Integration and Extensibility
Sign up for free at: www.netcomlearning.com/webinars
www.netcomlearning.com
NetCom’s Average Instructor Rating: 8.7/9
MCSD Windows Store Apps Using HTML5
www.netcomlearning.com
FSDFDSFDSFFSFSDFSDFDSFDFDFSFSFSFSDFSDFSDFSDFSDFSDFSDFSD
Ongoing Free Second Shot Promotion!
Windows 8 Development HTML5 Classes
MCSD: Windows Store Apps Using HTML5
• 20480: Programming in HTML5 with JavaScript and CSS3
• 20481: Essentials of Developing Windows Store Apps using HTML5 and JavaScript
• 20482: Advanced Windows Store Apps Development using HTML5 and JavaScript
Upcoming Classes: • December 10th in Arlington, VA & Live Online
• January 28th in New York, NY & Live Online
• March 18th in Arlington, VA & Live Online
Locations: Attend in-class or Live Online Instructor-led
• New York
• Las Vegas (All Inclusive Travel Package)
• Arlington VA
• Philadelphia, PA
www.netcomlearning.com