Jump to: navigation, search

Difference between revisions of "JFace Data Binding/Rhino"

m (XWT/Javascript)
 
Line 1: Line 1:
 
== Target ==
 
== Target ==
  
The goal of <b>JFace Data Binding/Rhino</b> is to support bindings to Rhino Javascript Scriptable Object.  See (for the moment) [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/jface-databinding-rhino/ TK-UI SVN] but we are discussing with the Eclipse Team on where it can be made available.
+
The goal of <b>JFace Data Binding/Rhino</b> is to support binding to a Rhino Javascript Scriptable Object.  The sources of a working prototype are available in [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/jface-databinding-rhino/ TK-UI SVN] but we are discussing with the Eclipse Team on where it can be made available.
  
<b>JFace Data Binding/Rhino</b> need <b>Rhino 1.6.6</b>, because to detect the change of the property of Javascript Object (thank's to Simon Kaegi), the Rhino observable value use getter/setter ScriptableObject#setGetterOrSetter(....) to fire JFace Databinding event.
+
<b>JFace Data Binding/Rhino</b> needs <b>Rhino 1.6.6</b>, because to detect the change of a Javascript Object property (thanks to Simon Kaegi), the Rhino observable value has to use ScriptableObject#setGetterOrSetter(....) to fire JFace Databinding events.
  
 
== Use-case ==
 
== Use-case ==
  
Take a simple example. Imagine you have this script :  
+
Let's start with a simple example. Imagine you have this script :  
  
 
<pre>
 
<pre>
Line 17: Line 17:
 
</pre>
 
</pre>
  
And you wish bind the property 'name' of the scriptable object person with SWT Text.
+
And you wish to bind the property 'name' of the scriptable object 'person' with an SWT Text widget.
  
 
[[Image:Jface-db-rhino-person.png]]
 
[[Image:Jface-db-rhino-person.png]]
  
On load form page, SWT Text has 'Simon' value. When user type 'Boris' into SWT Text, it update
+
When the form page loads, SWT Text's value is 'Simon'. When the user types 'Boris' into the the Text widget, it updates
property 'name' of the scriptable object person with 'Boris' value.
+
the property 'name' of the scriptable object 'person' with the value 'Boris'.
  
 
== RhinoObservables ==
 
== RhinoObservables ==
  
Like another JFace Databinding implementations (SWT, Beans, Pojo...), Rhino bindings project give you several JFace IObservableValue and IObservableList Rhino implementations accessible via the IObservable factory org.eclipse.core.databinding.rhino.<b>RhinoObservables</b>.
+
Like the other JFace Databinding implementations (SWT, Beans, Pojo...), the Rhino bindings project gives you several JFace IObservableValue and IObservableList implementations accessible via the IObservable factory org.eclipse.core.databinding.rhino.<b>RhinoObservables</b>.
  
Here the code of the scriptable object Person binding wich use RhinoObservables :  
+
Here is how to use RhinoObservables ti do the binding:  
  
 
<pre>
 
<pre>
// 1. Prepare script to excecute
+
// 1. Prepare script to execute
 
String script = "function Person(name) {this.name = name}; " +
 
String script = "function Person(name) {this.name = name}; " +
 
" var person = new Person('Simon')";
 
" var person = new Person('Simon')";
Line 58: Line 58:
  
 
== Why JFace Rhino Databinding? ==
 
== Why JFace Rhino Databinding? ==
 
+
One might ask "why would I need JFace Rhino Databinding?"? I will try to explain step by step why I think JFace Rhino Databinding could be useful.
You can tell you, "why I need JFace Rhino Databinding?"? I will try to explain step by step why I think JFace Rhino Databinding could be usefull.
+
  
 
=== Eclipse E4/Declarative UI ===
 
=== Eclipse E4/Declarative UI ===
 
   
 
   
One [http://www.eclipse.org/e4/ Eclipse E4] target is to have declarative UI capability.  
+
One [http://www.eclipse.org/e4/ Eclipse E4] target is to have declarative UI capabilities.  
[http://wiki.eclipse.org/E4/DeclarativeUI/XWT XWT] is a proposition about declarative UI. If you want display SWT Text, you can write this XML content :  
+
[http://wiki.eclipse.org/E4/DeclarativeUI/XWT XWT] is a declarative UI proposal. With XWT, creating a shell with a text widget can be done using this xml snippet :  
  
 
<source lang="xml">
 
<source lang="xml">
Line 78: Line 77:
 
=== XWT/Bean binding ===
 
=== XWT/Bean binding ===
  
XWT support [http://wiki.eclipse.org/E4/DeclarativeUI/XWT#5._Data_Binding Beans bindind] with declarative mean. For instance if we bind the text attribute of Text to a property “Name” of a Bean Person, here is the data binding expression:  
+
XWT supports [http://wiki.eclipse.org/E4/DeclarativeUI/XWT#5._Data_Binding Beans binding] with declarative means. For instance if we bind the text attribute of Text to a property “Name” of a Bean Person, here is the data binding expression:  
  
 
<source lang="xml">
 
<source lang="xml">
Line 86: Line 85:
 
</source>
 
</source>
  
Internally, XWT use JFace Databinding to manage binding, so we can extend it to manage any bindings (EMF, DOM...).
+
Internally, XWT use JFace Databinding to manage the binding, so we can extend it to manage different bindings (EMF, DOM...).
  
 
=== XWT/Javascript binding ===
 
=== XWT/Javascript binding ===
  
XWT has intention to support Javascript (see [https://bugs.eclipse.org/bugs/show_bug.cgi?id=266772 Bug 266772]). If we take the below [[#Use-case]] with XWT we could write this :  
+
XWT is intending to support Javascript (see [https://bugs.eclipse.org/bugs/show_bug.cgi?id=266772 Bug 266772]). If we take the previous [[#Use-case]] with XWT we could write this :  
  
 
<source lang="xml">
 
<source lang="xml">
Line 109: Line 108:
 
</source>
 
</source>
  
So "text" property of SWT Text will be bounded with the "name" property of the javascript object person by using binding expression :  
+
So the "text" property of SWT Text will be bound with the "name" property of the javascript object person by using this binding expression :  
  
 
<source lang="xml">
 
<source lang="xml">
Line 117: Line 116:
 
=== Declarative UI/Javascript/Akrogen ===
 
=== Declarative UI/Javascript/Akrogen ===
  
At this step you can tell you again, why having scriptable object management with declarative UI?
+
Another question which may arise is "why having scriptable object management with declarative UI ?"
Before doing my answer I would like speak about [http://akrogen.sourceforge.net/ Akrogen] which is Eclipse plugin to generate code.
+
Before answering to this, I would like to speak about [http://akrogen.sourceforge.net/ Akrogen] which is an Eclipse plugin for code generation.
 
+
With Akrogen you can describe your Eclipse wizard with declarative mean with XML/XUL and javascript. The XUL content contains a link to a template (Freemarker, XSL, velocity) which must be called when Finish button is called. So you can define ScriptableObject into your XUL wizard. XUL element (SWT UI) bounded with the ScriptableObject update the ScriptableObject and after you can use it into template Freemarker.
+
  
My idea is to improve Akrogen to use the E4 Declarative UI solution. Take a sample. Imagine you want have a wizard page with a SWT Text. User type 'Simon' and click on Finish button of the wizard page, it generate the file :  
+
With Akrogen you can describe your Eclipse wizard with declarative means using XML/XUL and javascript. The XML points to a template (Freemarker, XSL, velocity) which will be called when the Finish button is pressed. You can define some ScriptableObjects in the XUL wizard, bind them to the SWT widgets and reference them in the template.
 +
I'm planning to improve Akrogen by using the E4 Declarative UI solution. Take a sample. Imagine you want have a wizard page with an SWT Text Widget. The User types 'Simon' and hits the Finish button of the wizard page, which results int the followoing file being generated :  
  
 
<pre>
 
<pre>
Line 128: Line 126:
 
</pre>
 
</pre>
  
You wish manage that with Javascript Object Person. If you wish use [http://freemarker.sourceforge.net/ Freemarker] template, you can write the <b>HelloWord.ftl</b> template like this :  
+
You wish to manage this with a Javascript Object Person. If you were to use a [http://freemarker.sourceforge.net/ Freemarker] template, you can write the following <b>HelloWord.ftl</b> template :  
  
 
<pre>
 
<pre>
Line 134: Line 132:
 
</pre>
 
</pre>
  
Here an example to declare the wizard page with XWT :
+
And here is the wizard page description with XWT :
  
 
<source lang="xml">
 
<source lang="xml">

Latest revision as of 11:21, 18 March 2009

Target

The goal of JFace Data Binding/Rhino is to support binding to a Rhino Javascript Scriptable Object. The sources of a working prototype are available in TK-UI SVN but we are discussing with the Eclipse Team on where it can be made available.

JFace Data Binding/Rhino needs Rhino 1.6.6, because to detect the change of a Javascript Object property (thanks to Simon Kaegi), the Rhino observable value has to use ScriptableObject#setGetterOrSetter(....) to fire JFace Databinding events.

Use-case

Let's start with a simple example. Imagine you have this script :

function Person(name) {
  this.name = name
};

var person = new Person('Simon')

And you wish to bind the property 'name' of the scriptable object 'person' with an SWT Text widget.

Jface-db-rhino-person.png

When the form page loads, SWT Text's value is 'Simon'. When the user types 'Boris' into the the Text widget, it updates the property 'name' of the scriptable object 'person' with the value 'Boris'.

RhinoObservables

Like the other JFace Databinding implementations (SWT, Beans, Pojo...), the Rhino bindings project gives you several JFace IObservableValue and IObservableList implementations accessible via the IObservable factory org.eclipse.core.databinding.rhino.RhinoObservables.

Here is how to use RhinoObservables ti do the binding:

// 1. Prepare script to execute
String script = "function Person(name) {this.name = name}; " +
		" var person = new Person('Simon')";
		
// 2. Load Rhino script by using ImporterTopLevel  
ScriptableObject global = null;
try {
  Context cx = ContextFactory.getGlobal().enterContext();
  global = new ImporterTopLevel(cx);
  cx.evaluateString(global, script, null, 0, null);
} finally {
  Context.exit();
}

		
// 3. Get UI observable 
IObservableValue uiObservable = SWTObservables.observeText(textWidget, SWT.Modify);
				
// 4. Get Rhino observable
IObservableValue rhinoObservable = RhinoObservables.observeValue(global, "person", "name");
			
// 5. Bind JS Person#name with SWT Text
DataBindingContext bindingContext = new DataBindingContext();
bindingContext.bindValue(uiObservable, rhinoObservable, null, null);

Why JFace Rhino Databinding?

One might ask "why would I need JFace Rhino Databinding?"? I will try to explain step by step why I think JFace Rhino Databinding could be useful.

Eclipse E4/Declarative UI

One Eclipse E4 target is to have declarative UI capabilities. XWT is a declarative UI proposal. With XWT, creating a shell with a text widget can be done using this xml snippet :

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt">
    <Shell.layout>
       <FillLayout/>
    </Shell.layout>
    <Text />
</Shell>

XWT/Bean binding

XWT supports Beans binding with declarative means. For instance if we bind the text attribute of Text to a property “Name” of a Bean Person, here is the data binding expression:

...
<Text text="{binding path=Name}"/>
...

Internally, XWT use JFace Databinding to manage the binding, so we can extend it to manage different bindings (EMF, DOM...).

XWT/Javascript binding

XWT is intending to support Javascript (see Bug 266772). If we take the previous #Use-case with XWT we could write this :

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    xmlns:r="http://www.eclipse.org/rhino">
    <r:script>
       function Person(name) {
         this.name = name
       };
       var person = new Person('Simon')
    <r:script>
    <Shell.layout>
       <FillLayout/>
    </Shell.layout>
    <Text text="{binding source=person path=name}" />
</Shell>

So the "text" property of SWT Text will be bound with the "name" property of the javascript object person by using this binding expression :

  <Text text="{binding source=person path=name}" />

Declarative UI/Javascript/Akrogen

Another question which may arise is "why having scriptable object management with declarative UI ?" Before answering to this, I would like to speak about Akrogen which is an Eclipse plugin for code generation.

With Akrogen you can describe your Eclipse wizard with declarative means using XML/XUL and javascript. The XML points to a template (Freemarker, XSL, velocity) which will be called when the Finish button is pressed. You can define some ScriptableObjects in the XUL wizard, bind them to the SWT widgets and reference them in the template. I'm planning to improve Akrogen by using the E4 Declarative UI solution. Take a sample. Imagine you want have a wizard page with an SWT Text Widget. The User types 'Simon' and hits the Finish button of the wizard page, which results int the followoing file being generated :

Hello Simon!

You wish to manage this with a Javascript Object Person. If you were to use a Freemarker template, you can write the following HelloWord.ftl template :

Hello {person.name}!

And here is the wizard page description with XWT :

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    xmlns:r="http://www.eclipse.org/rhino"
    xmlns:a="http://akrogen.sourceforge.net/">
    <r:script>
       function Person(name) {
         this.name = name
       };
       var person = new Person('Simon')
    <r:script>
    <Shell.layout>
       <FillLayout/>
    </Shell.layout>
 
    <Text text="{binding source=person path=name}" />
 
    <a:template uri="HelloWord.ftl" />
</Shell>