My wedding reception

It's almost time for my big day on 20th October 2007. Really looking forward for my wedding reception. A big thank you for those who are helping me to organised this event. It will be a poolside wedding thus praying hard that it won't rain on that day.
Here are some of my wedding bridal photos.

Idea Jam

Bruce Elgort has just send out the press release for the launch of the Idea Jam. Idea Jam is a site where users of IBM’s Lotus software products can exchange ideas on how to improve Lotus products. Others can help promote and/or demote ideas, as well as, providing feedback through comments. Popular ideas will rise to the top. It was developed by Elguji Software in conjunction with Matt White, and Sean Burgess. It has a nice, simple interface and runs on IBM Lotus Domino 8.0.

Site registration will open to the public on November 20th, 2007. So head on there to contribute your ideas.

Simplifying Evaluate

I came across this tips from Tommy Valand site. Used it and loved it. I have even roll out on production application. He show a way to simplify getting the return value from evaluate function

Dim commonUsername As String
commonUsername = Implode( Evaluate( |@Name( [CN] ; @UserName )| ) )

Just becareful that you know the Evaluate return single value and not multiple value.

Quick Tip: Firebug CSS editor

I'm sure most of you who use Firebug, make use of the CSS editor directly in Firebug to view UI changes. Just found out that it support to up and down arrow button also. Thus for example, you want to increase the border size, just need to click on the CSS element and press the up key. This will scroll the value up and you can see the UI changes take effect. It is faster than typing the value especially when you need to test different values. Neat. Another thumbs up for Firebug.

Show-n-Tell Thursday Add to del.icio.us

IBM Lotus Symphony - Memory resources

IBM Lotus Symphony is built on Lotus Expeditor (Eclipse) platform. It is quite a memory resource intensive platform. For comparison, it needs 66,648K to open Lotus Symphony Spreadsheet compare to 9,660K to open MS Excel.


This would definitely be one deterrent for some people to use Symphony. In my current company, there are still people with just 256 MB RAM on their old PC. 512 MB is the usual. Only the newer pc have 1 GB & above. So with Windows, Lotus Notes Client, etc opened, for majority, Symphony will be consider a very resource intensive application and may be consider slow. It would be a major boost if the resource utilisation can be trim down.

Happy Mid-Autumn Festival

To all the Chinese, wish you all a Happy Mid-Autumn Festival. Enjoy eating the mooncake.


Image from The Baker's Cottage

IBM Lotus Symphony

IBM just announced the released of IBM Lotus Symphony. It is a suite of free software tools for creating and sharing documents, spreadsheets and presentations. I'm downloading it now and will try out the features soon. This offers an alternative solution for MS Office or the free version of Open Office. Personally, I have recommended people to use Open Office if they just need most basic function of office suite. For most day to day use, Open Office is more than sufficient. The best feature on Open Office that's missing in MS Office is PDF conversion. Lotus Symphony also providing that feature and supporting Open Document Format (ODF). So can Lotus Symphony live up to the expectation, download it and test it out. Check out Ed's for more info.

Portletize Lotus Notes Application - Part 2 (Multi-value separator)

Lotus Notes field allow us to set it to mutiple values. It can be set to take one or more separator values (space, comma, semicolon, new line and or blank line).

What happen when a field on the portal is map to a multiple value field in Notes? If we set comma is separator, even if the value in the portal contains a comma, it will be stored as a single value (eg "one, two") and not multi value (eg "one", "two").

Portlet Factory by default uses "|" as the separator which Notes does not support. After a few failed attempt to convert the separator, I manage to use an agent to do the job. In the Domino View & Form builder, there is an option "Run agent on save". This would call the agent to process the field before saving.

I know this is just a work around and there is a more efficient way to do it. At the Portlet Factory - Lotus Collaboration Forum, Sam have helped to answer the questions.



An Event Handler builder can be used. In the Event Name, select System:OnWebAppLoad. Then in the Actions, select the method setItemValueSeparator from your view. Set it to comma. This should automatically convert the field into a comma separated multi-value. At the moment, it does not support multiple separator (according to Sam in the forum). It would be useful if in the future version to support that and also as like in Notes, we can set which separator to use for display. Hoping to see the features in the future release.

Show-n-Tell Thursday Add to del.icio.us

Malaysia International Fireworks Competition - Grand Finale

For those who miss out the MIFC grand finale, click here for some pictures. It was indeed a colourful and beautiful extravaganza display of fireworks. I haven't seen so many design at such a hugh magnitude fireworks. It was definitely a good experience.

