For a project at work I needed a repeater with support for an additional template, namely one for editing an item. You have this functionality in the DataList and DataGrid built-in controls, but those don’t offer the same layout flexibility the Repeater has (something which I like very much: I hardly use DataList or DataGrid).

An so I wrote the EditableRepeater class. It’s actually very simpel: it defines an EditTemplate property in which you can specify the template to display when you want to “edit” an item. There’s also an EditItemIndex property to define the index of the item you want the edit template to display for. The rest (saving state, invoking the edit template by setting the index property, etc) is up to you. I did not provide an EditCommand event like in DataList for example, but since that’s a specific case of an ItemCommand, that doesn’t hurt the provided functionality.

Here’s a video of the repeater in action:

Editable Repeater Example from Tom Adriaenssen on Vimeo.

The same action as with a DataList, but now with the freedom of a Repeater.

You can download the C# code: it’s not large since it builds on the Repeater control which handles most of the hard stuff. All this does is add another Template, define an EditItemIndex property and provides some glue to make the magic happen.

To use it, wrap this in an assembly and register it in web.config:

<system.web> <pages>  <controls>   <add tagPrefix="iwc" namespace="Inferis.Web.Controls" assembly="Inferis.Web.Controls" />  </controls> </pages></system.web>

And then use the new control as you would use the normal Repeater:

<iwc:EditableRepeater ID=”Test” runat=”server” EditItemIndex="1"> <ItemTemplate>  <p>  This is the Item Template for <% Eval("FieldName") %>.   </p> </ItemTemplate> <EditorTemplate>  <p>  Editing an item: <asp:TextBox Id="EditBox" Text='<% Eval("FieldName") %>' runat="server" />  </p> </EditorTemplate></iwc:EditableRepeater>

Notice the EditorTemplate to define the editing template, and the use of EditItemIndex to mark row 1 as editable. Of course, you’ll need to do some programming to do this dynamically, but the same principles as using an EditTemplate in a DataList or DataGrid count, so I’m not going to explain that further.

And that’s about it. It also works charmly with the ASP.Net Ajax Extensions.

iTunes » Kraftwerk – Autobahn

It’s been quite entertaining to read the comments in IEBlog’s latest post on the IE8 Standards Meta Tag. It comes as no surprise that some people react like they have their head up their ass pretty far. The sentiment seems to be that the IE team is following the wrong course by providing yet another way to indicate how to render a page. After all, this is what the doctype switch was invented for.

The problem is that we both have standards and implementations of those standards. No browser fully supports each standard, and subsequently has it’s own implementation of each standard (which could also be: we don’t have an implementation).

X-UA-Compatible

Therefor, I think the solution as it is explained in this article at A List Apart is good enough for the situation web developers are facing. It allows to lock in a implementation of a site/webapp to a specific version, which makes sure that that site/webapp will still work as intended when a new version of a browser (with new standards, and new implementations) is released. Of course, this means that the onus is on the developer to actively support every new standard and implementation, but that’s already the case for the most part. The work you need to do to support IE8 (or IE9, or IE10, …) is minimal: just add or update the X-UA-Compatible metatag, spit out the correct HTML/CSS/JS and you’re done with it.

The good thing is that you won’t need to check if your site will actually work in IE-new (or any newer browser), because it doesn’t need to unless you specifically say it will (by updating the tag). In effect, this creates explicit side-by-side browser versions in the same browser. Sites targeted at older versions will still work as they were created (which was not the case with IE6->IE7), and it’s easy to start supporting new technology when it comes out.

Side-by-side versioning

This is actually the same kind of system as the .Net frameworks use: the generated binaries not only know what framework it needs to run, but also what versions of any supported libraries are needed. When you update your code to use a new framework or a newer library, the old binaries still work (provided that the old framework and libraries are still present) as they were intended when the author compiled them. When you want the new version, upgrade to a new framework/libraries and you’re done.

In other words, instead of coding against standards, you’ll be coding against implemetations of standards. While this seems to be more work (and it is), it’s actually better because you know what to expect even in the future. It means that your work will keep on working and displaying correctly.

I think that other browsers should incorporate the same mechanism. I also think they will, because it’s the best solution for the standard+implementations versioning problem.

CSS support

On thing that I think is missing: have support for the X-UA-compatible tag to reference implementation specific CSS and possibly Javascript. Why? Because it represents a minimal effort to add support for a new browser version (with new features) to an existing site while maintaining support for older versions. While this means that you’ll have version specific CSS files, I still think that’s better that having your site break. This is easier to do in Javascript (most sites already do this, eg check for document.getElementById or document.all) but not in CSS. Getting the CSS spec changed to support this will be too hard, so I guess providing a x-ua-compatible=”ie8″ to any CSS reference (beit a <link> or <style>) will suffice.

Getting it right

