Windows8 metro presentationupdated

Windows 8 App Development for web Developer

Dhananjay Kumar Customer

Advocate Telerik

Debug_mode

http://debugmode.net

Web Developer ?

HTML CSS

JavaScript jQuery

http://debugmode.net

Web Developer == Win8 Developer ?

HTML CSS

JavaScript jQueryWinJS

Windows 8 Development

http://debugmode.net

Demo : Migrating Web App to Windows 8 App

http://debugmode.net

Web Development paradigm

Migrating CSS based Web App to Windows 8 App

Packaging the App

Evaluating Different Development options

WinJS Controls Demo

Create “Netflix Movie Explorer“ App for Windows Store

Agenda

http://debugmode.net

What is WINDOWS 8 ?

Win7 WinRT Win8

http://debugmode.net

Metro /WinRT App

WPF/Windows Application

.Net Framework/Win

32

App for Windows Store

WinRT/AppContainer

Web Application

Browser

http://debugmode.net

WinRT

http://debugmode.net

Metro App runs from Disc

App Container

http://debugmode.net

In desktop app you create MSI , Exe etc. and run to install application

In Metro App you create package and submit to Windows store

Along with other files ,package contains batch executable file that runs series of commands to install metro app on your device.

Metro app runs with less privilege than desktop app

Metro App Vs. Desktop App

http://debugmode.net

Blank Application C#,JavaScriptGrid Application C#,JavaScriptSplit Application C#,JavaScriptFixed Layout Application JavaScriptNavigation Application JavaScript

VS2012 and Metro AppsProject templates

Deployment

Local machine Remote machine Simulator

HTML+JavaScriptC# + XAMLC++ + XAML

Development options

What to choose?

http://debugmode.net

Create “Hello Word App “ for Windows Store

Package

Deploy

Understand running app in process explorer

Demo

What is WinJS ?Collection of JavaScript files helps us to create Metro Style Applications for Windows 8

HTML Eleme

nts CSS JavaSc

ript WinJS

http://debugmode.net

It helps to create controls and animation adhering to metro style guidelines

It helps in data binding and to create template of data It helps to fragment and navigate between pages of the application

It helps to make asynchronous call to services

It helps to write app against the app model

Why WinJS ?

http://debugmode.net

WinJS Controls

http://debugmode.net

Date Picker Control

Message Box Control

Rating Control

Adding Controls in Expression Blend

Adding Controls Programmatically

WinJS Controls Demo

http://debugmode.net

What we are going to create

http://debugmode.net

Working with ListView

Creating Data Source, Groped Data Source

Creating Item template, Header Template

Sematic Zoom on List View

Designing CSS of ListView

What will be learning ?

ListView and DataBinding

http://debugmode.net

http://debugmode.net

Grouping Data

http://debugmode.net

Share Contract

http://debugmode.net

Calling Service

On Complete WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));});

On Error

WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));}, function (ex) { reportXhrError(ex);});

http://debugmode.net

In WinJS Everything is Async

dhananjay.kumar@telerik.com

Thanks Dhananjay Kumar http://debugmode.net

@Debug_mode