SInging jQuery's praises in a Domino Environment

Riding as I do just behind the xPage wave, I still spend most of my time using the older web tech on the domino server to web enable my apps, some apps are just to big and too difficult to make all xPagey and lovely quickly, so we take a gradual approach to migration.

This does not mean however that the poor users have to put up with old fashioned make do an mend. We have been using a lot of jQuery of late to leverage some bells and whistles and whilst not the pre supplied Dojo that lives on the server which gets used a bit, For the shiney front end stuff we do use jQuery because it is so easy to code in.

You can get every thing you need from the UI page here. jQuery comes in two parts, the core product and the UI and there are pages to download both, However when you download the UI you will get the current stable jQuery core that matches the UI code, so I generally go down this route when acquiring the required bits and bobs.

When dealing with the UI components do have a look at the themes avaiable and choose the one that best suits you before you download. There is a "Theme Roller" app that allows you to tweak just about everything before you download and this is very useful when trying to get something that is "corporate identity friendly".

When you download the core and ui elements you get a zip file with everything you need including samples.Which can be a bit daunting. However the files you need are in two places all the Javascript is found in a directory called JS .. the files are currently
jQuery-1.5.1.min.js  - 84kb which contains the jQuery core code
and
jQuery-ui-1.8.15.custom.min.js - 206kb which contains the jQuery widget code.
You also need to resuce the CSS file and the associated graphics files which are in the CSS directory
when you tweaked the theme or selected one of the themes from the gallery of predfined ones you will have a subdirectory called the name of the theme. For example if you select "smoothness" there will be a dir called smoothness in which you will find
jQuery-ui-1.8.15.custom.css - 33kb
and a sub directory called images which has all the image files you need for the widgets

You have a couple of  options here,you can totally ignore the download and use the CDN hosted files or you can just copy the JS and CSS to the Domino\Data\Domino\html directory on your server,or you can embedd the requred files in your domino application. The choice is up to you. From a personal point of view I am inclined to embed the files in my apps as I live in a very disparate server environment where I cannot guarantee that every user will have access to the internet for the CDN files , or guarantee that every server in the domain has the correct JS in the correct place at the same time.

Housing the jQuery in an NSF is not that difficult but it does need a wee bit of tweaking.

The JS files are minified and as such cannot just be cut and pasted into a JS library, so I just import them into the RESOURCCES / FILES section.

