Win10 summer dev camp

Windows 10
Summer DevCamp
Jimmy Engström Jessica Engström
jimmy@apeoholic.se jessica@catoholic.se
@apeoholic @grytlappen

http://windows.Microsoft.com
Om oss

Coding After Work
www.CodingAfterWork.se

Agenda
Introduktion
Ett Windows | flera enheter
Data bindningar
Traditionellt | kompilerat
Adaptiv Design & UI
Designspråk | XAML UI
Adaptiv kod
Anpassa koden
Labbar & fri kodning
Testa olika labbar || egna projekt

Agenda
En plattform
Ett Windows
Massor med enheter
Utvecklarupplevelse
Verktygen
.Net Native
Template 10
http://aka.ms/template10

Windows Core
Refaktorerad gemensam kärna
En hårdvaruplatform
Universiella hårdvarudrivrutiner
Standard nätverk och I/O
Phone
Device
Xbox
Device
Desktop
Device
Windows Core
Desktop
SKU
Phone
SKU
Xbox
SKU

Ett Windows
Desktop
SKU
PC
2 in 1
Mobile
SKU
Tablet
Phablet
Phone
Xbox
SKU
Xbox
IoT
SKU
Band
IoT headless
SKU
Raspberry Pi
Home
Automation
Surface Hub
SKU
Surface Hub
Holographic
SKU
HoloLens

Varje enhetsfamilj (SKU) lägger till
funktioner

Easy for users to get
& stay current
Unified core
and app platform
Resan till sammanslagning
Windows Phone 7.5
Windows Phone 8
Windows
Phone 8.1
Windows 8
Xbox One
Windows on Devices
Xbox 360
Windows 8.1
Windows 10
Converged
OS kernel
Converged
app model

Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-OnesPhablet Large Tablet
Classic
Laptop
Xbox IoTSurface Hub Holographic
Windows 10

En Store +
Ett Dev Center
Återanvänd
existerande
kodEn SDK +
utvecklingsmiljö
Adaptivt
User Interface
Naturliga
Användarinmatningar
En Universell Windows Plattform

Universal Windows Platform
ETT API-”kontrakt”
En garanterad samling av kontrakt
Samma på alla enheter
Phone
Device
Xbox
Device
Desktop
Device
Windows Core

Universella Windows-plattformen
kan uppdatera i egen takt

Windows app
Phone
Device
Xbox
Device
Desktop
Device
Windows Core
Windows App

Windows app
En binär
Kan köra på alla enheter
Phone
Device
Xbox
Device
Desktop
Device
Windows Core
Windows App

Utvecklarupplevelse
iOS,
iPhone & iPad
Android,
Enheter som har stöd
Windows 8,
Respektive enhet (telefon & dator)
Windows 10
Alla enheter

Plattformstillägg
Enhetsspecifika API
Familje-specifika funktioner
Kompatibla över alla enheter
Phone
Device
Xbox
Device
Desktop
Device
Windows Core
Windows App
Phone
extension
Xbox
extension
Desktop
extension

Tillägg gör inte att binären slutar
fungera på andra enheter

Traditionell Microsoft teknologi är
inte det enda sättet att skapa
Windows appar

Windows 10
operativsystem
C++
.Net
languages
MFCWFWPF
.Net
runtime

Windows 10
operativsystem
WWAC++
& CX
.Net
languages
HTML
DirectX
XAML
C++
.Net
languages
MFCWFWPF
.Net
runtime

Windows 10
operativsystem
Bridging technologies
Win32
desktop
Web
hosted
Java
Android
Obj.C
iOS
WWAC++
& CX
.Net
languages
HTML
DirectX
XAML
C++
.Net
languages
MFCWFWPF
.Net
runtime

Bridges kommer att få fler appar
till Windows Plattformen

Adaptiv design
Responsiv design
Flexibel layout som reagerar på små ändringar
Många kontroller hanterar responsivitet automatiskt

Adaptiv design
Responsiv design
Flexibel layout som reagerar på små ändringar
Många kontroller hanterar responsivitet automatiskt
Adaptiv design
Smart layout som reagerar på stora förändringar
Använd Visual states
Skräddarsydd design
Enhetsspecifik design
Vissa enheter har ett specifikt designspråk

