Atlas Client Controls Preview

Learn the Ins and Outs of Development with the New Atlas Client Controls

ControlFreak

LANGUAGES: VB.NET

ASP.NET VERSIONS: 2.x

 

Atlas Client Controls Preview

Learn the Ins and Outs of Development with the New Atlas Client Controls

 

By Steve C. Orr

 

There are two types of Web developers: those who love JavaScript and those who tolerate JavaScript because they must. If you re a JavaScript lover, you ll be happy to learn that Atlas includes a new feature-rich client-side library that makes JavaScript development easier than ever. The Atlas script library includes enhancements to JavaScript itself, adding new object-oriented features like classes, interfaces, inheritance, namespaces, and serialization.

 

If you re the kind of developer who prefers to avoid JavaScript, you ll be happy to know that (in most cases) you can take advantage of the features in this client-side library without having to write any JavaScript. One example of this is the server-side Atlas controls described in Atlas Server Controls Preview, which use the client-side library extensively even though you might never know it because that implementation detail is entirely encapsulated by the controls. Alternatively, you can use the new client-side Atlas library more directly and still not have to write any JavaScript thanks to the new Atlas Xml Script detailed later in this article.

 

How Did We Get Here?

You should understand that HTML only supports a few very basic kinds of controls, such as buttons, textboxes, checkboxes, option lists, and not much else. Moreover, these controls have only a very limited functionality. When ASP.NET came along, it also introduced a standard set of Web controls that included buttons, textboxes, checkboxes, and list controls. These controls provide significantly more functionality than their HTML counterparts, even though ASP.NET is using and rendering those same old HTML controls. How does it do this? Primarily this is done by wrapping those standard old HTML controls with a layer of extra functionality that incorporates JavaScript, additional server-side logic, and the ability for the controls to be configured declaratively in an HTML-like syntax (ASPX). In some cases, individual sets of HTML controls (such as the checkbox) were combined into composite Web controls, such as the CheckBoxList. To top things off, the framework made it easy for developers to make their own custom Web controls.

 

The Atlas team has paid close attention to the way that ASP.NET successfully extended those standard old HTML controls, and has created a very similar model on the client side. They ve wrapped those standard HTML controls with a layer of extra functionality that incorporates JavaScript, additional client-side logic, and the ability for the controls to be configured declaratively in an HTML-like syntax (Atlas Xml Script). It s even possible for developers to create their own custom Atlas controls and combine sets of individual HTML controls into composite controls.

 

Atlas Client-side Controls

The new client-side controls of Atlas June CTP are listed in Figure 1, although I wouldn t be surprised if this list changes a bit before the final release.

 

Atlas Control Name

Atlas Control Description

Button

Can provide button-like functionality to several kinds of HTML elements.

CheckBox

Allows checkboxes to take advantage of Atlas functionality.

Control

A generic Atlas wrapper that can be used on most HTML elements.

Hyperlink

Enhances standard anchor tags with Atlas functionality.

Image

Adds Atlas functionality to tags.

InputControl

Enhances input controls (such as textboxes and dropdown lists) with advanced client-side validation features.

Label

Provides Atlas capabilities to placeholder elements.

Select

Grants Atlas functionality to listboxes and dropdown lists.

TextBox

Extends HTML elements (such as input and textarea) with Atlas features.

Figure 1: These Atlas client-side controls wrap standard HTML elements with enhanced Atlas functionality, such as data binding, actions, and behaviors.

 

At first glance you may not be so impressed with the list. After all, ASP.NET has always provided buttons, images, and hyperlink controls so what s so great about these controls?

 

First of all, AJAX is baked into each control so that they can communicate with the server independently without requiring any postbacks. That alone is worth its weight in gold. This AJAX capability extends to data binding, so controls can display and update their own database fields automatically often with no code required. Each control can also be enhanced with Atlas Behaviors and Actions, which will be demonstrated shortly.

 

JavaScript Development

Writing JavaScript that takes advantage of the Atlas controls is not difficult, but you do need to know a few things. Let s start with a simple Hello World example just to get our feet wet. Consider the code in Figure 2.

 

   

   

       value="button" onclick="Button1_OnClick()" />

   

   

Figure 2: This example shows several key concepts of coding Atlas with JavaScript.

 

First, the Atlas ScriptManager server-side control is declared. Strictly speaking, this control is not required for client-centric development such as this, but it does provide a useful way to include the necessary Atlas JavaScript support files automatically. Without the ScriptManager you d need to keep track of the include files in a more manual (and, likely, more error-prone) fashion.

 

The HTML block below that contains standard control declarations, with nothing unique to Atlas; it simply declares a common text input element, button, and div (label). When the button is clicked, client-side code will fill the label with a Hello greeting to the person named in the textbox, as shown in Figure 3. This is all done on the client side with no postback or AJAX calls.

 


Figure 3: This basic Hello World page may not be the pinnacle of excitement, but its source code shows off some key Atlas concepts that are the launching pad for powerful new features.

 

The JavaScript pageLoad function is a special Atlas function that gets called automatically once any markup has been processed and Atlas has loaded its scripts. In this case it calls the client-side InitializeComponent function. This model should seem very familiar if you re familiar with the server-side model of ASP.NET.

 

The InitializeComponent function shown in Figure 2 is filled with custom code to specify that each of the three HTML controls on this form should be wrapped with extended Atlas functionality.

 