The CSS I import directly into a RESOURCES Style sheet, edit and run a Replace All on URL(images/ replacing it with plain URL(

The Images are all PNG so will not import into the images section of the nsf so I load them into the RESOURCES / FILES section as well.

... and that is it. you are ready to roll.

As an example of how easy it is to provide a jQueried widget I wil use the old favoutie a name finder field

For this you will need access to the jQuery code defined above by one of the methods

Create your form
Add links to the JS files and CSS files in the HTML HEAD Section

(i have renamed the files for ease of typing)

Add the field you want to have an autocomplete onto the form
Give it an HTML ID property of say "myname"
Create some HTML in the JS Header section like this

jQuery has a special function  $(document).ready() which fires when the document is completely ready and all JS, images etc has been downloaded, and is ready for use. This is what is happening in (A) above which says when the document is ready run the function fInitApp()

fInitApp() is defined below and the jQuery selector $('#myname') tells jquery to search the document and locate the HTML element with the ID of myname [jQuery uses the same short hand as CSS in that a . defines a css classname and # defines an ID name.

Having found the element with an ID of myname, in this case a Text or Name field on the form jQuery then uses the autocomplete widget instansiator. Autocomplete is defined in the UI JS file and all that is required is that you set it up once when the document is loaded.

The Autocomplete function is supplied with an array of options surrounded in curly brackets.In the example above what I am saying is .. trigger the autocomplete when I have type 3 characters, get the data from a notes agent called getnames and the return data will be in json format.

jQuery passes what you type back to the agent url as a field called TERM in the CGI field called Query_String

So you write an agent with the same name as the Source: definition that takes this CGI field and queries the ($users) views in your names.nsf and returns a JSON String something like this ( I am limiting the return to 10 names you can set this as you see fit)

And that is all there is to it...

I have popped the above code into an NSF and you can have a look at by downloading it from here
and if you havent looked a jQuery yet, i advise you to have a look see. There is a wee learning curve but once you have the basics you can get remarkable effects very quickly and you do not need xPages to do it, so if you are stuck back on early V8 or V7 then you can still serve your users something pretty good very quickly.

A wee problem with FIrefox and Quickr

Came across a problem with Firefox 4 and 5 today. It is a rather esoteric problem but it is a pain in the arse if you get it. I upgraded to FF4 last week and as soon as I did Quickr stopped working. When I went to the quickr home page I got 6 errors logged in Firebug starting with an "unterminated string error". this only seemed to be affecting me, the tech support chappies were all OK with both Firefox 4 and 5.

I started disabling plugins and addons and it was when I disabled the Lotuslive chat extension that the problem went away. Rather than just blame the Lotus Live extension I uninstalled FF and all the add-ons and extensions and installed a clean version 5.0.1 with no add-ons and re-added Firebug, Flashbug and the LotusLive chat extension (in that order) and Quickr continuted to work normally, so I would guess that it was a more complex issue that just the Lotuslive chat extension that caused the problem.

So if you come across Firefox not working for quickr and you get 6 errors starting with an "Unterminated Sting" error I suggest you uninstall FF and then do a clean install and everything should be fine

In praise of everyday software

Yesterday I was sitting on the bench in our back garden doing what I do best ... very little with a tin of beer. It occurred to me that there is a mindset that values software almost purely on the "OOOO AHHHH" factor it generates.

The thought that a computer's installed software base is considered to be a "gallery" of developmental excellence made me cringe a little. When we as developers type into the blank canvas of a new project, we have in our minds eye the finished package and how wonderful it will be. However time, talent (or lack there of), and budgetary constraints too often blur the edges of that internal paradigm of excellence and we end up with something much more ordinary.

I was then drawn to architecture in my internal perambulations ... take for example a street lined by buildings, but the totality of our experience of that street is defined by the synergy between the buildings and the empty spaces created between them. When Barcelona started its regeneration in the 80's, it was realised by reconsidering and enhancing these empty spaces. There were a few challenging new builds, but around these were placed the new public spaces so envied by other European cities. These spaces are surrounded in the main by "ordinary" buildings. The developemental energy was spent on the actual place rather than the beauty of the new builds.

The suggestion that architects (and I include the software pencil suckers here) should improve their output by engaging in the everyday aspects of people's lives is a bit daunting. Taken to the extreme, it reminded me of Adolf Loos' short story, "The Poor Rich Man". An architect is commissioned by a Poor Rich Man to design and build him a house. The architect not only designs a house but goes as far as designing every detail of the Poor Rich Man's home; he anticipated everything, even the pattern on his slippers. One day, the Poor Rich Man's family offered him birthday presents, but the architect, summoned to find correct places for them in his composition, was furious that a client had dared to accept presents about which he, the architect, had not been consulted. For the house was altogether finished, as was his client: he was complete. This holistic design of an environment might be some architects dream, but it usually becomes other people's nightmares. Accidents and incidents are essential for real life. Building Architects design spaces for people to live in, Software architects design applications for users to work in.

This idea is a bit more interesting, I hope. UIs tend to become attraction parks for programmers to "perform" in. The strength of an architect is to build "good" applications using and playing with the existing context rather than try to create a stand-alone object that looks good and fits only inside an ideal sterilised environment.

Part of the developer's job is to "service the user's need for instant gratification", the "ooooo ahhhhhh" factor of software. but how often have we seen software that looked wonderful but it was functionally shite? (Yes Vista I AM looking at you) On the other hand there is such an unpleasant condescension in separating the users from ourselves as developers and giving them something that we wouldn't consider good enough.

I suppose what I am trying to say is that we should not confuse modesty and mediocrity.

Ordinary software is honest and without pretensions, a simple shed can be far more interesting architecturally than a shed trying to be a town hall or a Greek temple, (ask Grand Master Beetroot Chris Coates)

There can be a real beauty and intelligence in the simplicity of an application, often involuntary, but we shouldn't dismiss it. I remember an insignificant small building in Belfast city centre. It had interesting proportions and clever details. six months after the redevelopment of the big blue Victoria Street shopping centre, it had been "done up" and is now a horrible thing. It is mutton dressed as lamb, it performs the same function and does it as well as it did before. But now where it had been pleasing in its simplicity, now I shiver as I pass it.

... and there is our challenge. Find the beauty in simplicity, join the look and feel to the function in such a way that we don't sacrifice either ...

...and then it was time for another beer

Twitter in an NSF (...continued)

Having had a look at Thomas's Twitter NSF last week. Initially I decided that my own wee app would die a death and I cast it aside. However the TV was that crap this weekend that I fiddled away at it and have moved to a point were 2morrow (hopefully) I will be able to give you my version of the same thing cept mine is called Twimino and looks like this.

I don't have avatar pictures in mine (yet) and it still has some idosyncracies to work out but the V0.0.1 very beta beta should be ready for people to tear to shreds tomorrow or Monday

V8.5.0 designer - my first play

I have had about 4 hours playing with the v8.5.0 designer client and I could be all serious and professional and say how well it fits the paradigm of a modern designer interface. How the interplay of the various components react together with a synergy that excels even my jaded sensibilities .. on the other hand I could yell ...

YIPPEE!

and run around the room naked waving my arms like a demeneted dervish. Since I am at home and everyone is in bed i think I will [pause for silliness]

Now as you may have noted I am not at LS so I don't have the benefit of listening to thoses that know how it all fits together AND I have only just this weekend downloaded the 8.5.0 code so I have had 2 hours yesterday and perhaps 3 today to play with it.

I of course dived straight into xPages and yes I can see how wonderful it is going to be. However I couldn't get CSS to work the way I wanted it, floats and clear's didn't seem to work and you can't set the left and right margins to "auto" ... as in (margin-left: auto; ) from the properties panel of an object. But this is probably me not doing it right rather than any fault of xPages.
I did manage without the aid of the help, or of my collegaues on the web to get a view working which is "bloody marvellous" and a testament to how easy it is to code! I will have to do a deep dive or two in the comming weeks to get to grips with all the bells and whistles!

On ordinary matters I really do like the fact that when I edit external style sheets I don't now have to remember to refresh the damn things. You just double click, edite them in the IDE, with a very nice properties panel at the bottom (no more typing maargin-botom: for me) enter your CSS, save and refresh your page in the browser. THANK YOU THANK YOU THANK YOU!!! Remembering to refresh the CSS file in the NSF was the bane of my life and made many of my colleagues blush when I gave vent to my frustration in that regard!

The new editing layout or as it is called in designer "the perspective" is good, everything is at hand and easy to find for those used to the older designer clients. However I would challenge the "perspective" label. To an artist this means and image that is an approximate representation, on a flat surface, of an image in three dimensions as it is perceived by the eye. The two most characteristic features of perspective are that objects are drawn smaller as distance increases and are foreshortened along the line of sight but I suppose in this context it means the faculty of seeing all the relevant data to do with a project in a meaningful relationship ... ok I DO have my pedant hat on .... but because I have drawn and painted for a lot longer than I have coded it does midly annoy me. ;-)

I digress ... (as usual) ... my first impressions of V8.5.0 designer are very good but I can see a whole new set of tricks that will need to be learned to leverage max value out of it. So LS09 dev session folk we non-attenders really do need your examples and presentations so we too can get up and running ASAP with all these new toys! Pretty Please!