sign in sign up
<<
Home , Microsoft Blend, Windows Phone 7, Zune

Sascha Wolter | wolter.biz 7 Fundamentals Entscheidungshilfe, Einführung und Stolperfallen

.NET Usergroup Rhein/Ruhr, Januar 2010

Microsoft .NET Application Platform Deliver applications across the UX Continuum

Consistent Tools & Application Model

Develop Deploy Design

Browser User Experience Continuum New Start

Philosophy

Customer

Design

Experience

Platform Different, For Good Reasons Showcase

• http://www.microsoft.com/windowsphone/de- de/apps/default.aspx • http://www.zune.net/de- DE/products/software/download/default.htm About me

Sascha is a professional developer and interaction designer of rich applications with focus on the Platform (incl. AIR, Flash and Flex) and Microsoft .Net Continuum (incl. Silverlight and ). He also works as a consultant, trainer, software- architect and author on a freelance basis and contributes articles to a number of magazines. His books and DVDs on Flash are best selling publications in Germany. He has been giving lectures at conferences like “Flash on the Beach” and “Flashforward” for several few years now. Sascha is also the founder of the leading German Adobe User Group flashforum.de with more than 100,000 members.

Web: http://www.wolter.biz/ : http://www.facebook.com/saschawolter LinkedIn: http://www.linkedin.com/pub/sascha-wolter/5/a38/493 : http://twitter.com/saschawolter XING: http://xing.com/profile/sascha_wolter3 : [email protected]

Sascha Wolter | wolter.biz Arbeitet mit bestehenden Systemen Declarative Programming Through XAML

Extensive Application Markup Language

• Toolable, declarative markup • Code and content are separate • Compatible with Windows Presentation Foundation

XAML C# VB.NET

b1.Width = 100; b1.Width = 100 Controls

• Basic set of controls • Included • Ship with source • Modeled after WPF controls • Extensible • Partner ecosystem • for domain specific controls • Styling • Property bag setting to define look & feel • Templating • Replace the „parts‟ that define the look of a control

Databinding • Two way data binding from to business objects • Element to Element Binding (SL3) • Element to DependencyObject Binding (SL4) • Notification via INotifyPropertyChanged • DataContext is inherited via Visual Tree

• From XAML

• From code

Binding binding = new Binding("Nasdaq.Points"); binding.Mode = BindingMode.OneWay; TextBlock tb = new TextBlock(); tb.SetBinding(TextBlock.TextProperty, binding); Silverlight Architektur

Silverlight 1 Data WPF for Silverlight .NET for Silverlight Server Silverlight 2 LINQ LINQ-to-XML Extensible Web Services ASP.NET Controls AJAX REST Legend Dynamic BCL POX Libs RSS Languages JSON Ruby Python Generics Collections SOAP

Common Language Runtime

XAML

UI Core Inputs Media Controls DRM 2D Vectors Images Keyboard WMV / VC1 Layout Media Animation Transforms Mouse WMA Editing Text Ink MP3

Presentation Core

Integrated DOM JavaScript Networking Installer Integration Engine Stack Browser Host Windows Phone 7 / Silverlight 3 API Delta • Application model • Out of Browser • Browser & plug-in specific APIs • HTML Dom Bridge • Machine information • GpuInformation • Analytics • Custom shaders • Media markers and attributes Hello World! UI Design und Interactions: Metro METRO IS OUR .ETRO WE CALL IT METRO BECAUSE IT‟S MODERN AND CLEAN. IT‟S FAST AND IN MOTION. IT‟S ABOUT CONTENT AND TYPOGRAPHY. AND IT‟S ENTIRELY AUTHENTIC.

Start

Glance & Get Me Go There

Hardware Implications

Hardware buttons

Optional landscape keyboards

Design for one hand usage whenever possible

Gestures Touch

Recommended touch target size is 9mm

Minimum touch target size is 7mm

Minimum spacing between elements is 2mm

Visual size is 60-100% of the touch target size

Common controls Application Bar + Menu

Up to 4 icons

Don‟t fill all 4 slots if not needed

Swipe up the bar to bring up the menu Trigger

Iconography

Icons in the application menu should be consistent

Test icons with users (pay attention to context)

Graphics Composition

• Shell frame composes all UI into a single scene • Central page management enables cross-app UI transitions and other effects • System-wide Z-order enforcement emphasizes core phone functionality Default Silverlight Application

Application

UserControl

Content Content Content Silverlight Navigation Application

Application

UserControl

Frame

Page 1 Page 2 Page 3 Windows Phone Application

Application

