Difference between revisions of "JFace Data Binding/DOM"

From Eclipsepedia

Jump to: navigation, search
(DOM binding sample)
Line 2: Line 2:
  
 
== Target ==
 
== Target ==
Work is underway to support binding to w3c DOM node.  See (for the moment) [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/ TK-UI SVN] - you can find two plug-in project that provides DOM-based observables :  
+
 
 +
Work is underway to support binding to w3c DOM node.  See (for the moment) [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/ TK-UI SVN] -
 +
you can find two plug-in project that provides DOM-based observables :
  
 
<ul>
 
<ul>
Line 9: Line 11:
 
</ul>
 
</ul>
  
== DOM binding sample ==
+
<p>
 +
DOM bindings project give you two means to bind DOM Node. Like another JFace Databinding implementation (SWT, Beans, Pojo...),
 +
you have factory which create IObservableValue and IObservableList DOM implementation  :
  
The [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/org.eclipse.core.examples.databinding.dom/src/org/eclipse/core/examples/databinding/dom/html/input/TestHTMLInputText.java TestHTMLInputText] DOM binding sample explains how bind this XHTML content :  
+
<ul>
 +
    <li><b>org.eclipse.core.databinding.dom.DOMObservables</b> : this factory give you capability to bind DOM Node
 +
        by setting explicitly the DOM Node to bind (ex : for instance, retrive the DOM Node with Document#getElementsByTagName method).
 +
    </li>
 +
    <li><b>org.eclipse.core.databinding.dom.DOMXPathObservables</b> : this factory give you capability to bind DOM Node
 +
        retrieved with XPath. With this factory you can set the DOM Document as root node and use XPath Expression
 +
        to retrieve Node to bind.
 +
    </li>
 +
</ul>
 +
</p>
 +
 
 +
== DOMObservables/DOMXPathObservables factory ==
 +
 
 +
<p>Like another JFace Databinding implementation (SWT, Beans, Pojo...), DOM bindings project give you several
 +
  JFace IObservableValue and IObservableList DOM implementation accessible with
 +
  two factories <b>org.eclipse.core.databinding.dom.DOMObservables</b> and
 +
  <b>org.eclipse.core.databinding.dom.DOMXPathObservables</b>.
 +
</p>
 +
 
 +
<p>
 +
  <b>org.eclipse.core.databinding.dom.DOMObservables</b> factory give you capability to bind DOM Node
 +
    by setting explicitly the DOM Node to bind
 +
    (ex : for instance, retrieve the DOM Node with Document#getElementsByTagName method) :
 +
  <ul>
 +
      <li>DOMObservables#observeAttrValue : Observe Attribute value of DOM Element. You can for example bind attribute value
 +
          of DOM element with Text property of SWT Text.
 +
      </li>
 +
      <li>DOMObservables#observeAttrPresent : Observe if an attribute (attribute name) of DOM Element is present.
 +
      You can for example bind attribute (ex : checked="checked") of DOM element with Selection property of SWT Button (SWT.CHECK).
 +
      When you check the Checkbox, the DOM element has checked attribute with "checked" value, when you uncheck the Checbox
 +
      ckecked attribute is removed from DOM Element.
 +
      </li>
 +
      <li>DOMObservables#observeCharacterData : Observe character data of DOM Node. You can for example bind character data of
 +
          DOM Element (Text content) with Text property of SWT Text.
 +
      </li>
 +
      <li>DOMObservables#observeContent : Observe DOM node content, in other words observe when the subtree of DOM Node
 +
          is modified. You can for example bind DOM Document content with Text property of SWT Text (SWT.MULTI) to observe
 +
          any update of the DOM Document. As soon as the DOM Document is updated (ex : an attribute value is modified),
 +
          the SWT Text is refreshed with the new DOM Document content.
 +
      </li>
 +
      <li>DOMObservables#observeItems : Observe DOM NodeList.
 +
      </li>
 +
      <li>DOMObservables#observeDetailList : Observe DOM NodeList with master detail.
 +
      </li>
 +
  </ul>
 +
</p>
 +
 
 +
<p>
 +
  <b>org.eclipse.core.databinding.dom.DOMXPathObservables</b> factory give you capability to bind DOM Node
 +
    retrieved with XPath. With this factory you can set the DOM Document as root node and use XPath Expression
 +
    to retrieve Node to bind.
 +
</p>
 +
 
 +
== DOM binding sample/IObservableValue ==
 +
 
 +
The [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/org.eclipse.core.examples.databinding.dom/src/org/eclipse/core/examples/databinding/dom/html/input/TestHTMLInputText.java TestHTMLInputText]
 +
DOM binding sample show you how bind this XHTML content :
  
 
<pre>
 
<pre>
Line 17: Line 77:
 
   <title>DOM Bindings - HTML Input Text Sample.</title>
 
   <title>DOM Bindings - HTML Input Text Sample.</title>
 
   <label>This sample bind :
 
   <label>This sample bind :
* CharacterData of DOM Element title with Text property of SWT Shell.  
+
* CharacterData of DOM Element title with Text property of SWT Shell.
* CharacterData of DOM Element label with Text property of SWT Label.  
+
* CharacterData of DOM Element label with Text property of SWT Label.
* Attribute value of DOM Element input with Text property of SWT Text.  
+
* Attribute value of DOM Element input with Text property of SWT Text.
 
* DOM Document content with Text property of SWT Text (Area).</label>
 
* DOM Document content with Text property of SWT Text (Area).</label>
   <input type="text" value="bla bla bla" />
+
   <input type="text" value="bla bla bla" />
 
</html>
 
</html>
 
</pre>
 
</pre>
  
with several SWT UI widgets :  
+
with several SWT UI widgets (SWT Shell; SWT Text, SWT label).
 +
Here the result of binding between the XHTML DOM Document and SWT UI widgets. :
  
 
[[Image:TestHTMLInputText.JPG]]
 
[[Image:TestHTMLInputText.JPG]]
  
This screen show the result of binding between the XHTMl DOM Document and SWT UI widgets.
+
Here schema which show bindings between DOM Nodes and UI SWT widgets :
 +
 
 +
[[Image:TestHTMLInputText_Explanation.JPG]]
  
 
<p>
 
<p>
This sample is DOM IObservableValue implementation. It bind:
 
 
<ul>
 
<ul>
   <li> CharacterData of DOM Element title with Text property of SWT Shell.</li>  
+
   <li> (1) : Bind CharacterData of DOM Element title with Text property of SWT Shell.</li>
   <li> CharacterData of DOM Element label with Text property of SWT Label.</li>  
+
   <li> (2) : Bind CharacterData of DOM Element label with Text property of SWT Label.</li>
   <li> Attribute value of DOM Element input with Text property of SWT Text.</li>
+
   <li> (3) : Bind Attribute value of DOM Element input with Text property of SWT Text.</li>
   <li> DOM Document content with Text property of SWT Text (Area).</li>
+
   <li> (4) : Bind DOM Document content with Text property of SWT Text (Area).</li>
 
</ul>
 
</ul>
 
DOMObservables is used to create IObservableValue or IObservableList
 
DOM Node implementation to manage DOM binding.
 
  
 
Here the code used to bind attribute value of DOM Element input with Text property of SWT Text :  
 
Here the code used to bind attribute value of DOM Element input with Text property of SWT Text :  
Line 58: Line 117:
 
</pre>
 
</pre>
  
You can see that in this sample the observed Node is retrieved with getElementsByTagName methods.
+
You can see that in this sample the observed Node is retrieved with Document#getElementsByTagName method.
 
You can use XPath to retrieve Node to observe. To do that you must use DOMXPathObservables DOM observables factory.
 
You can use XPath to retrieve Node to observe. To do that you must use DOMXPathObservables DOM observables factory.
  
Line 67: Line 126:
 
  "value", "//input", null), null, null);
 
  "value", "//input", null), null, null);
 