Continuum for Convertibles and PhonesContinuum

Adaptiv kod
En kompatibel binär för olika enheter
Universiellt api med enhetsspecifik kod
Ändra din app baserat på egenskaper
Fråga om din app har stöd för funktioner och namespaces

En enkel, enad utvecklingmiljö

Visual Studio IDE
Alla projekttyper
Desktop, Windows, Telefon, Service, Webb, Spel, m.m…
Alla utvecklaruppgifter
Editera kod, Arikitekt design, UX design, Debug, Profilering, Utvärdering, Test, m.m…
Alla språk
C++/CX, C#, Visual Basic, JavaScript, XAML, HTML, m.m…
Visual Studio Online
Källkodshantering, projekthantering, spåra buggar, m.m…

Blend för Visual Studio
XAML utvecklingmiljö
Alltid en del av Visual studio
Använder Visual studio-skal
Full auto-complete & intellisense
• Validation
• Snippets
• Peek
Fil & solution-managering
Resurs-managering
Data-managering
Animationer
States

Visual Studio 2015 versioner
Enterprise
arkitektmodelering, Diagnostics, VSO/ALM & Release Management
Professional
Architecture Validation, VSO/ALM & Feedback Management
Community Editions
Visual Studio Professional Edition

Developer unlock

Uteckla var?
Windows 10
Kräver Visual Studio 2015
Windows 8.1 & Windows Server 2012 R2
Visual studio designer fungerar inte
Debugging kräver en Windows 10 enhet eller Remote Debugging-verktyg

Managed språk är bättre än
någonsin

.NET Native
Nästa generation kompilator i molnet
Alla windows appar, endast Windows appar (just nu)
Appar avänder sig av standrard C++ optimering
.Net natives prestanda förbättras i takt med C++ optimizer
Appar med .Net bootstrapper
Inkluderar garbage collection
Ingen runtime
Detta är maskinkod

Alla Windows appar kommer bli
kompilerade till .Net Native

Uppsidorna med .Net Native
50% snabbare uppstartstid
14% mindre minne

“Template 10”
Ny tom mall
Innehåller få filer och tomma mappar för att hjälpa till med konventioner
Liknar MVC-mallen
Tillägg kommer att lösa vanliga problem
Löser 90%
Koden löser 90% av alla användarfall
Levereras med Windows 10
Mallen finns på Github och är under konstruktion

Bidra till Template10

Summering
En plattform
Ett Windows
Flera olika enheter
Utvecklarupplevelse
Windows verktyg
.Net Native
Template 10

Agenda
Klassiska bindningar
Kompilerade bindingar

Strängar

Dynamisk Data
Använd databindningar för att hämta dynamisk
data

Uppdatera gränssnittet
INotifyPropertyChanged
Implementera i en vymodell
Körs på en vymodell om en egenskap förändras
INotifyCollectionChanged
Implementeras i ObservableCollection<T> och ReadOnlyObservableCollection<T>
Körs när en kollektion förändras.

Syntax
<TextBox Text="{Binding
Converter
ConverterLanguage
ConverterParameter

Syntax
Converter
ConverterLanguage
ConverterParameter
ElementName
FallbackValue
Mode
(OneTime,OneWay,TwoWay)

Syntax
Converter
ConverterLanguage
ConverterParameter
ElementName
FallbackValue
Mode
(OneTime,OneWay,TwoWay)
UpdateSourceTrigger
(Explicit,Default,
PropertyChanged )
}

Klassisk
Binding
Kompilerad
Binding

x:Bind
Kompilerad binding
Bindingar kompileras
Starkt typade bindingar
Duck-binding stöds inte
Standard är OneTime
OneWay och TwoWay finns fortfarande
Standard bindingssätt
INotifyPropertyChanged, IObservableVector, INotifyCollectionChanged

Data context för x:Bind
är den bakomliggande koden

Syntax
Converter
ConverterLanguage
ConverterParameter
ElementName
FallbackValue
Mode
Path
RelativeSource
Source
TargetNullValue
UpdateSourceTrigger}
<TextBox Text="{x:Bind
Converter
ConverterLanguage
ConverterParameter
ElementName
FallbackValue
Mode
Path
RelativeSource
Source
TargetNullValue
UpdateSourceTrigger}