Frame

Page 1 Page 2 Page 3 Back Key Details

. Lets the user to return to previously-viewed screens . Can go back across applications . Not used for application-specific behaviour

Detecting Navigation

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedFrom(e);

StateUtility.PreserveState(State, NotesListBox); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e);

if (StateUtility.IsPreservingPageState(State)) StateUtility.RestoreState(State, NotesListBox);

} Prototyping

• Tools – Axure RP pro – Balsamiq Mockups – SketchFlow (Expression Blend) • Targets – Navigation – Interactions – Experience – Nomenclature – Construction Kit (for UI with standard controls), see http://quince.infragistics.com/

Sascha Wolter | wolter.biz Discovering SketchFlow Monetarisierung Where Developers Get Paid

30 markets world wide Publishing Process

Application and Game Submission

..xap App .xap App Packaging & submission ..dll ..dll Validation Marketplace

Windows Phone 7 Deployment Service

Add Apply .xap .xap Test Sign Metadata ..dll .dll Criteria Trial API

Implement isTrial()

Up-sell to full-priced content = greater sales Bee Hive

You control functionality or license duration

Trial API Usage Example Enjoy hours of fun with this challenging game. Twenty levels of intense honeycomb puzzles with Increasing challenges with each advancing level. This is a great game for of all ages or BeeHive::NextLevel() gaming skill level. Don‟t believe what you read? Try It before you buy it… { Level++; If ((Level > 3) & (IsTrial() == True)) { // Message the user and UPSELL the full version

return; } GoToNextLevel(); }

Test Criteria Principles

Phone functionality is protected

Applications are well-behaved on the phone

The certification process is predictable and timely for developers

Test Criteria Pillars

EvaluatedMeetsApplications Microsoft against are reliablestandard regional forpolicies global contenttechnical policies validation Localization Applications review use resources efficiently Meetspolicy application validation type guidelines Applications are free of malicious software

marketApplications validation do not interfere with the phone functionality

Marketplace

. Die Registrierungsgebühr beträgt (nach wie vor) 99 USD pro Jahr. . Für Studenten (DreamSpark-Programm) ist die Registrierung kostenlos. . 5 kostenlose Apps können eingereicht werden. Jeder weitere Test kostet 19,99 USD (auch für Studenten). . Beliebig viele kostenpflichtige Apps können eingereicht werden. . Wahlweise lokaler Markt oder weltweit im Katalog. . Auch werbefinanzierte Apps sind möglich. . Anbieter erhalten weiterhin 70% des Erlöses aus ihren Produkten. . Ein dediziertes Trial-API macht es möglich abzufragen, ob ein Nutzer eine Anwendung nur testweise installiert oder erworben hat, und daran angepasst Funktion oder Verwendungsdauer zu limitieren. . Quelle: http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/06/ 07/new-policies-for-next-gen-windows-phone-marketplace.aspx Marketplace

. Privaten Marketplace . Beta-Tests . Evtl. Unternehmenssoftware . siehe http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/06/08/hey -you-get-off-of-my-cloud.aspx

Hardware Windows Common Consistent Quality Phone Hardware Platform Focus Hardware Elements

Consistent set of hardware capabilities defined by Microsoft

One resolution at launch Second resolution added later Same touch input Consistent processor / GPU Same available RAM Optional keyboard Hardware Foundation

Display Multimedia 480x800 QVGA Common detailed specs 320x480 HVGA Codec acceleration

Capacitive touch Memory 4 or more contact points 256MB RAM or more 8GB Flash or more Sensors A-GPS, Accelerometer, Compass, Light, Proximity GPU DirectX 9 acceleration Camera 5 mega pixels or more CPU Hardware ARMv7 Cortex/Scorpion or buttons better Start, Search, Back Application Platform Elements of the Application Platform

Runtime – On “Screen” Tools & Support

Code you write Tools you use to on the client design & develop SCREEN CLOUD Cloud Services Developer Portal Services

Code you write Tools you use to on the server ship & sell Elements of the Application Platform

Runtime – On “Screen” Tools

Sensors Media Data Location Phone Emulator Phone LIVE Notifications Samples Documentation .NET Framework managed code sandbox Guides Community

SCREEN Packaging and Verification Tools

CLOUD Cloud Services Portal Services

Notifications App Deployment Registration Marketplace

Location Identity Feeds Validation MO and CC Billing

Social Maps Certification Business Intelligence

Publishing Update Management Two Flavors of Applications Leveraging the Right Technology

