Adding Code at the Component Level

There are two ways to add code to components:

• Associate code with the object's model event
• Execute code before or after the object is deserialized

Associating Code with an Event

Each GUI component defines a set of model events. For example, a button component has an Execute event that fires when a user clicks the button. Events act as triggers for JavaScript code. When an event occurs, the associated code is executed. By binding JavaScript code to a component's event, user interactions can be captured, providing an event-driven interface.

To associate JavaScript code with an event, type the code in the Value field in the Events Editor palette, as shown here.

The statements doListClick() and doShowDetails() are defined in an included JavaScript file that is loaded when the browser first initialized. It is considered best practice to keep event binding code to a minimum, managing the bulk of the presentation logic in a JavaScript include. For more information, see Including JavaScript Files.

Executing Code Before or After Deserialization

For any component, you can specify JavaScript to execute before or after the object is deserialized. The code is executed at runtime as well as in General Interface Builder, immediately before or after the associated serialization file is opened for edit.

Each component, which is represented by a tab in General Interface Builder, exposes a subset of fields within the Component Profile view. To execute JavaScript statements before or after component deserialization, type the statements in the onBeforeDeserialize or onAfterDeserialize field, as shown here.

Before Deserialization Example

Before deserialization, the XML file can be accessed directly using the objXML variable. For example, typing alert(objXML); in the onBeforeDeserialize field displays the contents of the serialization file in an alert dialog.

Executing JavaScript statements before an object is deserialized is useful when the runtime needs to be prepared before the component is loaded. For example, when data that is used by a component needs to be preloaded.

After Deserialization Example

After deserialization, the root-level object in the serialization file can be accessed directly using the objJSX variable. For example, typing alert(objJSX); in the onAfterDeserialize field lists object type, ID, and name of the root-level object in an alert dialog.

Executing JavaScript statements after an object is deserialized is useful when the component needs to be initialized with information only available at runtime. For example, the object ID (which is created after deserialization) can be displayed in the caption bar of a dialog. The most common use for serialization event bindings is to configure generic, reusable components with runtime-specific information.

In both cases, the JavaScript statements are executed only if the component is loaded at runtime.