BCIS 4650 Visual Programming for Business Applications

1. BCIS 4650 Visual Programming for Business Applications Introduction to XAML Survey of Templates The University of North Texas, ITDS Dept., Dr. Vedder

2. Windows Runtime Architecture View Business Logic COM DirectX Contracts Storage System Services Core (Hardware Abstraction Layer) The University of North Texas, ITDS Dept., Dr. Vedder

3. Introduction to XAML

4. What is XAML?a descriptive language (what?), NOT procedural (how?) Is “Extensible Application Markup Language” – a superset of XML developed by Microsoft Creates .Net managed, visual objects and initializes them (“elements”; “UI elements”; “types”) Organizes these objects into a hierarchy (starting with a <Page>)

5. What is XAML, 2a descriptive language (what?), NOT procedural (how?) Interpreted, though can be compiled Is case-sensitive, like C# <button> ≠ <Button> BAML

6. Advantages of XAMLinclude … • Code is easy to read and understand • Enables separation of UI designer code (XAML) from (business) logic code (C#) • Enables, for large projects, separate workflows for UI designer and coder • Supports Expression Blend (“Blend”) graphics design tools

7. XAML Uses … • Elements (= objects = ‘nouns’; dark red) • Attributes (= properties = ‘adjectives’; red) • Values are blue unless text for user, then shown in black. Values are inside “ ” • Express all attribute names, even if a default for a given element The University of North Texas, ITDS Dept., Dr. Vedder

8. Example of XAML Conciseness The University of North Texas, ITDS Dept., Dr. Vedder

9. Elements: General Remarks • Each element maps to an instance of a .NET class (XAML uses namespaces) • Nesting elements usually express containment • Use x:Name attribute when given element appears in C# code The University of North Texas, ITDS Dept., Dr. Vedder

10. Attributes: General Remarks • Since all property values are strings, XAML has implicit type converters for colors, numbers, etc. • Use x:Name attribute when given element appears in C# code • Attached properties usually apply to several controls but are defined in a different (usually parent container) class, ex., Grid.Row=“0” for a TextBox The University of North Texas, ITDS Dept., Dr. Vedder

11. XAML Property Elements • Used to set complex attribute values • Assign an instance of an object as the value for an attribute (a “child element”) • Uses the dot operator (uses an instance of the RotateTransform class) The University of North Texas, ITDS Dept., Dr. Vedder

12. Using Special Characters in String Values The University of North Texas, ITDS Dept., Dr. Vedder

13. Attaching Event Handlers to Attributes • Syntax -- EventName="EventHandlerMethodName” • Ex.: <Button…..Click=“Answer_Click”> • Must be an identically-named C# method in the code-behind The University of North Texas, ITDS Dept., Dr. Vedder

14. XAML Namespaces (xmlns) • Are specialized attributes that declare namespaces for classes not part of basic XML (“extensions”) • Appear at the start of a XAML file as “directives” • Sometimes “map” namespaces to a prefix; almost any prefix idea usable The University of North Texas, ITDS Dept., Dr. Vedder

15. XAML Namespaces, 2 • x:Class="InfoHub.WindowsClient.MainPage" • Partial class defn.; C# file is other part • xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" • URI: System.Windows.Controls (default) • xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" • URI: Core XAML classes, mapped to x: prefix • xmlns:local="using:InfoHub.WindowsClient" • Maps local: prefix to InfoHub…

16. XAML Namespaces, 3 • xmlns:d="http://schemas.microsoft.com/expression/blend/2008" • Namespace for Blend support; attributes with d: prefixes only used during design time • xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" • For Open Source XML compatibility • mc:Ignorable="d"> Ignore at design time but NOT at runtime The University of North Texas, ITDS Dept., Dr. Vedder

17. XAML Markup Extensions • Used often when attribute values must be other than strings or names of event handlers • Resolved at runtime • Enclosed by set of curly braces “{ }” • Can be built-in or custom The University of North Texas, ITDS Dept., Dr. Vedder

18. Most Common Built-In Markup Extensions • StaticResource – previously defined value, ex., from OS <object property="{StaticResourcekey}" .../> • DynamicResource– runtime value, auto-updating <object property="{DynamicResourcekey}" .../> • Binding – value tied to data The University of North Texas, ITDS Dept., Dr. Vedder

19. Binding Syntax • Most often bind to a property declared elsewhere or to a path • Can become complex • http://msdn.microsoft.com/en-us/library/ms750413%28v=vs.110%29.aspx The University of North Texas, ITDS Dept., Dr. Vedder

20. Other Markup Extensionsinclude… • x:Type, x:Static, x:Null, x:Array • RelativeSource, ThemeDictionary, ComponentResourceKey, etc. • http://msdn.microsoft.com/en-us/library/ms747254%28v=vs.110%29.aspx The University of North Texas, ITDS Dept., Dr. Vedder

21. Survey of XAML Templates

22. Recall Major Navigation Models • Hierarchical (main, section, detail) • Flat (for small # of pages, ebooks, games) The University of North Texas, ITDS Dept., Dr. Vedder

23. Recommended Templatesfor Windows Store apps using C# • Hub, Grid, Split • Load XAML pages into a content frame (“single-page navigation”) • Supported by more tools, ex., NavigationHelper.cs • Easy to maintain The University of North Texas, ITDS Dept., Dr. Vedder

24. Hub Template • Displays content in a horizontally panning view • Is ideal for subject matter that can be sectionalized (ex., shopping, news apps) • Supports the hierarchical model • Includes static content (static resources) The University of North Texas, ITDS Dept., Dr. Vedder

25. Hub Template Contents • App.xaml, loads first and provides markup for the content host (where each page is loaded into the main window). • HubPage.xaml, shows the sections and items on the home page. Users can choose an item to open information about that item, or they can choose a section label to open information about that section. • SectionPage.xaml, shows a category of items. Users can choose an item to open the full-page view of that item. • ItemPage.xaml, full-page view for an item. The University of North Texas, ITDS Dept., Dr. Vedder

26. Hub Template Contents, 2 • App.xaml.cs, how the app behaves when it starts. • HubPage.xaml.cs, behavior associated with the home page. • SectionPage.xaml.cs, behavior associated with the group details page. • ItemPage.xaml.cs, behavior associated with the full-page view of an item. • SampleDataSource.cs, the data-source object that exposes the data to the app. The University of North Texas, ITDS Dept., Dr. Vedder

27. Hub Template Contents, 3 • SampleData.json, contains sample data that the app uses. • package.appxmanifest, describes the app package for Windows. METADATA • Several default image filesused for Windows Store. • A sample resource file that contains localization strings (Resources.resw). The University of North Texas, ITDS Dept., Dr. Vedder

28. Grid Template • Is ideal for subject matter that can be grouped at the main level (ex., shopping, photo apps) • Supports horizontal panning • Supports the hierarchical model • Includes static content (static resources) The University of North Texas, ITDS Dept., Dr. Vedder

29. Grid Template Contents • App.xaml, loads first; provides markup for the content host (where each page is loaded into the main window). • GroupedItemsPage.xaml, is the home page. It enables a user to view the groups and items, and either select an item or a select a group label to navigate to. • GroupDetailPage.xaml, enables a user to view group details on the left and items on the right, and select an item to navigate to. • ItemDetailPage.xaml, which is the full-page view for an item. The University of North Texas, ITDS Dept., Dr. Vedder

30. Grid Template Contents, 2 • App.xaml.cs, how the app behaves when it starts. • GroupedItemsPage.xaml.cs, behavior associated with the home page. • GroupDetailPage.xaml.cs, shows groups on left, items on right. • ItemDetailPage.xaml.cs, behavior associated with the full-page view of an item. • SampleDataSource.cs, the data-source object that exposes the data to the app. The University of North Texas, ITDS Dept., Dr. Vedder

31. Grid Template Contents, 3 • SampleData.json, contains sample data that the app uses. • package.appxmanifest, describes the app package for Windows. • Several default image filesused for Windows Store. • A sample resource file that contains localization strings (Resources.resw). The University of North Texas, ITDS Dept., Dr. Vedder

32. Split Template • Displays content in a 2-column, master-detail view • Is ideal for subject matter that user wants to switch between rapidly(ex., sports scores, news apps) • Supports the hierarchical model The University of North Texas, ITDS Dept., Dr. Vedder

33. Split Template Contents • App.xaml, loads first; provides markup for the content host (where each page is loaded into the main window). • ItemsPage.xaml, home page; shows GROUPS. • SplitPage.xaml, defines 2 sections, groups on the left and selected item on the right The University of North Texas, ITDS Dept., Dr. Vedder

34. Split Template Contents, 2 • App.xaml.cs, how the app behaves when it starts. • ItemsPage.xaml.cs, behavior associated with the home page. • SplitPage.xaml.cs, behavior associated with the group details page. • SampleDataSource.cs, the data-source object that exposes the data to the app. The University of North Texas, ITDS Dept., Dr. Vedder

35. Split Template Contents, 3 • SampleData.json, contains sample data that the app uses. • package.appxmanifest, describes the app package for Windows. • Several default image filesused for Windows Store. • A sample resource file that contains localization strings (Resources.resw). The University of North Texas, ITDS Dept., Dr. Vedder

36. The “Common” Folder The University of North Texas, ITDS Dept., Dr. Vedder

37. ITDS Logo / Mood Slide The University of North Texas, ITDS Dept., Dr. Vedder