Client User Interface on Web: Preview pane on web

I finally get some time to sit down and do an example of a very simple application with dojo. I've created a split vertical pane. The top pane will display the view and the bottom pane (preview) will display the form (edit and saving).

You can download the example here. Remember to sign the database first.

First setup where you store your dojo library. Open the profile document from the menu "Action --> Edit Profile".



Enter the path of the dojo.js. for eg "/WebTool/Dojo.nsf/dojo-0.3.1/dojo.js". Here I store dojo in a nsf template. You can also store it directly at the Domino server HTML directory.

First the view. I used SortableTable. The view (hvPerson) generates the html table body. $$ViewTemplate is use to create the rest of the table for the SortableTable. In each row, the document unique id is inserted in the <td> tag as a value. This will be use to retrieve the selected document from the table.



The "Create" button will retrieve the form (dfPerson). Domino form will create the full HTML source by default. So when it is retrieved, we only need the Form portion to be display in the preview area.



When saving the form, we can directly use the form action for submission. Just pass in the form to dojo.io.bind and it will handle the submission. This is the same when saving a existing form. The best part is, even the WebQuerySave works. So this is really a convenient function to use.

I have just touch the surface of how "Client" like application can be built on the browser. To those dojo guru out there appreciate if you could feedback on the code used here. I put together the this sample application referring to the dojo demo application and responses from this forum.
Download the sample and try it out.

Show-n-Tell Thursday

Happy Deepavali

For all Indian readers and my friends, wish you all a very happy Deepavali.

Client User Interface on Web

There are so many different javascript framework available for download. To name a few prototype, dojo, yui.... etc. The list goes on. I've been using prototype for quite a while and like it. The $ function, some of the DOM, event and array functions are quite easy to use.

Now I'm looking for something that can help me build a client like application on browser. Dojo provide a lot of building client like functions, eg. browser windows, menu bar, just to name a few. YUI is gaining a lot of reputation for their set of library. So which is better? Or should I stick to prototype & scriptaculous?

I ended up giving dojo a try. Dojo definitely have quite a lot of build in functions. But it's quite heavy too. The full dojo.js compress is 127 KB. That doesn't take into consideration of the many different library that need to be imported for different functions.

First impression, documentation is needs to be improved. I can't find offline documentation that can be downloaded. The API doc and the manual is all online. But I still gave it a further look.

Going through some of the examples, I found something that I can start with. I like the ContainerPane and the SplitPane. I can build layout without worrying about the CSS of the different panes in a page. The spilt pane provide resizable panel. That's nice.

Then I jump to AJAX calls. Dojo provide an IO library for that. Dojo even provide crossed domain AJAX calls through IFrame I/O. What I like is the form submission. That's what's I was looking for.Lotus Notes form itself have the required submission action url. Using dojo.io, AJAX posting of the form can directly use the existing url. This is convenient.

Using both function above, a view with preview pane can be created similar like in LN Client. user can browse through the view documents without refreshing the page. The document can be set editable and save within the same page. I'll be drafting the steps to create the example describe above. Keep a look out.

Managing Domino File Resources Using WebDAV

For those of you using external javascript library in Lotus Notes, I guest a lot of you went through the pain of importing the javascripts into the File Resources. This is true for big library like YUI, Dojo and even DHTML editors like TinyMCE. For some, most probably those will be distributed directly into the server HTML folder. But for a worldwide distribution of application, it's easier to distribute it together with the application.

Thank to Jake brilliance again, I learned a new way to import these file almost quite easily into the database using WebDav. Just a few setup on the server and you are ready to go. Check out the article "Managing JavaScript Libraries in Domino".

CouchDb Project Website New Design

CouchDb Project website have a new look. Thanks for Ken Tango for the design.
It's been some crazy month for me at work. Didn't manage to update my blog recently. I've been working on CouchDb website new look for the pass few days and just manage to implement the new look. Check it out.

Content Feed RSS Part 2 - Datetime

I've learn something new from a comment from my previous post. All date-times in RSS conform to the Date and Time Specification of RFC 822, with the exception that the year may be expressed with two characters or four characters (four preferred). Must have miss that when browsing through the RSS Specification. I've updated the RSS feed of CouchDb Forum. The change is quite easy in Lotus Notes view. I've just change the column to the required format as shown below. Use "Date/Time" style for the column and display "Custom".