Windows 8 and Windows Phone 8two platforms, multiple experiences

adrian.marinica@live.com

adrian.marinica@maxcode.ro

@adrianmarinica

Adrian-Petre Marinică

Setting the expectations Use Case The platforms Demo Goals The techy stuff

Agenda

Setting the expectations

1. Work fast

2. Be easy to understand & use

3. Be well designed

User expectations – What a good app should

Speed Usability Design

75% 74%

57%

Yes No

Data provided by http://www.uxbooth.com

Use Case

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.

WP8

W8

Use Case – The request

1 Windows Phone 8 app

1 Windows 8 app

Similar functionality

Similar look & feel

Proper User Experience

Maximize code reuse

Use Case – The goals

The platforms

The platforms

Windows Phone 8 One handed touch Guaranteed hardware

(camera, accelerometer, etc.)

One column of content Vertical scroll Small app bar Hardware back button No semantic zoom

Windows 8 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

The platforms

Resource management: similar

App lifecycles: similar

The platforms – App Development

Windows 8 development C# XAML C++ XAML JavaScript HTML

Windows Phone 8 development C# XAML C++ XAML (limited)

The platforms – XAML Development

XAML = Extensible Application Markup Language

Control-based UI’s

XML type syntax

MVVM to the max

The platforms – MVVM

[DEMO]

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.

Use Case – The request & the goals

Maximize code reuse

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.

Maximize code reuse – The problem

Scott Hanselman

"...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."

Maximize code reuse – The solution

Library-type project in VisualStudio

Used for building portable assemblies targeting multiple platforms at the same time.

Supports only a subset of features.

Portable Class Library (PCL)

.NET Framework .NET4+ or .NET4.0.3+ or .NET4.5

Silverlight SL4+ or SL5

Windows PhoneWP7+ or WP7.5+ or WP8

.NET for Windows Store apps Xbox 360

Portable Class Library (PCL) – Target frameworks

Feature .NET Framework Windows Store Silverlight Windows

PhoneXbox 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 √ √ √

Portable Class Library (PCL) – Features

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.

XAML Controls

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.

RSS Reader

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;}

Had to use HttpWebRequest

Had to use an AsyncCallback

Had to parse the XML manually

Managed to make it work

PCL RSS reader

PCL RSS reader

ParserViewXml feed

Articles

Feeder

Request

Callback

Display the feeds in the UI

Default App templates Pivot App – Windows Phone 8 Split App – Windows 8

MVVM

One-Way data binding

Display feeds

W8

Display feedsvoid AddItemsToViewModel(List<Article> articles){ var collection = CreateCollection(articles);

CoreApplication.MainView .CoreWindow .Dispatcher .RunAsync(

CoreDispatcherPriority.Normal, () => _newsFeed.Add(collection)); }

WP8

Display feedsvoid AddItemsToViewModel(List<Article> articles){ var collection = CreateCollection(articles); Deployment.Current .Dispatcher .BeginInvoke( () => _newsFeed.Add(collection));}

Manage settings

Windows 8

Added a UserControl Accessible through

the Settings charm Two-way data binding

Manage settings

Windows Phone 8

Added a Page Accessible through the

ApplicationBar Two-way data binding

W8 WP8

W8

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);}

WP8

Manage settings void ShowSettings(object sender,

EventArgs e){ this.NavigationService .Navigate(new Uri("/Settings.xaml", UriKind.Relative));}

W8

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>

WP8

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>

Share application to friends

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

W8

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!");}

W8

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);

WP8

Share appvoid ShareApp(){ var smsTask = new SmsComposeTask();

smsTask.Body = "Go to the marketplace and download IT Feeder.

It's great!";

smsTask.Show();}

Summary

Summary

72%

28%

Code

Not reused Reused

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

Reuse code? Doable: to some extent Easy: yes Limited: oh, yeah!

Call for apps

We support you to become the winner. Are you interested? Get in touch with us!

Contact us on: facebook.com/CodeCampROMore info at: http://appcup.eu

Questions?

Questions?

Questions?

Questions?

Questions?

Questions?

Questions?

Questions?

Thanks for attending!

Don’t forget to fill out your feedback forms.

• 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/

Links