Syntax skillnader
public HeroViewModel ViewModel { get; set; }
public HeroView()
{
this.InitializeComponent();
this.DataContextChanged += HeroView_DataContextChanged;
}
private void HeroView_DataContextChanged(FrameworkElement sender,
DataContextChangedEventArgs args)
{
ViewModel = (HeroViewModel)this.DataContext;
}

Syntax skillnader
<GridView ItemsSource="{Binding Heros}">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding AlterEgoName}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView ItemsSource="{x:Bind ViewModel.Heros}" xmlns:m="using:BindingDemo.Models">
<GridView.ItemTemplate>
<DataTemplate x:DataType="m:Hero">
<TextBlock Text="{x:Bind AlterEgoName}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

ResourceDictionary
<ResourceDictionary
x:Class="MyNamespace.MyTemplates"
xmlns:model="using:xBindSampleModel">
<DataTemplate
x:Key="MyTemplate"
x:DataType="model:Employee">
<TextBlock Text="{x:Bind Name}" />
</DataTemplate>
</ResourceDictionary>
namespace MyNamespace
{
public class MyTemplates
{
public MyTemplates()
{
InitializeComponent();
}
}
}

Referera till en Dictionary
</UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<local:MyTemplates/>
<ResourceDictionary Source="filename" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>

Använd Bindings.Update()
för asynkron data

Bindning för händelser
<Button Click="PokeEmployee“/>Poke Emplo
<Button Click="{x:Bind ViewModel.Poke}“/>Poke Employee
Signatur
Utan parametrar- void Poke()
Matcha eventparametrar - void Poke(object sender, RoutedEventArgs e)
Alla event går att använda:
Kan ersätta ICommand & EventToCommand
Notera: Inkluderar inte parmetrar eller CanExecute

Bindings.StopTracking()
pausar kompilerad bindning

Vanliga frågeställningar
RelativeSource = Self & ElementName
Referera element med namn Text="{x:Bind MyElement.Text}"
UpdateSourceTrigger = PropertyChanged
Det finns inte UpdateSourceTrigger med x:Bind
Source / DataContext
Lägg till en Viewmodel i din code-behind

{x:Bind} är inte för alla lägen (än)

När använder man klassisk binding?
Duck Typing
Text=“{Binding Age}” fungerar för både PersonModel & WineModel
Otypat
Använd {Binding} med JSON eller andra otypade objekt
Code-behind binding
Kan inte lägga till eller ta bort {x:Bind} vid körning
Använd i style
{x:Bind} Kan inte användas vid Style-setters
{x:Bind} Kan användas i en DataTemplate som är definerad i en style

x:Bind Kan användas i de flesta fall

Summering
Klassisk binding
Kompilerad binding

Vi fortsätter strax med Adaptiv Design & UI

Agenda
Microsoft design language
Adaptiv design
Designupplägg
Adaptiva verktyg

Microsoft designspråk principer
Keep it Simple

Keep it Simple
Think Universal

Keep it Simple
Think Universal
Design as One

Keep it Simple
Think Universal
Design as One
Make it Personal

Keep it Simple
Think Universal
Design as One
Make it Personal
Create Delight

Typeography

För text, använder vi mest
15 epx Segoe UI Regular

2px
Iconography

Minimera tomrum mellan element

Fyra är ett magiskt nummer

Färgramper

Tre sätt att anpassa
Responsiv design
Ändra storlek på ditt innehåll
Ändra flöde på ditt innehåll

Responsiv design
Adaptiv design
Positionera om ditt innehåll
Designa om ditt innehåll

Ändra storlek

Ändra flöde

Ändra position

Ändra design

Adaptiv design
Phone (portrait)
Tablet (landscape) / Desktop

Bygg sidor/kod för respektive enhets-familj
Gränsnitt för en hand?
if (physical_diagonal_size <= 7)
// optimized for one-handed operation
rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments);
else
rootFrame.Navigate(typeof(MainPage), e.Arguments);

Phone (portrait)
Tablet (landscape) / Desktop

Kombinera teknikerna för just din
design

