Part 1 of this series described the object-oriented
knowledge and introduced a framework supporting class inheritance. In this final
installment, we'll use
hierarchy that offers rich client-side behaviors to ASP.NET user controls.
A web control represents a portion of the web page that typically provides
user interaction such as text boxes, radio buttons, check boxes, etc. Web
control can be static as well. Subdividing pages into controls improves
abstraction by making pages containers of web controls and enhances reuse and
With ASP.NET, you can use conventional HTML elements or ASP.NET controls. You
can augment them with defining your own user controls. Eventually ASP.NET
Naturally, you can write your website and use the default ASP.NET behaviors.
However this is not feasible in all situations and limits the user experience.
Cfx you can now achieve greater control and richness to your
Note - A detail explanation of ASP.NET and web controls is beyond the
scope of this article as there are many great books and essays on ASP.NET. The
aim of this article is to show how
Cfx is used to build classes
that take advantage of ASP.NET to build rich clients.
Leveraging ASP.NET Control Names
ASP.NET applies a consistent naming scheme to its controls using the
name attributes when it renders them as HTML
elements. ASP.NET names HTML elements using the element name proceeded by the
names of its containers separated by an underscore. For example, in accompanying
demo, the ASP.NET
CfxText user control encapsulate the ASP.NET
textbox control giving it the identifier
<asp:TextBox id="txtField" runat="server" maxlength="255"></asp:TextBox>
CfxText user control has the id
and is subsequently encapsulated by a
with the id
CfxWebFormOption1. The id generated by ASP.NET for the
HTML text element uses the outermost container identifier followed by the
separator character continuing with the name of the next container and then
finally followed with the control identifier.
<input id="CfxWebFormOptions1_txtName_element" type="text"
maxlength="255" class="LgNorm" style="width:224px;" />
By leveraging this naming convention, we can logically group control elements
providing client side behavioral support to the ASP.NET user controls.
Note - ASP.NET 2.0 uses a dollar sign ($) character as the separator
character. The dollar sign eliminates ambiguities caused by the underscore
separator where it can be used in identifiers.
Cfx.Dom.GetElementTerms uses a regular expression that accounts for
underscore ambiguities when splitting ASP.NET identifiers into element terms.
CfxControl conceptually represents the set of user control
classes used on the page. These classes represent a layout description along
with its client side behavioral definition. The layout description is defined
using ASP.NET and maintained in the accompanying
.js files. Thus client behavior is separated from its
layout. Notice that we have nearly a one-to-one correspondence between the
contain common base class definition and implementation defined in the
Object class followed by the
CfxControl class and is
is the container class for the input controls on the
There are three input controls deriving specific functionality from the
CfxInput class. The
CfxText class represents a
control for text input. The
CfxSelect class represents a single
selection dropdown and
CfxLabel wraps the ASP.NET
CfxRadioSet represents a group of radio
CfxHistoryOptions class contains the
CfxRadioSet and the
CfxSelect classes providing a
single control for making "historical" selections.
A couple of helper classes that are not part of the
heirarchy are provided. The
CfxError class extends the
Error class adding the framework object throwing the exception and
Figure 1. CfxControl class hierarchy.
CfxControl class is the base class for all derived controls
and encapsulates properties inherited by all controls. The name property is the
name of control. Think of controls as document element containers and it is the
name of the container the
name property represents. The
parent property is the parent
CfxControl. The items
property is an array of document elements that has the control name as part of
Figure 2. ASP.NET control identifier and terms.
For example when the
created, all the elements and images in the document that contains the string
attribute are added to
the items array of the
CfxInput class is the base class for input controls. This
class defines input controls as having an input element property
element and an image property
image indicating the
error state of the input control. It defines several base methods to manipulate
the image property and an
CfxInput is not defined as an abstract class and can be
instantiate. This is useful for situations needing a generic input control
CfxText control wraps the text input element and validates
its input against the regExp regular expression property. The control also
provides the ability to sink the
onkeypress event inspecting for an
the enter key to start validation. Users provide a handler in the event the
enter key is pressed via the
this.txtName.SubmitHandler( OnEnterKey );
Figure 3. Setting SubmitHandler of txtName control to OnEnterKey handler.
If the submit handler is supplied, during the text input element
onkeypress event, execution is transferred to the
OnEnterKey method. The
the enter key event. If the enter key event was pressed, the
OnEnterKey method calls
CfxText submit handler.
function OnEnterKey( evnt )
var cfxEvent = new CfxEvent( evnt );
if ( cfxEvent.IsEnterKey() )
var thisObj = cfxEvent.FindInstance( CfxText );
Figure 4. CfxText OnEnterKey event handler.
Fired by the
this reference does not refer to a
but to the event source element.
FindInstance is used to obtain the
CfxText associated with the source element. In order
FindInstance to determine the instance, the
CfxText.instance flag is set to
true in its class
CfxSelect control wraps a single selection dropdown input
element providing method to add and delete elements to and from the dropdown.
CfxSelect also provide accessors methods to obtain the selected
text and value as well as the index of the selected element.
CfxLabel wraps the ASP.NET
providing an interactive way of alterting page text. ASP.NET renders its labels
span elements and
CfxLabel locates it through its
id attribute constructed by appending together the names of its
ancestor controls. The
Value accessor updates the inner text of
the span element. Rather than using alerts,
CfxLabel can be used
to enhance the display of error notifications.
CfxRadioSet control wraps a group of radio input elements.
ClickHandler method sets the
onclick event handler of
the radio button elements.
GetElement returns the
CfxRadioSet radio button element from the radio button index.
GetIndex returns the index of the
button element. The
GetItems method inherited from
CfxControl is overridden by
CfxRadioSet, because radio
elements are grouped by the
name attribute while the base method
id attribute to find elements. The
GetSelected method returns the checked radio element, and
Length returns the number of radio elements in
This control provides the client-side functionality of the set of elements
that simulate selecting history criteria. This control provides the
functionality for the
CfxRadioSet control and the controls
associated with the radio buttons.
Figure 5. CfxHistoryOptions user interface.
CfxHistoryOptions groups the control into a
CfxRadioSet control containing of a list of the radio elements as
well as the radio element affiliations. For example the
property contains the radio elements:
radio input element affiliate is the
CfxSelect control named
radByMonth_selByMonth control and
input element affiliate is the
radByYear_selByYear control. The
radDefault radio element has no affiliates. The
attribute of the radio element identifies affiliates thus
CfxHistoryOptions class can group elements containing that value.
In this case
radByMonth radio input affiliation consists of the
radByMonth radio and
Figure 6. Grouping radio element affiliate controls.
CfxHistoryOptions establishes on an
onclick event handler for the radio set. When a radio element is
OnRadioClick handler is called altering the disable
state of the radio affiliates. Notice that the handler uses the
FindInstance method to
obtain the instance of the
CfxHistoryOptions class from the event
source element. Finally, the
Validate method verifies selections.
Cfx Wrapper Classes
Error object adding a
property that references the instance of the
Cfx class throwing the
exception. As you will see in the demo, the thrown
is used identify and change the state of the throwing CfxText object.
event objects. The
event object contains the
CfxEvent hides browser variations of the
event object providing a consistent interface. In the demo,
CfxControl event handlers are responsible for detecting the enter
key event, the radio button check event, and the submit button click event. The
handlers create a
CfxEvent object to wrap the
object and calls
FindInstance to translate the element firing the
event into its corresponding
Code In Front
WebForm1 page. When
WebForm1 loads, the
onload event calls the page’s
instantiating a new
CfxWebFormOptions control and assigns it to
SubmitHandler method assigns the
OnSubmit event handler that gets called when the control submit
button click event occurs or the enter key is pressed from a text control.
OnSubmit then calls the
Validate method and performs a
postback if the validation succeeds.
formOptions = new CfxWebFormOptions( "CfxWebFormOptions1" );
formOptions.SubmitHandler( OnSubmit );
if ( formOptions.Validate() == true )
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"
Figure 7. WebForm1 page code in front are now trivial routines.
Cfx performs surprisingly well. The demo program includes alerts
displaying page load and submission performance. For a 2GHz system, the time for
each task was under 35 milliseconds for IE 6.0 and under 50 milliseconds for
ControlDemo demo program, shows how to design and implement
a control class heirarchy using
Cfx. The approach to this
responsible for client-side user interactions.
The URL for this application is
http://localhost/JsOOP/ControlDemo/WebForm1.aspx. Copy the source code
into the JsOOP/ControlDemo subdirectory of your
http://localhost home directory. You can use Visual Studio to create
the ASP.NET project or use the IIS management tool found in Administrative Tools
of the Control Panel. This demo has been tested on both version 1.0 and 1.1 of
fill in an astonishing gap in the development of client-side scripts. Too often
scripts are written as procedural adjuncts rather than as reusable objects. Much
explain the language's object-oriented capabilities and no intrinsic support of
class inheritance. Another contributing factor is ASP.NET itself where the
Cfx, provides an easy to use coding pattern for writing class
responsibility of UI management. While ASP.NET defines page layout, the code
behind becomes trivial enabling the server-side code to be better focused on the
On the other hand it may be useful to have the ASP.NET controls emit
Cfx you can still structure your scripts in an
Cfx is quite versitile letting you choose
the deployment that works best for you.
Another advantage of
Cfx is that it enables you as a web
developer to retain greater control of your code. ASP.NET is powerful but too
much reliance on any tool from a single vendor can spell trouble when targeting
multiple platforms and browsers.
Cfx, because it is
object-oriented, makes it easy to isolate idiosyncrasies in façades and
wrappers. While the demos are written for ASP.NET,
Cfx is a
client-side scripts promoting rich web-based interfaces, reduce vendor
- Version 1.0 -- Initial Version
- Version 1.1 -- Fixed content errors.