get your xaml on using powerbuilder s xaml editor
Download
Skip this Video
Download Presentation
Get your XAML on! : Using PowerBuilder’s XAML Editor

Loading in 2 Seconds...

play fullscreen
1 / 59

Get your XAML on! : Using PowerBuilder’s XAML Editor - PowerPoint PPT Presentation


  • 283 Views
  • Uploaded on

Get your XAML on! : Using PowerBuilder’s XAML Editor. John Strano Technology Evangelist. A XAML Primer. Get your XAML on! : Using PowerBuilder’s XAML Editor. You do not need to learn XAML to use PowerBuilder .NET to develop WPF applications. XAML AND PowerBuilder .NET.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Get your XAML on! : Using PowerBuilder’s XAML Editor' - duncan


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
slide2
A XAML Primer

Get your XAML on! :

Using PowerBuilder’s XAML Editor

slide3
You do not need to learn XAML to use PowerBuilder .NET to develop

WPF applications.

  • XAML AND PowerBuilder .NET
slide4
…However, this presentation will give you that extra, optional knowledge to enable you to start down the road to taking full advantage of WPF.
  • XAML AND PowerBuilder .NET
slide5
The Extensible Application Markup Language (XAML)
    • Declarative
    • Formatted as XML
    • Markup that describes the GUI for WPF/Silverlight
    • Can declaratively specify behavior as well as look and feel
  • XAML Primer
slide6
XAML in PowerBuilder .NET offers strict separation between the presentation layer and behavior
  • Runtime logic is not tightly coupled to the UI
  • PowerBuilder .NET goes so far as to…
    • Save the markup and the code/behavior as two separate files
    • Have the two files kept in sync by the IDE
  • XAML Primer
slide7
XAML in PowerBuilder .NET offers strict separation between the presentation layer and behavior
  • Runtime logic is not tightly coupled to the UI
  • PowerBuilder .NET goes so far as to…
    • Save the markup and the code/behavior as two separate files
    • Have the two files kept in sync by the IDE
  • XAML Primer
slide8
XAML in PowerBuilder .NET offers strict separation between the presentation layer and behavior
  • Runtime logic is not tightly coupled to the UI
  • PowerBuilder .NET goes so far as to…
    • Save the markup and the code/behavior as two separate files
    • Have the two files kept in sync by the IDE
  • XAML Primer
slide9
It can be said that implementing the WPF UI with XAML is “declarative” in that it has no procedural script.
  • While the preference is to maintain strict separation between presentation and behavior...

…again…behavior can be dictated in the XAML markup

  • XAML primer

XAML as Declarative Programming

slide10
Since XAML is XML-based, it has “elements”
    • Each element may have “attributes” which may be initialized with values
    • Each element in XAML represents a CLR class
    • An element does not need an identifier if it\'s not referred to in a script
  • XAML primer

Flavors of XAML Elements

slide11
Each element in XAML represents a CLR class

<Rectangle>

<Rectangle.Effect>

<BlurEffect/>

</Rectangle.Effect>

<Rectangle.OpacityMask>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#00000000" Offset="0.30"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

</Rectangle.OpacityMask>

</Rectangle>

  • XAML primer

Flavors of XAML Elements

slide12
XAML ELEMENT FLAVORS
    • Root Elements
    • Panel Elements
    • Control Elements
    • Geometric Elements
  • XAML ELEMENT FLAVORS
slide13
Root Elements
  • Window and Page are common root elements
  • For PowerBuilder .NET, “Window” and “UserObject” are the more common root elements
  • XAML ELEMENT FLAVORS

XAML Element Flavors

slide14
Root Elements
  • The default namespace for WPF XAML files is…

http://schemas.microsoft.com/winfx/2006/xaml/presentation

  • …and there is a secondary namespace…

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  • …named or aliased as "x" and should be used for some declarations and classes that aren’t available in the default namespace.
  • XAML ELEMENT FLAVORS

