Soyatec - Open Solution Company: XAML for Java, UML for Eclipse and BPMN designer

1. Creating UI with XAML editor

Right click in blank place in Package Explorer, select New->Java Project->.

Fill project name(for example Samples), keep all check box default value. Click Finish button. A Java project named Samples is created.

Unfold Samples, Select src, then New->Other..., A wizard New is displayed. Then select in the wizard eFace XAML->Window component, click Next>.

Fill Package as gui, Name as Hello, then click Finish button.

The fundamentals of eFace XAML and Java file are generated automatically. The XAML file contains the graphic view descritpion. His source can be modifed with the XAML editor. The live display area is the graphic view where any changes of UI description in the source tab will display instantaneously. The purpose of java file is event handling. Java tab edit the java source codes. In the Design tab, you can inspect the UI tree node.

Below shows the codes of these two files :

Hello.java

Package gui;
import com.soyatec.eface.upf.Window;
public class Hello extends Window {
}

Hello.xaml

This XAML code is eFace fundamental XAML, you can enrich this XAML like below:

Now, right click Hello.XAML under the current package, select XAML Open->Open. The interface will be generated.

To view the standalone window, you can use the preview button :

See dynamic demo at: http://www.soyatec.com/eface/video/Sample1.html

2. Managing handle events with java code

Create a new XAML component by the same way like above, name it as Action. In the generated xaml file, enter the code for adding a button event. Then click the generate java codes button on the right of toolbar.

We can also right click XAML under the current package, select Java->Generate to gererate the java codes. Below are xaml file and java file code.

Action.xaml

<Window
  x:Class="gui.Action"
   xmlns:java="clr-namespace:sample"
   xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   SizeToContent="WidthAndHeight">
   <Button Click="onClick">Click Here</Button>
</Window>

Action.java

package gui;
import com.soyatec.eface.upf.Window;
import com.soyatec.eface.upf.actions.RoutedEventArgs;
public class Action extends Window {
   /**
   * @param sender
    * @param eventArgs
    */
   public void onClick(Object sender, RoutedEventArgs eventArgs) {
      // TODO Auto-generated method stub
   }
}

Now we add "TODO" event for the onClick method in the java code :

For testing the action, click on the live display area where is Click here button, "Hello world" window displays. You can also use the Preview button to render the "Click here" window, then click on the Click here button.

See dynamic demo at http://www.soyatec.com/eface/video/Sample1.html

3. Binding data to a control

This scenario describes name (String type) and age (int type) binds respectively. When you edit the value in the textbox, then property value of the right side is changed synchronously.

Fill the content of the file with the following code. Under the current the project, right click the src, select New->Other..., unfold eFace XAML, chose Window component, click next button, fill Package as gui, Name as PersonView. The same way to build a package called model with a Person.java file. The function of package gui is that PersonView.java and PersonView.xaml present property value edition part. The function of Person.java is that Person.java presents the property value being inputted in the right side of the window.

There are 2 steps to implement this data binding: creaging UI and property binding.

1)Creating UI
Fulfill this data binding, creating UI is the first step
PersonView.xaml

This code shows the UI like the following presentation

2)Property binding
Based on the above UI code, enrich it like the following,

PersonView.xaml

The following picture shows the above code adding explanation

Click Preview to view this UI or right click PersonView.xaml, select XAML Open->Open to see UI. This code shows name and age binds respectively. When you change Name or Age, and enter Enter key, the right side Name or Age is changed synchronously.

See dynamic demo at http://www.soyatec.com/eface/video/DataBinding01.html

To get the source code, please visit http://www.soyatec.com/eface/webdemo/#DataBinding01

To see an enlarged view, click here. The demo takes 80 seconds.

eFace Overview

1. Creating UI with XAML editor

2. Managing handle events with java code

3. Binding data to a control