ASP.NET AJAX Futures Release: Client Components, Sys.Application Life Cycle, and Xml Script
This section provides information about the following:
- Futures release client controls: Client controls enable you to create rich applications
using JavaScript or xml-script.
- Client events: Events such as the client
onclick event can be
handled or attached using client controls.
- Actions: Actions are collections of tasks to perform, such as calling methods
or setting properties.
A Futures release client control or component is conceptually a class definition, or an object
when instantiated. The client control's object model (OM) exposes members as you
would expect in a traditional object-oriented class definition, so you have access
to properties and member functions. You an work with a Futures release client
control in your page programmatically with JavaScript or declaratively using Xml
Script.
The ASP.NET AJAX extensions core framework defines a model that allows you to define components
that are registered with the Sys.Application. When you use the server-side script controls
or extenders aall client-side components are created and registerd with the Sys.Application for
you automatically. It is possible for you to also perform this logic manually in the client through JavaScript.
By registering components with the Sys.Application your components wil be managed appropriately,
for example, your component will be called on to dispose when the page unloads, or in aysnchronous post-backs
that occur in UpdatePanel control scenarios.
Firstly, let's explore what it means to create a component in the client, and register that component with
the application in imperative JavaScript.
<script language="JavaScript">
function pageLoad() {
var controlVar = new Custom.MyButton($get('elementId'));
// set component properties
..
// initialize the component
controlVar.initialize();
}
</script>
JavaScript
In both examples, the controls will be instantiated during the Load
event of the ASP.NET page. This is handled automatically for you when you use the
'magic' pageLoad() function signature. This point in the client-side application
lifecycle guarantees a point where you can safely access and use all components
on the page after they have been created and initialized.
The client-side Application lifecycle
|
Top |
The client-side Sys.Application starts it's work on window.initialize and
performs a mini-lifecycle in the client. This starts with the initialize stage, follwoed by
load and ultimately unload. The following items occur during the lifecycle:
- Initialization:
Sys.add_init(). Prior to initialization the Sys.Application begins a process
to create components. This is a two-pass model, allowing components to begin creating themselves, set simple properites
and events and attach to markup elements. Once all components are created and initialization has finished,
the second pass causes all complex component
properties to be set. These are typically the component to component references. This two-pass model allows circular
references to be defined between components.
When components are created (automatically through $create(), the component is created, properites are set
and the component intiailized and automatically registered with the Sys.Application.
Component developers typically may hook to the init event to perform actions, such as object creation to ensure that
their components are created during the two-pass approach.
- Load:
Sys._add_load(). Load occurs after all components have been created and initialized. However, the twopass
model has also completed. Page developers are guaranteed that all components automatically created have done so
and can be used. If you, the page developer create components in the load event, then you need to be aware that
any component to component circular references will only be supported if you again ask the Sys.Application
to beginCreateComponents() before your components and endCreateComponents() after your
components are created.
In async post-backs, load is raised, but init is not. The load event is called with event arguments that define a list of
components created since the last call.
Page developers do not have to explicitly add a handler to the Sys.Application load event, rather they can
use the 'magic' pageLoad function in their application.
- Unload: The
Sys.Application will call on dispose for all registered components. Note that in async
requests, the PageRequestManager will interpret the markup to be destriyed to dispose components hooked
to that markup and unregister them from the Sys.Application.
Instead of using JavaScript to create controls and interact with them, the
Futures release introduces a simplified and powerful declarative way to define client controls
and their associated markup elements. With this new declarative client syntax, you
can:
- Add ASP.NET AJAX components and controls that are associated with markup elements
in the page.
- Create bindings that define tasks such as setting the text of a label from a button
click.
- Handle events such as
click, propertyChanged, or
selectionChanged, and perform tasks, or actions, as a result of
these events.
- Create and define actions, such as calling control or component members or bindings,
with
invokeMethodAction and setPropertyAction constructs.
- Define mappings to templates for the controls, allowing complex composition and
handling.
- Define behaviors, or pre-written functionality, that can be associated
with controls.
You will see that many of the samples in these Quickstarts demonstrate use of both imperative JavaScript code and Xml script.
Setting Component Properties, Handling Events, and Performing Actions
|
Top |
The following example shows a simple way to both programmatically and declaratively
handle events and set properties on individual controls.
Futures Release Client Controls: Properties and Events or Actions
The declarative Xml Script in the page shows that the element <div id="panel">
is associated with Sys.UI.Control, a base class for the client
controls that is defined in the ASP.NET AJAX Extensions.
<script type="text/xml-script">
..
<components>
<control id="panel" />
..
Futures Release Xml Script
Button controls are also instantiated declaratively, and their click
events automatically hooked up as a way to set properties on the panel
control. This declaration causes the onclick event to be handled by
performing an action. The following code example shows how to declaratively set
the <setPropertyAction> action, which sets the visible
property on the panel to true. The sample also demonstrates
the use of the <invokeMethodAction> action to call a method on
the panel control.
<script type="text/xml-script">
..
<button id="showButton">
<click>
<setPropertyAction target="panel" property="visible" value="true" />
</click>
</button>
..
<button id="largeButton">
<click>
<invokeMethodAction target="panel" method="removeCssClass">
<parameters className="small"/>
</invokeMethodAction>
</click>
</button>
..
Futures Release Xml Script
|