Malaysia International Fireworks Competition

Today mark Malaysia's 50th anniversary of our independence day. There's a Fireworks competition (MIFC) held at Putrajaya. Click here for some fireworks pictures.

Malaysia 50 Years of Independence - Merdeka

31st August 2007, Malaysia will celebrate our 50th Years of Independence, Merdeka. Come join the celebration.

APRRC 2007 Malaysia

After 18 months of preparation, Asia Pacific Regional Rotaract Conference 2007 have been pulled through successfully. It was organised by Rotaract clubs in district 3300 (Malaysia). It is a first time I help to organise & participate in a Rotaract conference this size. There were delegates from Taiwan, Philippines, Singapore, Hong Kong, Indonesia, Thailand, Macau, Australia, Hungary, Korea, etc. It was fill with lots of fun and excitement.

It started of with the opening ceremony follow by Rotaract Festival where showcase of food and other stuff from participating countries. Then the night follow with a colourful cultural night. Some country is very creative with mixture of original culture and modern performance. It got everyone up and dancing.

The next day was follow by workshop sessions. The night is at a cowboy town filled with performance. On the last day it was was another plenary session follow by the closing ceremony. Then everyone couldn't wait to go to the water park for the farewell beach party. It was such a fun and wild party. Although the wave pool was cold it didn't stop us from partying in the pool.

Here is some pictures during the event:
1) Rotaractors pictures
2) Opening day
3) Cultural night
4) Workshops
5) final day closing ceremony

Lotus Notes 8 - The hype

There are so much hype around Lotus community on Lotus Notes 8. I remember the hassle of migrating from Domino 5 to 6. We had more than 100 applications to test and to make sure all the functions are working properly. Now for 6 to 8, I wonder how much work it will take. I've yet to actually test existing application on Domino 8. How will current application fair on the new Eclipse based client? Looking forward to see what other people's experience of upgrading to Domino 8. But not looking forward for the hassle to test all the applications before upgrading.

Portletize Lotus Notes Application - Part 1 (Profile Sets)

From the existing samples in Portlet Factory (PF), you can get a simple Lotus Notes (LN) application up and running in no time. I will skip the most details covered in the sample.


By using just a Domino View & Form builder, you can get the most simple function of viewing, creating, editing and deleting documents. When setting up the builder, you have to put in the property file for the Domino connection, Database Name, etc. Development and production server should have different settings.

In LN, I normally use profile document. The profile document would contain settings that is needed for the application to run. Same for PF, we can use Profile Set also. Profile Sets contains one or more profiles entries. There's a sample on PF samples page on how to use the profiles feature.


An example that we can use here is to set a profile for the Database name. In my environment, production path and development path is different. Thus for the application to run, it have to point to the correct database path. First, create a Profile Input for the Database name. If a profile set does not exist, you can create a new profile set. Then create a new Profile Entry name DatabaseName type text. I give it a default value to the development server database path.


Next is to set the entries configurable on the portal. Add in a Portlet Adapter builder to create the portlet. Then scroll down to Portlet Sets section. There should be a list of Profile Sets that is created. For those that you want to be configurable, it can be set to "Show individual profile values in Configure". You may want to check on "Require Configuration". This would force the portlet to be configured during deployed before it can be used.

I received a portlet application from a team and it needs code changes everytime it is deploy in development and production. This cause a lot of issue when they forget to make the changes. Thus using the Profile Set example above, it provides a more flexible way to deploy application to different environments.

Show-n-Tell Thursday Add to del.icio.us

YSlow - 13 Simple Rules for Speeding Up Your Web Site

Yahoo! Developer Network provides a list of 13 rules for speeding up website. To check if a website follow the simple rules, Yahoo! have provide a nice tool, YSlow. It is a plugin on Firebug. YSlow analyzes web pages and tells you why they're slow based on the 13 rules.

Ironically, I've check the Yahoo Performance article page. It have a rating of "F"


www.yahoo.com get a better rating of "B". Some of the rule they get B, C and worst F. I would expect them to have mostly A.


I'm working on a web portal now. Before tuning, I have some issue for expire header and gzip component. I manage to tweak things a bit and get the rating improved. The only luxury that I don't have is Content Delivery Network.


Guess who get the "A" rating below. It's one of Yahoo's biggest competitor.

Websphere Portal Server implementation