This is all assuming that IE8 gets it right this time. The sole reason for this hack is the lack of correct standards support (I’m not talking about partial standards support). Most of the CSS hacks in existence are there because IE screwed up an implementation in the past. This is also the reason that browsers like Firefox and Opera don’t really need a solution like the X-UA-Compatible tag: there aren’t many glaring (layout) bugs, and most of the time they’re fixed quickly when found. The 5 year gap between IE6 and IE7 established an acceptance of the bugs in IE6 (not in the least because of IE6′s large marketshare).

Of course, this doesn’t mean that IE8 will get away with a lousy implemenation the standards they’re implementing. It’s in their best interest to actually provide a solid implemenation. I hope they get it right this time. The fact that they stepped to the WASP for a solution to this specific problem, is a very good sign indeed.

Like Jonathan Snook puts it: I for one welcome our X-UA-Compatible overlords.

Suppose you have a page where you have a bunch of actions that invoke an Ajax callback. You can use the UpdateProgress control to indicate that the request is being invoked, for example to display some “please wait” text.

But that’s not it happens in the world of Winforms (or more broadly, desktop apps). You just get a wait cursor most of the time. The same happens when you do a normal postback (and some addition feedback too, granted).

It’s not very hard to add wait cursor support to your pages. Add the following script block right after the <asp:ScriptManager> tag:

<script type="text/javascript">

	var prm = Sys.WebForms.PageRequestManager.getInstance();
	prm.add_initializeRequest(InitializeRequest);
	prm.add_endRequest(EndRequest);

	function InitializeRequest(sender, args) {
	    document.body.style.cursor = 'wait';
	}

	function EndRequest(sender, args) {
	    document.body.style.cursor = 'default';
	}

</script>

This works separately from any UpdateProgress panels you have on the page. It also works for all UpdatePanel instances: for every Ajax request the cursor turns into an hourglass while the request is doing it’s work.

Some more Witty hackin’! I added some Glass support for people on Vista (like me). Nothing really fancy yet:

This screenshot doesn’t do the Glass justice. All the lightblue area is supposed to be transparent.

I also added a permalink to each tweet, that links to each tweet’s status page on twitter.com. I’ve been wanting to click the items to get to those pages. Actually, what I want is clickable @names, but I need some more Learning to do to get to that.

But hey, this has already been a fun little project te get to know WPF. I’ve also sent some code to Alan. I wonder what he’ll do with it. *suspense*

I heard of Witty through this article on Arstechnica. Having used Google Talk until now to do my twittering, I decided to try it out.

I didn’t work. I could log in, but it wouldn’t display updates. Trying to post something always resulted in Witty crashing.

So I decided to get the source from the subversion repository, to see what’s wrong. That’s the power of open source for you, baby.

It turned out that Witty had a problem with parsing the dates returned from Twitter. These are in a fixed format, so the code wanted to parse them like this:

tweet.DateCreated = DateTime.ParseExact(
  dateString,
  twitterCreatedAtDateFormat,
  CultureInfo.CultureInfo, DateTimeStyles.AllowWhiteSpaces);

While that might work fine for users with english system settings, it gives a problem for all those who have different regional settings. So I fixed (those  3 occurrences) by forcing the date parsing to follow english regional settings:

tweet.DateCreated = DateTime.ParseExact(
  dateString,
  twitterCreatedAtDateFormat,
  CultureInfo.GetCultureInfoByIetfLanguageTag("en-us"), DateTimeStyles.AllowWhiteSpaces);

Witty works fine now, for all regional settings.

iTunes » Magnus – Assault on Magnus

I found this blog on Windows 7. Nothing special there to notice (about Windows 7 anyway), but it has a special style to it. It seems to be a blog of a Windows developer, but it’s a bit critical on Microsoft too. I’m not sure what does it, but I like it. It may be a real Windows 7 developer blogging this, or maybe not. It doesn’t matter: the blog has found a place in my feedreader. I’m not the only one who thinks so, it seems.

Anyhow, it pointed me to this article on a new UI framework. Another one? I thought that WPF was the next big think, but it seems it’s just to big and bloated to be actually useful. Silverlight – a port of (part of) WPF in unmanaged code, since you don’t need a version of the .Net framework for it to run – is another step to reduce some of the bloat, but it’s browser centric.

So, yet another UI framework from MS? I mean: I even haven’t found the time to get used to WPF, and now there’s another one coming? I know it’s still a few years away, but it got me thinking: is it still useful to learn WPF? There’s still a lot of Winforms development going on, and only just now we’re seeing the first (exposed) real world uses of WPF in the corporation. Will it make sense to get used to WPF, and then try to hop onto yet another UI bandwagon?

