Windows 8 and Windows Phone 8
two platforms, multiple experiences
Adrian-Petre Marinică

• adrian.marinic
@adrianmarinica
...
Agenda
 Setting the expectations
 Use Case
 The platforms
 Demo
 Goals
 The techy stuff
Setting the expectations
User expectations – What a good app should
1. Work fast
2. Be easy to understand & use

75%

74%

57%

3. Be well designed...
Use Case
Use Case – The request
 RSS reader with 5 IT related feeds.
 Enable / disable feeds.

 Ability to share application to ...
Use Case – The request

1 Windows 8 app

1 Windows Phone 8 app
Use Case – The goals
 Similar functionality
 Similar look & feel

 Proper User Experience
 Maximize code reuse
The platforms
The platforms
Windows Phone 8

Windows 8

 One handed touch
 Guaranteed hardware
(camera, accelerometer, etc.)
 One col...
The platforms

 Resource
management: similar
 App lifecycles: similar
The platforms – App Development
 Windows 8 development
 C# XAML
 C++ XAML
 JavaScript HTML

 Windows Phone 8 developm...
The platforms – XAML Development
 XAML = Extensible Application Markup Language
 Control-based UI’s

 XML type syntax
...
The platforms – MVVM
[DEMO]
Use Case – The request & the goals





RSS reader with IT related feeds.
Enable / disable feeds.
Ability to share app...
Maximize code reuse
Maximize code reuse – The problem
 We want to be fast.
 We want to be efficient.

 We want to reuse code in both apps.
...
Maximize code reuse – The solution

"...for those people who are writing .NET and want
it to run on everything from Watche...
Portable Class Library (PCL)
 Library-type project in VisualStudio
 Used for building portable assemblies targeting mult...
Portable Class Library (PCL) – Target frameworks
 .NET Framework
.NET4+ or .NET4.0.3+ or .NET4.5

 Silverlight
SL4+ or S...
Portable Class Library (PCL) – Features
Feature

.NET Framework

Windows
Store

Silverlight

Windows Phone

Xbox
360

Core...
Portable Class Library (PCL) – MVVM
implementation
 MVVM Isolates the User
Interface from the
Business Logic.

 Model an...
XAML Controls
XAML Controls
 Mostly specific to platform.
 Cannot be reused in multiple projects.

 Can be reused in the same project...
RSS Reader
Classic RSS
reader

async Task<FeedData> GetAsync(string feedUri)
{
var client = new SyndicationClient();
var feedUri = ne...
PCL RSS reader
 Had to use HttpWebRequest 
 Had to use an AsyncCallback 

 Had to parse the XML manually 
 Managed ...
PCL RSS reader

Request

View

Callback

Feede
r

Xml feed
Articles

Parser
Display the feeds in the UI
Display feeds
 Default App templates
 Pivot App – Windows Phone 8
 Split App – Windows 8

 MVVM
 One-Way data binding
Display feeds

void AddItemsToViewModel(List<Article> articles)
{
var collection = CreateCollection(articles);
CoreApplica...
Display feeds

void AddItemsToViewModel(List<Article> articles)
{
var collection = CreateCollection(articles);
Deployment....
Manage settings
Manage settings
Windows 8

 Added a UserControl
 Accessible through the
Settings charm
 Two-way data binding

Windows P...
Manage settings

public ItemsPage() // constructor
{
SettingsPane.GetForCurrentView()
.CommandsRequested += SettingsReq;
}...
Manage settings

void ShowSettings(object sender, EventArgs e)
{
this.NavigationService
.Navigate(new Uri("/Settings.xaml"...
Manage settings

<StackPanel>
<ToggleSwitch Header="General news feed"
IsOn="{Binding ShowGeneral, Mode=TwoWay}" />
<Toggl...
Manage settings

<StackPanel>
<toolkit:ToggleSwitch Content="General"
IsChecked="{Binding ShowGeneral, Mode=TwoWay}" />
<t...
Share application to friends
Share application to friends - Solutions
 Windows 8
 Enable share in application
 Set application as share
source

 Wi...
Share app

public ItemsPage() // the constructor
{
this.DataTransferManager
.GetForCurrentView()
.DataRequested += DataReq...
Share app

args.Request.Data.SetText("Sample text");

args.Request.Data.SetBitmap(bitmapStream);
args.Request.Data.SetData...
Share app

void ShareApp()
{
var smsTask = new SmsComposeTask();
smsTask.Body = "Go to the marketplace and
download IT Fee...
Summary
Summary
 Develop an app available on both platforms?




Doable: yes
Easy: not all the time
Limited: yes

 Offer simi...
Call for apps
We support you to become the winner.
Are you interested? Get in touch with us!

Contact us on: facebook.com/...
Questions?
Questions?

Questions?

Questions?
Questions?

Questions?

Questions?

Questions?
Thanks for attending! 
Don’t forget to fill out your feedback forms.
Links
•
•
•
•
•
•

http://code.msdn.microsoft.com/windowsapps/RSS-Reader-affe3358
http://msdn.microsoft.com/en-us/magazine...
Upcoming SlideShare
Loading in …5
×

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

425 views

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
425
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://www.appcup.eu/
  • Iasi code camp 12 october 2013 adrian marinica - windows 8 and windows phone 8 two platforms, multiple experiences

    1. 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. 2. Agenda  Setting the expectations  Use Case  The platforms  Demo  Goals  The techy stuff
    3. 3. Setting the expectations
    4. 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. 5. Use Case
    6. 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. 7. Use Case – The request 1 Windows 8 app 1 Windows Phone 8 app
    8. 8. Use Case – The goals  Similar functionality  Similar look & feel  Proper User Experience  Maximize code reuse
    9. 9. The platforms
    10. 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. 11. The platforms  Resource management: similar  App lifecycles: similar
    12. 12. The platforms – App Development  Windows 8 development  C# XAML  C++ XAML  JavaScript HTML  Windows Phone 8 development  C# XAML  C++ XAML (limited)
    13. 13. The platforms – XAML Development  XAML = Extensible Application Markup Language  Control-based UI’s  XML type syntax  MVVM to the max
    14. 14. The platforms – MVVM
    15. 15. [DEMO]
    16. 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. 17. Maximize code reuse
    18. 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. 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. 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. 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. 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. 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. 24. XAML Controls
    25. 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. 26. RSS Reader
    27. 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. 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. 29. PCL RSS reader Request View Callback Feede r Xml feed Articles Parser
    30. 30. Display the feeds in the UI
    31. 31. Display feeds  Default App templates  Pivot App – Windows Phone 8  Split App – Windows 8  MVVM  One-Way data binding
    32. 32. Display feeds void AddItemsToViewModel(List<Article> articles) { var collection = CreateCollection(articles); CoreApplication.MainView .CoreWindow .Dispatcher .RunAsync( CoreDispatcherPriority.Normal, () => _newsFeed.Add(collection)); }
    33. 33. Display feeds void AddItemsToViewModel(List<Article> articles) { var collection = CreateCollection(articles); Deployment.Current .Dispatcher .BeginInvoke( () => _newsFeed.Add(collection)); }
    34. 34. Manage settings
    35. 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. 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. 37. Manage settings void ShowSettings(object sender, EventArgs e) { this.NavigationService .Navigate(new Uri("/Settings.xaml", UriKind.Relative)); }
    38. 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. 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. 40. Share application to friends
    41. 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. 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. 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. 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. 45. Summary
    46. 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. 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. 48. Questions? Questions? Questions? Questions? Questions? Questions? Questions? Questions?
    49. 49. Thanks for attending!  Don’t forget to fill out your feedback forms.
    50. 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/

    ×