I have not been updating my blog lately. So now I'm trying to put together what I have been learning for the past 2 month. Been busy setting up the new Websphere Portal (WP) infrastructure for my company. It have been quite a long process. WP is like 1000 pieces puzzle compare to Lotus Domino 100 pieces puzzle. There are so many things to do to get a proper WP environment up and running. And there are still fine tuning to be done. Maybe we lack in experience for WP but definitely it is not a simple system to setup.

Next is the development of some portlet applications. I have familiarize myself with Portlet Factory and managed to portletize some Lotus application. In my previous job, I have created portlet using Websphere Studio Application Developer (WSAD). Definitely Portlet Factory has made it much easier to than WSAD. Almost every now and then I find some cool feature in Portlet Factory. I will share more of this in the next few writeup of how I've portletize an Lotus Application.

Through so many Lotus blogs, I have learn so much. Lotus community have been very willing to share their experience and that is great. I'm hoping to learn from Websphere Portal/Portlet Factory blogs. I did a quick search on Google for Webpshere Portal Blog and Portlet Factory Blog. What a let down. I manage to find only a handful of blogs and not all of them are updated. If you know any good Guru out there, appreciate you could leave the URL on the comments. I did a search on Lotus Notes Blog and can definitely see the big different in numbers of blogs. Hmm... do Lotus community have more time to blog? Maybe Lotus tools have make things simpler thus we have more time to blog.

Pottermania

The hype is on for Harry Potter final book. Things here in Malaysia is slightly more calm. Yes, there are some bookstore/hypermarket where queue started as early as 5:00am to wait for the store to open at around 7:00am. You don't normally see people queue to get into a bookstore. Better still Harry Potter book sold here is not cheap. In fact it is damn expensive. The recommended retail price is going for MYR 109.90. I would not pay that sum for a story book. Some hypermarket are selling it for MYR 69.90. That's slightly more reasonable. But it is still expensive. Three major bookstore are boycotting selling Harry Potter books because hypermarket is selling them for much cheaper. I think that is their lost. Other bookstore selling at retail price but are giving some discount and some them sold out the books.

Anyway I was at a hypermarket to shop for groceries and saw the book. Nope there we no queue. I grab a copy at MYR 69.90 but sorry to say that I'm not a big fan of Harry Potter. It's been 4 days since I got the book but I have not even started the first chapter. Trying to finish another book I'm reading now. Looking at some positive review on the web, I think I will start on the book soon and hope it doesn't disappoint.

Export text file with Chinese character encoding

I use an Lotus Script agent to create a text file which get data from documents. Things are working fine until some user starts to key in Chinese characters.

Initially the partial code is as below

Dim fileNum As Integer
Dim filePath
fileNum% = Freefile()
filePath = 
Open filePath For Output As fileNum%

The Chinese characters will be shown as boxes in the file. This definitely have to do with the encoding. After some searching I found an easy way to add in the encoding in the the file. Charset = "UTF-8" need to be added to enable proper exporting.

Sample code as below

Dim fileNum As Integer
Dim filePath
fileNum% = Freefile()
filePath = 
Open filePath For Output As fileNum% Charset = "UTF-8"

Show-n-Tell Thursday Add to del.icio.us

Category View Builder - Expand All (Portlet Factory)

Things have been so crazy the pass month. Been spending so much time picking up new skill but at the same time have to rush for the project. So I have been neglecting my post here. Almost coming to the completion of my project. Phase 1 anyway. Portlet Factory does give a good impression during these learning period.

I start to build a sample application using db2 as datastore. After playing around, I understand better the concept of separating data access & UI front end. This can be easily be done by creating separate model for service provider and consumer. For the first model, I prepare the SQL statements and the service provider & service operation builder. Then for the UI front end, service consumer builder is used. That way, the back end provider can be changed without changing the UI model. Of course the data schema have to be same.

I won't go into the detail of how that is done. The Portlet Factory samples covers a lot of those. I have gotten used to having categorized view from Lotus Domino/Notes. Thankfully, Portlet Factory provides category view builder. It is just a simple as selecting your table and specifying which column need to be categorized.



My only problem is getting it to expand all during load. Thanks to mtr on the forum, I have some idea on how to get it done. I use view & form builder to display the categorized view. So instead of setting the "View & Form" builder as main, create an "Action List" builder as the main. First I user the DataService to set the result for the table. Then I use the Category View function to expandAll. At last display the view page.



Hope the will help those looking for a expand all during load. The more I use Portlet Factory, the more I find it as a user friendly tool. Quite a lot of things can be done without going down into coding. That is a very good news for beginner.

