BLEND FOR VISUAL STUDIO 2015

Jiří DanihelkaMsFest 2015

Agenda

• K čemu nástroj Blend slouží• Vývoj verzí Blendu• Návrh GUI v Blendu• Integrace s Visual Studiem• Debugování GUI

K ČEMU NÁSTROJ BLEND SLOUŽÍ

Company Logo

K čemu Blend slouží

• Visuální vývojové prostředí pro XAML• XAML je jazyk pro popis vzhledu

uživatelského rozhraní (GUI)

• Blend umožňoje částečně rozdělit práci na vývoji aplikace mezi:– návrháře – Blend a XAML– programátora – Visual Studio a C#

Analogie s HTML

• Webový návrhář napšíe– HTML kód stránky (XAML Controls)– CSS soubory se syly (XAML Styles and Templates)

• Programátor napíše– JavaScriptový kód (C# code behind)– serverový kód (C# model layer)

• Rozdělení nefunguje na 100%

Podporované druhy aplikací• Univerzální Windows 10 aplikace (UWP)

– Windows 10– Windows 10 Mobile

• Windows 8.1 aplikace• Windows Phone 8.1 aplikace• webový Silverlight• Windows Presentation Foundation (WPF)

• Není podporováno– Windows Phone 8.1 Silverlight

Podporované jazyky

• XAML + C#• XAML + Visual Basic• XAML + C++ (C++/CX)– pouze UWP, Windows 8.1 a Windows Phone 8.1– nepodporuje Silverlight a WPF

• Není podporováno ve verzi 2015– HTML + JavaScript (WinJS/WWA)

JavaScript a Blend

• Podpora JavaScriptu byla ve verzích– Blend for Visual Studio 2012– Blend for Visual Studio 2013

• Blend se v té době nerozvíjel o nové funkce– část funkcí přešla do Visual Studia– část funkcí byla zrušena

• Ve verzi 2015 se zrušené funkce vrací zpět

JavaScript aplikace ve Windows• Jedna z možností vývoje pro Windows 8

– moderní aplikace (dříve Metro)

• Původní myšlenka:– jazyk HTML umí velké množství programátorů– vývoj HTML je levnější než XAML

• Realita:– WinJS/WWA není to samé co webové stránky– mnoho rozšíření převzatých z jazyka XAML– horší výkon aplikací– špatně dostupné výukové materiály

• Nyní odklon od silné podpory JavaScriptu

VÝVOJ VERZÍ BLENDU

Company Logo

Vývoj verzí Blendu

• Nejprve součást balíku Expression Studio

Vývoj verzí Blendu

• Následně součást Windows Phone 7 SDK

Vývoj verzí Blendu

• Součástí Visual Studia 2012• Blend for Visual Studio

Blend 2015 používá Visual Studio Shell

NÁVRH GUI BLENDU

Company Logo

První otevření v Blendu

• Spuštení přes kontextové menu na souboru– Open in Blend...

První otevření v Blendu

• Můžete se setkat s tímto:

Chyba při otevření• Konstruktory nesmí házet výjimky

– designer volá konstruktor, ale program nespouští– globální proměnné mouhou být neinicializované

• Rovněž není dobré dělat– výpočetně náročné věci v konstruktoru– vytěžování jiných prostředků

• Co s tím?– kontrola inicializace při použití objektů– přesunout kód z konstruktoru do metody Init– testovat na podmínku běhu v designeru

Design Mode if (Windows.ApplicationModel.DesignMode.DesignModeEnabled) { // falešná inicializace pro designer this.ConnectedToDatabase = true; } else { // skutečná inicializace za běhu aplikace this.ConnectedToDatabase = MyDatabase.IsConnected; //hází neošetřenou výjimku, pokud je MyDatabase null };

Data pro visuální design

• Často se data načítají až za běhu aplikace

• Typicky je se využívá rozdělení aplíkace na vrstvy podle modelu MVVM– model načítá data (z databáze, souboru, ...)– view zobrazuje data pomocí XAMLu– viewmodel propojuje model a view

• Databinding – promojení V a VM

Vzor MVVM

Blend 2015 Sample Data

Podpora pro vytváření animací

• Lze posouvat v čase pomocí Timeline

Podpora pro management stavů

• Kombinace vizuální stavů komponent

INTEGRACE S VISUAL STUDIEM

Company Logo

Integrace s Visual Studiem

• konzistentní vzhled• podobné sady příkazů– Visual Studio 2015

– Blend 2015

– Blend 2013

IntelliSense

• editor jako Visual Studio• IntelliSense pro XAML i C#

Editor Blendu 2015

• Výrazné zlepšení– dříve spíše takový Notepad

• Již se nedá přepínat do Visual Studia pro každou editaci

• Není podpora doplňků – např. ReSharper• Lepší synchronizace kódu– automatické načítání změněných souborů

Peek Definition

• Alt + F12

DEBUGOVÁNÍ GUI(ŽIVÁ UKÁZKA)

Company Logo

SHRUNUTÍ

Company Logo

Shrnutí přednášky

• Blend je vizuální vývojové prostředí pro XAML– Univerzální aplikace, Windows Phone, WPF

• S každou verzí je postupně sbližován s VS– původně samostatný SW produkt– nyní součást Visual Studia– přesun funkcí oběma směry

• Některé designovací funkce má navíc– Vyváření animací, vytváření stavů

Další zdroje informací• MVA: Windows 8.1 Design Jump Start

https://mva.microsoft.com/en-us/training-courses/windows-81-ux-design-jump-start-8235

• MVA: Designing Your XAML UI with Blendhttps://mva.microsoft.com/en-us/training-courses/designing-your-xaml-ui-with-blend-jump-start-8260

• Channel 9: New XAML Tools in Visual Studio 2015 https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/New-XAML-Tools-in-Visual-Studio-2015-and-Blend

DOTAZY?