jQuery Style ASP.NET Form Validators

Jul

2008

by SMercer

Recently, we here at delphic sage having been starting down the road to adopting jQuery as our client side framework of choice with regards AJAX and DHTML deliciousness. Part of this process included identifying which .NET controls we needed to replace with jQuery plugins. One of these that came up was the ASP.NET validators, which although highly effective and easy to use, offer a rather dated UI experience. I did a bunch of searching around and discovered these wonderful jQuery validators provided by bassisstance.de (Jörn Zaefferer has written many great jQuery plugins, check them out!). These validators are just what we were looking for, but it didn't take long to discover that (A) they are not very .NET friendy because they rely on elements having a "name" attribute, and (B) they are not nearly as easy to implement as the asp.net validation controls from a developer perspective.

validator in action

Here is a look at the final result. See Demo | Download the Source Code

OK, So Let's Eat Our Cake, too

The jQuery validators look and behave greatly, but the asp.net validators are much easier to use. My mission here is to extend the asp.net validator controls to highlight and focus on invalid form fields in way that is comparable to what Jörn has done with his jQuery validators. The key advantage that I will try to attain is that I want the validators to be completely transparent to our developers when implementing in forms. They should continue to implement ASP.NET validation the same way they always have, and I should be able to upgrade the validators accross various legacy projects with very little effort. Because of this requirement, using inheritance to override the control behavior was out of the question since it would require developers to use new control tags and references for the new controls. Now that the goals have been defined, it's time to get hacky with some javascript.

Taking it Online - Moving From Client Based to Web Based Applications

Jun

2008

by SMercer

So long	Hello
`Outlook`	GMail, Google Calendar, TadaList
`Office`	Google Docs
`Trillian/AIM`	Google Chat
`Project`	FogBugz, BaseCamp
`Traditional CRMs`	SalesForce
`PhotoShop LE, Picture Viewers, etc`	flickr, picasa

In the last few years, major developments have happened in the application world that have enabled me to completely abandon many of the win32 client programs that I have depended on for years. I have been reading about this phenomenon for a long time now, but we seem to be at a significant tipping point. At first, I never really bought into the fact that that web applications could even compete with traditional win32 and mac desktop applications.

The Astronauts

Sometime around 2001, I was working on my first AJAX enabled web application and saw first hand the limitations of trying to do anything overly interactive within a web browser (heck, we were dealing with netscape 4.7 and IE 5 at the time). In fact, it wasn't even yet called AJAX at that time, I think we were calling XML Sockets or something to that effect. Anyhow, around this time many of the big thinkers (or architecture astronauts, as Joel calls them) out there on the internets were beginning to tout the end of desktop computing as we know it. They talked about how in the future, we would store all of our files and applications online, and that we could access them from anywhere. I think "Passport" was actually supposed to be a significant step toward this utopian computing ideal. At the time, I thought it sounded like a great direction, but I wasn't about to hold my breath due my experience in developing rich web applications and first hand knowledge of how terrible and inconsistent the world of web browsers was (and still is, although improving).

Fast Forward a Whole Bunch of Years

Using .Net 3.x Lambda Expressions to Write More Concise Code

May

2008

by M.S.

Lambda Expressions via msdn.com:

A lambda expression is an anonymous function that can contain expressions and statements, and can be used to create delegates or expression tree types. All lambda expressions use the lambda operator =>, which is read as "goes to". The left side of the lambda operator specifies the input parameters (if any) and the right side holds the expression or statement block. The lambda expression x => x * x is read "x goes to x times x."

> more

Overview of Lambda Expressions

One of the new .NET 3.x language features that we have been enjoying recently is Lambda Expressions. These expressions are essentially the next iteration of the anonymous methods that were offered with .NET 2.0, with one of the major differences being the simplicity with which you can construct inline methods. When used appropriately, these Lambda Expressions let us get more done with less code and less redundancy.

Lambda Expressions In Practice

Let's say you run into a situation in which you want to write a method that takes as an argument an object of a particular type and a property on the object you want to work with. For example if we take the example below and want to make the redundant parts (in blue text) a shared method, except the different property (in red text) being used is potentially holding us up. (Continue reading for example code).

How to Create a DHTML Gantt Chart Control

May

2008

by Robert

There are many options out there that allow us to graphically visualize various types of data. Flash based charts, which generally deliver the best interactive experience, are difficult to integrate, debug and maintain since flash is a highly proprietary technology. Then there are clunky client based Java applets and Active X, which for the most part have dissappeared in the age of web 2.0. Finally, we have used various server side components that generate beautiful images that are returned to client's browser. They are lightweight and look good, but offer little in terms of interactivity. This has led us to try a different approach, why not try to build charts with CSS, Javascript, and XHTML? We took a few days to cook up this little proof of concept that should pave the way for us to offer this technology in many of our solutions. Plus, we have links to a demo and downloadable source code package for you to check it out for your self. We'd love to hear any feedback or ideas! Stay tuned for part 2 which may include a .NET server control to encapsulate this control.

The DHTML Gantt Chart control allows you to use JavaScript to create interactive Gantt Charts. Since it is written entirely in JavaScript it does not require Flash, Java, or any other plug-in. The code to create and initialize the chart can easily be generated by a server-side script making it very simple to dynamically generate charts. Since the tasks are created in JavaScript the chart can be built at run-time from user input.

Click here to download all of the files you will need to include DHTML Gantt Charts on your web site.

What does the chart control do?

The Gantt Chart control takes a list of tasks and organizes them in a graphical display. Each task has a duration (in days) and a list of prerequisite tasks. From this information, the chart control schedules each task and displays a graphical representation of the project's timeline. The scheduling process knows to skip weekends. No task will begin on a weekend and weekend days will not count towards the completion of a task.

For example, let's come up with some theorhetical tasks and durations that one would use to cook up a demo such as this one:

Design Gantt chart control (2 days).
Code the control (3 days).
Document how the control is used (2 days).
Clean up code, fix problems & browser compatibility issues (1 day).
Describe the control and its purpose (1 day).
Format the blog post (1 day).

Design must be done before coding.
Design must be done before describing the control's purpose.
Writing the code must be done before cleaning up the code.
Writing the code must be done before documenting the control.
Describing the control and documenting its features must be done before formatting the blog post.
Work will begin on May 15, 2008.

Click for a live interactive demo.

The chart displays the given information, but by scheduling the tasks it also displays the starting and ending date for each task. From this, the chart also knows the ending date of the entire project. While its not hard to figure these things out yourself for a small project, its easy to see how this control can save lots of time when planning larger projects.

More after the jump....

What To Read?

Mar

2008

by SMercer

One of my major complaints about RSS in general is that with all of the fresh content that is delivered, I can never tell which stories are deserving of my limited time and attention span. With each new interesting blog and news feed that I subscribe to, the problem gets worse. One of the things that I have grown to appreciate when I visit CNN.com for example, is that the most important news receives the highest priority one the page. Sometimes these stories even receive a dramatic red background that is impossible to ignore. With an RSS reader, a story about N. Korea's nuclear ambitions recieves the same treatment as the latest celebrity hijinks of Tom Cruise.

This got me thinking about the ways that content can be visualized, especially syndicated / aggregated content. One of the things I stumbled accross is the idea of a NewsMap, which takes aggregated news content (in this case Google News) and displays them in a hierarchical manner. Ok, so after trying to acually read the news via the NewsMap I realize that is not really the best solution. I fact, it's actually quite headache inducing.

Perhaps the best answer would be a rating system for syndicated content that would allow peoples readers to prioritize and display information based on how the rest of the internet world see it.