Firefox can't establish a connection to the server

I have just change a new notebook. After a day of transferring data onto it, I started to use it. Everything seems to work fine until I was browsing on Firefox. A few sites I get the error "Firefox can't establish a connection to the server at websitename.com". I search through the web & forum but did not managed to get a solution. My proxy setting seems to be alright. I can go to those sites using IE and they is not an IE only sites. At the end of the day I gave up. I have a look at it again the next day and found the culprit. I have set the proxy for http but not for other protocol. So a simple checked on "Use this proxy server for all protocols" solved the problem. Come to think of it, the sites that I had problem accessing are https site which use SSL. How could I miss that? Sad to hear that a person (from a forum) gave up using Firefox because couldn't get this tiny issue fixed. Hope this help those who face the same problem out there.

AirAsia

Thanks to AirAsia, my recent trip to Langkawi just cost below RM 100 (USD 30) for two way flight (Kuala Lumpur - Langkawi), including airport tax, fuel surcharge and travel insurance. Last year I managed to get free ticket to Cambodia on AirAsia (just have to pay for tax and fuel surcharge). AirAsia motto "now everyone can fly" stay true, providing budget traveler like me with affordable flights. If you are in or coming to ASEAN countries, do check out AirAsia for budget flights.



This is not a promotion for them (maybe yes in a way) and I'm not affiliated to them. Just sharing information for good flight deal. But bear in mind, it's a budget airline. Always hear of delay. My experience was delay for around 1/2 - 1 hours, so still acceptable. Once the plane was early and we arrive early too. Food is served seperately. I tried Nasi Lemak (local Malaysia food) and it does taste good although serve cold. On newer planes (Airbus), the seat space was good. But on the older planes, they are quite cramp. But for a 1 to 2 hours flight, it is bearable.

Check out some of the pictures I took in Langkawi here.

Visit Malaysia 2007

Websphere Portlet Factory

Just installed Websphere Portlet Factory (WPF) and test it out a bit. My previous experience of developing portlet is using Websphere Studio Application Developer (WSAD), now called Rational Application Developer (RAD). Definitely WPF is much simpler to get started with, for developing portlets than WSAD.

I manage to built a simple portlet to display a Domino application view and document in a few minutes. Basically a few builders in a portlet factory model would do the job. But this just create the WPF provided standard view and display all the fields in the document. It would take more work to customized to the way we may want it to be. But still so far, no Java coding yet. Good new ya.

Will spend more time learning up WPF. Definitely it is much easier to learn than building portlet in WSAD. This hold true especially for those who are still going to learn Java :) Let just see how far we can built portlet application using WPF without JAVA codings. Will update my findings soon.

Websphere Portal iFrame portlet on IE 7

I was testing an Websphere Portal v6.0 iFrame portlet. It was working on IE 6.0 and Firefox. But on IE 7, I get the error message below.

The portlet cannot be displayed because your browser does not support iframes.

My first impression was that IE7 support for iframe was disable. So I check the IE settings and it seems alright. After some searching around, I found the problem is not with IE7. It's a known issue but can be easily solved. Go to the Portal Administration -> Portal Settings -> Supported Clients. The list of supported client is listed there. IE 7 is missing. Just "Add new client" and filled up the information as per MSIE 6.0. Only the information below needs to be changed

User Agent:
.*MSIE 7.0.*

Version:
7.0

It would be much easier if we could make a copy of the IE 6.0 client setting and make the necessary changes only. Any portlet guru who can modify the Supported Client setting portlets to have additional copy function?

Looking forward to play around more with Portal Server.

Document Navigation From View - HTTP_Referer

On Lotus client, when opening a document from a view, normally will be open on a new tab. Thus closing it may bring you back to the view.

On web, people try to avoid opening a new window. When opening a document from a view, users will expect to go back to the view that they come from. Users can access the same document from different views. Thus application have to be built to handle this.

One way to do this is passing the view name through the anchor link when opening the doc from the view. A simple way is to look through the view table DOM anchor and append the required query strings. I usually put the a div tag ("viewtable") around the embedded view in the $$ViewTemplate. This code below will look through the anchor link and append in the view name.

var anchor = 
document.getElementById("viewtable").getElementsByTagName("a");
for(var i=0; i<=anchor.length; i++){
if(anchor[i] !== undefined){
anchor[i].href = anchor[i].href + "&view=" +
document.getElementById("viewname").value;}
}

