| RE: [eclipse-incubator-e4-dev] Initial discussiononthe 'modelled'workbench UI |
|
There are three other
concepts may be useful: Data Binding, Templates and Collection View Data Binding All properties in
XAML/WFP can be bound to a business data or a property value of another view.
For this purpose, XAML introduces an _expression_ extension. Suppose we have a class
Person that has a property “name”:
package
business.model;
public class Person {
protected String name;
public String getName() {
return name;
}
public void setName(String value) {
this.name = value;
}
} We can bind the property
value “name” into a text field. <Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Row=”0” Grid.Column=”0”
Content=”Name:” / >
<TextBox Grid.Row=”0” Grid.Column=”1”
Text=”{Binding Path=name}” / > </Grid> Where TextBox is name as
Text in SWT. The binding _expression_ is {Binding Path=name}. The update is
bidirectional: 1. Data -> view 2. View -> data. The Data binding requires
three other customizable mechanisms: Data type conversion, value validation and
error handling. Templates A template is used to
define a GUI view for a given data type. In the following code, we
define a generic view of a data Person. <Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:model="clr-namespace:business.model"
Title="Introduction to Templating">
<Window.Resources>
<DataTemplate DataType="{x:Type model:Person}"> <Grid> <Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Row=”0” Grid.Column=”0”
Content=”Name:” / >
<TextBox Grid.Row=”0” Grid.Column=”1”
Text=”{Binding Path=name}” / > </Grid>
</DataTemplate>
</Window.Resources> </Window> This view is used for all
dynamic data presentation as the selected element in a collection. See the
example in “Collection View” Collection View XAML/WPF supports the MVC
paradigm, including the collection. A business model collection is wrapped
always in an intermediate controller named as “Collection View“. A
Collection View handles the sorting, filtering and grouping of the collection
elements. <Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:model="clr-namespace:business.model"
Title="Introduction to Templating">
<Window.Resources>
<DataTemplate DataType="{x:Type model:Person}"> <Grid> <Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Row=”0” Grid.Column=”0”
Content=”Name:” / >
<TextBox Grid.Row=”0” Grid.Column=”1”
Text=”{Binding Path=name}” / > </Grid>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource ListPersons}}" />
<ContentControl Name="Detail"
Content="{Binding Source={StaticResource
ListPersons}}"/>
</StackPanel> </Window> The ListBox displays the list
of persons referenced by a variable ListPersons and ContentControl shows the
selected element. Both UI elements use the same template to display Person. You
can find a webdemo here:
http://www.soyatec.com/eface/webdemo/#DataBindingLab From:
eclipse-incubator-e4-dev-bounces@xxxxxxxxxxx
[mailto:eclipse-incubator-e4-dev-bounces@xxxxxxxxxxx] On Behalf Of Yves YANG Layouts XAML/WPF hasn’t any
layout at all. It provides four kinds of panel instead.
A panel has a layout same as FillLayout in SWT There is a vertical column: <StackPanel Orientation=”Vertical”>
<Button Content=”Button1”/ >
<Button Content=”Button2”/ >
<Button Content=”Button3”/ > </StackPanel>
A panel has a layout same as FormLayout in SWT An example to manger form attachment: <DockPanel>
<Button DockPanel.Dock=”Top” Content=”Button1” /
>
<Button DockPanel.Dock=”Top” Content=”Button2”/ >
<Button DockPanel.Dock=”Top” Content=”Button3”/ > </DockPanel> There is an “attached property” concept used in the
children of the container. The Dock property is defined in the container
DockPanel, but this property is not used in the container, but in its children.
The button1’s top edge is attached the container, The button2’s top edge is attached to the
“Button1”’s bottom The button3’s top edge is attached to the
“Button2”’s bottom and its bottom is attached to the
container’s bottom.
A panel has a layout same as GridLayout in SWT <Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Row=”0” Grid.Column=”0”
Content=”Button1” / >
<Button Grid.Row=”1” Grid.Column=”0”
Content=”Button2”/ >
<Button Grid.Row=”2” Grid.Column=”0”
Content=”Button3”/ > </DockPanel> The “Row” and “Column” are the attached
properties of Grid. This example defines three rows and one column.
A panel has null layout. <Canvas>
<Button Canvas.Left=”10” Canvas.Top =”10”
Content=”Button1” / >
<Button Canvas.Left=”10” Canvas.Top =”40”
Content=”Button2”/ >
<Button Canvas.Left=”10” Canvas.Top =”80”
Content=”Button3”/ > </Canvas> The “Left” and “Top” are the attached
properties of Canvas. They correspond to the location x and y. My feeling is these
layouts are very simple and can be used directly by non-software engineers in a
XML editor or a Visual editor. Style XAML Style relies on the
default value resolution. A WPF object is a dynamic object. Each object has a
dictionary of properties. When we call getValue() method and there is no such
entry in the dictionary, the default value resolution is activated. One of the
possibilities is to find the value in the Style definition through its parent
tree. <Canvas>
<Canvas.Resources>
<Style TargetType="Label">
<Setter
Property="FontSize" Value="16" />
<Setter
Property="FontWeight" Value="Bold" />
</Style>
</Canvas.Resources>
<Label Text=”Styled Label”/>
</Canvas > This code has the same
result as following: <Canvas>
<Label FontSize=”16” FontWeight=”Bold” Text=”Styled Label” />
</Canvas > I believe that the
support of CSS can be done straightforward. Please feel free to ask
me any questions about XAML. Yves From:
eclipse-incubator-e4-dev-bounces@xxxxxxxxxxx
[mailto:eclipse-incubator-e4-dev-bounces@xxxxxxxxxxx] On Behalf Of Kevin McGuire
|