XBL istället för HTC - nu är det möjligt tack vare Googles xbl.js

HTC är Microsofts lösning på hur man ska separera innehåll och logik i webbläsaren, på samma sätt som man separerar innehåll och utseende med stylesheets.

En HTC-fil består av ett XML-dokument med filändelsen .htc som deklarerar events och JavaScript. För att sedan koppla ihop ett HTML-element med dess logik sätter använder man attributet behavior i stylesheet, t.ex. “ .button {behavior: url(Layout/imagebutton.htc);}”.

HTC stöds dock varken av Safari eller av Chrome, och kräver dessutom lite trixande för att fungera i Firefox. Då Chrome gissningsvis kommer att bli populär väldigt snart så är det ju viktigare än någonsin att gå ifrån HTC.

Som tur är finns XBL (och XBL 2), W3C-standarder som tagit det bästa av HTC och standardiserat detta. Tyvärr finns inget egentligt stöd idag i någon webbläsare, men tack vare ett litet JavaScript som finns på http://code.google.com/p/xbl/ så kan vi redan idag använda detta i alla moderna webbläsare.

Lyckligtvis är det extremt lätt att konvertera HTC till XBL! Deklarera bindningarna i en XML fil (som vi väljer att kalla xblBindings.xml) med följande syntax:

Observera att raden "<xbl:implementation><![CDATA[" är skriven utan radbrytning då XBL 2.0 beta 2 helt enkelt inte fungerade med en radbrytning där och den gav inte heller några felmeddelanden.

De flesta exemplen på nätet lägger all javascript i själva XML filen, men då fungerar inte intellisense eller färgkodning. Att felsöka koden blir mycket svårt så vi valde att flytta ut själva logiken och därmed få en återanvändningsbar javascript-kod.

Logiken som tidigare låg inbakad i vår HTC-fil flyttade vi till extern javascript fil med den enda förändringen att innehållet i event_setnormal() är flyttad till en funktion som heter Imagebutton(element) så att vi får tillgång till elementet inifrån koden.

För att sedan använda vår nya funktion så deklarerar vi bara detta i något stylesheet.

Tyvärr hittade vi snabbt en showstopper d.v.s. en bugg som gör produkten mer eller mindre oanvändbar i denna beta.

Om man skapar en ny bit HTML-kod och stoppar in i dokumentet efter det är färdigladdat med hjälp av AJAX så binder tydligen inte xbl.js dessa element. Följden blir då i exemplet att skapar man en ny HTML-knapp i javascript så kommer den inte att få det nya utseendet.

Vår förhoppning är dock att den buggen ska lösas snart. Efter att vi registrerade detta som en bugg XBLs utvecklare så har de lovat att detta ska vara fixat i första skarpa releasen som är planerad till 2008-12-01.

Tommy Söderström
2008-09-11