Around two weeks ago I released the first version of SVG to Codeplex. I've been putting off blogging about this until I'm familiar with the source control and happy with the Codeplex processes. Just seeing if it fits, I guess.

The released version supports a great deal of SVG features but certainly not all. It has been tested against many *.svg documents too. Most render properly, some render partially, some don't render at all. Most importantly though, this release can be used to create some pretty nifty images for a website.

Coming up in the next few weeks will be simple tutorials on how to use SVG to create some of those images. The first will be on how to create three-state buttons and another on how to create gradient images for use in a menu. They'll be a mix of SVG and CSS with no C#/.NET coding required. These tutorials will not require any image editor - Visual Studio or even notepad will do fine.

Even if you're not interested in using these tools the tutorials may still be of interest - SVG is a W3C language after all.

It was pretty quiet today (not surprisingly) but there was a lot on. Lots of practice and qualifying sessions for Australian GT, Aussie Racing cars and V8 Super Car racing.

Boy, was it hot. I went through around 6 juice bottles. I think it was around 35 Celsius with the track sitting at 50 Celsius! The stands have no shade and there it's a fair walk just to get some (overpriced) water. Tomorrows temperatures are set to be closer to 40 so I'll only be there for on hour or two perhaps. There are some F1 practice sessions that would be cool to watch.

ASP.NET generally plays well with JavaScript disabled - i.e. fancy functionality is just lost but your site will continue to work okay. Even controls contained within an <asp:UpdatePanel/> function as normal. We could even go as far to say that ASP.NET and the AJAX framework degrades gracefully. This is all good when trying to build an accessible application but there is one control that tends to get in the way - System.Web.UI.WebControls.LinkButton.

The problem with LinkButton is that it always renders with an href attribute prefixed with 'javascript:'. With JavaScript disabled LinkButtons simply wont function. This means any pagination control will likely stop working (e.g <asp:GridView/> paging) as well as the default <asp:Wizard/> sidebar template and many more controls.

The LinkButtonAdapter fixes this problem by providing a means to use the LinkButton with JavaScript turned off. Instead of rendering an <a/> element a <button> element is rendered instead. This provides the functionality we need to use the LinkButton without script. Second, the <a/> element replaces the <button> element dynamically using JavaScript to ensure that it only exists when script is enabled.

   1: <button id="LinkButton1" type="submit" name="LinkButton1" value="">Button1</button>

   1: <script type="text/javascript">

   2: //<![CDATA[

   3: new furiousAngel.ui.adapters.linkButtonAdapter('LinkButton1', 'Button1', 'javascript:__doPostBack(\'LinkButton1\',\'\')').initialise();

   4: //]]>

   5: </script>

You might be wondering why I'm not just rendering a <button> element instead of <a> all the time regardless of whether script is enabled. I think it's just a personal preference. <a> Elements are easier to work with from CSS as they don't have all the default styles applied like <button/>s. The links can be styled as needed and I wouldn't generally apply any styling to the button 'coz it's only going to be seen by a handful of people - but your site is still functional.

As you can see this functionality doesn't come cheap. There's an external JavaScript file (~1kb) and a line of JavaScript per LinkButton. It's a small price to pay really.

Once the adapter has been registered (by adding a *.browser file to App_Browsers with the contents below) all LinkButton controls will render using this enhanced method including all those embedded in composite controls like GridView and Wizard (plus many more that I can't think of right now).

   1: <browsers>

   2:   <browser refID="Default">

   3:     <controlAdapters>

   4:       <adapter controlType="System.Web.UI.WebControls.LinkButton" adapterType="FuriousAngel.UI.Adapters.LinkButtonAdapter" />

   5:     </controlAdapters>

   6:   </browser>

   7: </browsers>

FuriousAngel.UI.Adapters.zip (3.74 kb)