Razvoj Univerzalnih Windows aplikacija

Niko Vrdoljak, Techednikov@teched.hr

AgendaO Univerzalnim Windows aplikacijamaStrategije dijeljenja kodaDijeljeni projekti i/ili Portable Class Libraries?

Dijeljenje kodaKondicionalno kompajliranjeParcijalne klaseDependency Injection

Dijeljenje XAML-aDijeljenje stanja aplikacijeWindows App Studio

Universal Apps – što je to?

Konvergencija API-ja na Windows platformiWindows Runtime (WinRT) je dijeljeni runtime i API koje koriste Windows store aplikacije na Windows platformi

4

CommonWinRT APIs

Phone-specificWinRT APIs

Windows-specificWinRT APIs

Konvergencija u verziji 8.1• Cilj je 100%-na konvergencija u razvoju• U verziji 8.0, konvergencija je bila u oko 30% API-

ja• U verziji 8.1, konvergencija je u preko 90% API-ja

HTML

Win32

JavaScript Code

WinRT

C++ Code C#/VB Code

HTML XAML XAML

Windows Runtime XAML

WinJS .NET for Windows Store

Windows & Phone 8.1 aplikacije

C#/VB Code

Silverlight XAML

Silverlight .NET

Windows Phone Silverlight XAML

Windows & Windows Phone Windows Phone Only

: Univerzalne Aplikacije

Univerzalne aplikacijeAplikacije usklađene na Windows 8.1 i Windows Phone 8.1 platformama

Podrška Windows Runtime XAML sa C#, VB ili C++, te HTML s Javascript/WinJS

Univerzalne aplikacije se stvaraju preko Visual Studio projektnih predložaka ili konverzijom postojećih Windows Phone 8.1 ili Windows 8.1 aplikacija

Postojeće Windows 8.1 aplikacije mogu dobiti Windows Phone 8.1 projekt i shared project (i obrnuto)

Konverzija projekata u Univerzalni

Demo:Kreiranje Univerzalne aplikacije

Windows Phone 8.1 App Windows 8.1 App

XAML ViewPhone UI XAML ViewWindows UI

Shared Code, Images, Files

WinRT

‘Univerzalna aplikacija’ su zapravo dvije aplikacije, no one dijele puno toga

Strategije dijeljenja

Windows Phone 8.1 App Windows 8.1 App

XAML ViewXAML UI XAML ViewXAML UI

Koliko se zapravo može dijeliti?

View

ViewModel

Model

Logic Logic

Data Data

?

Logic

Data

Shared Project Filesvećina tipova datoteka

Portable Class LibraryLibraries & Windows Runtime Components

“Add As Link”

Dijeljenje koda

‘Shared’ ProjectDozvoljava dijeljenje kod među aplikacijamaNema binarnog rezultataPodržava sve tipove

Datoteke s kodomXAMLSlikeXML/JSONRESW (resursi)

Portable Class LibrariesZa Univerzalne Windows Aplikacije

Podržava WinRT API-je

Rezultat je WinRT komponentaPristupit joj mogu i C++ i Javascript aplikacije

“Add As Link”Slično Shared projektu

Arhitektura dijeljenja koda Separation of Concerns

Odvajanje UI od programske logikeUI se nalazi u Windows/Windows Phone projektima

+ platform specific API sets (geolocation, media, sensors)Logika je u Shared projektu

+ neke XAML komponente ako je moguće

Demo:Universal App + PCL

Rad s datotekama koje dijele kod

Windows 8.1 Windows Phone 8.1

Common WinRT APIs

neki API-ji de drugačije ponašaju na Windowsima ili Windows Phone-u

Windows Only WinRT

e.g. search contracte.g. multiple windowse.g. resizable windowse.g. printing support

Phone OnlyWinRT

e.g. action centere.g. status bare.g. back key handling

WinRT uzduž Windows+Phone 8.1

files & settings: local, temp, roaming, pickers…

network: http, websockets, sockets…

notifications: tiles, toasts, badges, push

store: app purchases, receipts…

sensors: gps, geofencing, gyro, compass…

lifecycle: launch, suspend, resume, background tasks

localisation: resource resolution from XAML/code…

Zajednički WinRT API-ji za Windows+PhonePrimjeri:

Neke WinRT API-je se drugačije koristi‘AndContinue’ APIs: npr. FileOpenPicker//Create the picker objectFileOpenPicker openPicker = new FileOpenPicker();openPicker.ViewMode = PickerViewMode.Thumbnail;openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

// Users expect to have a filtered view of their folders openPicker.FileTypeFilter.Add(".jpg");openPicker.FileTypeFilter.Add(".png");

// Open the picker for the user to pick a fileStorageFile file = await openPicker.PickSingleFileAsync();

