The document outlines the development of applications for Nokia's Windows Phone, focusing on the Nokia Lumia series and introducing the VSLive event app. It covers key features, design steps, data handling, and the use of the panorama template in app development. The presentation is delivered by Raj Lal, a senior engineer at Nokia, providing insights into creating dynamic, data-driven applications.

1. Developing Apps for Nokia
Windows Phone
Level: Intermediate
Raj Lal
Senior Engineer, Nokia

2. Agenda
1. Key Features of Nokia Lumia
2. Windows Phone 7
3. Developing Apps for Lumia
– Creating a VSLive Event App

3. Key Features of
Nokia Lumia

4. Nokia Lumia 900

5. Key Features
Vibrant
LTE Hotspot Colors HD 720p
CP
4.3” AMOLED U Carl Zeiss 8
1.4 GHz FM

6. Windows Phone
on Lumia

8. Key Features
Video Chat
Metro Social Voice
Nokia
Bing Local Zune Drive

9. Developing Apps
for Lumia

10. Two Choices *
* You can have both in a single App

11. Two Choices *
Silverlight XNA
News, 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 both in a single App

12. Silverlight App

13. Silverlight App
3 Main layout Types

14. 3 Main Layout Types
Single Screen Panorama Pivot
Utility App Events, Restaurant App News App
RIA Style Heterogeneous list of List of
data similar data
Quick tool Display data, images, Display data
videos with date
At-a-glance view Personalization is Performance
is important important is important

15. Developing a
VSLive Event App

16. VSLive Event App
• Event
• Speakers
• Sessions
• Location
• My Schedule

17. Panorama

18. 3 Step in developing VSLive App

19. 1. Design

21. Step 1: Designing VSLive App
Application Background
Icon Tile Icon Splash Screen

22. Step 1: Designing VSLive App
Add / Create a
Cancel Schedule Map Icon

23. Step 1: Designing VSLive App
Panorama Background

24. Step 1: Designing the UI
• Event Page
• Speakers, Sessions
• Map
• Schedules

25. Event Page

26. Event Screen: Code

27. Event Screens

28. Event Screen: Code

29. Map Screens

30. Map Main Page: Code

31. Map : Code
MapView.SetView(Location, 12);
MapPushpin.Location = Event.Location;

32. Create a Schedule Screen(s)

33. Schedule Main Page: Code

34. Schedule Add Page: Code

35. 2. Data

36. Step 2: Getting the Data

37. Step 2: Getting the Static Data

38. Create an
Event
Object

39. Load
Event Data
from XML

40. Load
Event Data
from XML
using System.Xml.Linq;

41. Bind Event to App
IN XAML
Text="{Binding Path=Event.Name}"
…
Event.City
Event.Location
…

42. Step 2: Getting Dynamic Data
Schedules
•Load Schedules
•Save Schedules

44. Step 2: Getting Dynamic Data
Initialize Isolated Storage
IsolatedStorageFile file =
IsolatedStorageFile.GetUserStoreForApplicat
ion()
IsolatedStorageFileStream stream = new
IsolatedStorageFileStream("schedules.dat",
System.IO.FileMode.OpenOrCreate, file)

45. Step 2: Getting Dynamic Data
Load Schedules
DataContractSerializer serializer = new
DataContractSerializer(typeof(ObservableColl
ection<Schedule>));
Event.Schedules =
serializer.ReadObject(stream) as
ObservableCollection<Schedule>;

46. Step 2: Getting Dynamic Data
Save Schedules
DataContractSerializer serializer = new
DataContractSerializer(typeof(ObservableColl
ection<Schedule>));
serializer.WriteObject (stream,
Event.Schedules);

47. Step 2: Getting Resource Data
Resource
•Creating a Resource File
•Bind
•Use Resource

48. Creating a Resource File

49. Binding Resource File
public class LocalizedStrings
{
public LocalizedStrings() {}
private static vsliveapp.AppResources _
localizedResources = new _
vsliveapp.AppResources();
public vsliveapp.AppResources _
LocalizedResources {
get {return localizedResources; } }
}

50. Using the Resource
IN XAML
Text="{Binding
Path=LocalizedResources.Title}”
…
LocalizedResources.HeaderDescription
LocalizedResources.LocationWeb
…

51. 3. Method

52. Step 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;

54. Step 3: Creating View Models
ViewModels
•MainViewModel
•Item ViewModels
• EventData
• Schedules
• Sessions

55. Step 3: MainViewModel

56. Creating View Models: Schedules

57. Demo on Lumia 900

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

59. Thank You
Raj Lal
Twitter @ iRajLal