This document discusses Universal Windows Platform (UWP) apps and how they can be developed to run across Windows and Windows Phone platforms. It covers topics such as conditional compilation, shared code and resources, platform-specific APIs, and achieving convergence in the Windows 8.1 and Windows Phone 8.1 versions. UWP apps allow separating user interface from program logic and accessing common WinRT APIs from different languages like C++ and JavaScript.

1. Razvoj Univerzalnih Windows aplikacija
Niko Vrdoljak, Teched
nikov@teched.hr

2. Kondicionalno kompajliranje
Parcijalne klase
Dependency Injection

4. Windows Runtime (WinRT) je dijeljeni
runtime i API koje koriste Windows store
aplikacije na Windows platformi
4
Common
WinRT APIs
Phone-specific
WinRT APIs
Windows-specific
WinRT 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

5. HTML
Win32
JavaScript Code
WinRT
C++ Code C#/VB Code
HTML XAML XAML
Windows Runtime XAML
WinJS
.NET for Windows
Store
C#/VB Code
Silverlight XAML
Silverlight .NET
Windows Phone
Silverlight XAML

9. Windows Phone 8.1 App Windows 8.1 App
XAML View
Phone UI
XAML View
Windows UI
Shared Code, Images, Files
WinRT

11. Windows Phone 8.1 App Windows 8.1 App
XAML View
XAML UI
XAML View
XAML UI
Logic Logic
Data Data
?
Logic
Data

12. većina tipova datoteka
Libraries & Windows Runtime Components

13. Datoteke s kodom
XAML
Slike
XML/JSON
RESW (resursi)

14. Podržava WinRT API-je
Pristupit joj mogu i C++ i Javascript aplikacije

16. Odvajanje UI od programske logike
+ platform specific API sets (geolocation, media, sensors)
+ neke XAML komponente ako je moguće

19. Windows 8.1 Windows Phone 8.1
neki API-ji de drugačije ponašaju na Windowsima ili Windows Phone-u
Windows Only
WinRT
e.g. search contract
e.g. multiple windows
e.g. resizable windows
e.g. printing support
Phone Only
WinRT
e.g. action center
e.g. status bar
e.g. back key handling

20. 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…

21. //Create the picker object
FileOpenPicker 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 file
StorageFile file =
await openPicker.PickSingleFileAsync();
if (file != null)
{
// Do something with the file...
}
//Create the picker object
FileOpenPicker openPicker = new FileOpenPicker();
// On Windows Phone, setting Filtering to image types
// causes Picker to show Camera Roll
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".png");
// Open the picker for the user to pick a file
openPicker.PickSingleFileAndContinue();

22. 100%
100%
No: Location (Windows) vs. Geopoint (WP)
No: Bing Maps (Windows) vs. WinRT Map control (WP)

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

27. /// <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) {
...
}
}

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

31. jednake,
isto ponašanje
Button
Slider
ToggleSwitch
ProgressBar
Itd. (podosta)
zajedničke,
različito korištenje
Hub
ListView
GridView
itd.
zajedničke,
različito ponašanje
DatePicker
TimePicker
CommandBar
AppBar
itd.
posebne
SearchBox
Pivot
ContentDialog
AutoSuggestBox
itd.

32. #if WINDOWS_APP
var result = VisualStateManager.GoToState(this, "Windows", false);
#elif WINDOWS_PHONE_APP
var result = VisualStateManager.GoToState(this, "WindowsPhone", false);
#endif

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

34. <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>
<TextBlock Text="{Binding Title}"
Style="{StaticResource MonTextblock}"/>
<FlipView ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource APhotoTemplate}">

36. WP 8.1 App – PFN 12345
Roaming Local Temp
Windows App – PFN 12345
RoamingLocalTemp
PFN 12345
Roaming
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

37. 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();
}

39. •
• http://appstudio.windows.com
1.
2.
3.
4.