Home

eFace

eclipse4SL

eUML2

eBPMN

Services

User Forum

Support

Getting Started

 

Introduction to eFace

eFace Core Types and Infrastructure

Controls

Data Binding

Appearance

Layout and Panel

eFace Application

Introduction to eFace

eFace provides an XML dialect that is a platform and a technology-neutral representation of graphic elements such as Panel, List, Tree, and so on. The XML grammar and behind logic keep compatible with Microsoft's XAML, which is extensively used in the last Windows Vista. eFace captures relative positioning information of user interface components and delegates their display to a platform-specific render. Depending on the platform or device being used, the render decides the best way to present the user interface to the user and receive user input. The core of eFace, code-named as UPF (Universal Presentation Framework), remains compatible with Microsoft's WPF (Windows Presentation Foundation) . Not support media and documents. It is a 100% Java solution.

 

eFace Core Types and Infrastructure

eFace is built on a core set of types and infrastructure that are important for you to understand because they permeate all of eFace. A high percentage of classes in eFace inherit from the following four “building block” classes.

UIElement
FrameworkElement
ContentElement
FrameworkContentElement

In eFace, a UI is composed of elements that are assembled in a tree hierarchy, which is known as an element tree. The element tree provides a logic and intuitive way for you to create user interfaces (UIs). It is also a structure over which you can layer more powerful UI services.

One UI service is dependency property system, which enables one element to implement a property whose value is automatically shared with its child elements in the element tree. For example, this property system enables the background color of a window to be automatically applied to all child elements of windows that do not specify their own background color.

Another service that takes advantage of the element tree is the route event system. The eFace provides direct events, which are only raised on one element. Routed events, however, can traverse the element tree in a route between the root element and the originator of the event; they can be handled by any element along the route. One type of routed event bubbles up the tree from the originator, which gives all parent elements the option of handling the event. Another type of routed event tunnels down to the originator to provide an opportunity for all parent elements of the originator to preview the event.

Extensible Application Markup Language
eFace constructs UIs by using Extensible Application Markup Language (XAML), which is an XML-based markup language for composing eFace elements and taking advantage of the fundamental eFace services. For example, the following XAML markup composes a UI that consists of a window that has a single button.

<Window

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

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

   <Button>Hello,XAML</Button>

</Window>

eFace takes this UI definition and translates the XAML elements that is comprises into instance of the eFace classes that are required to implement the UI that is defined in XAML, which is shown in the following figure.

Defining a UI by using XAML provides several advantages over traditional presentation technologies:

 

Controls

To help you compose your UI, eFace provides a comprehensive set of controls. If these controls do not provide the behavior that your applications require, you can easily build your own custom controls.

Standard Controls

 

Data Binding

eFace applications can operate over many types of data, including simple objects, collection objects, eFace elements, XML data and objects returned from Web services. To facilitate data visualization and interaction, eFace implements a mechanism that allows you to declaratively bind these types of data sources to your application UI.

A data binding is a formal relationship between a binding source (the data source) and a binding target (the data consumer) that ensures synchronization between the two.

<Window ... >

   <!--Binding Source-->

   <Window.Resources>

      <java:Person x:Key="data" Name="KK">

   </Window.Resources>

   ...

    <!--Binding Target-->

   <TextBox Grid.Row="0" Grid.Column="0"

      Text="{Binding Source={StaticResource data}, Path=Name}">

   </TextBox>

...

 

</Window>

The preceding markup declaratively binds the Text property of a TextBox to Name property of Person. Object, which is given an initial value of “KK”.

Data binding in eFace also provides support for more complex services, which including validation, sorting and grouping. Also, data binding provides the infrastructure that supports data templating, which enables you to easily create customized visualizations for bound data beyond those that the standard controls show by default.

 

Appearance

Although eFace provides a common set of elements and controls for you to build your applications with. It also provides powerful support for extending, customizing, and reusing elements and controls to meet your needs. This makes it easier to create custom appearances with creating wholly new controls or elements.

Resources

Multiple controls in an application frequently share the same type of objects and values, such as fonts, background colors, control templates, data templates, and styles. eFace provides an infrastructure that is known as user interface (UI) resources that allows you to define objects and values once and reuse them multiple times. The following example shows how to define a common background color that a Label and a TextBlock share.

<Window

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

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

   <Window.Resources>

      <SolidColorBrush x:Key="MyBrush" Color="Gold" />

   </Window.Resources>

   <StackPanel>

      <Label Background="{StaticResource MyBrush}" >Label</Label>

      <TextBlock Background="{StaticResource MyBrush}">TextBlock</TextBlock>

   </StackPanel>

</Window>

Styles

Styles are one of several eFace customization features that enable an application, or UI designer to standardize on a particular look for their product. User can customize a look extensively on an application-by-application basis; however, a strong style model is required to enable maintenance and sharing of a look, eFace provides that model, which relies on the Style element. The following example shows how to create a style that sets the foreground property for a TextBlock to DimGray.

<Style x:Key="TitleStyle" TargetType="TextBlock">

        <Setter Property="Foreground" Value="DimGray" />

</Style>

Control Templates

The ControlTemplate allows you to specify the visual structure of a control. By using ControlTemplates, you can replace the default appearance of a eFace element while you retain its behavior. 

