Toolbox

Rich Web App UIs, Tools for Regular Expressions, and More

Scott Mitchell

Contents

Create Rich Web App UIs
Tools for Regular Expressions
Create Screen Mockups
The Bookshelf

Create Rich Web App UIs

ASP.NET ships with a variety of built-in Web controls that provide the core user interface elements. However, if you need to employ a richer user interface or if you just need more visually stunning results, your best bet is to turn to a third-party vendor.

There are a variety of companies that supply rich ASP.NET user interfaces including enhanced grids, toolbars, tabstrips, charts, menus, and more, all wrapped into a single control suite package. One such product line is NetAdvantage for ASP.NET version 2006 Volume 2 by Infragistics. The NetAdvantage for ASP.NET library contains a suite of ASP.NET Web controls that you can use to work with data, collecting user input, navigation, charting, and grouping controls.

The Infragistics flagship product is UltraWebGrid, which provides a fully functional and customizable grid experience that is not available with the built-in ASP.NET DataGrid or GridView Web controls. For example, features like grouping, column resizing, fixed column headers, filtering, and column and row selection—which are not provided by the DataGrid or GridView by default—can be added to the UltraWebGrid merely by setting a few properties through the Designer. UltraWebGrid can also be configured to utilize AJAX techniques to load data on demand and perform updates to the grid's data.

NetAdvantage for ASP.NET

NetAdvantage for ASP.NET(Click the image for a larger view)

Also available in NetAdvantage for ASP.NET are tree controls, navigation controls (toolbars, tabstrips, menus, and so on), rich text editor and masked input controls, charting controls, calendar and additional date/time-related controls, enhanced button and panel controls, and even a spell checker control. All of these controls provide a rich design-time experience and require little to no code. And most of these controls offer built-in AJAX features, including load on demand, type-ahead features, row filtering, and paging.

Not only do the NetAdvantage for ASP.NET controls open a new world of user interface design, but they also look spectacular. All controls provide a bevy of properties through which their appearance can be customized. There are also numerous predefined themes that can be applied at the click of a button. If you need to take your ASP.NET UIs to the next level, or just want an aesthetic Web site with minimal effort, check out Infragistics NetAdvantage for ASP.NET.

Price: $795 per developer license.

www.infragistics.com

Tools for Regular Expressions

Regular expressions are strings that use a special syntax to find matches of a specified pattern in other strings and are commonly used for input validation and string processing. For example, to ensure that a user has entered a date using the format YYYY-MM-DD, the regular expression pattern ^\d{4}-\d{2}-\d{2}$ could be used (although this simple pattern only checks for the correct number of digits and hyphens, and therefore allows invalid dates like 1111-99-44).

Creating and testing regular expressions can be a trying experience. For developers new to regular expressions, the mishmash of text and special characters can quickly lead to incomprehensible gobbledygook. When creating a regular expression pattern in code using Visual Studio®, there's no tool support. Gone are color syntax highlighting and IntelliSense®, and there's no easy way to debug or test a regular expression pattern within Visual Studio.

The Regulator

The Regulator(Click the image for a larger view)

Thankfully, Roy Osherove (weblogs.ASP.NET/rosherove) has created a number of free tools that make up for the lack of regular expression support in Visual Studio. The most well-known of these tools is Regulator, a standalone regular expression editor that includes color syntax highlighting, IntelliSense-like hints, a code snippets window, and search access to RegExLib.com, an online library of common regular expression patterns. Included are input and output windows; you provide an input string to test against and see the matches found using the regular expression. And, at the click of a button, Regulator will automatically generate the Visual Basic® or C# code to implement the regular expression for pattern matching, string replacement, or string splitting.

Roy also provides a regular expression Regex Kit Visualizer for Visual Studio 2005. When it is installed, regular expressions can be dissected and explored during debug time in the Visual Studio 2005 IDE through an interface similar to that of Regulator.

Price: Free.

tools.osherove.com

Create Screen Mockups

