Appxweb Meta
Home > Developer > Developer Guide - Contents

Developer Guide

[ 4 ] - Binding

< Back    Next >

Hello World uses the wnd_hello_world.html, rpt_hello_world.html and dlg_message.html HTML resources as part of the "vid_wnd_hello_world" window object, "vid_rpt_hello_world" report object and the "vid_dlg_message message" dialog object respectively.

To make resources useful further integration with the extensions objects is required. For instance we may want values of html elements within a resource to reflect the current value of some data variables (these would be declared as data objects) used by our application. As another example we may want the application to respond by executing specific functionality in response to an event raised by an html element. This integration process is referred to here as binding. So how do you bind resources and objects? You do this simply by including a Meta defined attributes tags within the HTML of resource itself. The value of the attribute containing the identifier of the object prefixed with a code further describing how the object should bind to the element. Meta defines three attribute tags for binding of objects being "AM_data_id","AM_function_id" and "package". Refer to the Binding reference documentation for complete details.

As an example the scalar data object "did_message", which holds the Hello World's message text, is bound to a <span> element of the HTML resource "wnd_hello_world.html", as highlighted in the figure below with the red box. The prefix "t" in this example indicating that data object identifier "did_message" should be bound to the text part of the span element.

Figure: Object Binding wnd_hello_world.html

Object Binding - wnd_hello_world.html

If this element were editable, such as a textarea or input element, changes are automatically reflected by Meta in the data object and visa versa. The "dlg_message.htm" resource provides an example of this. Here the data object "did_message" is bound to the value attribute (indicated by the "a-value" prefix) of the input element as shown below. This example also demonstrates binding multiple data objects, "did_message" and "did_tooltip", to different parts of same element simultaneously.

Figure: Object Binding dlg_message.html

Object Binding - dlg_message.html

Function objects are also able to be bound to the events raised by elements within a HTML resource. For the wnd_hello_world.htm resource the functionality associated with function object "fid_letter_cnt" is executed in response to the input button element mouse click event (mc prefix). For "dlg_message.htm" resource the canned function objects _fid_dialog_ok and _fid_dialog_cancel are bound to the dialog's "Ok" and "Cancel" buttons. This binding of function objects is highlighted with green boxes in the figures above.

Finally in the figure above note the use of the Meta defined document type highlighted with a blue box. This XHTML extension defines the three additional attributes "AM_data_id","AM_function_id" and "package" used for binding. The scroll attribute of the body element has also been reintroduced within this XHTML extension in order to better implement Meta dialogs. Refer to the AML XHTML Extension documentation for complete details.