This is a simple solution but when you have a large view, you have to take into consideration of the script performance. There should be a simpler way to do this. I just thought of using CGI values.

So I tried using HTTP_Referer. It returns the url of where you come from, thus it can be used to retrieve the view name. I store the view name in a hidden field for easy reference. The formula below can be used in the field to retrieve the view name from the HTTP_Referer. If it cannot find the view name in the HTTP_Referer, it will put in a default view name.

a:=@Left(@Right(HTTP_Referer; ".nsf/"); "?OpenView");
@If(a=""; "vMyAction"; a)

The "Close" button in the document can use the field to navigate back to the view.
When going from read to edit mode, the referer will be the read mode thus losing the view name info. A simple way around this is to pass the view name along in the URL when opening the document in edit mode or going back to read mode. It can easily be retrieve using @UrlQueryString.

There are many ways to do the document navigation from the view. You can use the methods above, cookies, etc. If you know a better or simpler way to do it, feel free to drop in your comments.

Show-n-Tell Thursday Add to del.icio.us

Javascript String Performance

Followup previous article on innerHTML performance, I now take a look at what is the better way to built the HTML string for the innerHTML.

I use 2 for loop to built a table with 1000 rows and 5 columns. 4 different ways of building the string is tested. The test is done on Firefox 2.

1) str += ...
2) str = str + ...
3) str = str.concat(... , ...)
4) str.push(... , ...)

Below is the javascript sample for the 4th test cases

function init(){
 console.time("String")
 var newStr = new Array("<table>");
 for(var i=0; i<1000; i++){
  newStr.push("<tr>");
  for (var j=0; j<5; j++){
    newStr.push("<td>row ", i, " col ", j, "</td>");
  }
  newStr.push("</tr>");
 }
 newStr.push("</table>");
 document.getElementById("content").innerHTML = newStr.join("");
 console.timeEnd("String");
}

I did sample of 20 time and get the average result.

	Test Type	Average Time (ms)
1	str += ...	317.5
2	str = str + ...	285.4
3	str = str.concat(... , ...)	287.2
4	str.push(... , ...)	298.4

The results is quite close. The 1st Case is the slowest among all. The other 3 time is almost silimar considering their performance variation is about the same. Thus for most case (small functions), either way should be fine. But to squeeze every ms out, try using case 2-4.

The only thing to avoid is building the string like the example below.
newStr = newStr + "row ";
newStr = newStr + i;
newStr = newStr + " col ";
newStr = newStr + j;
newStr = newStr + "";

Use this instead:
newStr = newStr + "row " + i + " col " + j + "";

Any String that can be build in one line, should be done so.

Show-n-Tell Thursday Add to del.icio.us

DOM innerHTML vs appendChild

There's a lot of debate on whether to use innerHTML or to add in HTML elements using DOM methods. Personally I prefer to use innerHTML because it is easier to use. innerHTML is said to be faster as well.

For comparison, I have develop 2 functions to create a table with 100 rows and 5 columns.

1) An array is use to built the Table HTML string. Then it is appended into innerHTML of a div "content".

function init(){
var ihtml = "<table id='mytable'>";
for(var i=1; i<=100; i++){
 ihtml += "<tr id='row" + i + "'>";
 for(var j=1; j<=5; j++){
  ihtml += "<td id='col" + i + "_" + j + "'>" + i +

"_" + j + "</td>";
 }
 ihtml += "</tr>";
}
ihtml += "</html>";
document.getElementById("content").innerHTML = ihtml;
}

2) A DOM table is built and append into the div "content".

function init(){
var table=document.createElement("table");
table.setAttribute("id", "mytable");
for(var i=1; i<=100; i++){
 var tr = document.createElement("tr");
 tr.setAttribute("id", "row" + i);
 for(var j=1; j<=5; j++){
  var td = document.createElement("td");
  td.setAttribute("id", "col" + i + "_" + j);
  td.appendChild(document.createTextNode(i + "_" + j))
  tr.appendChild(td);
 }
 table.appendChild(tr);
}
document.getElementById("content").appendChild(table)
}

I use Firebug profile to time the function. So what the performance result difference should I expect?

	function 1(innerHTML)	function 2
Average Time	60 ms	130 ms

Both function manage to execute in miliseconds. But, function 1 (innerHTML) is two time faster the DOM methods. I have increase it to 1000 rows and the result is the same, innerHTML is twice as fast. As a conclusion, innerHTML is much faster for more complex/larger DOM manipulation.

Show-n-Tell Thursday Add to del.icio.us

