Windows phone and azure
-
Upload
dovydas-navickas -
Category
Technology
-
view
157 -
download
4
Transcript of Windows phone and azure
Dovydas [email protected]://linkd.in/dovydasnavickas
agenda
o introductiono metro styleo silverlight developmento phone developmento the marketplace
about meo 6 years of developingo 4 years of C# experienceo lecturer at “Prografika”o microsoft student partnero patogiau.lt
o http://linkd.in/dovydasnavickas
introductiono new platform
o based on familiar technologies and toolso multiple hardware vendors
o consistent baseline (cpu, resolution, etc.)o your chance to enter a brand new
market!
features metro tools cloud
introduction
METRO IS WINDOWS PHONE’S DESIGN
LANGUAGE. IT’S MODERN AND CLEAN.
IT’S ABOUT TYPOGRAPHY AND
CONTENT.
features metro tools cloud
metro
metro
metro
clean, light, open, fastcelebrate typographyalive in motioncontent, not chrome
principals
metroapp hubs
introductionfeatures metro tools cloud
Phone Emulator
Samples Documentation
Guides CommunityPackaging and Verification Tools
introductionfeatures metro tools cloud
Notifications
Location Identity Feeds
MapsSocial
App Deployment
SILVERLIGHT
silverlighto a subset of the .net framework and
WPFo 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
silverlighto code + xamlo controlso layouto data bindingo graphics
principals
code + xamlo xaml is basically a declarative language for
object instantiationo xaml is great for UI development. it’s:
o standard XMLo hierarchicalo extensibleo 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 + xamlcomparison
XAML<Grid x:Name="ContentPanel" Margin="12,0,12,0"> <TextBlock Text="Hello, Windows Phone 7!" Margin="6" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid>
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 + xamlo 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
demohello, xaml
controls
controlso inherits from FrameworkElemento 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
controlso extend CLR properties with:
o data bindingo change notificationo animationo validationo control-tree inheritance
dependency properties
controlso extend CLR eventso can travel along the visual tree:
o bubbling or tunneling
routed events
controlsrouted events
Root
Element 1
Element1.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
layoutbasic properties
Element
HorizontalAlignment
Vertical Alignment
Container
Margin
Padding
{Min, Max}Heigh
t
{Min, Max} Width
Render Transform
layouto Grido StackPanelo WrapPanel (*)o Canvaso DockPanelo TabControl
* can be found in the silverlight toolkit
panels
demolayout with panels
controlso defines a set of dependency
properties and valueso similar to CSS in HTMLo provides a great way to control the
looks of your app from a central location
styles
controlso 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
demotemplate editing in blend
data bindingo flow data from a source to a target
o source: any CLR objecto target: Dependency Property onlyo modes: one way, two way
o supports change notificationso changes to a source object automatically
sent to the UIo both property and collection changes are
supported
data bindingo provide a visual representation of an
objecto the default behavior if no template is
specified is to display the Object.ToString() result
o use bindings to display datao respond to changes using triggerso can only be written in xaml
data templates
data bindingo use ItemsControl whenever you need
to bind to a collectiono provide an ItemTemplate to change
the visuals of each itemo controls that inherit from
ItemsControl:o ListBox, ContextMenu, MenuItem,
Panorama
collections
demodata binding
data bindingo 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)
graphicso store images as resources or as
contento content is recommended
o use the Image control to show themo use WritableBitmap to create images
in runtimeo you can also use it to capture your
screens
images
graphicso controls inheriting from Shape can be
used to create 2D shapeso Rectangle, Ellipse, Line, Polyline, Polygon,
Patho 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
graphicso FrameworkElement has a RenderTransform
property which can be assigned to:o TranslateTransform (move)o ScaleTransformo RotateTransformo SkewTransformo CompositeTransform (combine any of the
above)o additionally, the Projection property allows
creating 3D-like effects
transforms
graphicso 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
demoanimations
resourceso silverlight toolkit
http://silverlight.codeplex.com/
o prismhttp://prism.codeplex.com/
o project rosetta (tutorials)http://visitmix.com/labs/rosetta
o Introducing Expression Blend 4http://expression.microsoft.com/en-us/ff624124
break
WINDOWS PHONE
windows phoneo application structureo phone-specific controlso sensors and services
application structureo 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 structureo PhoneApplicationFrame
o PhoneApplicationPageo Grid named “LayoutRoot” o StackPanel named “TitlePanel”
o TextBlock named “ApplicationTitle”
o TextBlock named “PageTitle” o Grid named “ContentPanel”
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
default control tree
application structureo web browser like: each page can be
navigated to using the NavigationService by passing a URIo 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 stacko 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 structureo 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 buttono you get a call while the app is runningo the phone gets lockedo 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
application structureo preferred menu system
for your appso up to 4 buttons,
monochrome 62x62 bitmapso add a button from Blend to
get some default bitmapso get more from
http://thenounproject.como add up to 5 menu items
application bar
demoapplication bar
phone controlso most of silverlight’s controls have
been adjusted to windows phone, supporting touch and templated to the phone’s themeo while some controls such as ComboBox
and ToolTip exist on the phone, their use is discouraged
phone controlso 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
demopanorama & pivot
sensorso measures acceleration forces such as gravity
or the forces caused by moving the sensoro can tell the direction of the earth relative to the
phoneo use the Accelerometer class to access the
sensoro 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
sensorso 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
sensorso obtain photos from the camera using
the CameraCaptureTask choosero get a Stream from the chooser and
create a BitmapImage from ito the emulator will provide a simple
black-and-white image to capture
camera
serviceso 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 inactiveo tile (background, title, count)o raw – directly to the app
o you need to create a compatible web service
push notifications
what’s newo internet explorer 9o SQL CE: in-memory local SQL databaseo multi-tasking and live agentso silverlight 4o raw camera feed accesso tcp/ip socketso better developer toolso beta sdk shipping this month
in version 7.5 (aka “mango”)
resourceso Programming Windows Phone 7 by
Charles Petzold (free ebook)http://www.charlespetzold.com/phone/
o Windows Phone 7 Developer Guidehttp://msdn.microsoft.com/en-us/library/gg490765.aspx
o quickstartshttp://create.msdn.com/en-us/education/quickstarts
o the noun project (icons for your app)http://thenounproject.com/
break
THE MARKETPLACE
marketplaceo integrated into the phone
o use the zune software to browse on the PC
o free or paid apps with a trial optiono downloads, updates and payments are
managed for youo free registration for students using
DreamSpark
advantages
marketplacesteps
develop & debug
submit& validate
certify & sign
windows phone application deployment service
marketplace
marketplaceo make it appealing (use metro!)o make it stable and reliableo make it original and usefulo make it easy to useo read the certification requirements
carefullyo test your app as suggested to avoid
common certification pitfalls
best practices
marketplaceo currently not supported directly in App
Hubo use a third-party broker: appa
market / yalla appso as a student, you get 100 credits
which you can use to:o upload appso unlock devices for development
in lithuania
resourceso certification requirements
http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx
o dreamsparkhttps://www.dreamspark.com/
o yalla appshttp://www.yallaapps.com/
o appa markethttp://appamarket.com/
o best practices for application marketinghttp://create.msdn.com/en-US/home/about/app_submission_walkthrough_application_marketing
thank you!