Difference between revisions of "JFace Data Binding/Rhino"

From Eclipsepedia

Jump to: navigation, search
m (Target)
 
(17 intermediate revisions by one user not shown)
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.
  
E4 project
+
=== Eclipse E4/Declarative UI ===
 +
 +
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 declarative UI proposal. With XWT, creating a shell with a text widget can be done using this xml snippet :
  
XWT
+
<source lang="xml">
 +
<Shell xmlns="http://www.eclipse.org/xwt/presentation"
 +
    xmlns:x="http://www.eclipse.org/xwt">
 +
    <Shell.layout>
 +
      <FillLayout/>
 +
    </Shell.layout>
 +
    <Text />
 +
</Shell>
 +
</source>
 +
 
 +
=== XWT/Bean binding ===
 +
 
 +
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">
 +
...
 +
<Text text="{binding path=Name}"/>
 +
...
 +
</source>
 +
 
 +
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 [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">
 +
<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>
 +
</source>
 +
 
 +
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">
 +
  <Text text="{binding source=person path=name}" />
 +
</source>
 +
 
 +
=== 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 [http://akrogen.sourceforge.net/ 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 :
 +
 
 +
<pre>
 +
Hello Simon!
 +
</pre>
 +
 
 +
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>
 +
Hello {person.name}!
 +
</pre>
 +
 
 +
And here is the wizard page description with XWT :
 +
 
 +
<source lang="xml">
 +
<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>
 +
</source>

Latest revision as of 12:21, 18 March 2009

Contents

[edit] 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.

[edit] 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'.

[edit] 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);

[edit] 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.

[edit] 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>

[edit] 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...).

[edit] 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}" />

[edit] 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>