Adaptiva kontroller

Intelligent input

Skalningsalgoritm

Fysiska pixlar vs effektiva pixlar
4” Mobil
480x854
5” Mobil
720x1280
6” Mobil
1080x1920
4” Mobil
480x854
5” Mobil
720x1280
6” Mobil
1080x1920

Effektiv pixel
Effektiv PixelFysisk Pixel

Ignorera skalning, upplösning, &
dpi.
Designa med Effektiva Pixlar

Planera din design
Mobiler
Läsavstånd: 16.3”
Plattor och 2-i-1
Läsavstånd :
20”
Små och stora Laptoppar
Läsavstånd :
24.5”
Små och stora stationära bildskärmar
Läsavstånd :
28”
TV
Läsavstånd :
84”
5” 8” 13”

Brytpunkter
phablet &
platta
stationär
pc
telefon
• Begränsatstödförlandscape
• En“frame”itaget
• Systemfältettillvänster
• Steeringwheelontheright
• 4+kommandonlängstner
• Flikarcentrerade
• Begränsatstödförlandscape
• EnbildrutaItaget
• Systemfältettillvänster
• steeringwheelontheright
• 4+actionslängstner
• Enskildkolumnslutarskala
• Flikarcentrerade
• Fulltstödförlandscape
• Två“frames”
• Kommandonöverst
• “…”visashelatiden-TBD
• Flikarvänsterjusterade
• Visasökfältetomdettidigare
baravarenikonpåenmindre
enhet
• Fulltstödförlandscape
• Tre“frames”
• Kompaktnavigationspanel
• Kommandonöverst
• “…”visashelatiden
• Flikarvänsterjusterade
548 720 1024320epx

Flöda, inte storlek
My UI My UI My UI

Flöda, inte storlek
My UI My UI My UI
My UI
My UI My UI

Kolla varianter

När du designar
1. Anpassa till storleksförändringar
2. Anpassa till inputsätt
3. Bygg för effektiva pixlar
4. Räkna med skalningsalgoritmen

Visual States
Definera XAML vyer
Unik layout för specifika states

Visual States
Definera XAML vyer
Unik layout för specifika states
Förekla animation
Lägg automatiskt till state transitions
Bygg i Blend
Designa och förhandsgranska states och transitions

Visual States

“Visual states” låter designers
definera flera utseenden på en vy

Skräddarsydda adaptiva triggers
Bygg för att hantera specialfall.
public class DeviceFamilyTrigger : StateTriggerBase
{
private string _deviceFamily;
public string DeviceFamily
{
get { return _deviceFamily; }
set
{
var qualifiers = Windows.ApplicationModel.Resources.Core
.ResourceContext.GetForCurrentView().QualifierValues;
if (qualifiers.ContainsKey("DeviceFamily"))
SetActive(qualifiers["DeviceFamily"] == (_deviceFamily = value));
else
SetActive(false);
}
}
}

Utvecklare har många verktyg att
bygga ett adaptivt gränssnitt med

Summering
Adaptiv design
Designupplägg

Summering
Adaptiv design
Designupplägg
Adaptiva verktyg

Vi fortsätter strax med Adaptiv kod

Agenda
Windows 8.1 en tillbakablick
Plattform Extension SDKs
Adaptiv kod
Adaptiv kod och API Versioner
Delade Projekt

Vad är Adaptiva Appar?
Windows appar anpassar sig till olika
Plattformsversioner
Enhetstyper
Skärmstorlekar
“Adaptivt UI” hanterar olika skärmar
“Adaptivt kod” kan aktivera din app så den bara kör kod när det kör
på en specifik enhet och/eller specifik version av plattform/enhets
specifika API:er

Windows 8.1 Universal
Delad kod, två binärer
Windows
Binary Phone
Binary

Alla API:er fanns inte överallt

Compilation directives
C# Syntax
#if WINDOWS_PHONE_APP
Windows.Phone.UI.Input.HardwareButtons.BackPressed +=
HardwareButtons_BackPressed;
#endif
C++ Syntax
#if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
_backPressedEventToken = HardwareButtons
::BackPressed += ref new EventHandler
<BackPressedEventArgs^> (this,
&NavigationHelper::HardwareButton_BackPressed);
#endif

