Eli Arbel eliacodevalue net http arbel net About

  • Slides: 77
Download presentation
Eli Arbel elia@codevalue. net http: //arbel. net/

Eli Arbel [email protected] net http: //arbel. net/

About Code. Value is the home of software experts o Code. Value builds software

About Code. Value is the home of software experts o Code. Value builds software tools, foundations and products for the software industry o Code. Value offers mentoring, consulting and project development services o We love technologies, we believe in excellency http: //codevalue. net/

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

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

introduction features metro o new platform o o cloud based on familiar technologies and

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

introduction features metro tools cloud METRO IS WINDOWS PHONE’S DESIGN LANGUAGE. IT’S MODERN AND

introduction features metro tools cloud METRO IS WINDOWS PHONE’S DESIGN LANGUAGE. IT’S MODERN AND CLEAN. IT’S ABOUT TYPOGRAPHY AND CONTENT.

metro

metro

metro

metro

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

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

metro app hubs

metro app hubs

introduction features metro tools cloud Phone Emulator Samples Documentation Guides Community Packaging and Verification

introduction features metro tools cloud Phone Emulator Samples Documentation Guides Community Packaging and Verification Tools

introduction features metro Notifications Location tools cloud App Deployment Identity Feeds Social Maps

introduction features metro Notifications Location tools cloud App Deployment Identity Feeds Social Maps

SILVERLIGHT

SILVERLIGHT

silverlight introduction o a subset of the. net framework and WPF o first introduced

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

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

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

code + xaml o o xaml is basically a declarative language for object instantiation

code + xaml o o xaml is basically a declarative language for object instantiation xaml is great for UI development. it’s: o o o standard XML hierarchical extensible declarative 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="Content. Panel" Margin="12, 0, 12, 0"> <Text.

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

code + xaml the visual tree o controls contain other controls, and some controls

code + xaml the visual tree 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

demo hello, xaml

demo hello, xaml

controls

controls

controls anatomy o inherits from Framework. Element o two main types: o o custom

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

controls dependency properties o extend CLR properties with: o o o data binding change

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

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

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

controls routed events Root Element 1. 1 Element 1. 2 Element 2. 1 Element

controls routed events Root Element 1. 1 Element 1. 2 Element 2. 1 Element 2. 2 � Preview. Mouse. Down on Root � Preview. Mouse. Down on Element 1. 2 � Mouse. Down (bubble) on Element 1 � Mouse. Down (bubble) on Root

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

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

layout panels o Grid o Stack. Panel o Wrap. Panel (*) o Canvas *

layout panels o Grid o Stack. Panel o Wrap. Panel (*) o Canvas * can be found in the silverlight toolkit

demo layout with panels

demo layout with panels

controls styles o defines a set of dependency properties and values o similar to

controls styles 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

controls templates o completely customize appearance of controls without having to write any code

controls templates 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

demo template editing in blend

demo template editing in blend

data binding o flow data from a source to a target o o source:

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

data binding data templates o provide a visual representation of an object o o

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

data binding collections o use Items. Control whenever you need to bind to a

data binding collections o use Items. Control whenever you need to bind to a collection o provide an Item. Template to change the visuals of each item o controls that inherit from Items. Control: o List. Box, Context. Menu, Menu. Item, Panorama

demo data binding

demo data binding

data binding the mvvm pattern o o o designed specifically with WPF/Silverlight in mind

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

graphics images o store images as resources or as content o o o content

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

graphics vectors o controls inheriting from Shape can be used to create 2 D

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

graphics transforms o Framework. Element has a Render. Transform property which can be assigned

graphics transforms o Framework. Element has a Render. Transform property which can be assigned to: o o o Translate. Transform (move) Scale. Transform Rotate. Transform Skew. Transform Composite. Transform (combine any of the above) additionally, the Projection property allows creating 3 D-like effects

graphics animations o animate dependency property using a Timeline that fits the property type:

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

demo animations

demo animations

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

resources o silverlight toolkit o prism o project rosetta (tutorials) o Introducing Expression Blend 4 http: //silverlight. codeplex. com/ http: //prism. codeplex. com/ http: //visitmix. com/labs/rosetta http: //expression. microsoft. com/en-us/ff 624124

break

break

WINDOWS PHONE

WINDOWS PHONE

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

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

application structure files o App. xaml: application entry point. contains global resources, services, events

