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