Post on 25-Dec-2015
transcript
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
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
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 ,…
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)
…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
© 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.