windows phone 8 - från lapp till app

Windows Phone 8 – Från lapp till appJimmy Engström, Antropoid

Vem är jag?

ASP.NET på dagenWindows phone &Windows 8 på kvällenGeek

Från lapp till app

Från lapp till app

Från lapp till app

Verktygen

Dev Center & Tools

Dev CenterDesign GuidelinesDeveloper Tools & SDKsVideor, Bloggar, Exempelhttp://developer.windowsphone.com/

ToolsVisual Studio, Blend, Emulator, Device Unlock, App Deploy, Store Test Kit

Visual Studio

Kod(Design)

Blend

DesignAnimeringar(Kod)

Windows Phone 8 SDK

Visual StudioBlendEmulatorDevice UnlockApp DeployStore Test KitKräverWindows 8Windows 8 pro

Design principles

Design Principer

Pride in craftmanshipMore with lessFast and fluidAuthentically digitalWin as one

Pride in craftmanship

Pride in craftmanship

Pride in craftmanship

More with less

More with less

Fast and fluid

Fast and fluid

Authentically digital

Win as one

App process

Idé

Behöver inte vara unikVar bäst på någotDataLagomHitta användaren

Funktioner

Skriv upp funktionerAvgränsaSe över eller skapa APIAndra tjänster?

Struktur

IndelningSidor

Skissa

Skissa ett gränssnitt(Funktioner och Data)

http://developer.windowsphone.com/en-us/design/process

Börja koda

Kontroller

Panorama

Pivot

ApplicationBar

ApplicationBar.Mode=ApplicationBarMode.Minimized;

ApplicationBar - Minimized

ButtonHyperlinkButtonCheckboxSlider

Buttons

LongListSelector

CapabilitiesID_CAP_MAPID_CAP_LOCATION

ApplicationIdAuthenticationToken

Karta

Webbrowser Control

Mediaplayer

Progress och Popup

Fler kontroller

Via Nugethttp://phone.codeplex.com/

Windows Phone ToolkitContextMenuDateTimePickersEffects – SlideInEffect, TiltEffect, TurnstileFeatherEffectHubTileListPickerLongListMultiSelectorMap extensionsToggleSwitchNavigation transitionsWrapPanel

Telerik

$9960 Kontroller

http://www.telerik.com/products/windows-phone.aspx

Syncfusion

$9925 Kontroller

http://www.syncfusion.com/products/windows-phone

Projekttyper

Panorama App

Pivot App

Databound App

Xaml and Direct 3D

timer = new GameTimer();timer.UpdateInterval = TimeSpan.FromTicks(333333);timer.Update += OnUpdate;timer.Draw += OnDraw;

private void OnDraw(object sender, GameTimerEventArgs e){ SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue);}

Xaml and XNA

Audio Playback AgentAudio Streaming AgentScheduled Task Agent

Agents

Windows Phone App

Capabilities

Capabilities

ID_CAP_APPOINTMENTSID_CAP_CONTACTSID_CAP_GAMERSERVICESID_CAP_IDENTITY_DEVICEID_CAP_IDENTITY_USERID_CAP_ISV_CAMERAID_CAP_LOCATIONID_CAP_MAPID_CAP_MEDIALIBID_CAP_MEDIALIB_AUDIOID_CAP_MEDIALIB_VIDEOID_CAP_MEDIALIB_PHOTOID_CAP_MEDIALIB_PLAYBACK

ID_CAP_MICROPHONEID_CAP_NETWORKINGID_CAP_PHONEDIALERID_CAP_PROXIMITYID_CAP_PUSH_NOTIFICATIONID_CAP_REMOVABLE_STORAGEID_CAP_RINGTONE_ADDID_CAP_SENSORSID_CAP_SPEECH_RECOGNITIONID_CAP_VOIPID_CAP_WALLET

ID_CAP_WALLET_PAYMENTINSTRUMENTSID_CAP_WALLET_SECUREELEMENTID_CAP_WEBBROWSERCOMPONENTID_HW_FRONTCAMERA

XAML

XAML (zamel)

eXtensible Application Markup Language

Skapa objektSätta egenskaperResurser (Styles)Templates

XAML

Man kan ändra ”allt”

Button:<Border … >

<ContentControl … /></Border>

XAML Namespaces

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

XAML Namespaces - prefix

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

XAML Namespaces – design prefix

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"

<phone:PhoneApplicationPage d:DesignWidth="640" d:DesignHeight="480“>

