Sunday, August 12, 2007

Sexifying the client with DHTML

I don't know why, but I've been really motivated program/test out different ideas this weekend. This is another product of my brainstorming.

Full size

I tried putting this video up on Google Video, but it got so compressed that it was impossible to see what was going on. This means that the front page currently is about 3-5MB heavy.. Sorry..

As I've stated a couple of times before, I'm not an expert programmer, and I'm quite lazy. Because of that, my demos are never production ready (stability, speed, etc). This demo is FAR from production ready. It is a proof of concept.

What I do in the demo is passing javascript commands ( e.g. javascript:doStuff() ) to a web-document inside a "Microsoft Web Browser" control. The commands are coded per field, "entering".

I use mootools' Fx.Scroll class to get the smooth scrolling.

Current issues with the OLE object:

  • I get OLE Automation Error when I try to resize the control (works with the debugger on)

  • Passing browser.navigate( url ), where browser is the browser object variable, is slow when not running on localhost (I only tried on one external server)

Maybe there is a faster way/more efficient object (mozilla, webkit, etc) to use.

To run the demo yourself (only tested in Windows XP):

  1. Download the Demo-db zip file

  2. Extract the db onto your hard-drive, and copy it to where you want to run it from

  3. Alter the postopen (in the member form) url to fit with the location you put the db. Make sure the HTTP-task is running

  4. Open the member form in the Client

Let me know if it doesn't work..


Nate said...

Tripcony and I have been playing with this concept at lot lately. When you combine it with shared LS contexts and remote binding, you can basically build composite applications in Notes 6.

We're actually submitting an abstract on this stuff for Lotusphere 2008

Tommy Valand said...

You wouldn't happen to have any tips when it comes to performance/stability optimizations, etc..? :)

Have you tried different Controls than the WebBrowser control (mozilla, etc?)

Nate said...

As we come up with them, I'll make sure you see them. :-)

Give me a week or so to collect some thoughts on it. Ideally, with The Revolution, we should be able to have a single instance browser object in a frame that is remotely controllable by other UI elements. That should help substantially with performance, since at that point it's just an AJAX call instead of an entirely new browser instantiation when you want to change something across the context.

Chris Toohey said...

I wonder, how limited is the embedded "Microsoft Web Browser" cotrol? Can you have Flash that appears on the Notes client?

I ask because I've used the embedded flash elements in the past, but utilizing them in THIS context really opens things up!

Tommy Valand said...

I think, but am not sure, that the web browser object corresponds with the Internet Explorer version you have installed on your system.

Flash should not be a problem, and since you can pass javascript-commands to the browser object, you can have contact (albeit a monologue) with the flash-object (new in Flash Player 8 or 9).

What would be even cooler, was if you could have a dialogue with the browser.

If you work on a system under your control, you could store data with the browser, and have a NotesTimer periodically check for changes, but that probably has it share of problems.