Graphics UI control heavy consider Silverlight Leverages vector graphics in XAML Silverlight is your only choice Media Rich video support consider Silverlight Tooling If you leverage Microsoft Blend in your pipeline, Silverlight is your only choice Leveraging the Right Technology

Graphics For 3D graphics your only choice is the XNA Framework Game Loop Sprite heavy 2D applications should consider the XNA Framework Game Loop Simulation/Drawing Those who prefer a traditional update/draw/present frame loop should leverage the XNA Framework Game Loop Tooling Those who want to leverage the XNA Framework Content Pipeline graphics types Common Capabilities

Input .NET

• Touch • Superset of Silverlight 3.0 • Hardware buttons • Windows Communication Foundation • SOAP and REST services

Media Phone Access • capture & playback • Media library access • Integrated access to phone UI • Sensors • Picker for contacts and photos Data • Isolated Storage Integrated With Cloud Services • LINQ (Objects and XML) • App Deployment & Updates • Notifications • Location • Xbox LIVE Software Architecture

Applications Your App UI and logic

Frameworks Silverlight XNA HTML/JavaScript CLR App Model UI Model Cloud Integration Xbox LIVE App management Shell frame Bing Licensing Session manager Location Chamber isolation Direct3D Push notifications Software updates Compositor ID Kernel Security Hardware BSP Networking A-GPS Accelerometer Compass Light Proximity Storage Media Wi-Fi Radio Graphics

Hardware Foundation Windows Phone 7 Frameworks

Windows Phone 7 Frameworks Device Launchers Bing Sensors FMRadio Camera Integration & Choosers MapControl

PhoneApplicationFra PhoneApplicationP PushNotificati WebBrowserContr Pause / me age on ol Resume

Silverlight Presentation and Media XNA Frameworks Control IsolatedStorag Conten Drawing Input Media s e t Navigatio GamerServic Graphic Audi Shapes Markup Media n es s o

Application Object Common Base Class Library Resourc Globalizatio Reflectio Locatio Diagnosti Runtime Text IO Net es n n n cs

Securit Threadin Collection ComponentMode Configuratio ServiceMod Linq y g s l n el What‟s a XAP?

myapp.xap

Tools

Common format for all Windows Phone apps & games

Declarative, manifest-based installation

Integrated into security model of phone Application Package (XAP)

code file codecode file file (.(.cscs ,. ,.vbvb) ) (.cs ,.vb) MyApp.dll Cs.exe MyApp.xap

XAMLXAML

als Resource Business.dll Business.dll

. als Inhalt Manifest.xml 3 Screens and the Cloud

Phone Desktop Xbox Cloud

XNA XNA XNA Frameworks Frameworks Frameworks

Silverlight Silverlight Presentation Presentation and Media and Media

Windows Phone 7 Location Service Frameworks

Notification Service

Common Base Class Library

Windows Phone 7 Fundamentals PRACTICE

Sascha Wolter | wolter.biz One more flaw TOMBSTONING

Sascha Wolter | wolter.biz Nicht Benutzer verlässt die laufend Benutzer startet App (Zurück-Taste) – die Applikation – Closing-Ereignis Launching- Ereignis

Deaktiviert, Schließend Startend

Laufend

61 lock scree n

62 Benutzer ist Zustand . Start gedrückt wieder an der wieder . ToastLaufend geöffnet . Lockscreen Stelle, wo die App herstellen verlassen wurde

Aktiviert Deaktiviert

Applikation wird Beendet terminiert Zustand für später speichern 63 Tombstoning in App.xaml.cs

// Code to execute when the application is launching (eg, from Start) // This code will not execute when the application is reactivated private void Application_Launching(object sender, LaunchingEventArgs e) { ViewModelLocator.MainViewModelStatic.LoadNotesCommand.Execute(null); }

// Code to execute when the application is activated (brought to foreground) // This code will not execute when the application is first launched private void Application_Activated(object sender, ActivatedEventArgs e) { ViewModelLocator.RestoreState(PhoneApplicationService.Current.State); }

// Code to execute when the application is deactivated (sent to background) // This code will not execute when the application is closing private void Application_Deactivated(object sender, DeactivatedEventArgs e) { ViewModelLocator.PreserveState(PhoneApplicationService.Current.State); }

// Code to execute when the application is closing (eg, user hit Back) // This code will not execute when the application is deactivated private void Application_Closing(object sender, ClosingEventArgs e) { }

Tombstoning in Page.xaml.cs

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedFrom(e);

StateUtility.PreserveState(State, NotesListBox); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e);