application structure files o App. xaml: application entry point. contains global resources, services, events (startup, shutdown, etc. ) and instantiates Phone. Application. Frame o WMApp. Manifest. xml: contains application deployment information: capabilities, tasks, icon. o Main. Page. xaml: a Phone. Application. Page that contains the main view of the application.

application structure default control tree o Phone. Application. Frame o Phone. Application. Page o

application structure default control tree o Phone. Application. Frame o Phone. Application. Page o o Grid named “Layout. Root” Stack. Panel named “Title. Panel” o o o Text. Block named “Application. Title” Text. Block named “Page. Title” Grid named “Content. Panel” o <your content goes here> you can clear the entire page content and write your own, but for most apps it is recommended to stay within the ‘metro’ guidelines

application structure navigation o just like a web browser, each page in windows phone

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

application structure tombstoning o o windows phone can only run one application at a

application structure tombstoning o 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 your app will get tombstoned if: o o o you click the start button you get a call while the app is running the phone gets locked the app uses a launcher or a chooser (e. g. use the camera) you can use the app’s Activated and Deactivated events to handle tombstoning

demo tombstoning

demo tombstoning

application structure application bar o preferred menu system for your apps o up to

application structure application bar o preferred menu system for your apps o up to 4 buttons, monochrome 62 x 62 bitmaps o o o add a button from Blend to get some default bitmaps get more from http: //thenounproject. com add up to 5 menu items

demo application bar

demo application bar

phone controls o most of silverlight’s controls have been adjusted to windows phone, supporting

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 Combo. Box and Tool. Tip exist on the phone, their use is discouraged

phone controls panorama and pivot o o panoramic applications offer a unique way to

phone controls panorama and pivot o 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. pivot can be used for filtering large datasets, viewing multiple data sets, or switching application views.

demo panorama & pivot

demo panorama & pivot

sensors accelerometer o measures acceleration forces such as gravity or the forces caused by

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

demo accelerometer

demo accelerometer

sensors geo-location o obtain the current location of the phone using the Geo. Coordinate.

sensors geo-location o obtain the current location of the phone using the Geo. Coordinate. Watcher 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 Gps. Emulator project, available at app hub o use the Bing maps control to display a map of the current location

sensors camera o obtain photos from the camera using the Camera. Capture. Task chooser

sensors camera o obtain photos from the camera using the Camera. Capture. Task chooser o get a Stream from the chooser and create a Bitmap. Image from it o the emulator will provide a simple black-andwhite image to capture

demo camera

demo camera

services push notifications o o allows applications to receive updates in the background (app

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

what’s coming in version 7. 5 (aka “mango”) o o o o internet explorer

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

resources o Programming Windows Phone 7 by Charles Petzold (free ebook) http: //www. charlespetzold.

resources o Programming Windows Phone 7 by Charles Petzold (free ebook) http: //www. charlespetzold. com/phone/ o Windows Phone 7 Developer Guide o quickstarts o the noun project (icons for your app) http: //msdn. microsoft. com/en-us/library/gg 490765. aspx http: //create. msdn. com/en-us/education/quickstarts http: //thenounproject. com/

break

break

USING AZURE IN YOUR APP

USING AZURE IN YOUR APP

windows azure in a nutshell Windows Azure and SQL Azure help developers build, host

windows azure in a nutshell 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

windows azure features o compute (virtual server) o database o caching o content delivery

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

phone+azure o use azure web roles for hosting web services o o store data

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

phone+azure toolkit o visual studio templates for an azure-backed windows phone app o provides:

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

demo toolkit app

demo toolkit app

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

resources o Windows Azure Toolkit for Windows Phone 7 o short introduction to azure http: //watoolkitwp 7. codeplex. com/ http: //msdn. microsoft. com/en-us/magazine/ee 336122. aspx

THE MARKETPLACE

THE MARKETPLACE

marketplace advantages o integrated into the phone o o use the zune software to

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

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

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

marketplace best practices o make it appealing (use metro!) o make it stable and

marketplace best practices 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

marketplace in israel o currently not supported directly in App Hub o use a

marketplace in israel 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 o upload apps unlock devices for development

resources o certification requirements o dreamspark o yalla apps o best practices for application

resources o certification requirements o dreamspark o yalla apps o best practices for application marketing http: //msdn. microsoft. com/en-us/library/hh 184843(v=VS. 92). aspx https: //www. dreamspark. com/ http: //www. yallaapps. com/ http: //create. msdn. com/en. US/home/about/app_submission_walkthrough_application_marketing

thank you!

thank you!