| <!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>Control Binding</title> |
| </head> |
| |
| <body> |
| <h1>Control Binding</h1> |
| <p>XWT binding provides a simple and consistent way for application |
| to present and interact with UI elements.</p> |
| |
| <ul> |
| <li><a href="#control_binding_01">What is Control Binding?</a></li> |
| <!-- |
| <li><a href="#control_binding_02">Basic Control Binding |
| Concepts</a></li> |
| --> |
| <li><a href="#control_binding_03">Creating a Control Binding</a></li> |
| </ul> |
| |
| <h3><a name="control_binding_01"></a>What is Control Binding?</h3> |
| |
| <p>Control Binding is the mechanism to establish a connection |
| between two UI controls. If the control binding has the correct |
| settings, then when the property value of the target controls is |
| changed, the controls are bound to the target control reflect changes |
| automatically. For example, ***************sample***************.</p> |
| |
| <!-- |
| <p>Control Binding is the mechanism to establish a connection |
| between two UI controls. Control Binding is different from Data Binding, |
| Control Binding doesn't deal with the associated data. For example, if |
| UI element 'A' is bound correctly to UI element 'B', then, when the UI |
| 'B' element change its property value, UI 'A' element changes |
| automatically.</p> |
| |
| <h3><a name="control_binding_02"></a>Basic Control Binding Concepts</h3> |
| <p>Control Binding also has four elements: a binding target object, |
| a target property, a binding source and an ElementName path. For |
| example, if you want to bind the width of button A to the button B, your |
| target object is the button A, the target property is the 'Width' |
| property, the value to use is the width of button B and the source |
| object is the Button B.</p> |
| --> |
| |
| <h3><a name="control_binding_03"></a>Creating a Control Binding</h3> |
| <p>In XWT, you establish a binding using the Binding object. This |
| section discusses how to set up a control binding.</p> |
| |
| <p>There are four necessary components: binding target, target |
| property, binding source, and a path to the source value to use. |
| Consider the following example, <tt>Button1</tt> is the target object, |
| the target property is the 'top' property, *****************.</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">x:Class</span>=<span |
| class="XMLAttrValue">"org.eclipse.xwt.tests.layout.FormLayout_Test"</span><span |
| class="XMLElementTag">></span> |
| <span class="XMLElementTag"><Shell.layout></span> |
| <span |
| class="XMLElementTag"><FormLayout /></span> |
| <span class="XMLElementTag"></Shell.layout></span> |
| <span class="XMLElementTag"><Group</span> <span |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"layout"</span><span |
| class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Group.layout></span> |
| <span |
| class="XMLElementTag"><FormLayout /></span> |
| <span |
| class="XMLElementTag"></Group.layout></span> |
| <span |
| class="XMLElementTag"><Group.layoutData></span> |
| <span |
| class="XMLElementTag"><GridData</span> <span class="XMLAttrTag">horizontalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span> <span class="XMLAttrTag">verticalAlignment</span>=<span |
| class="XMLAttrValue">"FILL"</span><span class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"></GridData></span> |
| <span |
| class="XMLElementTag"></Group.layoutData></span> |
| <span |
| class="XMLElementTag"><Button</span> <span class="XMLAttrTag">x:Name</span>=<span |
| class="XMLAttrValue">"Button1"</span> <span class="XMLAttrTag">text</span>=<span |
| class="XMLAttrValue">"button1"</span><span class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Button.layout></span> |
| <span |
| class="XMLElementTag"><FormData</span> <span class="XMLAttrTag">top</span>=<span |
| class="XMLAttrValue">"10, 10"</span> <span class="XMLAttrTag">left</span>=<span |
| class="XMLAttrValue">"0, 10"</span> <span class="XMLAttrTag">bottom</span>=<span |
| class="XMLAttrValue">"30, 0"</span> <span class="XMLAttrTag">right</span>=<span |
| class="XMLAttrValue">"40, 0"</span> <span class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"></Button.layout></span> |
| <span |
| class="XMLElementTag"></Button></span> |
| <span |
| class="XMLElementTag"><Button</span> <span class="XMLAttrTag">text</span>=<span |
| class="XMLAttrValue">"button2"</span><span class="XMLElementTag">></span> |
| <span |
| class="XMLElementTag"><Button.layout></span> |
| <span |
| class="XMLElementTag"><FormData</span> <span class="XMLAttrTag">top</span>=<span |
| class="XMLAttrValue">"{Binding ElementName=Button1}, 10"</span> <span |
| class="XMLAttrTag">left</span>=<span class="XMLAttrValue">"0, 0"</span> |
| <span |
| class="XMLAttrTag">bottom</span>=<span class="XMLAttrValue">"40, 0"</span> <span |
| class="XMLAttrTag">right</span>=<span class="XMLAttrValue">"40, 0"</span> <span |
| class="XMLElementTag">/></span> |
| <span |
| class="XMLElementTag"></Button.layout></span> |
| <span |
| class="XMLElementTag"></Button></span> |
| <span class="XMLElementTag"></Group></span> |
| <span class="XMLElementTag"></Shell></span> |
| </pre> |
| --> |
| |
| <p>********code***********</p> |
| |
| <p>Notice that in the above example, in which the binding source |
| object is Button1. There provide an ElementName property to specify the |
| source object.</p> |
| |
| </body> |
| <p><img src="../../cpy.png" /></p> |
| </html> |