Quick Tip - Domino File Upload Control element

For file uploading on the web, File Upload Control element can be used in Domino Design. It will create the file upload file (eg tag below). The name of the File Upload field will start with %%File.

<input id="UserFile" size=50 type="file"
name="%%File.482571b10020b158.e1c9d0d2ceb6a5c5482571b50022e0ab.$Body.0.1F64">

@AttachmentNames will return all the attachment(s) filename of the document. To create anchor link to the file, a <ComputedValue> can be used to built the link.

temp := @AttachmentNames;
ahref := "<a title=\"" + temp + 
"\" target=_blank href=" + DatabasePath + 
"VUncat/" + @Text( @DocumentUniqueID ) + 
"/$FILE/" + temp + ">" + temp + "</a>";
ahref

There is a problem when directly using the attachment name to be set as the anchor link. Files with space in the filename will produce broken link. Some file upload examples that I saw, include a message to inform user not to upload file with space in the filename. This is definitely not user friendly.

To overcome it use @URLEncode. It will handle the space or some other special characters in the filename.

ahref := "<a title=\"" + temp + 
"\" target=_blank href=" + DatabasePath + 
"VUncat/" + @Text( @DocumentUniqueID ) + 
"/$FILE/" + @URLEncode("Domino"; temp) + 
">" + temp + "</a>";

To add in additional function to removed the attachment, use an input checkbox with the name "%%Detach"

ahref := "<INPUT TYPE=checkbox NAME=\"%%Detach\" VALUE=\"" + 
@URLEncode("Domino"; temp) + "\"> <a title=\"" + 
temp + "\" target=_blank href=" + @WebDbName + "VUncat/" + 
@Text( @DocumentUniqueID ) + "/$FILE/" + @URLEncode("Domino"; temp) + 
">" + temp + "</a><br/>";

Checked on the filename that need to be removed. Then save document. The attachment will be removed.

Domino File Upload Control provides an easy way to upload file into the document. And the examples above is to access the attachments and manipulate it (open, delete).

Show-n-Tell Thursday Add to del.icio.us

CNY Lou Sang

Lou Sang is a Chinese New Year (CNY) dish. It consist of crackers, carrot, assorted colored ginger, pomelo, etc and not forgetting the raw fish. It is mix together with pepper, oil and plum sauce. Family and friends will stand and mix it up together using chopstick. While mixing, everyone will provide good luck wish like getting a promotion, better business, etc.

Lou Sang is only available about 1-2 weeks before CNY and 15th day after CNY (the last day of CNY - Chap Goh Meh). If you happen to be in Malaysia during then, don't forget to try it out at Chinese restaurant.

Lion Dance

Lion dance is normally perform during Chinese New Year. Troupes performing at the business location to bring good fortune for the business. Wish you all a prosperous new year a head.

Gong Xi Fat Chai

To all Chinese, Gong Xi Fat Chai (Happy Chinese New Year). Have a prosperous year ahead.

I'll be off for the whole week for Chinese New Year holidays :)

dojo.dom cheatsheet

I find myself keep searching for the same documentation for some of Dojo function. As I mention before the documentation site is quite slow to load from here. So I decide to compile some locally for my own quick reference. Here to share with you all is the first one, dojo.dom Cheatsheet. The information is accurate according to Dojo documentation site.

Add to del.icio.us

Sortable Column View using Dojo FilteringTable

In Lotus Notes client, we can set the column in a view to be sortable. I use Dojo FilteringTable to mimic the sortable column. In this example, it only works for flat view or view without categories. I'm using Dojo 0.4.0 here.

First create a $$ViewTemplate. This is needed to attached in the required Dojo libraries and the generation of the FilteringTable. Insert the embedded view and set the Display to "Using HTML". For simplicity, add a div around the embedded view. It is used by the function to pick up the table inside it to be formated. Give it a name, eg. "viewdiv". Make sure only the text is pass through HTML. If the embedded view is also pass through, it won't be displayed.



In the HTML Head Content insert the code below. Change the "dojopath" to where you store your dojo. Import this js file into the database.

"<script type=\"text/javascript\">"+@NewLine+
"    var djConfig = {isDebug: true};"+@NewLine+
"</script>"+@NewLine+
"<script type=\"text/javascript\" src=\"/" + dojopath + "/dojo-0.4.0/dojo.js\"> </script>"+@NewLine+
"<script type=\"text/javascript\" src=\"/" + @WebDbName + "/LNFilteringTable.js\"></script>"