if (StateUtility.IsPreservingPageState(State)) StateUtility.RestoreState(State, NotesListBox);

} ImageFailed is fired Exception is thrown

ImageFailed Application_UnhandledException Handler RootFrame_NavigationFailed e.Handled = true; e.Handled = true; e.Handled = false; e.Handled = false;

Runtime

Application wird beender Push Notifications

. Server-initiated communication . Enables key background scenarios . Preserves battery life and user experience

Notification Types 1415

New photos online!

Seattle, WA: Sunny and 85 degrees Push Notifications

Data to tile Tile Data to toast Toast Push client OpenDataReturn push to URIApp channel App

Send URI Send push to server data to client

Send push data to URI Event Your Push service service Sensors

[7]

Sascha Wolter | wolter.biz GPS Location

+ Accuracy - Power - Speed - Indoors

- Accuracy + Power + Speed - Wilderness

+/- Accuracy Location +/- Power +/- Speed services +/- Urban areas Accelerometer +Y

Measures force applied on each axis over time -Z -X +X

+Z -Y Vibration

. Vibrates the phone for a given duration . Useful for haptic feedback . Notifying users of updates

VibrateController vc = VibrateController.Default; vc.Start(TimeSpan.FromSeconds(3)); Input

. . . . .

. Audio Input

. Mic input . Gives access to raw PCM WAV data . Calls BufferReady event at regular intervals . Call the GetData method from the BufferReady event or as often as your app requires . 10ms latency

Media

. Media support . H/W decode . MediaStreamSource . PlayReady DRM . XNA framework sound effect API . Supports polyphonic, looping wav data . MediaElement Limitations . One MediaElement only . No VideoBrush Enhancing Media with GPU

. MediaElement: CacheMode=BitmapCache . Debug: EnableFrameRateCounter EnableRedrawRegions EnableCacheVisualization . Spezielle Controls wie . PerformanceProgressBar . http://www.jeff.wilcox.name/2010/08/performancep rogressbar/ . LongListSelector . http://silverlight.codeplex.com/releases/view/55034

Track the frame rate on the UI thread; Test often. tips! Application.Current.Host.Settings.EnableRedrawRegio ns 1. Render Thread Framerate (fps) 2. UI Thread Framerate (fps) 3. Amount of VRAM used by App (kb) 4. Total # of Textures on GPU 5. # of Intermediates Web Browser Control

. Displays network and local content . Supports pan, double tap and pinch to zoom . Supports transforms . Application can interact with javascript . Disabled by default Silverlight to Script

Silverlight string out = wb.InvokeScript("runScriptStuff", arg1, arg2);

javascript

function runScriptStuff(arg1, arg2) { return “awesome”; }

Script to Silverlight

Silverlight void wb_ScriptNotify(object s, NotifyEventArgs e) { string return = e.Value; } javascript

window.external.Notify(string);

Integrating with the OS

. Hub integration . Enhance the built in hubs with your application . Launchers let you fire and forget to an OS app . SMS, , web browser, maps, dialer, search, etc . Choosers are like an open file dialog . Launches an OS experience for letting the user choose data for the app . Picture, contact, camera, etc . Overview: http://msdn.microsoft.com/en- us/library/ff428753(v=VS.92).aspx Launcher Chooser . EmailComposeTask . CameraCaptureTask . MarketplaceDetailTask . EmailAddressChooserTask . MarketplaceHubTask . PhoneNumberChooserTask . MarketplaceReviewTask . PhotoChooserTask . MarketplaceSearchTask . SaveEmailAddressTask . MediaPlayerLauncher . SavePhoneNumberTask . PhoneCallTask . SearchTask . SMSComposeTask . WebBrowserTask

83 One more flaw SOFTWARE ARCHITECTURE

Sascha Wolter | wolter.biz Seperation of Design and Code

• Curtain Wall

Sascha Wolter | wolter.biz Code-Behind Design

Design-Markup

Code

Sascha Wolter | wolter.biz Seperation of Design and Code: Templating

What do I I need a mini need to be a View I have your propermini View View

Control Logic Control Visuals Divorced and Married again

• Design Patterns View – Code Behind – Model View Controller – Presentation Model – MVVM – usw. • Binding – oneway, twoway • Events • Behaviors

Model

http://www.martinfowler.com/eaaDev/PresentationModel.html Sascha Wolter | wolter.biz de facto standard

• MVVM Light Toolkit • http://mvvmlight.codeplex.com/

Sascha Wolter | wolter.biz Simple MVVM Light Danke für Ihre Geduld!

Windows Phone 7 Fundamentals Sascha Wolter | wolter.biz