</pre>
 
</pre>
 +
 +
== DOM binding sample/IObservableList ==
 +
 +
TODO : develop a sample with Combo (see for the moment master detail sample)
 +
 +
== DOM binding sample/Master detail ==
 +
 +
The [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/org.eclipse.core.examples.databinding.dom/src/org/eclipse/core/examples/databinding/dom/masterdetail/countries/TestDOMListViewerMasterDetail.java TestDOMListViewerMasterDetail]
 +
DOM binding sample show you how bind this XML content :
 +
 +
<pre>
 +
<countries>
 +
  <country name="Country 1" >
 +
    <cities>
 +
      <city name="City 1.1" >
 +
        <street name="Street 1.1.1" />
 +
      </city>
 +
      <city name="City 1.2" >
 +
        <street name="Street 1.2.1" />
 +
        <street name="Street 1.2.2" />
 +
<street name="Street 1.2.3" />
 +
      </city>
 +
      <city name="City 1.3" >
 +
        <street name="Street 1.3.1" />
 +
<street name="Street 1.3.2" />
 +
      </city>
 +
    </cities>
 +
    </country>
 +
    <country name="Country 2" >
 +
      <cities>
 +
      <city name="City 2.1" >
 +
        <street name="Street 2.1.1" />
 +
<street name="Street 2.1.2" />
 +
      </city>
 +
      <city name="City 2.2" >
 +
        <street name="Street 2.2.1" />
 +