I guess we’ll learn more about this on this year’s PDC. The PDC has traditionally been the place for stuff like this to (properly) surface to MS developer. And it makes sense that they cancelled last year’s edition, and move it up to this year: because there’s some (exciting) new stuff to show off.

iTunes » Depeche Mode – New Life

When you need the breadcrumb for a node in Drupal, there’s no straightforward way to get them. I needed this because I was using the Node Images module, but wanted to display (some of) the images as a page. Using some trickery, I got the image to display as a node/page, but didn’t have a breadcrumb.

Here’s how I solved it:

// optional, load the node
$node = node_load($nid);
// 'render' the node, but discard the result
node_view($node, FALSE, TRUE);

// breadcrumb manipulation
$crumbs = drupal_get_breadcrumb();
$crumbs[] = l($node->title, $node->path);
drupal_set_breadcrumb($crumbs);

Of course, this has a certain impact on performance: the “parent” node is rendered, but the result is discarded (as we don’t need it). This also sets the breadcrumb for the node. We then retrieve it, and append the node’s info to it. After that, we set that breadcrumb to be the breadcrumb for the current page.

AFAIK, there’s no better way to do this (in drupal 5.x, at least). I was also using Custom Breadcrumbs, so I needed the full works to get the actual breadcrumb. It’s maybe not the most elegant and most performant solution, but it works.

For a site I’m developing in Drupal, I have a specially made content type to present some news items. That works fine, but I needed a way to represent those items differently. A newsitem is represented by node of type “news”.

There’s also a view defined on the newsnodes, which displays the correct news items (the site uses the Multidomain module, but that is beyond the scope of what I’m getting to).

Now, I wanted to display a list of items with just the title and the date on the homepage, I also wanted a little more elaborate list on /last-minutes and finally a full fledged page with all info (for each item).

At first glance, I didn’t find a way to do it properly. I didn’t want to make more views, as I didn’t want to update all 3 of them (ALL 3 OF THEM, teh horrors), and also I found that the table/list views you can create were a bit too little flexible to my taste.

The solution is actually pretty simple: you can have different template sources by setting the $vars[’template_files’] in your template.php file. By hooking into the node vars, you can create “contextual” template files:

function _phptemplate_variables($hook, $vars) {
  $css = drupal_add_css();
  unset($css['all']['module']['modules/system/system.css']);
  unset($css['all']['module']['modules/system/defaults.css']);
  unset($css['all']['module']['modules/node/node.css']);
  unset($css['all']['module']['modules/user/user.css']);
  unset($css['all']['module']['modules/cck/fieldgroup.css']);
  unset($css['all']['module']['modules/cck/content.css']);
  $vars['styles'] = drupal_get_css($css);

  switch ($hook) {
    case 'node':
    	if (!isset($vars['path']) || drupal_lookup_path('alias', $_GET['q']) != $vars['path']) {
    		if ($_SERVER['REQUEST_URI'] == '/') {
    			$context = '-front';
    		}
    		else {
    			$context = str_replace('/', '-', str_ireplace('.php', '', $_SERVER['REQUEST_URI']));
    		}
	        $vars['template_files'] = array('node-'. $vars['type'] . '-in' . $context);
    	}
    	break;
  }

  return $vars;
}

As you can see, that’s not very hard. If the node were observing has no path or the path is different from the page path (in other words, we’re viewing the node as it’s embedded in a view), we then figure out the context (which is the path name of the page). Slashes are replaced by hypens, of course. For the index page, the “front” context is used as a special case.

And so I can have 3 different template files for a news node:

• node-news-in-front.tpl.php renders my list of newsitems on the homepage
• node-news-in-lastminutes.tpl.php renders the more elaborate list in the /lastminutes page
• node-news.tpl.php renders the normal node view

Spiffy, isn’t it?

iTunes » Kadril & Alumea – Uterus

I wanted my blog to support the tracking provided by 10³bees, so that I could track how people got to my blog. According to their own site:

It’s an online service for webmasters, bloggers and internet marketers that is highly focused on natural search engine traffic analytics. It provides tons of detailed real-time statistics and in-depth information on the search terms that drive targeted traffic to your websites.

Anyway, I found no reference to an existing WordPress plugin, so I decided to roll my own. After all, it’s no complicated stuff: just allow the user to enter the 10³bees script and have it display in the page. Currently, 10³bees advices to put the code in the footer.php for your theme. While that works, you have to do the same every time you switch themes. Not handy.

And so, here’s the WordPress 103-bees plugin. It works really simple: download the file, extract it to your plugins folder, activate the plugin, go to options/103bees and paste the script that 10³bees provides. And you’re done.

Happy search analysis tracking.

Nice, I got Clean Urls working in Drupal running on IIS7.
I had to write a (partial) implementation of mod_rewrite to do it, but now it works.

I’m extremely pleased.

I’ll post more info on this later, after I can consolidate my libraries a bit.