When engineering a software system, it's vital that all stakeholders have a clear understanding of the system's purpose and functionality. Such information is commonly communicated through the use of prototypes. The Visual Studio Designer allows for creating functional prototypes quickly, but such prototypes are often overkill because the needed information usually can be illustrated with diagrams and simple screen mockups. Moreover, Visual Studio wasn't designed to be a prototyping tool and therefore lacks features such as arranging forms into use case scenarios, illustrating changes to the UI based on user action, and so on.

A simpler and more efficient approach is to use a program designed specifically for making screen mockups. MockupScreens version 3.09 by Igor Ješe makes creating wire frame screens and organizing them into scenarios as simple as pointing and clicking. A MockupScreens project is composed of a set of scenarios, with each scenario comprising a set of screens. Each screen is made up of UI elements, such as buttons, labels, dropdown lists, and textboxes. Creating screens is a breeze with the Screen Editor, whose functionality resembles the Visual Studio Designer. To add user interface elements to a screen, simply drag the UI element from the toolbox onto the screen itself, after which the element can be precisely positioned and configured via its properties.

Once a mockup has been created, it can be shared with stakeholders in a number of ways. For those onsite, Mockup Screens offers a slide-show view of the project, allowing the prototype to be demonstrated in a presentation setting. For those off-site, the Mockup Screens project can be exported to a Web page. Also, individual screens can be exported as a JPG or GIF image file.

MockupScreens

MockupScreens(Click the image for a larger view)

There are many ways to create prototypes of an application, from simply sketching it out on a piece of paper to building functional prototypes using Visual Studio. MockupScreens offers an expedient and easy way to create and share wire frame mockups organized into use case scenarios. If you need to convey UI ideas or design decisions to stakeholders in a clear and efficient manner, give MockupScreens a try.

Price: $79 for a single-user license.

www.mockupscreens.com

The Bookshelf

All programs, regardless of their size, scope, or complexity, should be thoroughly tested to ensure correct results and behavior for both expected and unexpected inputs. Many developers employ commercial or open source testing frameworks to aid and automate the testing process. While testing frameworks have their place, in his book .NET Test Automation Recipes: A Problem-Solution Approach (Apress, 2006), fellow MSDN® Magazine columnist Dr. James D. McCaffrey proposes that these testing frameworks be complemented with lightweight test harnesses. A lightweight test harness is a short (four "pages" of source code or less), simple, standalone program written to perform a test or set of tests against the target app. All testing frameworks have a learning curve and many force developers into adopting a particular style for creating their test cases. With lightweight software test automation, however, developers creating the test harnesses can utilize their current knowledge base and programming style.

Building a lightweight test harness involves a number of steps that, in a formal testing framework, would be handled by the framework itself. This includes reading the input test data, performing the test, comparing the actual output with the expected output, and saving and summarizing these results. With modern programming frameworks like .NET, writing the code to perform these tasks is straightforward. The book contains code and explanation for over 100 typical tasks in creating lightweight test harnesses.

The book is broken down into three sections—Windows Application Testing, Web Application Testing, and Data Testing—with each section encompassing four chapters. The Windows Application Testing chapters present recipes for using Reflection to programmatically access a class's properties or invoke its methods, as well as code snippets for performing user interface actions, like clicking on a particular control or selecting an item from a menu. The Data Testing chapters look at how to test ADO.NET code and SQL stored procedures, along with recipes for parsing, validating, and comparing XML data.

Lightweight test harnesses are, by definition, simple and should not take significant time to develop. This time can be lessened by having the recipes discussed in Dr. McCaffrey's book at your fingertips.

Price: $49.99.

www.apress.com

Send your questions and comments for Scott to  toolsmm@microsoft.com.

Scott Mitchell, author of numerous books and founder of 4GuysFromRolla.com, is an MVP who has been working with Microsoft Web technologies since 1998. Scott is an independent consultant, trainer, and writer. Reach him at Mitchell@4guysfrom­rolla.com or via his blog at ScottOnWriting.NET.