Then in the JS Header insert the require dojo Library. When the document load then call the function createFilterTable(ViewDivName).

dojo.require("dojo.widget.FilteringTable");
dojo.hostenv.writeIncludes();

dojo.addOnLoad(init);

function init(){
createFilterTable("viewdiv");
}

Domino by default will generate a HTML table for the view. What the function does is to format the table for the Filtering Table. The first row id moved out of the body to a newly created table head (thead). This is used for sorting the columns. Then each of the row need to have a value. The anchor link href is extracted as the value of the row. The anchor links also need to be removed because they will affect the sorting. To replace the links, double click event is added on each row to open the document. Below is the sample end result.



The generated table is without any formatting. To make it look as the image above, use CSS for the layout. Import the dojo FilteringTable sample images for the column header into the Image Resources (ft-head.gif, ft-headup.gif & ft-headdown.gif). I used a page to create the CSS. Use @WebDbName for the <ComputedValue>.

#viewdiv table {width:100%;border:1px solid #ccc; border-collapse:collapse;}
#viewdiv table td, table th {padding:4px;font-weight:normal;}
#viewdiv table thead td, table thead th {background-image:url(/<ComputedValue>/dojowidget/ft-head.gif);
background-repeat:no-repeat;background-position:top right;padding:6px;font-weight:bold;}
#viewdiv table thead td.selectedUp, table thead th.selectedUp {background-image:url(/<ComputedValue>/dojowidget/ft-headup.gif);}
#viewdiv table thead td.selectedDown, table thead th.selectedDown {
background-image:url(/<ComputedValue>/dojowidget/ft-headdown.gif);}
#viewdiv table tbody tr td{border-bottom:1px solid #ddd;}
#viewdiv table tbody tr.alt td{background: #e3edfa;}
#viewdiv table tbody tr.selected td {background: yellow;}
#viewdiv table tbody tr:hover td {background: #a6c2e7;}
#viewdiv table tbody tr.selected:hover td {background:#ff9;}

For future enhancement, I will add in the filtering functions. At the mean time, download this js file and tried it out.

Show-n-Tell Thursday del.icio.us

Prototype Documentation

Go to this site for the full prototype 1.5 documentation. For the downloadable version, Big Medium have posted a PDF copy of the documentation. This is what I call good documentation. Complete API documentation with EXAMPLES.

Dojo API documentation site frustration

I head out to Dojo API site to check some stuff. It look way so long to load the main page (> 3 minutes). There are more than 50 objects (I stop counting... should be close to 80-90 objects) that is loaded. I already frustrated to be stuck in some Dojo stuff and now I have to wait for so long to look at their API documentation. Not to mention that it is still not completed yet.



With so many different javascript framework out there, Dojo really have to buck up here. A good example is YUI. It have comprehensive documentation. The documentation is also available in the download so you can refer to it locally.

Florathon, Malaysia Flora Fest 2007

Have you ever seen flowers run? Florathon is a brisk 3-km walk and participants will be judged not by speed but by floral-themed costumes. This is a fun-filled beautiful and colourful event in conjunction to Malaysia Flora Fest 2007. There is a waiter race and children cooking too. Check out the photos here.

Visit Malaysia 2007

Time your javascript

In web application Javascript performance is important for web application. This is especially with Web 2.0 where javascript usage is increasing. I just found out a good feature in Firebug to measure the performance of your scripts. For those who didn't know, there is a profiling feature in Firebug. I admit I just found out after reading the article AJAX Debugging with Firebug. Jump right into using Firebug without reading what's new there. How could I have miss that feature?

It is really a great tool to time your script. You will get a sample result as below.


Firebug includes a JavaScript profiler that gives you detailed reports on the performance of every function called during a given period. You can start it directly in the toolbar of the Firebug Console tab. The other way is to start it in your code

console.profile();
yourFunctions();
console.profileEnd("Loading function");

This is definitely a tool that will help out Web Developer a lot.

Using List in Simple Form Validation

In LotusScript, List is a very useful collection data type. I've spoken to quite a few developer and not many of them is taking advantage of List data type. Below is a simple validation example using List.

First example, is a typical simple validation I found in a form

Function ValidateSubmit As Boolean
Dim ws As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Set uidoc = ws.CurrentDocument

If uidoc.FieldGetText("FirstName") = "" Then
  Msgbox "Please enter your first name"
  ValidateSubmit = False
  Exit Function
