razvoj univerzalnih windows aplikacija
TRANSCRIPT
Razvoj Univerzalnih Windows aplikacija
Niko Vrdoljak, [email protected]
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