| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| |
| <html> |
| <link href="../../book.css" rel="stylesheet" type="text/css" /> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| <title>Data Binding</title> |
| </head> |
| |
| <body> |
| <h1>Data Binding</h1> |
| |
| |
| |
| <p></p> |
| |
| <ul> |
| <li><a href="#databinding_01">What is Data Binding?</a></li> |
| <li><a href="#databinding_02">Basic Data Binding Concepts</a></li> |
| <li><a href="#databinding_03">Creating a Data Binding</a></li> |
| <li><a href="#databinding_04">Specifying the path expression |
| of data binding</a></li> |
| <!-- |
| <li><a href="#databinding_05">Based on JFace Data binding</a></li> |
| --> |
| </ul> |
| |
| <h3><a name="databinding_01"></a>What is Data Binding?</h3> |
| <p>Data Binding is the process that establishes a connection between |
| the application UI and business logic. If the binding has the correct |
| settings and the data provides the proper notifications, then, when the |
| data changes its value, the elements bound to the data reflect |
| changes automatically. Data binding can also mean that if an outer |
| representation of the data in an element changes, then the underlying |
| data can be automatically updated to reflect the change. For example, if |
| the user edits the value in a Text element, the underlying data is |
| automatically updated to reflect that change.</p> |
| |
| <p>A typical use of data binding is to place server or local |
| configuration data into forms or other UI controls. In XWT, this concept |
| is expanded to include the binding of a broad range of properties to a |
| variety of data sources. In XWT, dependency properties of elements can |
| be bound to CLR objects and XML data.</p> |
| |
| |
| <h3><a name="databinding_02"></a>Basic Data Binding Concepts</h3> |
| <p>Regardless of what element you are binding and the nature of your |
| data source, each binding always follows the model illustrated by the |
| following figure:</p> |
| <p align="center"><img src="images/databinding_01.png" /></p> |
| |
| <p>As illustrated by the above figure, data binding is essentially |
| the bridge between your binding target and your binding source. The |
| figure demonstrates the following fundamental XWT data binding concepts. |
| </p> |
| <ul> |
| <li>Typically, each binding has these four components: a binding |
| target object, a target property, a binding source and a path to the |
| value in the binding source to use.</li> |
| <li>The target property must be a dependency property. Most |
| UIElement properties are dependency properties and most dependency |
| properties, except read-only ones, support data binding by default.</li> |
| <li>Although not specified in the figure, it should be noted that |
| the binding source object is not restricted to being a custom CLR |
| object. XWT data binding supports data in the form of CLR objects and |
| XML.</li> |
| </ul> |
| |
| <p>It is important to remember that when you are establishing a |
| binding, you are binding a binding target to a binding source. For |
| example, if you are displaying some underlying XML data in a Text using |
| data binding, you are binding your Text to the XML data.</p> |
| |
| <p>To establish a binding, you use the Binding object. The rest of |
| this topic discusses many of the concepts associated with and some of |
| the properties and usage of the Binding object.</p> |
| |
| <p><b>Direction of the Data Flow</b></p> |
| <p>As mentioned previously and as indicated by the arrow in the |
| figure above, the data flow of a binding can go from the binding target |
| to the binding source or from the binding source to the binding target |
| if the binding source provides the proper notifications.</p> |
| |
| <p>You may want your application to enable users to change the data |
| and propagate it back to the source object. Or you may not want to |
| enable users to update the source data. You can control this by setting |
| the Mode property of your Binding object. XWT supports three ways to handle the |
| binding: <tt>One Way</tt>, <tt>One Time</tt> and <tt>Two Way</tt>.</p> |
| |
| <ul> |
| <li><tt>One Way</tt> binding causes changes to the source property |
| to automatically update the target property, but changes to the target |
| property are not propagated back to the source property. This type of |
| binding is appropriate if the control being bound is implicitly |
| read-only. For instance, you may bind to a source such as a stock |
| ticker or perhaps your target property has no control interface |
| provided for making changes, such as a data-bound background color of a |
| table. If there is no need to monitor the changes of the target |
| property, using the OneWay binding mode avoids the overhead of the |
| TwoWay binding mode.</li> |
| |
| <li><tt>One Time</tt> bind causes changes to the source property |
| to the target property only at the startup, and any changes to the |
| source property are ignored once the control is filled with data the |
| first time.</li> |
| |
| <li><tt>Two Way</tt> binding causes changes to either the source |
| property or the target property to automatically update the other. This |
| type of binding is appropriate for editable forms or other |
| fully-interactive UI scenarios. All properties default to <tt>TwoWay</tt> |
| binding.</li> |
| |
| </ul> |
| |
| <h3><a name="databinding_03"></a>Creating a Data Binding</h3> |
| |
| <p>In XWT project, you establish a data binding using the Binding |
| object, and each binding usually has four components: binding target, |
| target property, binding source, and a path to the source value to use. |
| This section discusses how to set up a data binding.</p> |
| |
| <!-- |
| <p>First, create an XWT project named DataBinding, Creating UI like |
| below.</p> |
| |
| <pre> |
| <span class="XMLElementTag"><Shell</span> <span class="XMLAttrTag">xmlns</span>=<span |
| class="XMLAttrValue">"http://www.eclipse.org/xwt/presentation"</span> |
| <span class="XMLAttrTag">xmlns:x</span>=<span |
| class="XMLAttrValue">"http://www.eclipse.org/xwt"</span> |
| <span class="XMLAttrTag">xmlns:y</span>=<span |
| class="XMLAttrValue">"clr-namespace:org.eclipse.xwt.tests.databinding"</span> |
| <span class="XMLAttrTag">Size</span>=<span |
| class="XMLAttrValue">"400, 300"</span><span class="XMLElementTag">></span> |
| <span class="XMLElementTag"><Shell.layout></span> |
| <span |
| class="XMLElementTag"><GridLayout</span> <span class="XMLAttrTag">numColumns</span>=<span |
| class="XMLAttrValue">"3"</span> <span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></Shell.layout></span> |
| <span class="XMLElementTag"><Label</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"Name"</span> <span |
| class="XMLElementTag">/></span> |
| <span class="XMLElementTag"><Text</span> <span |
| class="XMLAttrTag">x:style</span>=<span class="XMLAttrValue">"BORDER"</span><span |
| class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Text.layoutData></span> |
| <span |
| class="XMLElementTag"><GridData</span> <span class="XMLAttrTag">horizontalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span> <span class="XMLAttrTag">grabExcessHorizontalSpace</span>=<span |
| class="XMLAttrValue">"true"</span> <span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></Text.layoutData></span> |
| <span class="XMLElementTag"></Text></span> |
| <span class="XMLElementTag"><Label></span> |
| <span |
| class="XMLElementTag"><Label.layoutData></span> |
| <span |
| class="XMLElementTag"><GridData</span> <span class="XMLAttrTag">horizontalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span> <span class="XMLAttrTag">grabExcessHorizontalSpace</span>=<span |
| class="XMLAttrValue">"true"</span> <span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></Label.layoutData></span> |
| <span class="XMLElementTag"></Label></span> |
| <span class="XMLElementTag"></Shell></span> |
| </pre> |
| |
| <p>The code shows the UI like the following presentation.</p> |
| <p><img src="images/" /></p> |
| |
| |
| <p>The next step, based on above code, enrich it like following.</p> |
| |
| --> |
| |
| |
| <pre> |
| <span class="XMLElementTag"><Shell</span> <span class="XMLAttrTag">xmlns</span>=<span |
| class="XMLAttrValue">"http://www.eclipse.org/xwt/presentation"</span> |
| <span class="XMLAttrTag">xmlns:x</span>=<span |
| class="XMLAttrValue">"http://www.eclipse.org/xwt"</span> |
| <span class="XMLAttrTag">xmlns:y</span>=<span |
| class="XMLAttrValue">"clr-namespace:org.eclipse.xwt.tests.databinding"</span> |
| <span class="XMLAttrTag">Size</span>=<span |
| class="XMLAttrValue">"400, 300"</span> <span class="XMLAttrTag">DataContext</span>=<span |
| class="XMLAttrValue">"{StaticResource myData}"</span><span |
| class="XMLElementTag">></span> |
| <span class="XMLElementTag"><Shell.layout></span> |
| <span |
| class="XMLElementTag"><GridLayout</span> <span class="XMLAttrTag">numColumns</span>=<span |
| class="XMLAttrValue">"3"</span> <span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></Shell.layout></span> |
| |
| <span class="XMLElementTag"><x:Shell.Resources></span> |
| <span |
| class="XMLElementTag"><y:Person</span> <span class="XMLAttrTag">x:Key</span>=<span |
| class="XMLAttrValue">"myData"</span> <span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></x:Shell.Resources></span> |
| |
| <span class="XMLElementTag"><Label</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"Name"</span> <span |
| class="XMLElementTag">/></span> |
| <span class="XMLElementTag"><Text</span> <span |
| class="XMLAttrTag">x:style</span>=<span class="XMLAttrValue">"BORDER"</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"{Binding Path=name}"</span><span |
| class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Text.layoutData></span> |
| <span |
| class="XMLElementTag"><GridData</span> <span class="XMLAttrTag">horizontalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span> <span class="XMLAttrTag">grabExcessHorizontalSpace</span>=<span |
| class="XMLAttrValue">"true"</span> <span class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"></Text.layoutData></span> |
| <span class="XMLElementTag"></Text></span> |
| <span class="XMLElementTag"><Label</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"{Binding Path=name}"</span><span |
| class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Label.layoutData></span> |
| <span |
| class="XMLElementTag"><GridData</span> <span class="XMLAttrTag">horizontalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span> <span class="XMLAttrTag">grabExcessHorizontalSpace</span>=<span |
| class="XMLAttrValue">"true"</span> <span class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"></Label.layoutData></span> |
| <span class="XMLElementTag"></Label></span> |
| <span class="XMLElementTag"></Shell></span> |
| </pre> |
| |
| <p>Notice that in the previous example, the binding source is |
| specified by setting the text property on the Text element. To |
| reiterate, the binding source object is necessary components of a |
| binding. Therefore, without the binding source object being specified, |
| the binding would do nothing.</p> |
| <p>we associate a new Person object in Shell to a key "myData" to a |
| property initialization.</p> |
| <pre> |
| <span class="XMLElementTag"><x:Shell.Resources></span> |
| <span |
| class="XMLElementTag"><y:Person</span> <span class="XMLAttrTag">x:Key</span>=<span |
| class="XMLAttrValue">"myData"</span> <span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></x:Shell.Resources></span> |
| </pre> |
| |
| <p>But you must define the DataContext first, then the data binding |
| can works.</p> |
| |
| <pre> |
| <span class="XMLAttrTag">DataContext</span>=<span |
| class="XMLAttrValue">"{StaticResource myData}"</span> |
| </pre> |
| |
| <p>In this example we specify the binding source by setting the |
| source property directly on the binding declaration of Text and Label. |
| There are several ways to specify the binding source object. Also can |
| using one property on a parent element is useful when you are binding |
| multiple properties to the same source.</p> |
| |
| <p>If your binding source is an object, you use the Path property to |
| specify the value to use for your binding. If you are binding to XML |
| data, you use the XPath property to specify the value. In some cases, it |
| may be applicable to use the Path property event when your data is XML.</p> |
| |
| <p>Here we associate the property value of the Person object to Text |
| and Label. So keep synchronously the value of Text and Label. Please see |
| the following codes.</p> |
| |
| <pre> |
| <span class="XMLElementTag"><Text</span> <span |
| class="XMLAttrTag">x:style</span>=<span class="XMLAttrValue">"BORDER"</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"{Binding Path=name}"</span><span |
| class="XMLElementTag">></span> |
| |
| <span class="XMLElementTag"><Label</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"{Binding Path=name}"</span><span |
| class="XMLElementTag">></span> |
| </pre> |
| |
| <p>Notice that the Path value <tt>name</tt> is declared in the Person class.</p> |
| |
| <!-- |
| <p>Click preview to view the UI or right click DataBinding.xwt, |
| select 'Open dialog' to see UI. This code shows the string in Label |
| binds the string of Text. When you change the string in Text, the |
| content of Label changed synchronously.</p> |
| <p><img src="images/" /></p> |
| --> |
| |
| <h3><a name="databinding_04"></a>Specifying the path expression of |
| data binding</h3> |
| <p>Notice that in the previous example, the binding source is |
| specified by setting the <tt>DataContext</tt> property on the Shell |
| element. The Text and Label inherits the DataContext value from the |
| Shell, which is its parent element. Here the binding path <tt>name</tt> |
| is declared in the Person class. So the binding target can find the |
| binding source directly. But in some case, the binding source is not the |
| associated class, in XWT, there is a another solutions: specifying the |
| path expression of the data binding.</p> |
| |
| <p>For example, in an application we associate a Company object in |
| Shell to a key "myData".</p> |
| |
| <pre> |
| <span class="XMLElementTag"><Shell</span> |
| ... |
| <span class="XMLAttrTag">DataContext</span>=<span |
| class="XMLAttrValue">"{StaticResource myData}"</span><span |
| class="XMLElementTag">></span> |
| ... |
| <span class="XMLElementTag"><Shell.Resources></span> |
| <span |
| class="XMLElementTag"><y:Company</span> <span class="XMLAttrTag">x:Key</span>=<span |
| class="XMLAttrValue">"myData"</span><span class="XMLElementTag">/></span> |
| <span class="XMLElementTag"></Shell.Resources></span> |
| ... |
| <span class="XMLElementTag"></Shell></span> |
| </pre> |
| |
| <p>There are three object class: Company, Person and Address. The |
| Address object contains a string city. And the <tt>address</tt> is |
| initialized in Person constructor.</p> |
| <p>Person:</p> |
| <pre> |
| <span class="JavaKeyword">public class</span> Person { |
| <span class="JavaKeyword">private</span> Address <span |
| class="JavaMember">address</span>; |
| |
| <span class="JavaKeyword">public</span> Person() { |
| <span class="JavaMember">address</span> = <span |
| class="JavaKeyword">new</span> Address(); |
| } |
| ... |
| } |
| </pre> |
| <p>In Company class, there instance a Person type variable <tt>manager</tt>.</p> |
| <p>Company:</p> |
| <pre> |
| <span class="JavaKeyword">public class</span> Company { |
| ... |
| <span class="JavaKeyword">private</span> Person <span |
| class="JavaMember">manager</span> = <span class="JavaKeyword">new</span> Person(); |
| ... |
| } |
| </pre> |
| |
| <p>Now, if the user wants to create a Text in Shell and bind the |
| value to the city member, XWT supplies a simple way of path expression |
| to set in the Path property value of Binding as <tt>manager.address.city</tt>, See |
| the code below.</p> |
| |
| <pre> |
| <span class="XMLElementTag"><Text</span> <span |
| class="XMLAttrTag">x:style</span>=<span class="XMLAttrValue">"BORDER"</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"{Binding Path=manager.address.city}"</span><span |
| class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Text.layoutData></span> |
| <span |
| class="XMLElementTag"><GridData</span> <span class="XMLAttrTag">horizontalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span> |
| <span |
| class="XMLAttrTag">grabExcessHorizontalSpace</span>=<span |
| class="XMLAttrValue">"true"</span><span class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"></Text.layoutData></span> |
| <span class="XMLElementTag"></Text></span> |
| </pre> |
| <!-- |
| <p>In XWT, it also support path expression of data binding. If your |
| binding source is an object, you can use the Path property to specify |
| the value to use for your binding. For example, if you want binding the |
| city of the manager of a company, which is the data context of the |
| window. you can specify the path as "manager.address.city".</p> |
| |
| <p><img src="images/mac-feature_22.png" /></p> |
| --> |
| |
| <!-- |
| <h3>Binding to Collections</h3> |
| |
| <p>A binding source object can be treated either as a single object |
| of which the properties contain data or as a data collection of |
| polymorphic objects that are often grouped together (such as the result |
| of a query to a database). So far we've only discussed binding to single |
| objects, however, binding to a data collection is a common scenario. For |
| example, a common scenario is to use an ItemsControl such as a |
| ListViewer or TableViewer to display a data collection.</p> |
| |
| |
| |
| <h3><a name="databinding_05"></a>Based on JFace Data binding</h3> |
| |
| |
| |
| <pre> |
| <span class="XMLElementTag"><Composite</span> |
| ... |
| <span class="XMLAttrTag">DataContext</span>=<span |
| class="XMLAttrValue">"{StaticResource myCompany}"</span><span |
| class="XMLElementTag">></span> |
| ... |
| <span class="XMLElementTag"><x:Composite.Resources></span> |
| <span |
| class="XMLElementTag"><j:Company</span> <span class="XMLAttrTag">x:Key</span>=<span |
| class="XMLAttrValue">"myCompany"</span><span class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><j:Company.employees></span> |
| <span |
| class="XMLElementTag"><j:Employee</span> <span class="XMLAttrTag">Name</span>=<span |
| class="XMLAttrValue">"Thomas"</span> <span class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"><j:Employee</span> <span class="XMLAttrTag">Name</span>=<span |
| class="XMLAttrValue">"Jin"</span> <span class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"></j:Company.employees></span> |
| <span |
| class="XMLElementTag"></j:Company></span> |
| <span class="XMLElementTag"></x:Composite.Resources></span> |
| <span class="XMLElementTag"><ListViewer</span> <span |
| class="XMLAttrTag">input</span>=<span class="XMLAttrValue">"{Binding Path=employees}"</span><span |
| class="XMLElementTag">></span> |
| ... |
| <span class="XMLElementTag"></ListViewer></span> |
| <span class="XMLElementTag"></Composite></span> |
| </pre> |
| --> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </body> |
| <p><img src="../../cpy.png" /></p> |
| </html> |