blend for visual studio 2015
TRANSCRIPT
![Page 1: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/1.jpg)
BLEND FOR VISUAL STUDIO 2015
Jiří DanihelkaMsFest 2015
![Page 2: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/2.jpg)
Agenda
• K čemu nástroj Blend slouží• Vývoj verzí Blendu• Návrh GUI v Blendu• Integrace s Visual Studiem• Debugování GUI
![Page 3: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/3.jpg)
K ČEMU NÁSTROJ BLEND SLOUŽÍ
Company Logo
![Page 4: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/4.jpg)
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#
![Page 5: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/5.jpg)
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%
![Page 6: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/6.jpg)
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
![Page 7: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/7.jpg)
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)
![Page 8: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/8.jpg)
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
![Page 9: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/9.jpg)
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
![Page 10: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/10.jpg)
VÝVOJ VERZÍ BLENDU
Company Logo
![Page 11: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/11.jpg)
Vývoj verzí Blendu
• Nejprve součást balíku Expression Studio
![Page 12: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/12.jpg)
Vývoj verzí Blendu
• Následně součást Windows Phone 7 SDK
![Page 13: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/13.jpg)
Vývoj verzí Blendu
• Součástí Visual Studia 2012• Blend for Visual Studio
![Page 14: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/14.jpg)
Blend 2015 používá Visual Studio Shell
![Page 15: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/15.jpg)
NÁVRH GUI BLENDU
Company Logo
![Page 16: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/16.jpg)
První otevření v Blendu
• Spuštení přes kontextové menu na souboru– Open in Blend...
![Page 17: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/17.jpg)
První otevření v Blendu
• Můžete se setkat s tímto:
![Page 18: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/18.jpg)
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
![Page 19: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/19.jpg)
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 };
![Page 20: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/20.jpg)
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
![Page 21: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/21.jpg)
Vzor MVVM
![Page 22: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/22.jpg)
Blend 2015 Sample Data
![Page 23: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/23.jpg)
Podpora pro vytváření animací
• Lze posouvat v čase pomocí Timeline
![Page 24: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/24.jpg)
Podpora pro management stavů
• Kombinace vizuální stavů komponent
![Page 25: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/25.jpg)
INTEGRACE S VISUAL STUDIEM
Company Logo
![Page 26: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/26.jpg)
Integrace s Visual Studiem
• konzistentní vzhled• podobné sady příkazů– Visual Studio 2015
– Blend 2015
– Blend 2013
![Page 27: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/27.jpg)
IntelliSense
• editor jako Visual Studio• IntelliSense pro XAML i C#
![Page 28: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/28.jpg)
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ů
![Page 29: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/29.jpg)
Peek Definition
• Alt + F12
![Page 30: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/30.jpg)
DEBUGOVÁNÍ GUI(ŽIVÁ UKÁZKA)
Company Logo
![Page 31: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/31.jpg)
SHRUNUTÍ
Company Logo
![Page 32: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/32.jpg)
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ů
![Page 33: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/33.jpg)
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
![Page 34: Blend for Visual Studio 2015](https://reader035.vdocuments.us/reader035/viewer/2022062903/58a472c61a28aba34c8b573d/html5/thumbnails/34.jpg)
DOTAZY?