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