XAML Element Flavors

slide15
Root Elements (cont’d)
    • The PowerBuilder Control Namespace
      • Gives access to PowerBuilder subclasses of WPF base controls

Sybase.PowerBuilder.WPF.Controls

  • XAML Primer

XAML Element Flavors

slide16
Root Elements (cont’d)
    • The PowerBuilder Control Namespace
      • Gives access to PowerBuilder subclasses of WPF base controls

Sybase.PowerBuilder.WPF.Controls

  • XAML Primer

XAML Element Flavors

<pbwpf:Windowx:Class="w_1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls"

PBHeight="1640" PBWidth="1179" MinBox="True" MaxBox="True" ControlMenu="True" Uid="4" Height="410" Width="258" pbwpf:SkinManager.Skin=" ">

...

</pbwpf:Window>

slide17
The PowerBuilder Control Namespace: Abbreviation
    • Shorthand for namespace citation/invocation

Sybase.PowerBuilder.WPF.Controls

  • XAML Primer

XAML Element Flavors

slide18
The PowerBuilder Control Namespace: Abbreviation
    • Shorthand for namespace citation/invocation

Sybase.PowerBuilder.WPF.Controls

  • XAML Primer

XAML Element Flavors

  • <pbwpf:Window>
    • ...
    • xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls“
    • ...
    • <pbwpf:ListBox Margin="23”…
    • <pbwpf:CommandButton Height=…
    • <pbwpf:DataWindow Height=…
  • </pbwpf:Window>
slide19
Panel Elements
  • Immediate parent to controls

<Grid>

</Grid>

  • Canvas
  • Grid
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • XAML Primer

XAML Element Flavors

slide20
Panel Elements
  • Immediate parent to controls

<Grid>

</Grid>

  • Canvas
  • Grid
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • XAML Primer

XAML Element Flavors

slide21
Panel Elements
  • Immediate parent to controls

<Grid>

</Grid>

  • Canvas
  • Grid
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • XAML Primer

XAML Element Flavors

slide22
Panel Elements
  • Immediate parent to controls

<Grid>

</Grid>

  • Canvas
  • Grid
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • XAML Primer

XAML Element Flavors

slide23
Panel Elements
  • Immediate parent to controls

<Grid>

</Grid>

  • Canvas
  • Grid
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • XAML Primer

XAML Element Flavors

slide24
Panel Elements
  • Immediate parent to controls

<Grid>

</Grid>

  • Canvas
  • Grid
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • XAML Primer

XAML Element Flavors

slide25
Control Elements
  • XAML Primer

XAML Element Flavors

slide26
XAML uses the first single underscore in a control label to define the character that follows the underscore as an accelerator character for the control.
  • This is different from PowerScript, which uses an ampersand to signal an accelerator character.
  • …cont’d…
  • XAML Coding consideration:
  • Accelerator Characters
slide27
…cont’d…
  • In XAML, the control label myCommandButton__1_x designates the character x as the accelerator for the control.
  • XAML Coding consideration:
  • Accelerator Characters
slide28
Geometric Elements
    • Shapes, Lines
  • XAML Primer

XAML Element Flavors

slide29
Resources are often used in WPF applications.
  • Resources can be defined for various “scopes”
    • e.g.: Window, Layout Panel
  • Declared Resources
slide30
WPF/XAML have no concept of Visual Inheritance
  • XAML Primer

No Visual Inheritance in WPF/XAML?

slide31
The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF
  • The powerbuilder .NET XAML Editor
  • Bringing Visual Inheritance to the XAML World
slide32
The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF
  • The powerbuilder .NET XAML Editor
  • Bringing Visual Inheritance to the XAML World
slide33
The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF
  • The powerbuilder .NET XAML Editor
  • Bringing Visual Inheritance to the XAML World
slide34
The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF
  • The powerbuilder .NET XAML Editor
  • Bringing Visual Inheritance to the XAML World

