Bcis 4650 visual programming for business applications
This presentation is the property of its rightful owner.
Sponsored Links
1 / 37

BCIS 4650 Visual Programming for Business Applications PowerPoint PPT Presentation


  • 45 Views
  • Uploaded on
  • Presentation posted in: General

BCIS 4650 Visual Programming for Business Applications. Introduction to XAML Survey of Templates. Windows Runtime Architecture. View. Business Logic. COM DirectX Contracts Storage. System Services. Core. (Hardware Abstraction Layer).

Download Presentation

BCIS 4650 Visual Programming for Business Applications

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Bcis 4650 visual programming for business applications

BCIS 4650 Visual Programming for Business Applications

Introduction to XAML

Survey of Templates

The University of North Texas, ITDS Dept., Dr. Vedder


Windows runtime architecture

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


Introduction to xaml

Introduction to XAML


What is xaml a descriptive language what not procedural how

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>)


What is xaml 2 a descriptive language what not procedural how

What is XAML, 2a descriptive language (what?), NOT procedural (how?)

Interpreted, though can be compiled

Is case-sensitive, like C# <button> ≠ <Button>

BAML


Advantages of xaml include

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


Xaml uses

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


Example of xaml conciseness

Example of XAML Conciseness

The University of North Texas, ITDS Dept., Dr. Vedder


Elements general remarks

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


Attributes general remarks

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


Xaml property elements

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


Using special characters in string values

Using Special Characters in String Values

The University of North Texas, ITDS Dept., Dr. Vedder


Attaching event handlers to attributes

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


Xaml namespaces xmlns

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


Xaml namespaces 2

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…


Xaml namespaces 3

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


Xaml markup extensions

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


Most common built in markup extensions

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


Binding syntax

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


Other markup extensions include

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


Survey of xaml templates

Survey of XAML Templates


Recall major navigation models

Recall Major Navigation Models

  • Hierarchical

    (main, section, detail)

  • Flat

    (for small # of pages, ebooks, games)

The University of North Texas, ITDS Dept., Dr. Vedder


Recommended templates for windows store apps using c

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


Hub template

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


Hub template contents

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


Hub template contents 2

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


Hub template contents 3

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


Grid template

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


Grid template contents

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


Grid template contents 2

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


Grid template contents 3

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


Split template

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


Split template contents

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


Split template contents 2

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


Split template contents 3

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


The common folder

The “Common” Folder

The University of North Texas, ITDS Dept., Dr. Vedder


Itds logo mood slide

ITDS Logo / Mood Slide

The University of North Texas, ITDS Dept., Dr. Vedder


  • Login