Your SlideShare is downloading. ×
0
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Iasi code camp 12 october 2013   adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Iasi code camp 12 october 2013 adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences

221

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
221
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://www.appcup.eu/
  • Transcript

    • 1. Windows 8 and Windows Phone 8 two platforms, multiple experiences Adrian-Petre Marinică • adrian.marinic @adrianmarinica a@live.com adrian.marinica@maxcode.ro
    • 2. Agenda  Setting the expectations  Use Case  The platforms  Demo  Goals  The techy stuff
    • 3. Setting the expectations
    • 4. User expectations – What a good app should 1. Work fast 2. Be easy to understand & use 75% 74% 57% 3. Be well designed Speed Usability Yes Design No Data provided by http://www.uxbooth.com
    • 5. Use Case
    • 6. Use Case – The request  RSS reader with 5 IT related feeds.  Enable / disable feeds.  Ability to share application to friends.  Available on both platforms, W8 & WP8.
    • 7. Use Case – The request 1 Windows 8 app 1 Windows Phone 8 app
    • 8. Use Case – The goals  Similar functionality  Similar look & feel  Proper User Experience  Maximize code reuse
    • 9. The platforms
    • 10. The platforms Windows Phone 8 Windows 8  One handed touch  Guaranteed hardware (camera, accelerometer, etc.)  One column of content  Vertical scroll  Small app bar  Hardware back button  No semantic zoom  One or two-handed touch, mouse  No guarantee of any specific hardware, must check at run time  Multiple columns of content  Horizontal scroll  Larger app bar  On-screen back button  Semantic zoom
    • 11. The platforms  Resource management: similar  App lifecycles: similar
    • 12. The platforms – App Development  Windows 8 development  C# XAML  C++ XAML  JavaScript HTML  Windows Phone 8 development  C# XAML  C++ XAML (limited)
    • 13. The platforms – XAML Development  XAML = Extensible Application Markup Language  Control-based UI’s  XML type syntax  MVVM to the max
    • 14. The platforms – MVVM
    • 15. [DEMO]
    • 16. Use Case – The request & the goals     RSS reader with IT related feeds. Enable / disable feeds. Ability to share application to friends. Available on both platforms, W8 & WP8.     Similar functionality. Similar look & feel. Proper User Experience. Maximize code reuse.
    • 17. Maximize code reuse
    • 18. Maximize code reuse – The problem  We want to be fast.  We want to be efficient.  We want to reuse code in both apps.  Class libraries are not supported in W8 and WP8. 
    • 19. Maximize code reuse – The solution "...for those people who are writing .NET and want it to run on everything from Watches to Phones to Tablets to Xboxen to Desktops to the Cloud, they are enjoying what PCLs can offer." Scott Hanselman
    • 20. Portable Class Library (PCL)  Library-type project in VisualStudio  Used for building portable assemblies targeting multiple platforms at the same time.  Supports only a subset of features.
    • 21. Portable Class Library (PCL) – Target frameworks  .NET Framework .NET4+ or .NET4.0.3+ or .NET4.5  Silverlight SL4+ or SL5  Windows Phone WP7+ or WP7.5+ or WP8  .NET for Windows Store apps  Xbox 360
    • 22. Portable Class Library (PCL) – Features Feature .NET Framework Windows Store Silverlight Windows Phone Xbox 360 Core √ √ √ √ √ LINQ √ √ √ √ IQueryable √ √ √ 7.5 and higher Dynamic keyword Only 4.5 √ √ Managed Extensibility Framework (MEF) √ √ √ Network Class Library (NCL) √ √ √ √ Serialization √ √ √ √ Windows Communication Foundation (WCF) √ √ √ √ Model-View-View Model (MVVM) Only 4.5 √ √ √ Data annotations Only 4.0.3 and 4.5 √ √ XLINQ Only 4.0.3 and 4.5 √ √ System.Numerics √ √ √ √ √
    • 23. Portable Class Library (PCL) – MVVM implementation  MVVM Isolates the User Interface from the Business Logic.  Model and ViewModel implemented in a Portable Class Library.  Custom Views implemented separately in each project.
    • 24. XAML Controls
    • 25. XAML Controls  Mostly specific to platform.  Cannot be reused in multiple projects.  Can be reused in the same project.  Similar syntax between the two platforms.
    • 26. RSS Reader
    • 27. Classic RSS reader async Task<FeedData> GetAsync(string feedUri) { var client = new SyndicationClient(); var feedUri = new Uri(feedUriString); var feed = await client.RetrieveFeedAsync(feedUri); var articleList = new FeedData(); foreach (SyndicationItem item in feed.Items) { var article = ParseArticle(item); articleList.Items.Add(feedItem); } return articleList; }
    • 28. PCL RSS reader  Had to use HttpWebRequest   Had to use an AsyncCallback   Had to parse the XML manually   Managed to make it work 
    • 29. PCL RSS reader Request View Callback Feede r Xml feed Articles Parser
    • 30. Display the feeds in the UI
    • 31. Display feeds  Default App templates  Pivot App – Windows Phone 8  Split App – Windows 8  MVVM  One-Way data binding
    • 32. Display feeds void AddItemsToViewModel(List<Article> articles) { var collection = CreateCollection(articles); CoreApplication.MainView .CoreWindow .Dispatcher .RunAsync( CoreDispatcherPriority.Normal, () => _newsFeed.Add(collection)); }
    • 33. Display feeds void AddItemsToViewModel(List<Article> articles) { var collection = CreateCollection(articles); Deployment.Current .Dispatcher .BeginInvoke( () => _newsFeed.Add(collection)); }
    • 34. Manage settings
    • 35. Manage settings Windows 8  Added a UserControl  Accessible through the Settings charm  Two-way data binding Windows Phone 8  Added a Page  Accessible through the ApplicationBar  Two-way data binding
    • 36. Manage settings public ItemsPage() // constructor { SettingsPane.GetForCurrentView() .CommandsRequested += SettingsReq; } void SettingsReq(SettingsPane sender, object args) { var handler = new UICommandInvokedHandler(ShowPanel); var filter = new SettingsCommand("RSSFilter", "Manage feeds", handler); args.Request.ApplicationCommands.Clear(); args.Request.ApplicationCommands.Add(filter); }
    • 37. Manage settings void ShowSettings(object sender, EventArgs e) { this.NavigationService .Navigate(new Uri("/Settings.xaml", UriKind.Relative)); }
    • 38. Manage settings <StackPanel> <ToggleSwitch Header="General news feed" IsOn="{Binding ShowGeneral, Mode=TwoWay}" /> <ToggleSwitch Header="Gadgets news feed" IsOn="{Binding ShowGadgets, Mode=TwoWay}" /> <ToggleSwitch Header="Cars news feed" IsOn="{Binding ShowCars, Mode=TwoWay}" /> <ToggleSwitch Header="Health news feed" IsOn="{Binding ShowHealth, Mode=TwoWay}" /> <ToggleSwitch Header="Security news feed" IsOn="{Binding ShowSecurity, Mode=TwoWay}" /> </StackPanel>
    • 39. Manage settings <StackPanel> <toolkit:ToggleSwitch Content="General" IsChecked="{Binding ShowGeneral, Mode=TwoWay}" /> <toolkit:ToggleSwitch Content="Gadgets" IsChecked="{Binding ShowGadgets, Mode=TwoWay}" /> <toolkit:ToggleSwitch Content="Cars" IsChecked="{Binding ShowCars, Mode=TwoWay}" /> <toolkit:ToggleSwitch Content="Health" IsChecked="{Binding ShowHealth, Mode=TwoWay}" /> <toolkit:ToggleSwitch Content="Security" IsChecked="{Binding ShowSecurity, Mode=TwoWay}" /> </StackPanel>
    • 40. Share application to friends
    • 41. Share application to friends - Solutions  Windows 8  Enable share in application  Set application as share source  Windows Phone 8  Create a share task (email, link, status, SMS, etc.)  Set message details and launch
    • 42. Share app public ItemsPage() // the constructor { this.DataTransferManager .GetForCurrentView() .DataRequested += DataRequestedHandler; } void DataRequestedHandler(object sender, object args) { args.Request.Data.Properties.Title = "IT Feeder"; args.Request.Data.SetText("Go to the marketplace and download IT Feeder. It's great!"); }
    • 43. Share app args.Request.Data.SetText("Sample text"); args.Request.Data.SetBitmap(bitmapStream); args.Request.Data.SetData(format, genericData); args.Request.Data.SetHtmlFormat(htmlContent); args.Request.Data.SetRtf(rtfContent); args.Request.Data.SetStorageItems(filesAndFolders); args.Request.Data.SetWebLink(webLink);
    • 44. Share app void ShareApp() { var smsTask = new SmsComposeTask(); smsTask.Body = "Go to the marketplace and download IT Feeder. It's great!"; smsTask.Show(); }
    • 45. Summary
    • 46. Summary  Develop an app available on both platforms?    Doable: yes Easy: not all the time Limited: yes  Offer similar experience on both platforms?    Doable: yes Easy: yes Limited: sometimes Code [VAL UE] [VAL UE]  Reuse code?    Doable: to some extent Easy: yes Limited: oh, yeah! Not reused Reused
    • 47. Call for apps We support you to become the winner. Are you interested? Get in touch with us! Contact us on: facebook.com/CodeCampRO More info at: http://appcup.eu
    • 48. Questions? Questions? Questions? Questions? Questions? Questions? Questions? Questions?
    • 49. Thanks for attending!  Don’t forget to fill out your feedback forms.
    • 50. Links • • • • • • http://code.msdn.microsoft.com/windowsapps/RSS-Reader-affe3358 http://msdn.microsoft.com/en-us/magazine/dn296517.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465251.aspx http://msdn.microsoft.com/en-us/library/gg597391.aspx http://msdn.microsoft.com/en-us/library/vstudio/gg597391(v=vs.100).aspx http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj681690(v=vs.105).aspx • • http://code.msdn.microsoft.com/windowsapps/Windows-8-app-samples-3bea89c8 http://code.msdn.microsoft.com/wpapps/

    ×