Elseif uidoc.FieldGetText("LastName") = "" Then
  Msgbox "Please enter your last name"
  ValidateSubmit = False
  Exit Function
Elseif uidoc.FieldGetText("Gender") = "" Then
  Msgbox "Please select your gender"
  ValidateSubmit = False
  Exit Function
'........ other validation
End If
ValidateSubmit = True
End Function

Second example, fields and messages stored in a List for validation

Function ValidateSubmit As Boolean
Dim ws As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Set uidoc = ws.CurrentDocument

Dim fieldList List As String
fieldList("FirstName") = "Please enter your first name"
fieldList("LastName") = "Please enter your last name"
fieldList("Gender") = "Please select your gender"
'...fieldList("OtherFields") = "return message"

Forall f In fieldList
  If uidoc.FieldGetText(Listtag(f)) = "" Then
    Msgbox f
    ValidateSubmit = False
    Exit Function
  End If
End Forall
ValidateSubmit = True
End Function

As the number of fields to be validated grows, maintaining the List in the second example is much simple than the first example. This is just a very simple example to showcase the use of List. You can even store objects in the List. Try using List if you haven't done so.

Show-n-Tell Thursday

Debugging Dojo using Firebug and Greasemonkey

Debugging in Dojo is easier than ever. Shane O’Sullivan posted a great script using Greasemonkey to log the debug using Firebug.

From his blog:

The solution is to use a Greasemonkey script to enable Dojo/Firebug debugging on any page you visit, or only for pages in a given list of domains. The steps to use this script are as follows:

1. Install Greasemonkey from http://greasemonkey.mozdev.org/
2. Install Firebug from http://www.getfirebug.com
3. Open the file http://www.skynet.ie/~sos/misc/dojo_debug_enable.user.js in Firefox. Greasemonkey should prompt you to install it.

That should be all that’s necessary.

You can always enable or disable the script directly in Greasemonkey.

Five Things You May Not Have Known About Me

I was tagged by Chris Blatnick and Mac Guidera.

1) Start of with my name (surname) - Beh. It means Horse. It is pronounce in Teochew (Chinese dialect). I don't speak much in Teochew, but will try to practise a much as possible with my grandparents. I normally use Cantonese (another Chinese dialect) with my parents and sisters.

2) I love photography. I pickup a digital SLR end of last year. Been learning a lot about photography. Getting a good picture is not as easy as it looks. Getting the right exposure, composition, etc is important. But.. some things can be corrected in Photoshop :) I like taking portrait pictures. You can check out some selected photos here.

3) I love to travel as well. Currently I can only afford to travel around Asia. For personal holiday I've been to Singapore, Thailand, Cambodia, Bali (Indonesia), China, Taiwan. For work, Bangkok, Shanghai, Taipei and Furth (Germany - only Europe country I've been). Malaysia currency is not strong so to travelling to Europe or US is out of my reach at the moment. While I'm still dealling in Lotus Notes, anyone willing to sponsor me a trip to LotusSphere, US :) Hehe... just trying out my luck. I've only work in Malaysia only (excluding business travel). If given a chance, still finding opportunity to work in Europe / US. I would like to learn about the working culture in different place.

4) I love rollerblading. I used to rollerblade a lot during my university years. I like roller hockey, but not good in it. I've even tried playing tennis on my blades. During those time, normally I would go for leasure blading after midnight around the campus. Now, my blade is broken :(

5) I'm born in Melaka. Melaka history dating back to the 15th Century, when it was a vital world trading port to Asia country. This year is Visit Malaysia 2007. Take this chance to visit Malaysia and not forgetting the beautiful Melaka city.

To get to know me better, drop me a line at willbeh at gmail.com . Drop me a line if you are coming to Malaysia. I will try to bring you around if I'm free.

I now tag Damien Katz, Mikkel and Radu Cadariu

Visit Malaysia 2007

Eye On Malaysia
Originally uploaded by William Beh.

Visit Malaysia 2007 was launch yesterday together with the opening of "Eye On Malaysia" at the beautiful Taman Tasik Titiwangsa (Lake Titiwangsa Garden). People around the world should take the opportunity to visit Malaysia this year. Check out the Tourism Malaysia website.

Quick Tips - dojo.dom

When extracting text from a DOM node (HTML or XML), different browser have different method to do it. In IE node.text() while Firefox node.textContent().

Dojo provide a simple way to extract the text content.
dojo.dom.textContent(node)

So far I've tested it on IE and Firefox and it is working fine. I do not need to check for the browser myself. Try it out.