| <!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> |