Windows universal
Desktop
PC
2 in 1
Mobile
Tablet
Phablet
Phone
Xbox
Xbox
IoT
Band
IoT headless
Raspberry Pi
Home
Automation
Surface Hub
Surface Hub
Holographic
HoloLens

EN API-gränsnittsyta
En garanterad gränssnittsyta
Samma på alla enheter
Phone
Device
Xbox
Device
Desktop
Device
Windows Core

Enhetsfamilj beroende
Beroende på en enhets familj:
<Dependencies>
<TargetDeviceFamily Name="Windows.Universal"
minVersion="10.0.10069.0" maxVersionTested="10.5.0.0" />
</Dependencies>
Mer än en:
<Dependencies>
<TargetDeviceFamily Name="Windows.Desktop"
<TargetDeviceFamily Name="Windows.Universal"
</Dependencies>

Adding extensions

Extension SDKs
Desktop Mobile Xbox More…

Extension SDKs
UWP
Windows Core Windows Core Windows Core Windows Core
UWP UWP UWP
Desktop Mobile Xbox More…

Testing for capabilities
IsApiContractPresent
IsEnumNamedValuePresent
IsEventPresent
IsMethodPresent
IsPropertyPresent
IsReadOnlyPropertyPresent
IsTypePresent
IsWriteablePropertyPresent
Windows.Foundation.Metadata.ApiInformation

Test capabilities at runtime
var api = "Windows.Phone.UI.Input.HardwareButtons";
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(api))
{
Windows.Phone.UI.Input.HardwareButtons.CameraPressed
+= CameraButtonPressed;
}

ApiInformation API:t testar
efter egenskaper vid körning.

Vilka Extension SDKs behöver jag?
Många appar behöver inte Extension SDK alls
Använd Extension SDKs för att utmärka din app när
den kör på en specifik enhets-familj

Hantera back utan extension
SystemNavigationManager.GetForCurrentView().BackRequested

Identifiera Extension SDK
MSDN docs:

Utforska API Kontrakt

De enhets-familjer du väljer avgör
vilka api:er du kan använda

Använd en specifik version av ett API
Adaptiv kod, inte bara för att hantera enhetsfamilj-
specifik kod
Skriv din kod mot en bas UWP version
Hantera uppdateringar

Användning av uppdaterade API:er
var contract = "Devices.Scanners.ScannerDeviceContract";
int majorVersionRequired = 3;
if (Windows.Foundation.Metadata.ApiInformation.
IsApiContractPresent(contract, majorVersionRequired ))
{
// Call the API that is present in V3 and above
...
}
else
{
// Your original code supporting users who haven’t upgraded yet
...
}

Men delade projekt då?

Men delade projekt då?
Delade projekt delar kod och
använder pre-compilation
#IF
1. WINDOWS_APP
2. WINDOWS_PHONE_APP
3. WINDOWS_UAP (ny)
4. WINDOWS_UWP?

Använd adaptiv kod i delade projekt!
#if WINDOWS_PHONE_APP
// Processing for Windows Phone 8.1 only
+= this.Camera_Pressed;
#elif WINDOWS_UAP
// Processing for Windows UWP – Desktop AND Mobile
if (Windows.Foundation.Metadata.ApiInformation
.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons";))
{
// But this is only for UWP AND Mobile
+= this.Camera_Pressed;
}
#endif

Summering
Windows 8.1 tillbakablick
Platform Extension SDKs
Adaptiv Kod
Adaptiv kod och API Versioner
Delade Projekt

Microsoft Developer Network
Dokumentation
http://msdn.Microsoft.com
http://dev.Windows.com
Övningskurser
http://msevents.Microsoft.com
http://MicrosoftVirtualAcademy.com

Summering
Introduktion
Data bindningar
Adaptiv Design & UI
Adaptiv kod

Windows 10
Summer DevCamp
Jimmy Engström Jessica Engström
jimmy@apeoholic.se Jessica@catoholic.se
@apeoholic @grytlappen

Win10 summer dev camp

Recommended

Recommended

More Related Content

Similar to Win10 summer dev camp

Similar to Win10 summer dev camp (20)

Win10 summer dev camp