<street name="Street 2.2.2" />
 +
<street name="Street 2.2.3" />
 +
      </city>
 +
    </cities>
 +
  </country>
 +
</countries>
 +
</pre>
 +
 +
TODO : show screenshot
  
 
[[Category:Data Binding]]
 
[[Category:Data Binding]]

Revision as of 07:13, 4 August 2008

JFace Data Binding
Home
How to Contribute
FAQ
Snippets
Concepts
Binding
Converter
Observable
Realm

Contents

Target

Work is underway to support binding to w3c DOM node. See (for the moment) TK-UI SVN - you can find two plug-in project that provides DOM-based observables :

DOM bindings project give you two means to bind DOM Node. Like another JFace Databinding implementation (SWT, Beans, Pojo...), you have factory which create IObservableValue and IObservableList DOM implementation  :

  • org.eclipse.core.databinding.dom.DOMObservables : this factory give you capability to bind DOM Node by setting explicitly the DOM Node to bind (ex : for instance, retrive the DOM Node with Document#getElementsByTagName method).
  • org.eclipse.core.databinding.dom.DOMXPathObservables : this factory give you capability to bind DOM Node retrieved with XPath. With this factory you can set the DOM Document as root node and use XPath Expression to retrieve Node to bind.

DOMObservables/DOMXPathObservables factory

Like another JFace Databinding implementation (SWT, Beans, Pojo...), DOM bindings project give you several JFace IObservableValue and IObservableList DOM implementation accessible with two factories org.eclipse.core.databinding.dom.DOMObservables and org.eclipse.core.databinding.dom.DOMXPathObservables.

org.eclipse.core.databinding.dom.DOMObservables factory give you capability to bind DOM Node by setting explicitly the DOM Node to bind (ex : for instance, retrieve the DOM Node with Document#getElementsByTagName method) :

  • DOMObservables#observeAttrValue : Observe Attribute value of DOM Element. You can for example bind attribute value of DOM element with Text property of SWT Text.
  • DOMObservables#observeAttrPresent : Observe if an attribute (attribute name) of DOM Element is present. You can for example bind attribute (ex : checked="checked") of DOM element with Selection property of SWT Button (SWT.CHECK). When you check the Checkbox, the DOM element has checked attribute with "checked" value, when you uncheck the Checbox ckecked attribute is removed from DOM Element.
  • DOMObservables#observeCharacterData : Observe character data of DOM Node. You can for example bind character data of DOM Element (Text content) with Text property of SWT Text.
  • DOMObservables#observeContent : Observe DOM node content, in other words observe when the subtree of DOM Node is modified. You can for example bind DOM Document content with Text property of SWT Text (SWT.MULTI) to observe any update of the DOM Document. As soon as the DOM Document is updated (ex : an attribute value is modified), the SWT Text is refreshed with the new DOM Document content.
  • DOMObservables#observeItems : Observe DOM NodeList.
  • DOMObservables#observeDetailList : Observe DOM NodeList with master detail.

org.eclipse.core.databinding.dom.DOMXPathObservables factory give you capability to bind DOM Node retrieved with XPath. With this factory you can set the DOM Document as root node and use XPath Expression to retrieve Node to bind.

DOM binding sample/IObservableValue

The TestHTMLInputText DOM binding sample show you how bind this XHTML content :

<html>
  <title>DOM Bindings - HTML Input Text Sample.</title>
  <label>This sample bind :
* CharacterData of DOM Element title with Text property of SWT Shell.
* CharacterData of DOM Element label with Text property of SWT Label.
* Attribute value of DOM Element input with Text property of SWT Text.
* DOM Document content with Text property of SWT Text (Area).</label>
  <input type="text" value="bla bla bla" />
</html>

with several SWT UI widgets (SWT Shell; SWT Text, SWT label). Here the result of binding between the XHTML DOM Document and SWT UI widgets. :

TestHTMLInputText.JPG

Here schema which show bindings between DOM Nodes and UI SWT widgets :

TestHTMLInputText Explanation.JPG

  • (1) : Bind CharacterData of DOM Element title with Text property of SWT Shell.
  • (2) : Bind CharacterData of DOM Element label with Text property of SWT Label.
  • (3) : Bind Attribute value of DOM Element input with Text property of SWT Text.
  • (4) : Bind DOM Document content with Text property of SWT Text (Area).

Here the code used to bind attribute value of DOM Element input with Text property of SWT Text :

// Get input element
Element textElement = (Element) documentElement.getElementsByTagName("input").item(0);

// HTML : <input value="bla bla bla"... >
// Bind Attribute value of DOM Element input with Text property of
// SWT Text.
Text text = new Text(composite, SWT.BORDER);
context.bindValue(SWTObservables.observeText(text, SWT.Modify),
	DOMObservables.observeAttrValue(realm, textElement, "value"),null, null);

You can see that in this sample the observed Node is retrieved with Document#getElementsByTagName method. You can use XPath to retrieve Node to observe. To do that you must use DOMXPathObservables DOM observables factory.

Text text = new Text(composite, SWT.BORDER);
context.bindValue(SWTObservables.observeText(text, SWT.Modify),
     		  DOMXPathObservables.observeAttrValue(realm, document,
		  "value", "//input", null), null, null);

DOM binding sample/IObservableList

TODO : develop a sample with Combo (see for the moment master detail sample)

DOM binding sample/Master detail

The TestDOMListViewerMasterDetail DOM binding sample show you how bind this XML content :

<countries>
  <country name="Country 1" >
    <cities>
      <city name="City 1.1" >
        <street name="Street 1.1.1" />
      </city>
      <city name="City 1.2" >
        <street name="Street 1.2.1" />
        <street name="Street 1.2.2" />
	<street name="Street 1.2.3" />
      </city>
      <city name="City 1.3" >
        <street name="Street 1.3.1" />
	<street name="Street 1.3.2" />
      </city>
    </cities>
    </country>
    <country name="Country 2" >
      <cities>
      <city name="City 2.1" >
        <street name="Street 2.1.1" />
	<street name="Street 2.1.2" />
      </city>
      <city name="City 2.2" >
        <street name="Street 2.2.1" />
	<street name="Street 2.2.2" />
	<street name="Street 2.2.3" />
      </city>
    </cities>
  </country>
</countries>
TODO : show screenshot