Data Templates

Although control templates let you completely replace the appearance of a control, data templates let you replace the appearance of the content of a control, Data templates are frequently used to change the default visualization of bound data.

For example, the following illustration shows the default appearance for a ListBox that is bound to a collection of Java image objects.

Instead of showing a list of image paths, a more visually appealing application might show a list of the actual images. The following example shows a data template that does just that.

<DataTemplate DataType="{x:Type local:Task}">

      <ListBox>

           <TextBlock Text="{Binding Path=Type}" />

           <TextBlock Text="{Binding Path=Description}" />

           <TextBlock Text="{Binding Path=Priority}" />

       </ListBox>

</DataTemplate>

The following illustration shows the result of this example, which still produces a list that has the same basic list support.

Themes

A typical eFace application might have multiple user interface (UI) resources that are applied throughout the application. Collectively, this set of resources can be considered the theme for the application. eFace provides support for packaging user interface (UI) resources as a theme by using a resource dictionary that is encapsulated as the ResourceDictionary class.

You can define resource dictionaries as individual files that enable you to reuse a theme across multiple applications. You can also create swappable themes by defining multiple resource dictionaries that provide the same types of resources but with different values.

 

Layout and Panels

When you create UI in order to visualize data, the composition process requires controls and elements to be appropriately positioned and sized, or laid out. The eFace layout system makes the composition process easier and augments it with the ability to adapt to changes in window resizing, screen resolution, and dots per inch. The cornerstone of this flexibility is the ability to lay out UIs using relative positioning.
Instead of requiring developers to write code to make this happen, eFace provides a first-class extensible layout system that enables an easy, rapid UI development and supports globalization of UIs.
eFace delivers layout support through a common infrastructure that includes the following set of layout controls: Canvas, DockPanel, Grid, StackPanel, WrapPanel.

The following illustration shows a DockPanel that is used to provide the layout framework for a window.

The following example shows how to create the dock panel in this illustration.

<Window

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

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

   <DockPanel>

      <Label Height="60" Background="Cornflowerblue"

        DockPanel.Dock="top">

        Dock="Top"

      </Label>

      <Label Background="Lavender" DockPanel.Dock="Top">

        Dock="Top"

      </Label>

      <Label Height="60" Background="Cornflowerblue"

        DockPanel.Dock="Bottom">

        Dock="Bottom"

      </Label>

      <Label Background="Bisque" DockPanel.Dock="Right">

        Dock="Right"

      </Label>

      <Label Background="Thistle" DockPanel.Dock="Left">

        Dock="Left"

      </Label>

      <Label>This content will fill the remaining space</Label>

   </DockPanel>

</Window>

 

eFace Applications

eFace has an extensive range of support for visualizing and interacting with data. To delivery these experience, eFace has a special group of classes that are collectively known as the manage applications, whether they are stand-along applications that are built from windows and dialog boxes, or browser-hosted application that are built from windows, hyperlinks, and frames, or a combination of both.

Application Infrastructure
A variety of application infrastructure needs to be established before an application can actually do anything useful, such as display windows or browse to pages. As with any Windows application, this includes creating an entry point function, starting a windows message loop, and creating a main UI thread. In eFace, you can create this infrastructure in two steps:
1. Create a .xaml file with the following XAML markup:

<Application

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

</ Application>

2. Configure the file as an eFace Application Definition item.
An application that is compiled with just this will launch and run, like any standard Windows application, with a single instance of the Application class managing the application, its lifetime, shared access to properties and resources, and a host of features for window and navigation management.                              

As you would expect, eFace provides a class to create and show windows and dialog boxes.

<Window x:Class="test.TextBlockTest" xmlns:java="clr-namespace:test"

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

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

   SizeToContent="WidthAndHeight" Width="500" Height="400">

   <TextBlock>TextBlock</TextBlock>

</Window>

To show this window, you can follow below. There is an “AppStartup” entrance procedure to open when the application first starts, the name corresponding to the java class name.

<Application

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

    Startup="AppStartup" >

</Application>

Below is the java program to show the window.

public class App extends Window {

   public void AppStartup(Object sender, RoutedEventArgs eventArgs) {

      TextBlockTest test = new TextBlockTest();

      test.show();

   }

}

Application not only provides an easy way to show a window, it also tracks all windows, it remembers the main window, and its lifetime can be configured to end based on the lifetime of its windows.

Navigation
Application models, eFace and traditional presentation technologies differ in the ways they provide support for navigation. To begin with, eFace provides the basic elements of any navigation framework: Window, Hyperlink, and Frame. You should use XAML to assemble these elements as you would on a typical HTML page, although with the richness of eFace.

There is an eFace extension about navigation. eFace implements a special type of NavigationWindow, that can host page content just like a browser. Also, you can incorporate the dual purpose Frame control into window or page content that is hosted in a stand-alone application.

Security
Because you are likely to run some of your eFace applications from Internet Explorer, security is a first class citizen. Essentially, browser-hosted applications run in a security sandbox that is provided the same set of access to a user’s computer as any typical web application. Also, many eFace classes operate safely in this security sandbox, which enables you to build most of the application types that you can build when you have complete access to the local computer.

 

 

Soyatec © 2006-2011 Soyatec. All rights reserved.