Note that the syntax $( ElementID ) is a cross-browser compatible Atlas shortcut for the standard JavaScript document.getElementById( ElementID ) method. Essentially, each control is being initialized via Atlas and a pre-existing HTML element is being passed to the Atlas control s constructor so it knows which HTML element it s supposed to extend.

 

The button s OnClick function references the Atlas control properties using a somewhat interesting syntax. Because not all browsers support standard get/set properties, this special set and get method syntax must be used instead of a more C#-like property syntax.

 

The resulting page is admittedly not all that impressive, because all this could have been done with a similar amount of plain JavaScript code, no Atlas required. If this is as fancy as you ever want your pages to get, you might be right Atlas would be of little value to you. However, now that the Atlas controls have been instantiated on the page, this unlocks the door for much more powerful functionality. Let s take a look at another example.

 

Behaviors

Figure 4 shows a slightly revised version of the InitializeComponent function from Figure 2. The lines commented with asterisks are the newly added lines of code. As you can see, the first block of code creates a new AutoCompleteBehavior object and tells it which Web service and Web method to call to fetch the dynamic auto complete list. It then attaches the AutoComplete behavior to the textbox and initializes them both. Figure 5 shows the AutoComplete functionality in action.

 

function InitializeComponent()

{

 var AutoComplete = new Sys.UI.AutoCompleteBehavior(); //**

 AutoComplete.set_serviceURL("SimpleService.asmx"); //**

 AutoComplete.set_serviceMethod("GetSearchTerms"); //**

 Text1 = new Sys.UI.TextBox($("Text1"));

 Text1.get_behaviors().add(AutoComplete); //**

 Text1.initialize();

 AutoComplete.initialize(); //**

 Label1 = new Sys.UI.Label($("Label1"));

 Label1.initialize();

 Button1 = new Sys.UI.Button($("Button1"));

 Button1.initialize();

}

Figure 4: By adding just a few lines of JavaScript to the InitializeComponent function of Figure 2, rich AutoComplete functionality is added to the textbox.

 


Figure 5: A few lines of code can enhance boring textbox controls with AutoComplete functionality.

 

Unless you go with a declarative data binding approach, you re expected to create the Web service for the AutoCompleteBehavior yourself. Atlas uses standard Web services, with no special syntax requirements other than the expected AutoComplete parameters shown here:

 

'SimpleService.asmx

_

Public Function GetSearchTerms(ByVal _

 PrefixText As String, ByVal Count As Integer) As String()

   'TODO: Query data source for results matching PrefixText

End Function

 

In addition to the AutoCompleteBehavior previously demonstrated, there are several other useful behaviors supplied by Atlas plus the ability to make your own. Figure 6 shows several useful behaviors that Atlas provides.

 

Behavior

Behavior Description

autoCompleteBehavior

Provides type-ahead dropdown functionality for textbox controls.

clickBehavior

Provides event handling for the click event of all non-button controls. (Button controls have their own click functionality.)

hoverBehavior

Provides Hover and Unhover events, along with other customizable properties.

popupBehavior

Turns block HTML elements into hovering panels that can be positioned, shown, and hidden dynamically.

progressBehavior

Displays feedback to users during long-running AJAX operations.

floatingBehavior

Allows HTML elements to participate in drag and drop positioning.

Figure 6: Atlas provides a variety of built-in behaviors to enhance HTML controls and elements.

 

Declarative Development with Atlas Xml Script

Just as server-side controls can be configured using a declarative syntax in ASPX pages, client-side Atlas controls can now also be declared in a similar way using Atlas Xml Script. For example, the HTML page shown in Figure 7 accomplishes the same AutoComplete functionality as in the previous example, but with no JavaScript required.

 

 

 

Figure 7: This declarative Atlas Xml Script accomplishes the same AutoComplete behavior as the JavaScript listed in Figure 4.

 

The listing starts by declaring the ScriptManager server control, which is standard for all Atlas-enabled pages. This is followed by a typical HTML text input; then comes the interesting part Atlas Xml Script. This Xml is parsed automatically by the Atlas client-side library; in this case, it accomplishes pretty much the same thing as the first two code blocks shown in Figure 4. That is to say, an AutoComplete behavior is declared for the textbox, its serviceURL property is set to the path of the Web service, and the serviceMethod property is set to the name of the Web method that retrieves the list of matching data.

 

Conclusion

The server-centric development approach of classic ASP.NET is very intuitive for many developers, but not all and it does have its limitations. Sometimes the best possible user experience requires logic to be executed on the client side, not the server side. Using the client-centric Atlas design approaches detailed in this article, you can take advantage of the rich features modern browsers have to offer without having to worry about cross-browser compatibility issues, because all the most popular browsers are seamlessly supported, such as Internet Explorer, Firefox, and Safari. You can utilize these client-side development techniques with JavaScript or without, or you can avoid client-side development altogether and still benefit from rich client features with the Atlas server controls described in Atlas Server Controls Preview. How do you want to use Atlas? The flexibility Atlas provides means that you can choose the development technique that s the best fit for you and your project.

 

This article merely scratches the surface of Atlas client-side capabilities; stay tuned to asp.netPRO for many more details in the future. Atlas is the future of Web development. I recommend you download the latest CTP of Atlas now from http://atlas.asp.net and start getting to know it.

 

The source code accompanying this article is available for download.

 

Steve C. Orr is an MCSD and a Microsoft MVP in ASP.NET. He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about them, he can often be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:[email protected].

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish