Eli Arbel

About CodeValue CodeValue is the home of software experts o CodeValue builds software tools, foundations and products for the software industry o CodeValue offers mentoring, consulting and project development services o We love technologies, we believe in excellency

agenda o introduction o silverlight development o phone development o using azure in your app o the marketplace

introduction o new platform o based on familiar technologies and tools o multiple hardware vendors o consistent baseline (cpu, resolution, etc.) o your chance to enter a brand new market! featuresmetrotoolscloud

introduction METRO IS WINDOWS PHONE’S DESIGN LANGUAGE. IT’S MODERN AND CLEAN. IT’S ABOUT TYPOGRAPHY AND CONTENT. featuresmetrotoolscloud

metro

clean, light, open, fast celebrate typography alive in motion content, not chrome principals

metro app hubs

introduction featuresmetrotoolscloud Phone Emulator SamplesDocumentation GuidesCommunity Packaging and Verification Tools

introduction featuresmetrotoolscloud Notifications LocationIdentityFeeds MapsSocial App Deployment

SILVERLIGHT

silverlight o a subset of the.net framework and WPF o first introduced as a browser plug-in o.net runtime on multiple platforms (mac, windows) o currently targeted for: o device apps (currently windows phones) o client apps (emphasis on enterprise) o rich media apps (such as streaming video) o reuse code for desktop, web and phone apps! introduction

silverlight o code + xaml o controls o layout o data binding o graphics principals

code + xaml o xaml is basically a declarative language for object instantiation o xaml is great for UI development. it’s: o standard XML o hierarchical o extensible o declarative o we can do most things both in xaml and in code, but you’ll quickly find that xaml is much more convenient for some tasks

code + xaml comparison XAML <Grid x:Name="ContentPanel" Margin="12,0,12,0"> <TextBlock Text="Hello, Windows Phone 7!" Margin="6" HorizontalAlignment="Center" VerticalAlignment="Center" /> C# var tb = new TextBlock(); tb.Text = "Hello, Windows Phone 7!"; tb.HorizontalAlignment = HorizontalAlignment.Left; tb.VerticalAlignment = VerticalAlignment.Top; tb.Margin = new Thickness(6); ContentPanel.Children.Add(tb);

code + xaml o controls contain other controls, and some controls are built using other controls o this creates a hierarchical relationship between the controls which we call the visual tree o when you write xaml, the structure of the visual tree is very clear the visual tree

demo hello, xaml

controls

o inherits from FrameworkElement o two main types: o custom control – a reusable, templatable control (e.g. a button) o user control – a way to modularize your application (e.g. employee view) o uses dependency properties and routed events o responds to input (touch, keyboard) anatomy

controls o extend CLR properties with: o data binding o change notification o animation o validation o control-tree inheritance dependency properties

controls o extend CLR events o can travel along the visual tree: o bubbling or tunneling routed events

controls routed events Root Element 1 Element 1.1 Element 2 Element 2.1 Element 2.2 Element 1.2  PreviewMouseDown on Root  PreviewMouseDown on Element 1  PreviewMouseDown on Element 1.2  MouseDown (bubble) on Element 1.2  MouseDown (bubble) on Element 1  MouseDown (bubble) on Root

layout basic properties Element Horizontal Alignment Vertical Alignment Container Margin Padding {Min, Max} Height {Min, Max} Width Render Transform

layout o Grid o StackPanel o WrapPanel (*) o Canvas * can be found in the silverlight toolkit panels

demo layout with panels

controls o defines a set of dependency properties and values o similar to CSS in HTML o provides a great way to control the looks of your app from a central location styles

controls o completely customize appearance of controls without having to write any code or inherit from the control o all controls have default styles and templates o template editing is easy with Expression Blend templates

demo template editing in blend

data binding o flow data from a source to a target o source: any CLR object o target: Dependency Property only o modes: one way, two way o supports change notifications o changes to a source object automatically sent to the UI o both property and collection changes are supported

data binding o provide a visual representation of an object o the default behavior if no template is specified is to display the Object.ToString() result o use bindings to display data o respond to changes using triggers o can only be written in xaml data templates

data binding o use ItemsControl whenever you need to bind to a collection o provide an ItemTemplate to change the visuals of each item o controls that inherit from ItemsControl: o ListBox, ContextMenu, MenuItem, Panorama collections

demo data binding

o designed specifically with WPF/Silverlight in mind o relies on bindings to retrieve and set data from and to the view model o uses commands to perform operations on the view model o relies on notifications to communicate between the layers o creates a data-driven UI the mvvm pattern Model View View Model business logic and data presentation logic and state UI (and possibly some UI logic)

graphics o store images as resources or as content o content is recommended o use the Image control to show them o use WritableBitmap to create images in runtime o you can also use it to capture your screens images

graphics o controls inheriting from Shape can be used to create 2D shapes o Rectangle, Ellipse, Line, Polyline, Polygon, Path o Path is the most versatile, accepting a Geometry object which can represent any shape o it is easiest to create shapes using Expression Blend vectors

graphics o FrameworkElement has a RenderTransform property which can be assigned to: o TranslateTransform (move) o ScaleTransform o RotateTransform o SkewTransform o CompositeTransform (combine any of the above) o additionally, the Projection property allows creating 3D-like effects transforms

