developing apps for nokia windows phone vsliv conference may 15, 2012 @irajlal

Developing Apps for Nokia Developing Apps for Nokia Windows PhoneWindows Phone

Raj LalRaj LalSenior Engineer, Nokia

Level: Intermediate

AgendaAgenda

1. Key Features of Nokia Lumia

2. Windows Phone 7

3. Developing Apps for Lumia

– Creating a VSLive Event App

KeyKey Features Features of of Nokia Lumia Nokia Lumia

Nokia Lumia 900 Nokia Lumia 900

Key FeaturesKey Features

LTE

1.4 GHz

4.3” AMOLED

Hotspot

Carl Zeiss 8FM

HD 720p

VibrantColors

CPU

Windows Phone Windows Phone on Lumiaon Lumia

Key FeaturesKey Features

Metro

LocalBing

Social

NokiaDriveZune

Video ChatVoice

DevelopingDeveloping AppsAppsfor Lumia for Lumia

Two Choices Two Choices **

* * You can have You can have both in a single Appboth in a single App

Two Choices *Two Choices *

Silverlight XNANews, Utility Game, Animations

Event-driven apps High-performance apps

Use controls Use contents and assets

RIA style Interface 2D/3D Interface

Embed Video / Browser Seamless Interface

Data driven Image/ driven

* * You can have You can have both in a single Appboth in a single App

Silverlight AppSilverlight App

Silverlight AppSilverlight App

3 Main layout Types3 Main layout Types

Single Screen Panorama PivotUtility App Events, Restaurant App News App

RIA Style Heterogeneous list of data

List of similar data

Quick tool Display data, images, videos

Display data with date

At-a-glance view is important

Personalization is important

Performance is important

3 Main Layout Types3 Main Layout Types

Developing a Developing a VSLive Event App VSLive Event App

VSLive Event AppVSLive Event App

1. Event

2. Speakers

3. Sessions

4. Location

5. My Schedule

Panorama Panorama

3 Step in developing VSLive App3 Step in developing VSLive App

1. Design 1. Design

Step 1: Designing VSLive AppStep 1: Designing VSLive App

Application Icon

BackgroundTile Icon Splash Screen

Map Icon

Step 1: Designing VSLive AppStep 1: Designing VSLive App

Add / Cancel

Create a Schedule

Step 1: Designing VSLive AppStep 1: Designing VSLive App

Panorama Background

Step 1: Designing the UIStep 1: Designing the UI

• Event Page

• Speakers, Sessions

• Map

• Schedules

Event Page Event Page

Event Screen: CodeEvent Screen: Code

Event ScreensEvent Screens

Event Screen: CodeEvent Screen: Code

Map ScreensMap Screens

Map Main Page: CodeMap Main Page: Code

Map : CodeMap : Code

MapView.SetView(Location, 12); MapPushpin.Location = Event.Location;

Create a Schedule Screen(s)Create a Schedule Screen(s)

Schedule Main Page: CodeSchedule Main Page: Code

Schedule Add Page: CodeSchedule Add Page: Code

2. Data2. Data

Step 2: Getting the DataStep 2: Getting the Data

Step 2: Getting the Static DataStep 2: Getting the Static Data

Create an Event Object

Load Event Data from XML

Load Event Data from XML

using System.Xml.Linq;

Bind Event to App

Text="{Binding Path=Event.Name}"…Event.CityEvent.Location…

IN XAML

Step 2: Getting Dynamic DataStep 2: Getting Dynamic Data

Schedules•Load Schedules•Save Schedules

Step 2: Getting Dynamic DataStep 2: Getting Dynamic Data

IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication()

IsolatedStorageFileStream stream = new IsolatedStorageFileStream("schedules.dat", System.IO.FileMode.OpenOrCreate, file)

Initialize Isolated Storage

Step 2: Getting Dynamic DataStep 2: Getting Dynamic Data

Load Schedules

DataContractSerializer serializer = new DataContractSerializer(typeof(ObservableCollection<Schedule>)); Event.Schedules = serializer.ReadObject(stream) as ObservableCollection<Schedule>;

Step 2: Getting Dynamic DataStep 2: Getting Dynamic Data

Save Schedules

DataContractSerializer serializer = new DataContractSerializer(typeof(ObservableCollection<Schedule>)); serializer.WriteObject(stream, Event.Schedules);

Step 2: Getting Resource DataStep 2: Getting Resource Data

Resource

•Creating a Resource File

•Bind

•Use Resource

Creating a Resource FileCreating a Resource File

Binding Resource FileBinding Resource File

public class LocalizedStrings{ public LocalizedStrings() {}

private static vsliveapp.AppResources _ localizedResources = new _ vsliveapp.AppResources();

public vsliveapp.AppResources _ LocalizedResources { get {return localizedResources; } }}

Using the ResourceUsing the Resource

Text="{Binding Path=LocalizedResources.Title}”

…LocalizedResources.HeaderDescriptionLocalizedResources.LocationWeb…

IN XAML

3. Method3. Method

Step 3: Using Panorama TemplateStep 3: Using Panorama Template

• Create the Panorama UI

• Creates the Main ViewModel

• Creates the Item ViewModel

• Instantiate ViewModel in App.cs

• Creates a DataContext

DataContext = App.ViewModel;

Step 3: Creating View ModelsStep 3: Creating View Models

ViewModels

•MainViewModel

•Item ViewModels

• EventData

• Schedules

• Sessions

Step 3: MainViewModelStep 3: MainViewModel

Creating View Models: SchedulesCreating View Models: Schedules

Demo on Demo on Lumia 900Lumia 900

XNA AppXNA App

Advanced XNA Games for Windows Phone - Brian Peek 05/16/12  1:30pm - 2:45pm

Thank YouThank You

Raj LalRaj Lal

Twitter @ iRajLal