LANGUAGES: VB .NET
ASP.NET VERSIONS: 1.0 | 1.1
Create Rich-Looking Apps
Yes, it's possible to get a rich-client look in your thin-client Web apps.
By Brad McCabe
Developers today face new challenges as technology and economic pressures change the once familiar IT landscape. The entire industry is under pressure from business units driven by the bottom line to deliver more value and to "do more with less." One strategy many development groups have adopted to achieve these goals is thin-client, or browser-based, delivery of applications with ASP.NET.
This thin-client approach lets companies avoid the issues surrounding versioning, deployment, and the infamous DLL hell. But it comes with a price. Users are accustomed to the rich and robust graphic interfaces delivered by Windows client-server applications, and it is a lack of a real-time, engaging interface that often becomes the biggest inhibitor of ASP.NET-based applications in numerous organizations and groups.
A well-designed and accepted interface is a must for most applications that corporations develop. The design and development of the presentation layer can take more than one-third of any project's entire development cycle. Upon seeing and interacting with this interface, users develop their first impressions of the application and shape their views on the success or failure of the development effort. Thanks to many innovations in ASP.NET, you continually can deliver this rich-client look and feel end users demand while still delivering the lower Total Cost of Ownership (TCO) IT managers seek fervently.
To achieve this rich interface, you need to slip behind the basic "drag-and-drop" applications you can create with ASP.NET and instead think outside the box. By applying the ideas and principles of this article, you can produce stunning interfaces.
Remember that ASP.NET is a technology, and like all technologies it has right and wrong times to be used. For creating graphics-intensive or extremely high-performance applications, Windows-based applications with No-Touch deployment might be a better option. Organizations must use due diligence and evaluate all the technical options .NET provides because a one-size-fits-all approach to application design is not always the correct answer.
Real-Time Interaction is Key
One of the first steps to creating a rich-looking interface is to provide the real-time interaction and feedback users expect. Visual Studio .NET's standard controls provide most of these features and services via a postback to the server. This postback introduces latency to your application, both from the network and the Web server, which slows the responsiveness.
Performing as many actions as possible on the client side is one of the keys to improving both the real and perceived speed of an application. Some ASP.NET controls such as validators provide this client-side support by default. Others such as the DataGrid, however, require either some work or outright replacement to enhance this support.
When you add the name of the client event, Visual Studio .NET underlines the attribute as a warning. This is natural. Visual Studio .NET is notifying the developer properly that an incorrect attribute has been added. When the ASP.NET engine renders this page to the browser, these "foreign" tags are passed - unchanged - to the browser. The onMouseOver tag works like a standard HTML attribute and hooks the event to the defined function. This simple addition to the ASP Image control lets you perform more interactive events and interfaces with the end user in real time.
Hook Up Client Events
This approach works well for situations where the client-side event name does not conflict with a server-side name or when you want to hook up a client-side event at design time. But how do you handle other scenarios?
Using a server-side control's Attributes collection, you can hook up client-side events easily to meet these other challenges. In any event, such as the page load event, you could add basic code such as this:
In this simple example, which is included in this article's downloadable project file (see the Download box for details), when you click on Button1, an alert box is displayed on the client immediately. The real power of this method is that client events, or other attributes, are added dynamically while processing server-side code.
The following lines of code in the page load event can turn a rather boring ASP.NET image button into an interactive button with mouse-over and mouse-out effects:
When this page runs, it renders the two lines of text and the command button. So when a user clicks on the command button, the content of the panel (now a DIV tag) is disabled.
Buy, then Build
Figure 1. The use of advanced Independent Component Publisher (ICP) components lets you create your own rich, engaging interfaces while minimizing your effort. Notice the desktop-like features such as the dropdown form for editing the grid, movable menus, and tabs.
Other features to look for when evaluating components are a complete integrated toolset or the availability of source code from the vendor. Obtaining the source code not only gives you complete asset security, but it lets you extend and customize the component easily as well.
Reduce Postback Impact With IFrames
One way to reduce the impact of this postback is to use an IFrame, so long as you are certain the app will be used only on up-level browsers. Many corporations are standardizing their browsers to be up-level, using applications such as Internet Explorer 5.0 and 6.0, which makes this a viable option for most intranet developers.
Figure 2. The chart and grid region on the right side of the page is in a separate IFrame region. When a user selects a node on the tree to the right of the source (SRC) property, the IFrame is updated.
"height=" + (window.screen.availHeight - 60) +
", width=" + (window.screen.availWidth - 14) +
", top=0, left=0, menubar=0, location=0,
When a user accesses this page, a new browser window containing the lmain.aspx page is opened automatically without any menus or toolbars, and it expands to consume almost the entire screen (see Figure 3).
Figure 3. The new Microsoft Customer Relationship Management (CRM) system is an ASP.NET-based application. With careful design and basic tricks, such as hiding the browser buttons, Microsoft made the application feel just like a Windows Forms application.
You even can take this one step further by adding a couple of additional lines to the client-side window's onload event:
if (window.name != "YOURAPP_MAIN")
var oMe = window.self;
oMe.opener = window.self;
Create Custom Context Menus
Another useful event Internet Explorer exposes to help ASP.NET developers deliver richer applications is the OnContextMenu event of some HTML tags such as span (see Figure 4). You can use a simple span tag to wrap an entire page or individual server controls like this:
In this example, right-clicking on Box1 or Box2 invokes two different right-click menus. Creating this right-click menu and positioning it at the exact location of the right-click is a bit tricky because the coding for it can get complex. In this case, you might be better off turning to component vendors for this functionality if you have neither the time nor inclination to do this yourself. (Look for more information about how you can build a right-click menu of your own in an upcoming issue of the asp.netNOW newsletter; see the More in asp.netNOW box for details.)
Figure 4. Using Internet Explorer's OnContextMenu client event, you can customize and override the browser's right-click menu to respond as a Windows application would, and you can provide context-specific help or functions.
It now should be clear that you can create very interactive and compelling application interfaces with ASP.NET that rival a Windows application. There is no one magic bullet tip to creating these advanced interfaces; rather, it's a process of combining the best of ASP.NET and standard Web technologies such as DHTML into one complete application. By combining these technologies, ASP.NET has made tremendous strides toward reducing the complexity and challenges of creating great-looking Web-based applications.
The sample code in this article is available for download.
Brad McCabe is the technical evangelist for Infragistics. He also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].
Tell us what you think! Please send any comments about this article to [email protected]. Please include the article title and author.