graphics o animate dependency property using a Timeline that fits the property type: o DoubleAnimation, ColorAnimation, PointAnimation o use Storyboard to group a few animations together o use an easing function to make the animation look more “real” (e.g. to add elasticity) o it’s easiest to create storyboards in xaml and in Expression Blend animations

demo animations

resources o silverlight toolkit o prism o project rosetta (tutorials) o Introducing Expression Blend 4

break

WINDOWS PHONE

windows phone o application structure o phone-specific controls o sensors and services

application structure o App.xaml: application entry point. contains global resources, services, events (startup, shutdown, etc.) and instantiates PhoneApplicationFrame o WMAppManifest.xml: contains application deployment information: capabilities, tasks, icon. o MainPage.xaml: a PhoneApplicationPage that contains the main view of the application. files

application structure o PhoneApplicationFrame o PhoneApplicationPage o Grid named “LayoutRoot” o StackPanel named “TitlePanel” o TextBlock named “ApplicationTitle” o TextBlock named “PageTitle” o Grid named “ContentPanel” o you can clear the entire page content and write your own, but for most apps it is recommended to stay within the ‘metro’ guidelines default control tree

application structure o just like a web browser, each page in windows phone can be navigated to using the NavigationService by passing a URI o the PhoneApplicationFrame can only display a single page at a time! o the hardware back button can be used to go back to the previous page on the stack o you can pass data to the page using URI query or by placing it in a globally known location (such as the App class) navigation

application structure o windows phone can only run one application at a time. so, each time you switch to another application, the current one gets terminated – i.e. tombstoned o your app will get tombstoned if: o you click the start button o you get a call while the app is running o the phone gets locked o the app uses a launcher or a chooser (e.g. use the camera) o you can use the app’s Activated and Deactivated events to handle tombstoning tombstoning

demo tombstoning

application structure o preferred menu system for your apps o up to 4 buttons, monochrome 62x62 bitmaps o add a button from Blend to get some default bitmaps o get more from o add up to 5 menu items application bar

demo application bar

phone controls o most of silverlight’s controls have been adjusted to windows phone, supporting touch and templated to the phone’s theme o while some controls such as ComboBox and ToolTip exist on the phone, their use is discouraged

phone controls o panoramic applications offer a unique way to view controls, data, and services by using a long horizontal canvas that extends beyond the confines of the screen. o pivot can be used for filtering large datasets, viewing multiple data sets, or switching application views. panorama and pivot

demo panorama & pivot

sensors o measures acceleration forces such as gravity or the forces caused by moving the sensor o can tell the direction of the earth relative to the phone o use the Accelerometer class to access the sensor o this sensor reports a constant value in the emulator, so it is recommended that you mock its values for testing o possible uses: responding to phone movements in games, bubble levels, etc. accelerometer

demo accelerometer

sensors o obtain the current location of the phone using the GeoCoordinateWatcher class o you can get the latitude, longitude, altitude and current speed of the device o this sensor is not available in the emulator. use the GpsEmulator project, available at app hub o use the Bing maps control to display a map of the current location geo-location

sensors o obtain photos from the camera using the CameraCaptureTask chooser o get a Stream from the chooser and create a BitmapImage from it o the emulator will provide a simple black- and-white image to capture camera

demo camera

services o allows applications to receive updates in the background (app doesn’t need to be running!) o three types of notifications: o toast – when app is inactive o tile (background, title, count) o raw – directly to the app o you need to create a compatible web service push notifications

what’s coming o internet explorer 9 o SQL CE: in-memory local SQL database o multi-tasking and live agents o silverlight 4 o raw camera feed access o tcp/ip sockets o better developer tools o beta sdk shipping this month in version 7.5 (aka “mango”)

resources o Programming Windows Phone 7 by Charles Petzold (free ebook) o Windows Phone 7 Developer Guide o quickstarts o the noun project (icons for your app)

break

USING AZURE IN YOUR APP

windows azure Windows Azure and SQL Azure help developers build, host and scale applications through Microsoft datacenters. it allows you to: o focus on development not infrastructure o respond faster to customer needs o use your existing.net skills in the cloud in a nutshell

windows azure o compute (virtual server) o database o caching o content delivery network o service bus o access control o and more! features

phone+azure o use azure web roles for hosting web services o e.g. push notifications o store data on azure tables o e.g. user registration, personalization o use the content delivery network (CDN) to host your media (images, videos, etc.)

phone+azure o visual studio templates for an azure-backed windows phone app o provides: o user registration and authentication service o access azure tables using OData o serve push notifications o administration website toolkit

demo toolkit app

resources o Windows Azure Toolkit for Windows Phone o short introduction to azure

THE MARKETPLACE

marketplace o integrated into the phone o use the zune software to browse on the PC o free or paid apps with a trial option o downloads, updates and payments are managed for you o free registration for students using DreamSpark advantages

marketplace steps develop & debug submit & validate certify & sign windows phone application deployment service marketplace

o make it appealing (use metro!) o make it stable and reliable o make it original and useful o make it easy to use o read the certification requirements carefully o test your app as suggested to avoid common certification pitfalls best practices

marketplace o currently not supported directly in App Hub o use a third-party broker: yalla apps o as a student, you get 100 credits which you can use to: o upload apps o unlock devices for development in israel

resources o certification requirements o dreamspark o yalla apps o best practices for application marketing US/home/about/app_submission_walkthrough_application_marketing US/home/about/app_submission_walkthrough_application_marketing

thank you!