SystemDotWeb

An Unobtrusive Image Rotater

I'm sure it's probably been done before but I've wanted to try this for a while. If you have ever visited SteamPowered (any half-Life fans?) you might have noticed the rotating images of the latest games or the big games they want you to shell out on.

Well thats done in flash. I thought why not do in ordinary html with some helpful unobtrusive javascript to turn it into a fancy slideshow. So I called it the Image Slider. Imaginative I know. Anyway it's a first attempt so check it out and let me know what you think. View the Demo and Download the Image Slider.

ASP.Net developers & Javascript

I am really fed up with .Net Developers and their continued use of bad javascript writing practices and what appears to be a complete unwillingness to see what people are doing and recommending out there when it comes to javascript. I can understand a .net developer not having an extensive knowledge of the subject especially if they aren't using it that often. Thats another story in itself as asp.net is doing alot of the scripting for them and I'm afraid thats very often a bad thing too. What I can't understand is the guys who are writing articles day in day out on various asp.net subjects that require some scripting. In almost every case they are using outdated methods and outdated script and these are articles highlighted on the front page of asp.net? People are taking lessons from these guys effectively.

Lets try and put a spotlight on some of this:-

1. document.all (Kill!Kill!)

Just today I saw what could have been a great article on putting a + link on each row of a gridview for expanding a row to view it's details (say a companies orders or something). What do I see? document.all being used in almost every javascript function? It's been documented many times before now by better people than me. Unless you have some kind of archaic interest in old school scripting then stop using document.all. Burn it. Start using document.getElementById. That includes checking for support. Use if (document.getElementById) instead.

2. Inline script - Classic example -> Get Confirmation before deleting a gridview row

Almost every single article you find on getting confirmation from a user before deleting a record will have you either overriding the itemdatabound event of the gridview to spit out some inline script or simply using the onclientclick property of the button field. The onclientclick property by the way is the first of many microsoft culprits out there encouraging us to use inline code. Whats wrong with inline code you say? Strictly speaking nothing. Just as much as say 5 years ago there was nothing really technically wrong with using a font tag in html but we all started to see the advantages of css and the upcoming xhtml standards and so on. Whats more elegant? Theres no contest imo. So how would you do it then? Well taking the delete confirmation as an example. I would give the delete button a class (cssclass) name of "confirm_delete" for example. Then in my external .js file (yes behaviour seperated from presentation folks) I might have something like this:-

function AddLoadEvent(func) {
    var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func();
  }
 }
}

AddLoadEvent(InitDeleteConfirm);

function InitDeleteConfirm() {
 var linkbuttons = document.getElementsByTagName("a");
 var i = 0;
 var linkslen = linkbuttons.length;
 for (i=0;i<linklen;i++) {
  if (linkbuttons[i].className.indexOf("confirm_delete")>-1) {
   linkbuttons[i].onclick = function() {
    return confirm("Delete this record?");
   }
  }
 }
}

This bit of script can now be used over and over again on any page and will be applied to any linkbutton you give a class of "confirm_delete". Now it does raise other questions. This is part of an attempt to be unobtrusive with my script. i.e. I want the site/page to work if script is turned off. Well we know the linkbutton won't work with script off because it's not really a hyperlink and it's not really a button it's an anchor with script behind it. So my move would be to make my delete button a template field with a hyperlink that points to a delete page that takes the id of the item being deleted. I might go one step further and make this page ask for confirmation and then my script can skip going to the page and use ajax to delete the item once confirmation has been received on the client. Since once I know script is on I can be as fancy as I like. With it off I want a fall back.

3. Calling everything under the Sun AJAX enabled simply because it's uses javascript

Folks an expanding/contracting list is not an AJAX list, a pop-up window is not AJAX, a fancy menu is not AJAX. Regardless an awful lot of asp.net article writers like to make you think it is. The Microsoft Ajax Control Toolkit is a major culprit here but it seems to have encouraged writers to create widgets that have absolutely nothing to do with AJAX and call it the AJAX Squidget or something. On the other hand you have Scott Smith deciding it's a good idea to create an AJAX calander when it can be easily done with script on the client and nothing else, no need for xmlhttprequests. Why oh why would anyone think this was a good idea when you can simply tie a good unobtrusive javascript calendar to a textbox. See my article on doing just that. Life is so much simpler with asp.net but we seem hell bent on making it so simple as to regress and in the end the developer has a ball but the user will be hunting us down with a shotgun.

The Unobtrusive Method

