Developer Day

Designing Windows Store Apps with Expression Blend

Christian MoserDeveloper and Designer, Zühlkemoc@zuehlke.com

Languages for Windows Store Apps

C++C# / VB

XAML XAML

Why using JavaScript to develop Apps?

JavaScript

HTML / CSS

Reasons to support JavaScript

To enable a huge community of non-professional developers to write apps

HTML, CSS and JavaScript are proven web-technologies

They support a rich feature set and there are tons of frameworks and libraries available

HTML CSS JavaScript

HTML5-Audio

HTML5-Video

Grid-Layout

Flex-Box

Canvas

Semantic-Tags

Controls

Validation

Watermark

Class-Selectors

Animations

Transitions

Easing

Media-Queries

Gradients

Shadows

IndexDB

Async-Support

Caching

Web-Sockets

Multitouch

Regular-Expressions

DataContext

Drag&Drop

Internet Explorer 10

Windows Store Apps are just 100% W3C-valid web-applications

+ WinRT functions

WinJS-Library Modern UI CSS-Template

Web Pages vs. Apps

Web-Page Windows Store App

Web Pages vs. Apps

Web-Page Web-App Windows Store App

Dynamic Content

No. of Pages

Problem: Most design tools cannot display dynamic content

Expression Webonly shows black

Browser debugging tools can…

…but are not linked to the source code…are not available for Windows Store apps

Let’s combine the ideasTake Expression Blend

Take the dynamic DOM inspector from IEAdd an HTML-

Editor

Expression Blend for Windows Store Apps

A new HTML/CSS Editor

Execute JavaScript at designtime

Switch between design and interactive mode

Simulate modes, orientations and resolutions

Show CSS inheritance

Seamless integration with Visual Studio 2012

Let’s build an appJavaScript Sample Project «SoundBoxx»

1. Designer creates wireframes

Selectsample bank Plays

sample on touch

2. Developer implements functionality

.sample.playing

#sample-bank

Notes of the developer for the designer

#bank-selector

.empty

Choose a base theme

Light theme for apps with a lot of text

Dark theme for apps with a lot of media

<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-light.css"/>

<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-dark.css"/>

Content of the CSS theme

Base elements html, body, iframe ,…

Text styles h1, h2, h3, p ,…

HTML-Controls button, checkbox, radio, slider ,…

WinJS-Controls rating, toggle, progress ,…

Let’s build it…

Styling WinJS-Controls

input[type=text]:hover::-ms-clear { background: red;}

Control State Part

List of WinJS Controls and PartsControl Parts

input [type = checkbox] -ms-check

input [type = radio] -ms-check

input [type = range] -ms-fill-lower, -ms-track, -ms-fill-upper, -ms-thumb, -ms-ticks-after, -ms-ticks-before, -ms-ticks-on-track

input [type = email], input [type = search], input [type = tel], input [type = url]

-ms-value, -ms-clear

input [type = password] -ms-value, -ms-reveal

progress -ms-fill

select -ms-value, -ms-expand

Respond to orientation or state changes@media screen and (-ms-view-state: full-screen)

{}

@media screen and (-ms-view-state: fill) { }

@media screen and (-ms-view-state: snapped){ #detailed-list { display:none; } #simle-list { display: block; }}

@media screen and (-ms-view-state: device-portrait) { }

Full-screen

Fill

Sn

ap

pe

d

Portrait

Animations in Windows Store Apps

CSS3 Animations

.sample { animation: highlight 2s linear infinite alternate;}

@keyframes highlight { 0% {background: red; left:0px; top:0px;} 50% {background: blue; left:5px; top:-5px;} 100% {background: green; left:0px; top:0px;} }

Animations in Windows Store Apps

fadeIn()

fadeOut()

enterContent()

exitContent()CSS3 Animations

<script src="/Microsoft.WinJS.0.6/js/base.js"></script><script src="/Microsoft.WinJS.0.6/js/ui.js"></script>

WinJS.UI.Animation.fadeIn(element);

enterPage()

exitPage()

pointerDown()

pointerUp()

reveal()

swipeSelect()

swipeDeselect()

showEdgeUI()

WinJS.Animation(JavaScript)

Let’s build it…

Summary

…about JavaScript-Apps JavaScript Apps are just normal, valid HTML5 applications

that run in Internet Explorer 10.

Because JavaScript is used to be sandboxed you are able to reuse existing code or libraries.

WinRT-extensions feel like native JavaScript functions.

A few functions like alert() or $("<div/>") are not available due to security restrictions or a WinRT replacement.

Summary about Expression Blend A designer that executes JavaScript at design-time

is innovative and a really cool thing!

Expression Blend provides just the right mix between support and control.

The HTML-Designer is more robust than the XAML-Designer because all code is executed at designtime.

The device panel is useful to simulate the different modes, orientations and resolutions at design-time.

Start today

http://dev.windows.com/

Windows 8 Visual Studio 2012 + Expression Blend

Thank you.

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a

commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a

commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.