if (file != null){ // Do something with the file...}

Windows //Create the picker objectFileOpenPicker openPicker = new FileOpenPicker();

// On Windows Phone, setting Filtering to image types // causes Picker to show Camera RollopenPicker.FileTypeFilter.Add(".jpg");

openPicker.FileTypeFilter.Add(".png");

// Open the picker for the user to pick a fileopenPicker.PickSingleFileAndContinue();

Windows Phone

Aplikacija suspendirana, moguće i ugašena

Aplikacija aktivirana nakon odabira datoteke

Neki WinRT API-ji su potpuno različitiMapping i GeoLocation

Moguće je razvijati univerzalnu aplikaciju, no potrebne su dodatne konverzije u kodu i crtanju mapa.

Geolocation 100%

Geofencing 100%

Geodata No: Location (Windows) vs. Geopoint (WP)

Map control No: Bing Maps (Windows) vs. WinRT Map control (WP)

#if kompajlerski uvjetiNasljeđivanje (Inheritance)Parcijalne klase (Partial classes)

Tehnike savladavanja razlika platformi

U dijelejnom kodu koristiti #if za uključenje koda koji barata razlikama između Windows i Phone-aWindows = WINDOWS_APPWindows Phone = WINDOWS_PHONE_APP

Npr: Samo Windows Phone ima „back” gumb

#if kompajlerski uvjeti

#if WINDOWS_PHONE_APP Windows.Phone.UI.Input.HardwareButtons.BackPressed += this.HardwareButtons_BackPressed;#endif

Dijeljenje koda: NaslijeđivanjeZajednička funkcionalnost u baznoj klasiU Shared projektu

Platform-specific kod u pod-klasiU W81 i WP81 projektu

Dobar način za razdvajanje funkcija specifičnih za platfomuKlasa se može označiti i kao abstract čime se tjerate da za svaku platformu implementirate specifične funkcionalnosti

Dijeljenje koda: Parcijalne klase i metodeZajednička funkcionalnost u jednoj datotecinpr.: DataSource.cs u Shared projktu

Platform specific kod u dodatnoj datotecie.g.: DataSource.WP.cs in the u WP81 projektu

Klase su označene kao parcijalne ali se kompajliraju u jednuOdvaja specifične funkcionalnosti po platformiParcijalne metode služe kao mehanizam za razdvajanje specifičnog koda

Dijeljenje koda: Parcijalne klase i metode/// <summary>/// DataSource.cs/// </summary>public partial class DataSource :IDataSource { public async Task<IEnumerable<IFolder>> RetrieveFolders(IFolder root) { ... // other logic var folders = await LoadFolders(root); ... // other logic return folders }}

/// <summary>/// DataSource.WP.cs/// </summary>public partial class DataSource { private async Task<IEnumerable<IFolder>> LoadFolders(IFolder root) { ... }}

Demo:Rad sa kodom specifičnim za platforme

Dijeljenje XAML-a

HERE maps on Windows (8.1)/Phone (8.0)

Podsjetnik: izgled i način korištenja su bitni

jednake, isto ponašanje

Button

Slider

ToggleSwitch

ProgressBar

Itd. (podosta)

zajedničke, različito korištenje

Hub

ListViewGridViewitd.

zajedničke, različito ponašanje

DatePicker

TimePickerCommandBarAppBaritd.

posebne

SearchBox

PivotContentDialogAutoSuggestBoxitd.

XAML kontrole na Windows+Phone 8.1

Dijeljene XAML komponenteUser ControlsCijele XAML stranice

Primjer tehnike:Korištenje Visual State Manager se brine o promjenama layouta#if WINDOWS_APP var result = VisualStateManager.GoToState(this, "Windows", false);#elif WINDOWS_PHONE_APP var result = VisualStateManager.GoToState(this, "WindowsPhone", false);#endif

XAML tehnike specifične za platformuKorištenje Resource Dictionaries zaSvaku platformuSadrži platform-specific stilove i data templates

Spaja ih App.xaml:<Application x:Class="FlickrSearch.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:FlickrSearch"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="CustomDictionary.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources></Application>

Definiranje specifičnih stilova i predložaka <ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:FlickrSearch"> <Style x:Key="MonTextblock" TargetType="TextBlock"> <Setter Property="Foreground" Value="DeepPink"></Setter> </Style> <DataTemplate x:Name="APhotoTemplate"> <Grid> <Image Source="{Binding Path}" VerticalAlignment="Top" /> <TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="28" Margin="10"/> </Grid> </DataTemplate></ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:FlickrSearch"> <Style x:Key="MonTextblock" TargetType="TextBlock"> <Setter Property="Foreground" Value="Red"></Setter> </Style> <DataTemplate x:Name="APhotoTemplate"> <Grid> <Image Source="{Binding Path}" VerticalAlignment="Top" /> </Grid> </DataTemplate></ResourceDictionary>

FlickrSearch.Windows/CustomDictionary.xaml

FlickrSearch.WindowsPhone/CustomDictionary.xaml

FlickrSearch.Shared/MainPage.xaml

<TextBlock Text="{Binding Title}" Style="{StaticResource MonTextblock}"/> <FlipView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource APhotoTemplate}">

Dijeljenje stanja na različitim uređajima:Roaming Data i OneDrive

Roaming Data

WP 8.1 App – PFN 12345

Roaming Local Temp

Windows App – PFN 12345

RoamingLocalTemp

PFN 12345Roaming

folder

Aplikacija piše korištenjem standardnih file/settings API-ja.

Sync engine peridično prebacuje podatke (user idle, battery, network, etc.)

OneDrive sprema do 100kb roaming podataka po aplikaciji (nisu uključeni u kvotu korisnika). Ako premaši, sync prestaje s radom.

Ostale klijente obavještava Windows Notification Service. Ako aplikacija radi, „event” se okida.Roaming

settings

Korištenje Roaming postavki

RoamingSettings su obični key-value dictionary u koji aplikacija sprema podatke.Podaci ostaju na uređaju i dijele se s ostalim uređajima.

Windows.Storage.ApplicationDataContainer roamingSettings = Windows.Storage.ApplicationData.Current.RoamingSettings;

// saving settings... roamingSettings.Values["userName"] = someData;

// fetching settings... if (roamingSettings.Values.ContainsKey("userName")) { userName = roamingSettings.Values["userName"].ToString(); }

Windows App Studio

Windows App Studio• Brz razvoj, za početnike• Web aplikacija - http://

appstudio.windows.com

1. Ideja – predlošci za: sportski tim, katalog proizvoda, gradski vodič…

2. Sadržaj – slike, video, RSS…3. Dizajn – boje, stilovi, live tiles, uvodni

ekran…4. Korištenje – app studio kreira i VS solution

Demo:Windows App Studio