A web control represents a portion of the web page that typically providesuser interaction such as text boxes, radio buttons, check boxes, etc. Webcontrol can be static as well. Subdividing pages into controls improvesabstraction by making pages containers of web controls and enhances reuse andextensibility.
Note – A detail explanation of ASP.NET and web controls is beyond thescope of this article as there are many great books and essays on ASP.NET. Theaim of this article is to show how
Cfx is used to build classesthat 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 HTMLelements. ASP.NET names HTML elements using the element name proceeded by thenames of its containers separated by an underscore. For example, in accompanyingdemo, the ASP.NET
CfxText user control encapsulate the ASP.NETtextbox control giving it the identifier
<asp:TextBox id="txtField" runat="server" maxlength="255"></asp:TextBox>
CfxText user control has the id
txtNameand is subsequently encapsulated by a
CfxWebFormOptions controlwith the id
CfxWebFormOption1. The id generated by ASP.NET for theHTML text element uses the outermost container identifier followed by theseparator character continuing with the name of the next container and thenfinally followed with the control identifier.
<input id="CfxWebFormOptions1_txtName_element" type="text" maxlength="255" class="LgNorm" style="width:224px;" />
Note – ASP.NET 2.0 uses a dollar sign ($) character as the separatorcharacter. The dollar sign eliminates ambiguities caused by the underscoreseparator where it can be used in identifiers.
Cfx.Dom.GetElementTerms uses a regular expression that accounts forunderscore ambiguities when splitting ASP.NET identifiers into element terms.
CfxControl conceptually represents the set of user controlclasses used on the page. These classes represent a layout description alongwith its client side behavioral definition. The layout description is definedusing ASP.NET and maintained in the accompanying
Object class followed by the
CfxWebFormOptions controlis the container class for the input controls on the
WebForm1 page.There are three input controls deriving specific functionality from theCfxInput class. The
CfxText class represents acontrol for text input. The
CfxSelect class represents a singleselection dropdown and
CfxLabel wraps the ASP.NET
CfxRadioSet represents a group of radioelements. The
CfxHistoryOptions class contains the
CfxRadioSet and the
CfxSelect classes providing asingle control for making “historical” selections.
A couple of helper classes that are not part of the
CfxControlheirarchy are provided. The
CfxError class extends the
Error class adding the framework object throwing the exception andthe
Figure 1. CfxControl class hierarchy.
CfxControl class is the base class for all derived controlsand encapsulates properties inherited by all controls. The name property is thename of control. Think of controls as document element containers and it is thename of the container the
name property represents. The
parent property is the parent
CfxControl. The itemsproperty is an array of document elements that has the control name as part ofits
Figure 2. ASP.NET control identifier and terms.
For example when the
CfxWebFormOptions control named
CfxWebFormOptions1 iscreated, all the elements and images in the document that contains the string
CfxWebFormOptions1 in the
id attribute are added tothe items array of the
CfxInput class is the base class for input controls. Thisclass defines input controls as having an input element property
element and an image property
image indicating theerror state of the input control. It defines several base methods to manipulatethe image property and an
CfxInput is not defined as an abstract class and can beinstantiate. This is useful for situations needing a generic input controlobject.
CfxText control wraps the text input element and validatesits input against the regExp regular expression property. The control alsoprovides the ability to sink the
onkeypress event inspecting for anthe enter key to start validation. Users provide a handler in the event theenter 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
OnEnterKey method calls
CfxText submit handler.
function OnEnterKey( evnt )
var cfxEvent = new CfxEvent( evnt );
if ( cfxEvent.IsEnterKey() )
// Find the instance from the event source.
var thisObj = cfxEvent.FindInstance( CfxText );
// Call CfxText control submit handler.
Figure 4. CfxText OnEnterKey event handler.
Fired by the
this reference does not refer to a
CfxText instancebut to the event source element.
FindInstance is used to obtain theinstance of
CfxText associated with the source element. In orderfor
FindInstance to determine the instance, the
CfxText.instance flag is set to
true in its classdefinition.
CfxSelect control wraps a single selection dropdown inputelement providing method to add and delete elements to and from the dropdown.
CfxSelect also provide accessors methods to obtain the selectedtext and value as well as the index of the selected element.
CfxLabel wraps the ASP.NET
Label controlproviding an interactive way of alterting page text. ASP.NET renders its labelsas
span elements and
CfxLabel locates it through its
id attribute constructed by appending together the names of itsancestor controls. The
Value accessor updates the inner text ofthe span element. Rather than using alerts,
CfxLabel can be usedto enhance the display of error notifications.
CfxRadioSet control wraps a group of radio input elements.
ClickHandler method sets the
onclick event handler ofthe radio button elements.
GetElement returns the
CfxRadioSet radio button element from the radio button index.
GetIndex returns the index of the
CfxRadioSet radiobutton element. The
GetItems method inherited from
CfxControl is overridden by
CfxRadioSet, because radioelements are grouped by the
name attribute while the base methoduses the
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 elementsthat simulate selecting history criteria. This control provides thefunctionality for the
CfxRadioSet control and the controlsassociated 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 aswell as the radio element affiliations. For example the
radioSetproperty contains the radio elements:
radByMonthradio input element affiliate is the
CfxSelect control named
radByMonth_selByMonth control and
radByYear radioinput element affiliate is the
radByYear_selByYear control. The
radDefault radio element has no affiliates. The
valueattribute of the radio element identifies affiliates thus
CfxHistoryOptions class can group elements containing that value.In this case
radByMonth radio input affiliation consists of theelements
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 isclicked the
OnRadioClick handler is called altering the disablestate of the radio affiliates. Notice that the handler uses the
FindInstance method toobtain the instance of the
CfxHistoryOptions class from the eventsource element. Finally, the
Validate method verifies selections.
Cfx Wrapper Classes
Error object adding aproperty that references the instance of the
Cfx class throwing theexception. As you will see in the demo, the thrown
CfxError objectis used identify and change the state of the throwing CfxText object.
event objects. The
CfxEvent hides browser variations of the
event object providing a consistent interface. In the demo,
CfxControl event handlers are responsible for detecting the enterkey event, the radio button check event, and the submit button click event. Thehandlers create a
CfxEvent object to wrap the
eventobject and calls
FindInstance to translate the element firing theevent into its corresponding
Code In Front
WebForm1 page. When
WebForm1 loads, the
onload event calls the page’s
OnLoad functioninstantiating a new
CfxWebFormOptions control and assigns it to
SubmitHandler method assigns the
OnSubmit event handler that gets called when the control submitbutton click event occurs or the enter key is pressed from a text control.
OnSubmit then calls the
Validate method and performs apostback if the validation succeeds.
formOptions = new CfxWebFormOptions( "CfxWebFormOptions1" );
formOptions.SubmitHandler( OnSubmit );
if ( formOptions.Validate() == true )
Figure 7. WebForm1 page code in front are now trivial routines.
Cfx performs surprisingly well. The demo program includes alertsdisplaying page load and submission performance. For a 2GHz system, the time foreach task was under 35 milliseconds for IE 6.0 and under 50 milliseconds forMozilla 1.4.
ControlDemo demo program, shows how to design and implementa control class heirarchy using
The URL for this application ishttp://localhost/JsOOP/ControlDemo/WebForm1.aspx. Copy the source codeinto the JsOOP/ControlDemo subdirectory of yourhttp://localhost home directory. You can use Visual Studio to createthe ASP.NET project or use the IIS management tool found in Administrative Toolsof the Control Panel. This demo has been tested on both version 1.0 and 1.1 ofthe runtime.
Cfx you can still structure your scripts in anobject-oriented fashion.
Cfx is quite versitile letting you choosethe deployment that works best for you.
Another advantage of
Cfx is that it enables you as a webdeveloper to retain greater control of your code. ASP.NET is powerful but toomuch reliance on any tool from a single vendor can spell trouble when targetingmultiple platforms and browsers.
Cfx, because it isobject-oriented, makes it easy to isolate idiosyncrasies in façades andwrappers. While the demos are written for ASP.NET,