Jump to: navigation, search

Difference between revisions of "JFace Data Binding/DOM"

Line 171: Line 171:
  
 
TODO : show screenshot
 
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 :
 +
 +
<pre>
 +
<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>
 +
</pre>
  
 
[[Category:Data Binding]]
 
[[Category:Data Binding]]

Revision as of 16:58, 5 August 2008

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

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

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>