Learn to develop Mobile Apps for Nokia Windows Phone Lumia. See what's unique about the Nokia Windows Phone also known as the "First Real Windows Phone". Create some snazzy graphics and animation using XAML. The session with Live Demo on Nokia Windows Phone Lumia. You will learn: Windows Phone Development on Nokia Phone Key features of Nokia Windows Phone Lumia See a working demo with advanced graphics

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