Difference between revisions of "JFace Data Binding/DOM"

From Eclipsepedia

Jump to: navigation, search
(New page: {{JFace Data Binding}} == 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 ...)
 
m (DOM binding sample/Table Master detail)
 
(10 intermediate revisions by 2 users not shown)
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 nodes.  See (for the moment) [http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/ TK-UI SVN] or [https://bugs.eclipse.org/bugs/show_bug.cgi?id=243380 Bug 243380]-
 +
you can find two plug-in projects that provide DOM-based observables :
  
 
<ul>
 
<ul>
Line 8: Line 10:
 
     <li>[http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/org.eclipse.core.examples.databinding.dom org.eclipse.core.examples.databinding.dom]  : DOM binding samples.</li>
 
     <li>[http://tk-ui.svn.sourceforge.net/svnroot/tk-ui/inbox/org.eclipse.core.examples.databinding.dom org.eclipse.core.examples.databinding.dom]  : DOM binding samples.</li>
 
</ul>
 
</ul>
 +
 +
<p>
 +
The DOM bindings project gives you two means to bind to a w3c DOM Node, just like other JFace Databinding implementations (SWT, Beans, Pojo...),
 +
through the use of a factory that creates DOM-based IObservableValue and IObservableList implementations  :
 +
 +
<ul>
 +
    <li><b>org.eclipse.core.databinding.dom.DOMObservables</b> : this factory give you the capability to bind to a DOM Node
 +
        by setting explicitly the DOM Node to bind to (ex : for instance, retrieve the DOM Node with Document#getElementsByTagName method).
 +
    </li>
 +
    <li><b>org.eclipse.core.databinding.dom.DOMXPathObservables</b> : this factory give you capability to bind to a DOM Node
 +
        retrieved via XPath. With this factory you can set the DOM Document as the root node and use an XPath Expression
 +
        to select the Node to bind to.
 +
    </li>
 +
</ul>
 +
</p>
 +
 +
== DOMObservables/DOMXPathObservables factory ==
 +
 +
<p>Like other JFace Databinding implementations (SWT, Beans, Pojo...), DOM bindings project give you several
 +
  JFace IObservableValue and IObservableList DOM implementations accessible via
 +
  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 to a DOM Node
 +
    by setting explicitly the DOM Node to bind to
 +
    (ex : for instance, retrieve the DOM Node with Document#getElementsByTagName method) :
 +
  <ul>
 +
      <li>DOMObservables#observeAttrValue : Observe an Attribute value of a DOM Element. For example, you can bind the attribute value
 +
          of a DOM element with Text property of an 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 :
 +
 +
<source lang="xml">
 +
<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>
 +
</source>
 +
 +
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]]
 +
 +
Here schema which show bindings between DOM Nodes and UI SWT widgets :
 +
 +
[[Image:TestHTMLInputText_Explanation.JPG]]
 +
 +
<p>
 +
<ul>
 +
  <li> (1) : Bind CharacterData of DOM Element title with Text property of SWT Shell.</li>
 +
  <li> (2) : Bind CharacterData of DOM Element label with Text property of SWT Label.</li>
 +
  <li> (3) : Bind Attribute value of DOM Element input with Text property of SWT Text.</li>
 +
  <li> (4) : Bind DOM Document content with Text property of SWT Text (Area).</li>
 +
</ul>
 +
 +
Here the code used to bind attribute value of DOM Element input with Text property of SWT Text :
 +
 +
<pre>
 +
// 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);
 +
 +
</pre>
 +
 +
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.
 +
 +
<pre>
 +
Text text = new Text(composite, SWT.BORDER);
 +
context.bindValue(SWTObservables.observeText(text, SWT.Modify),
 +
      DOMXPathObservables.observeAttrValue(realm, document,
 +
  "value", "//input", null), null, null);
 +
</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 :
 +
 +
<source lang="xml">
 +
<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>
 +
</source>
 +
 +
TODO : show screenshot
 +
 +
== DOM binding sample/Table 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/persons/TestDOMTableViewerMasterDetail.java TestDOMTableViewerMasterDetail] is the same sample than BeansObservables (TestMasterDetail) but with XML context.
 +
 +
Here the screenshot of this test :
 +
 +
[[Image:TestDOMTableMasterDetail.JPG]]
 +
 +
Right textarea is bounded with DOM Document. So if you type some XML content, it update content of widgets (Table, Text...).
 +
If you update Text widget (Person name), it update the DOM Document and the textarea.
 +
 +
Here the XML content loaded into DOM Document bounded with UI :
 +
 +
<source lang="xml">
 +
<persons>
 +
<person name="John"
 +
address="1234"
 +
city="Wheaton"
 +
state="IL" >
 +
<orders>
 +
<order orderNumber="0"
 +
  date="04/08/08" />
 +
<order orderNumber="1"
 +
  date="04/09/08" />  
 +
</orders>
 +
</person>
 +
<person name="Jane"
 +
address="1234"
 +
city="Glen Ellyn"
 +
state="IL" >
 +
<orders>
 +
<order orderNumber="0"
 +
  date="01/08/08" />
 +
<order orderNumber="1"
 +
  date="08/09/08" />  
 +
<order orderNumber="2"
 +
  date="24/09/08" />  
 +
</orders>
 +
</person>
 +
<person name="Frank"
 +
address="1234"
 +
city="Lombard"
 +
state="IL" >
 +
<orders>
 +
<order orderNumber="0"
 +
  date="08/08/08" />
 +
<order orderNumber="1"
 +
  date="15/08/08" />  
 +
<order orderNumber="2"
 +
  date="17/08/08" />  
 +
<order orderNumber="3"
 +
  date="05/09/08" />
 +
<order orderNumber="4"
 +
  date="07/09/08" />    
 +
</orders>
 +
</person>
 +
<person name="Joe"
 +
address="1234"
 +
city="Elmhurst"
 +
state="IL" >
 +
<orders>
 +
<order orderNumber="0"
 +
  date="06/10/08" />  
 +
</orders>
 +
</person>
 +
<person name="Chet"
 +
address="1234"
 +
city="Oak Lawn"
 +
state="IL" >
 +
<orders>
 +
<order orderNumber="0"
 +
  date="02/02/08" />  
 +
</orders>
 +
</person>
 +
<person name="Wilbur"
 +
address="1234"
 +
city="Austin"
 +
state="IL" >
 +
<orders>
 +
<order orderNumber="0"
 +
  date="28/04/08" />
 +
<order orderNumber="0"
 +
  date="12/02/08" />
 +
<order orderNumber="0"
 +
  date="24/02/08" />  
 +
</orders>
 +
</person>
 +
<person name="Elmo"
 +
address="1234"
 +
city="Chicago"
 +
state="IL" >
 +
</person>
 +
</persons>
 +
</source>
  
 
[[Category:Data Binding]]
 
[[Category:Data Binding]]

Latest revision as of 12:17, 18 March 2009

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

Contents

[edit] Target

Work is underway to support binding to w3c DOM nodes. See (for the moment) TK-UI SVN or Bug 243380- you can find two plug-in projects that provide DOM-based observables :

The DOM bindings project gives you two means to bind to a w3c DOM Node, just like other JFace Databinding implementations (SWT, Beans, Pojo...), through the use of a factory that creates DOM-based IObservableValue and IObservableList implementations  :

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

[edit] DOMObservables/DOMXPathObservables factory

Like other JFace Databinding implementations (SWT, Beans, Pojo...), DOM bindings project give you several JFace IObservableValue and IObservableList DOM implementations accessible via 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 to a DOM Node by setting explicitly the DOM Node to bind to (ex : for instance, retrieve the DOM Node with Document#getElementsByTagName method) :

  • DOMObservables#observeAttrValue : Observe an Attribute value of a DOM Element. For example, you can bind the attribute value of a DOM element with Text property of an 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.

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

[edit] DOM binding sample/IObservableList

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

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

[edit] DOM binding sample/Table Master detail

The TestDOMTableViewerMasterDetail is the same sample than BeansObservables (TestMasterDetail) but with XML context.

Here the screenshot of this test :

TestDOMTableMasterDetail.JPG

Right textarea is bounded with DOM Document. So if you type some XML content, it update content of widgets (Table, Text...). If you update Text widget (Person name), it update the DOM Document and the textarea.

Here the XML content loaded into DOM Document bounded with UI :

<persons>
	<person name="John"
			address="1234"
			city="Wheaton"
			state="IL" >
			<orders>
				<order orderNumber="0" 
					   date="04/08/08" />
				<order orderNumber="1" 
					   date="04/09/08" />					   
			</orders>
	</person>
	<person name="Jane"
			address="1234"
			city="Glen Ellyn"
			state="IL" >
			<orders>
				<order orderNumber="0" 
					   date="01/08/08" />
				<order orderNumber="1" 
					   date="08/09/08" />					   
				<order orderNumber="2" 
					   date="24/09/08" />					   
			</orders>
	</person>
	<person name="Frank"
			address="1234"
			city="Lombard"
			state="IL" >
			<orders>
				<order orderNumber="0" 
					   date="08/08/08" />
				<order orderNumber="1" 
					   date="15/08/08" />					   
				<order orderNumber="2" 
					   date="17/08/08" />					   
				<order orderNumber="3" 
					   date="05/09/08" />
				<order orderNumber="4" 
					   date="07/09/08" />					   					   
			</orders>			
	</person>
	<person name="Joe"
			address="1234"
			city="Elmhurst"
			state="IL" >
			<orders>
				<order orderNumber="0" 
					   date="06/10/08" />								  
			</orders>			
	</person>
	<person name="Chet"
			address="1234"
			city="Oak Lawn"
			state="IL" >
			<orders>
				<order orderNumber="0" 
					   date="02/02/08" />								  
			</orders>			
	</person>
	<person name="Wilbur"
			address="1234"
			city="Austin"
			state="IL" >
			<orders>
				<order orderNumber="0" 
					   date="28/04/08" />			
				<order orderNumber="0" 
					   date="12/02/08" />			
				<order orderNumber="0" 
					   date="24/02/08" />								  
			</orders>			
	</person>
	<person name="Elmo"
			address="1234"
			city="Chicago"
			state="IL" >
	</person>	
</persons>