| <!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>Event Handling</title> | |
| </head> | |
| <body> | |
| <h1>Event Handling</h1> | |
| <p>This example illustrates the key concept of XWT as markup declarative UI about the separation between UI appearance | |
| and event handling.</p> | |
| <p>Create an XWT project first (for more information, please see <a | |
| href="..//hello_world/index.html">HelloWorld</a>), then new a button | |
| with text 'Click Me!'. The appearance is defined in XWT like below.</p> | |
| <pre class="code"> | |
| <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">"ui.EventHandler"</span><span | |
| class="XMLElementTag">></span> | |
| <span class="XMLElementTag"><Shell.layout></span> | |
| <span class="XMLElementTag"><GridLayout/></span> | |
| <span class="XMLElementTag"></Shell.layout></span> | |
| <span class="XMLElementTag"><Button</span> <span | |
| class="XMLAttrTag">text</span>=<span class="XMLAttrValue">"Click Me!"</span><span | |
| class="XMLElementTag">></span> | |
| <span class="XMLElementTag"></Button></span> | |
| <span class="XMLElementTag"></Shell></span> | |
| </pre> | |
| <p>Save the file, and click <image src="images/hello_08.png" /> to | |
| view it. It running as below.</p> | |
| <image src="images/event_01.png" /> | |
| <p>Next, we add an event handler to the button.</p> | |
| <pre> | |
| <span class="XMLElementTag"><Button</span> <span class="XMLAttrTag">text</span>=<span | |
| class="XMLAttrValue">"Hello, World!"</span> <span class="XMLAttrTag">SelectionEvent</span>=<span | |
| class="XMLAttrValue">"clickButton"</span><span class="XMLElementTag">></span> | |
| </pre> | |
| <p>Focus on the event handler code and click <image | |
| src="images/event_03.png" />, the corresponding java method will | |
| generate automatically. We can add event in the method directly.</p> | |
| <pre> | |
| <span class="JavaKeyWord">import</span> org.eclipse.swt.Event; | |
| <span class="JavaKeyWord">import</span> org.eclipse.swt.Button; | |
| <span class="JavaKeyWord">public class</span> EventHandler { | |
| <span class="JavaKeyWord">public void</span> clickButton(Event event) { | |
| Button button = (Button)event.<span class="JavaMember">widget</span>; | |
| button.setText(<span class="JavaString">"Hello World!"</span>); | |
| } | |
| } | |
| </pre> | |
| <p>Save the file and click <image src="images/hello_08.png" />. The | |
| view is rendered as following.</p> | |
| <image src="images/event_01.png" /> | |
| <p>Click the button to invoke the method clickButton, the content of | |
| the button changes to 'Hello, World!'.</p> | |
| <image src="images/event_02.png" /> | |
| </body> | |
| <p><img src="../../cpy.png" /></p> | |
| </html> |