Application Lifecycle

Application Lifecycle - Dormant

running

deactivated

dormant

activated

Spara State!

Application Lifecycle - Tombstoned

running

deactivated

dormantTombstoned

activated

Spara State!

Grunderna - avklarade

VerktygenDesign principlesIdé och skissKontrollerProjekttyperCapabilitiesXamlApplication Lifecycle

Navigering

NavigationService.Navigate(new Uri("/secondpage.xaml?parameter=test", UriKind.Relative));

if (NavigationContext.QueryString.TryGetValue("parameter", out parameter)){

ParameterTextBlock.Text = parameter;}

Sidor och navigering

Launchers & Choosers

Launchers & Choosers

AddressChooserTask MapsTask SaveContactTask

AddWalletItemTask MapUpdaterTaskSaveEmailAddressTask

BingMapsDirectionsTask MarketplaceDetailTaskSavePhoneNumberTask

BingMapsTask MarketplaceHubTask SaveRingtoneTaskCameraCaptureTask MarketplaceReviewTask SearchTaskConnectionSettingsTask MarketplaceSearchTask ShareLinkTaskEmailAddressChooserTask MediaPlayerLauncher ShareMediaTaskEmailComposeTask PhoneCallTask ShareStatusTask

GameInviteTaskPhoneNumberChooserTask SmsComposeTask

MapDownloaderTask PhotoChooserTask WebBrowserTaskMapsDirectionsTask SaveAppointmentTask

Notifications

Alarm / Reminder

Reminder

Länk in i appenKan vara återkommande

Alarm

Ingen länk Kan ändra ljud Kan vara återkommande

MVVM & PCL

MVVM – Varför?

Återanvändning av kodTestbarhetLätt att hålla ordning påKan visa design-time data i Expression Blend och Visual Studio

MVVM

ModelViewViewModel

Model-View-ViewModel

View

ViewModel

Commands

Data Binding

Model

Model

Model

public class Person{

public string Name{ get; set; } public string Age{ get; set; }}

ViewModel - INotifyPropertyChanged

public class MainViewModel : INotifyPropertyChanged{ public event PropertyChangedEventHandler PropertyChanged;

private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } }}

ViewModel

ViewModel

ViewModel

private string _sampleProperty = "my start value";public string SampleProperty{ get { return _sampleProperty; } set { _sampleProperty = value; NotifyPropertyChanged("SampleProperty"); }}

View

Binder text mot DataContext.SampleProperty

View

<TextBox Text="{Binding SampleProperty, Mode=TwoWay}" />

View - Listor

View

<phone:LongListSelector ItemsSource="{Binding MyListOfItems}" SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" />

Data Binding Modes

<TextBox Text="{Binding SampleProperty, Mode=TwoWay}" />

OneTime – ViewModel -> kontrollen (en gång)OneWay – ViewModel -> kontrollen (en (varje gång)TwoWay – ViewModel <-> kontrollen (en (varje gång)

Commands

<Button Command="{Binding AddCommand}" CommandParameter="Untitled" Content="Button“ />

class AddItemCommand : ICommand{ ViewModel _viewModel; public AddItemCommand(ViewModel viewModel) { _viewModel = viewModel; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; }  public void Execute(object title) { _viewModel.AddItem(title as string); }}

Portable Class Library

Projekt typMinsta gemensamma nämnare

Spara data

PCL Storagehttps://pclstorage.codeplex.com/

Möjligheterna

Demo

MVVM, Portal Class Library och Windows 8

Live tile & toast

Live Tiles

Snabb information

Saker vi bryr oss om

UppdaterasInnifrån appen

Background Agent

Push Notification

Flip Tile Template

Crossdomain.xml

Cycle Tile Template

Iconic Tile Template

Toast Template

(wp:Text1)(wp:Text2)

Background Agents

Background agents

PeriodicTask30:e minut (+-10min)25 sekunder

ResourceIntensiveTaskLaddare / UsbWifi eller PC-uppkoppling>90% batteri10 minuter

Demo

Live tile, Toast och Background Task

Avslutningsvis

Använd Windows Phones kontrollerAnvänd MVVMBygg för båda

Coding After Work

www.CodingAfterWork.se

Tack!

Kontakta mig gärna om ni behöver hjälp, stöd eller bollplank.

Jimmy Engström@apeoholicwww.apeoholic.sejimmy@apeoholic.se