You might spot a theme here and it's called Unobtrusive Javascript. This is fast becoming a well established approach to scripting that is gathering huge support almost everywhere I look except in the asp.net world. This is probably the root cause of my frustration. I am a big fan of asp.net and the Visual Studio IDE it only makes it more annoying to see the way it is making it so easy for developers to use what in my opinion are approaches that are fast becoming outdated. I want people to be able to right-click and bookmark a link without discovering later on that they bookmarked some script. I want someone looking at page 5 in a paged gridview to be able to bookmark that and not have their boss who they have sent the link to following the link, seeing page 1, getting confused and sacking the poor sod. These are all simple ideas. I'm not saying we need to plan for the 1% of viewers who will have script turned off I'm saying it's easy to do and other benefits come with it so why not. Almost every unobtrusive script you write will be re-usable over and over again making your job easier in the long run. I plan to write more and more about this and how I use it in the near future. Stay tuned and let me knwo what you think.

An Expandable Select

Wow over a year since I last posted. Oh well. I have been working for a while on an unobtrusive solution to an issue I run into often enough. That of select boxes or dropdownlists as we call them in the .net world. Anyway with a select you have two choices for how it displays. You can specify a fixed width or you can let it grow as much as it likes. The problem with the fixed width is good old IE. It will obey your fixed width but when we click to choose it won't expand the width of the options as necessary. This is an annoyance as most of the time it's the un-selected select box we are concerned with as regards layout on the page. It won't affect the page if it expands the size of the otpions.


Well I decided to throw together some script to see if I could come up with an alternative. I'm calling it the SelectExpander for now. Basically it contains a css file, a little gif to give it a nice vista-esque look and the script file. Just place the folder with all these items into your web site and link your page to the css and js files. Look at the source of this page for an example.

Now any dropdownlist/select you want to change over to the expandable version just make sure it's wrapped in a div then give it a class value of "selectexpander" and hey presto your normal select will be replaced by this little marvel. Of course if you are using a dropdownlist that would be the cssclass property and don't worry it should still work for your auto-postbacks.

Now while I did this I thought it would be nice if the list of options could be links. That would save on postbacks anytime we just want to redirect the user when they select an option so I've added in that functionality too. Just add the class value "linklist" so the full class value would be "selectexpander linklist". It should then look like the following:-

This is of course very early stages with this so post a comment if you have any problems with it. I have plans to add more options to it and I have only tested it with IE7 and Firefox 2. So it will take the help of others to iron out problems no doubt. Give it a try and see if it works for you. I am releasing it on the GPL License so that means you can use it for free as long as it's not going to be used on a commercial site etc. Grab the files here.

Avoiding the Unecessary - Pop-Up Calendars and Web Based Editors

In the past I have used some great third party controls. The 2 I have needed the most have been a date picker and some kind of wysiwyg enhanced textbox. While these controls (the ones I have used anyway) tend to be excellent in general I recently decided that I didn't really need these things to be Asp.Net server controls. At the end of the day what you want is for example a date in a textbox or some html in a textarea to save to your application. So why not use straight-forward javascript widgets to do it and reduce the size of your web pages and have control on where the javascript will be.

Date Pickers

For date picking I found 2 options, Unobtrusive JavaScript date-picker widgit and the DateChooser. Both allow you to put a small amount of javascript in your page (crucially in external files) which will enable your chosen textboxes to become date pickers. When your users save all you need is the value in the textbox so why enlarge your page with a control that will spew out javascript inline that you have no control over?

WYSIWYG

I've used the FCK Editor for a long time and it is a powerful tool to say the least but as an asp.net control you have very little control over it. In alot of cases I don't want to provide that much functionality. The main idea is that my users use Word and want to paste into a textbox and retain the formatting (to a point, I won't allow certain formatting if I can help it). So I found a great widget called conveniently the widgEditor. This is a very lightweight bit of javascript that will turn any textarea (or asp.net textbox with textmode=multiline) into a wysiwyg editor once you have a css class of widgeditor declared.. Very simple and again when the user saves you can still grab that html content from your textboxes' content. This is a great solution as if the user has javascript turned off they will still get a basic textarea.

If you can find good lightweight ways of doing things it can only help your web apps in the long run. You can cut down on unecessary bloated code in your html and remain more standards compliant and your pages usable to a wider audience. Give it a try.

Holidays beckon...

On Friday morning I fly to Las Vegas for 3 weeks. I'm an avid poker player and the annual World Series of Poker is ongoing as we speak. I'll be there a week before it begins and to the end. I am really looking forward to this and the craic as we say in Ireland should be great with many of my fellow Irish players heading out.

Anyway sorry to bring up poker in my Asp.Net blog but I have to be able to explain my lack of posts over the next month. I think my readers (varies between 0 and 1) need to know. If on the other hand you are interested in poker then check out the poker podcast I do with another Irish player. We have high hopes for it and the second episode is due out any day.

Well thats it. In the meantime if there are any readers out there with problems be sure to post a comment with questions and I'll either answer or even do a whole post covering your area of enquiry. Failing that pay a visit to www.asp.net, a place I regularly post at. Next time I post I'll probably be broke :)