<!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>Element naming and finding</title> | |
</head> | |
<body> | |
<h1>Naming and Element finding</h1> | |
<p>Naming a UI component is used to find an element by a unique name | |
in UI structure tree. This concept is used both in Java class by | |
programming and in XML via Control Binding concept.</p> | |
<p>The name must be in unique in a scope, named as "Named | |
scope". The named scope corresponds with an XWT resource file.</p> | |
<h2>Finding in Java</h2> | |
<p>XWT uses x:Name property or Name property to name a component. | |
This section will show how to name an element and how to find an element | |
by its name in Java class.</p> | |
<p>In the example below, we will create a Label named Message and a | |
Button.</p> | |
<p>XAML:</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.name.Name_x"</span> | |
<span class="XMLAttrTag">text</span>=<span | |
class="XMLAttrValue">"NameT test"</span><span class="XMLElementTag">></span> | |
<span class="XMLElementTag"><Shell.layout></span> | |
<span | |
class="XMLElementTag"><GridLayout</span> <span class="XMLAttrTag">numColumns</span>=<span | |
class="XMLAttrValue">"2"</span> <span class="XMLElementTag">/></span> | |
<span class="XMLElementTag"></Shell.layout></span> | |
<span class="XMLElementTag"><Label</span> <span | |
class="XMLAttrTag">Name</span>=<span class="XMLAttrValue">"Message"</span> <span | |
class="XMLElementTag">/></span> | |
<span class="XMLElementTag"><Button</span> <span | |
class="XMLAttrTag">SelectionEvent</span>=<span class="XMLAttrValue">"handleButton"</span> <span | |
class="XMLAttrTag">Text</span>=<span class="XMLAttrValue">"Click Here"</span> <span | |
class="XMLElementTag">/></span> | |
<span class="XMLElementTag"></Shell></span> | |
</pre> | |
<p>Consider the example above, the Label gets a name "Message", and | |
set the contents of the button with string "Click Here". Then we add an | |
event handling here by SelectionEvent property and named the event | |
"handleButton". In the rendered window, when we click the button, the | |
handleButton tries to find the Label. If it works, dialog "Name works" | |
will pop-up. Otherwise, an error dialog "Label message is not found" | |
will open instead. Please see the Java code below.</p> | |
<p>Java:</p> | |
<pre> | |
<span class="JavaKeyword">protected void</span> handleButton(Event event) { | |
Label message = (Label) XWT.findElementByName(event.widget, "Message"); | |
<span class="JavaKeyword">if</span> (message == null) { | |
MessageDialog.openError(XWT.findShell(event.<span | |
class="JavaMember">widget</span>), <span class="JavaString">"Test Name"</span>, <span | |
class="JavaString">"Label message is not found"</span>); | |
} <span class="JavaKeyword">else</span> { | |
MessageDialog.openInformation(XWT.findShell(event.<span | |
class="JavaMember">widget</span>), <span class="JavaString">"Test Name"</span>, <span | |
class="JavaString">"Name works."</span>); | |
} | |
} | |
</pre> | |
<p>The first argument of findElementByName() indicates the start | |
point of search. Precisely, the search starts with its NamedScope. If | |
the name is not find in the current NamedScope, the search will proceed | |
in its parent NamedScope. The "null" will be returned if the | |
name is not found in the entire tree structure.<br> | |
</p> | |
<h2>Element Finding</h2> | |
<p>In XWT XML, an element also can be found by its name. It mostly | |
used in control binding. Control binding is used to establish a | |
connection among two or more UI elements.</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>Consider the above example, it start to search from <tt>top="{Binding | |
ElementName=Button1}</tt>, it try to find the element named <tt>Button1</tt> | |
in the current NamedScope, if not found, the search will proceed in its | |
parent NamedScope. If the element is exist in the tree structure and it | |
has the correct settings. the <tt>top</tt> property of the second button | |
synchronized with <tt>Button1</tt>, Or the code will show error.</p> | |
</body> | |
<p><img src="../../cpy.png" /></p> | |
</html> |