Friday, March 20, 2009

Palm Pre - Yes please!



I currently have a Nokia N95 which feels really old after watching the demo of the Palm. :\

Wednesday, March 18, 2009

New tool from Microsoft for testing web pages in various browsers

It's called Expression Web SuperPreview.

It looks very promising. Going to try it out tomorrow.

Update: Meh! The app was more or less useless compared to running browsers in Virtual Machines. The app lets you preview IE6 + your native IE version. If you have IE6 installed (which I have due to our customers lack of will to upgrade), you can only preview in IE6.

The preview is more or less an image. You can't click links/navigate to different parts of your website. To navigate, you have to type in the address. I guess it's a step up from browsershots.org, but that's more or less it.

Tuesday, March 17, 2009

Clearing floats in IE7 for Vista

I've used this method for clearing floats in my layouts.

It worked in all browsers I tested on. Then customers (using IE7/Vista) started reporting strange layout bugs that I (using IE7/XP) wasn't able to reproduce. It turns out IE7 for Windows Vista renders slightly different than IE7 for Windows XP.

I believe the main difference is when hasLayout is triggered on the styled elements.

To make the clearing of the floats work in IE7 for vista, i added this property:
height: auto

Example of fix:
/* Clear floats in the #content-element */
#content { overflow: auto; }
/* Fix for IE7/Vista hasLayout bug (resets the hasLayout property) */
*:first-child+html #content { height: auto; }

This resets the hasLayout property on the element.

The fix style rule is read/used by IE7/XP also, but it shouldn't have any negative side-effects.

Monday, March 9, 2009

Domino 8.5 generates labels for checkboxes and radio buttons

I haven't seen this mentioned anywhere, so I'll mention it.

Domino 8.5 seems to automatically wrap checkboxes and radio buttons with labels without having to modify any settings.

Pre 8.5 radio button:
<input name="some-radio" type="radio" value="some value">

8.5 radio button
<label><input name="some-radio" type="radio" value="some value"></label>

In IE6, this doesn't make much difference, but in IE7 and beyond, and most other browsers, this lets the user click the label (the text), and the radiobutton/checkbox is selected. More about labels and accessibility here.

Friday, March 6, 2009

Taking advantage of JSON from views in XPages

Since we're blessed with pseudo-JavaScript in XPages, it's time to make lookup-views with JSON columns.

If you have a well formed JSON-string, it's extremely simple to convert it to a JavaScript object.

Example:
var jsonString = '{"key":"value", "keyForNumber":2, "keyForArray":["first", "second"]}';
var jsonObject = eval( '(' + jsonString + ')' );

Result:
jsonObject = {
    key: "value",
    keyForNumber: 2,
    keyForArray: ["first", "second"]
}

Instead of making xx amount of views, have a couple of lookup-views. In the XPages, convert the JSON-string from a columnvalue to a JavaScript-object, then pick the values you need.

I've made a little demoapp of how you can take advantage of this with XPages:
>> Download

As I'm addicted to templating, I've made a simple templating-demo as well. Take a look at server side JS.

If you're lazy like me, also take a look at the (JSON\DiscworldCharacter)-view, in the lookup column.

XPages: Regular Expressions in Server Side JS are poorly implemented

I was trying to do some simple templating using JSON in XPages today, and thought: "Hey! Finally I can use the power of JavaScript regular expressions!".

I was really disappointed when I found out how poorly implemented regular expressions seem to be. I first wrote/tested the code in the FireBug console.

First fail of XPages - passing a function as the second parameter of String.replace:
var object = { firstName: 'Tommy', lastName: 'Valand' };
var template = '{lastName}, {firstName}';
template.replace( /\{(\w+)\}/g, function( item, key ){
return object[key] || '';
});
The result should be: "Valand, Tommy"
The result is: ","

String.replace in Server Side JS does not accept a function as the second parameter.


Then I thought I could use String.match to pick out all the template-parts of the string:
var template = '{lastName}, {firstName}';
template.match( /\{(\w+)\}/g );
The result should be: ["{lastName}", "{firstName}"]
The result is: ["{lastName}", "lastName"]

String.match in Server Side JS ignores the global modifier.

The worst part.. The above JavaScript code works with Client JavaScript in Notes, which I believe was introduced in Notes 5.0.. :\

I know the JavaScript in XPages is built on Java, but that is not an excuse. The Regular Expression engine in Java is even more powerful than the engine in JavaScript.

I've posted a bug-report in the forums (and ranted on my blog). Not sure if there is more I can do to influence IBM to fix this.. :\

If you want to do something along the lines of what I was trying to do. Here is my workaround-code:

function mapJsonToTemplate( jsonString, template ){
var jsonObject = eval( '(' + jsonString + ')' );

// In REAL JavaScript, string.replace can have a function as a second argument
// This is not possible in XPages JavaScript, so I have to get every item
// and replace them item by item, in a loop

var itemRegExp = /\{(\w+)\}/;
var result = template;

var matchArr;
while( matchArr = result.match( itemRegExp ) ){
result = result.replace( matchArr[0], jsonObject[ matchArr[1] ] );
}

return result;
}


mapJsonToTemplate( '{"firstName":"Tommy","lastName":"Valand"}', '{lastName}, {firstName}' )
-> "Valand, Tommy"

The reason for taking a string as input will be explained in my next blogpost, which should be along shortly.