w_ancestor.srw.xaml

<pbwpf:Window x:Class="w_ancestor"

xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls"

…Uid="7">

<Grid>

<pbwpf:CommandButton Height="28" …Name="cb_1" TabOrder="10" Text="_Close" TextSize="-10" VerticalAlignment="Top" PBHeight="112" PBWidth="402" X="1883" Y="80" HorizontalAlignment="Right" Width="88" />

</Grid>

</pbwpf:Window>

slide35
The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF
  • The powerbuilder .NET XAML Editor
  • Bringing Visual Inheritance to the XAML World

w_descendant.srw.xaml

<pbwpf:Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls" x:Class="w_descendant" Uid="10">

<Grid>

<pbwpf:CommandButton Height="28" … Name="cb_2" …

<pbwpf:CommandButton Height="28" … Name="cb_3" …

</Grid>

</pbwpf:Window>

slide36
Split View Bar
    • Use the split view bar to control the relative sizes of the Design View and XAML View.
  • The XAML Editor
slide37
The default layout for the WPF Window painter has two views:
  • The Layout view, where you design the appearance of the window in a WYSIWYG fashion with the WPF Designer
  • The XAML Editor.

…cont’d...

  • The XAML Editor

The Split View Bar

slide38
The default layout for the WPF Window painter has two views:
  • These views have buttons that let you…
    • Split the Design and XAML panes either vertically or horizontally
    • Hide one of the panes
    • Swap the pane positions by clicking the double arrow icon between the Design and XAML panes
  • The XAML Editor

The Split View Bar

slide39
The WPF Designer and the XAML Editor synchronize the currently selected item in the markup and in the design view.
  • The XAML Editor
slide40
Tag Navigator
    • You can move to any parent tag of the currently selected tag in the XAML View by using the tag navigator.
    • When you hover over a tag in the tag navigator, a thumbnail preview is displayed for that element.
  • The XAML Editor
slide42
Syntax Highlighting
    • Increases ease of reading XAML
  • The xaml editor
slide43
Syntax Highlighting
    • Colors can be changes in Preferences
  • The xaml editor
slide44
Document Outline View
  • The Document Outline View provides a hierarchical view of the XAML document underlying a WPF window.
  • Preview, select, or delete the window’s XAML elements.
  • The xaml editor
slide45
Document Outline View
  • Access the Document Outline View by opening the View menu and selecting Document Outline, or by pressing CTRL+ALT+T.
  • Replaces the Control List View from the native PowerBuilder Window Painter.
  • The xaml editor
slide46
Z Order
  • Controls added last are “on top”
  • “Final” Z Order is determined by a control’s order in the XAML
  • To change the Z Order…
    • Manipulate the XAML
    • Use the Context Menu
  • The xaml editor
slide47
Outlining
  • Portions of the markup can be collapsed to increase readability
  • The xaml editor
slide48
Outlining
  • Portions of the markup can be collapsed to increase readability
  • The xaml editor
slide49
Auto-Formatting
    • Block Indentation
  • The xaml editor
slide50
Auto-Formatting
    • Block Indentation
  • The xaml editor
slide51
Auto-Formatting
    • Auto-Indentation
  • The xaml editor
slide52
Auto-Formatting
    • Brace Matching
  • The XAML EDITOR
slide53
Capturing Events of
  • Non-Visual XAML-DECLARED Classes
slide54
Capturing Events of
  • Non-Visual XAML-DECLARED Classes
slide55
New Feature in PowerBuilder 12.1:
  • XAML / Script Synchronization
slide56
New Feature in PowerBuilder 12.1:
  • XAML / Script Synchronization
slide57
New Feature in PowerBuilder 12.1:
  • XAML / Script Synchronization
slide58
DEMO

John Strano

Technology Evangelist

slide59
THANK YOU

John Strano

Technology Evangelist

ad