<html><head>
<title>Sigma Visual Builder Manual</title>
<meta content="Sigmasoft" name="AUTHOR"/>
<link rel="stylesheet" type="text/css" href="css/doc.css" media="screen"/>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
</head>
<body style="padding: 20px 30px 20px 30px; background-color: rgb(204, 204, 153);">
<table cellspacing="10" border="0" width="100%">
<tbody>
<tr>
<td align="left" class="highlight">Sigma Visual Manual </td>
<td align="right"><img src="img/logo.gif" alt="sigmasoft logo" width="116" height="44"/></td>
</tr>
</tbody>
</table>
<table cellspacing="10" cellpadding="20" border="0" width="100%">
<tbody>
<tr style="background-color: rgb(255, 255, 255);">
<td valign="top" style="width: 30%; height: 768px;"><h2>
Contents
</h2>
<UL class="index">
<LI><A HREF="index.html">Welcome to SigmaVisual</A>
<LI>How to
<UL>
<LI><A HREF="how-to-install.html">How to install</A>
<LI><A HREF="how-to-add-component-to-my-web-page.html">How to add component to my web page</A>
<LI><A HREF="how-to-set-component-properties.html">How to set component properties</A>
<LI><A HREF="how-to-add-new-items-to-a-menu-tab-stack.html">How to add new items to a menu/tab/stack</A>
<LI><A HREF="how-to-copy-components.html">How copy components</A>
<LI><A HREF="how-to-remove-components.html">How to remove components</A>
<LI><A HREF="how-to-move-components.html">How to move components</A>
<LI><A HREF="how-to-resize-components.html">How to resize components</A>
<LI><A HREF="how-to-change-component-parent-container.html">How to change components' parent container</A>
<LI><A HREF="how-to-customize-appearance.html">How to customize appearance</A>
<LI><A HREF="how-to-add-a-event-handler.html">How to add an event handler</A>
<LI><A HREF="how-to-know-property-event-meaning.html">How to know property/event meaning</A>
<LI><A HREF="how-to-preview-execute-a-web-page.html">How to preview/execute a web page</A>
<LI><A HREF="how-to-make-web-application-standalone.html">How to make web application standalone</A>
<LI><A HREF="how-to-change-theme-of-my-application.html">How to change theme of my application</A>
<LI><A HREF="how-to-make-app-fit-different-resolutions.html">How to make app fit different resolutions </A>
</UL>
<LI>Reference
<UL>
<LI><A HREF="sigma-visual-overview.html">SigmaVisual Overview</A>
<LI><A HREF="main-buttons.html">Main Buttons</A>
<LI>Design View
<UL>
<LI><A HREF="design-tool-bar.html">Design Tool Bar</A>
<LI><A HREF="structure-dropdown-tree.html">Structure Dropdown Tree</A>
<LI><A HREF="tool-box.html">Component Gallery</A>
<LI><A HREF="component-config-window.html">Object Inspector</A>
</UL>
<LI><A HREF="normal-view.html">Normal View</A>
<LI><A HREF="structure-view.html">Structure View</A>
</UL></UL>
</td>
<td valign="top"><h1><B>How to add an event handler</B></h1>
<P>In this section, you will learn how to create a web application with following feature.</P>
<ul>
<li>This application has one button with caption "say something".</li>
<li>When user clicks that button, an asynchronous message box drops down from top of web page saying "hello, world". </li>
</ul>
<P>After you add a button component to your web page by dragging it from [Tool Box], a button will appear on your web page. Click the button to select it.</P>
<ul>
<li>Click the plus before [events] in [Component Config Window], then all the event for button will collapse.</li>
<li><FONT SIZE="4" FACE="Times New Roman, times, roman, serif" >Click [events</FONT><FONT FACE="??" SIZE="3">→</FONT><FONT FACE="Times New Roman, times, roman, serif" SIZE="4">onClick] and then value of [event </FONT><FONT FACE="??" SIZE="3">→</FONT> onClick] will be highlighted, as the following figure shows.</li>
</ul>
<P align="center" ><FONT FACE="Times New Roman, times, roman, serif" COLOR="#800000" SIZE="4"><IMG SRC="img/add_event_handler1.png" alt="add an event handler" WIDTH="399" HEIGHT="284" BORDER="0"></FONT></P>
<ul>
<li>Click the button on the right side to pop up a dialog like the following figure. </li>
<li>Input the following text.</li>
</ul>
<P><I>function (profile, e, value) {</I></P>
<P><I> linb.message("hello, world");</I></P>
<P><FONT FACE="Times New Roman, times, roman, serif" SIZE="4"><I>}</I></FONT></P>
<P> </P>
<ul>
<li>Press [OK] button to close window and save event handler code. </li>
<li>Press [Run] button to preview result. </li>
</ul>
<h1> </h1>
<h1> </h1>
</td>
</tr>
</tbody>
</table>
<table style="margin:10px 0px 0px 0px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="top">
<div align="center" class="copyright" >All contents are (c) Copyright 2005 - 2008, Sigma Software
Inc. All rights Reserved</div></td>
</tr>
</tbody>
</table>
</body></html>