Now this is an interesting site, it takes several colours you choose and then presents you Flickr images that contain those colours. Now when trying to get a "scheme" for a web site that combines colours or uses what you believe to be challenging colour combinations this is rather useful as you can see if they do work and if the "real" world uses them too.
Mlticolr Search Lab
Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts
Sunday 8 November 2009
Thursday 4 June 2009
An Alternate way of embedding a configurable Video player in an NSF
I recently came across a nice open source video player that is dead easy to build into your Notes Applications. The player is called FLOWPLAYER and has been released under a GPL license. There are commercial and multi-domain versions which you have to pay for, but the base app is free to build into your apps.
You can download it here and once you have the zip file unzipped you have two SWFs and an example directory. I embedded it in my app like this.
01. I embedded FlowPlayer-3.1.1.swf into the RESOURCES / FILES section of the nsf
02. I embedded FlowPlayer.controls-3.1.1.swf into the RESOURCES / FILES Section of the nsf
03. I embedded the Flowplayer-3.1.1.min.js inot the RESOURCES / FILES section of the nsf
04. I added the flowplayer-3.1.1.min.js as an external JS file to the form I wanted the player to be on
05. I added a RT field into which a Video file could be attached
06. I added this code to the form
[ComputedText1] = @documentUniqueID and
[ComputedText2] = @attachmentnames
07. I created the form .. attached an MP4 opened it in the browser and it worked like a charm and looked like this
So if you have a need for a very clean, easy to use adaptable player for free (we like for free) then you can't go far wrong with Flowplayer ... check it out here
You can download it here and once you have the zip file unzipped you have two SWFs and an example directory. I embedded it in my app like this.
01. I embedded FlowPlayer-3.1.1.swf into the RESOURCES / FILES section of the nsf
02. I embedded FlowPlayer.controls-3.1.1.swf into the RESOURCES / FILES Section of the nsf
03. I embedded the Flowplayer-3.1.1.min.js inot the RESOURCES / FILES section of the nsf
04. I added the flowplayer-3.1.1.min.js as an external JS file to the form I wanted the player to be on
05. I added a RT field into which a Video file could be attached
06. I added this code to the form
<a href="'http://www.unseenuni.com:81/flowplay.nsf/new/[ComputedText1]/$File/[ComputedText2]?openelement' style='display:block;width:400px;height:300px' id='player'></a>
<script language="'javascript'"> flowplayer("player","http://www.unseenuni.com:81/flowplay.nsf/fp311.swf?openfileresource")</script></pre>
[ComputedText1] = @documentUniqueID and
[ComputedText2] = @attachmentnames
07. I created the form .. attached an MP4 opened it in the browser and it worked like a charm and looked like this
So if you have a need for a very clean, easy to use adaptable player for free (we like for free) then you can't go far wrong with Flowplayer ... check it out here
Sunday 24 May 2009
A rogue pair of FLEX purple underpants have mounted an assault on the yellow-only wash of my lotus web dev laundry
I have been a bit remiss with the Flex series I started a while back and I do apologise for the discontinuity and I have started doing some more examples that I will pop up on here in the next few days.
There is a part of me that is a wee bit ... embarrassed is not the right word ... concerned is perhaps better ... that whilst the movers and shakers in the Domino world are "Doing it" the Xpage way I have veered off into another RIA technology.
I have never been a fanboy of any particular technology I am more inclined to use the tools that I have access to and which get the job done. Now I have had a bit of a play with X-Pages and they are indeed a wonderful if slightly not-quite-there-yet thing. As the new Domino techniques develop I have found myself moving towards a place where Domino is a back end data store, like DB2, MySQL or Oracle
I am not sure quite why I this is happening, but technologies & frameworks like AJAX, FLEX etc do take a fair bit of the drudgery out of coding for the web. I found that it was easier to have a slight dichotomy between the app as seen on the web and the app as seen in the notes client rather than to have to make concessions in one or the other for the sake of conformity.
Taking this approach also means I can deliver web apps for a broader range of server installs. Back to V6.* rather than confine myself to V8.* servers thus giving more of my user base a nice warm feeling of being included in the "new" stuff.
This is not to say that I am leaving all of the tools of Notes/Domino behind. I still use Domino Security, Author and Reader fields and loads of LS and JAVA based agents to provide the data handling facilities.
I suppose that another reason that I am heading in this direction is that Domino does not exist in isolation in my sphere of reference. It exists along side data silos in DB2 and Oracle which in the client we can now leverage with Live text linking to composite apps, widgets and side bar apps in the 8* client, which is of course marvellous for those folk on the Full Version 8 client. In the real world where I code not all my users are on V8 and it will (given the current economic climate etc etc) be some time until some of the non-power users have the tin capable of running the full client to its full advantage. In the interim so as not to exclude these users from the momentum of change, I will use the power of non-yellow-tech then it seems prudent to do so.
In several conversations I have had on this topic, there has been an air of disapproval from some that I am at snubbing all the work done to improve things on the platform in the last couple of years. I do not think that I am , I leverage the best for my users with the tools that I have and the facilities they have to use it, if that appears "disloyal" well so be it. I am paid to service my users not some ethereal dogma of yellow oneness. ;-)
For those of you not yet on Version 8 and perhaps held back by budgetary constraints my message would be that you can move forward if you step outside what some refer to as "the bubble" and look at other methods that will maintain your creative momentum with the tools and servers you have to hand.
There is a part of me that is a wee bit ... embarrassed is not the right word ... concerned is perhaps better ... that whilst the movers and shakers in the Domino world are "Doing it" the Xpage way I have veered off into another RIA technology.
I have never been a fanboy of any particular technology I am more inclined to use the tools that I have access to and which get the job done. Now I have had a bit of a play with X-Pages and they are indeed a wonderful if slightly not-quite-there-yet thing. As the new Domino techniques develop I have found myself moving towards a place where Domino is a back end data store, like DB2, MySQL or Oracle
I am not sure quite why I this is happening, but technologies & frameworks like AJAX, FLEX etc do take a fair bit of the drudgery out of coding for the web. I found that it was easier to have a slight dichotomy between the app as seen on the web and the app as seen in the notes client rather than to have to make concessions in one or the other for the sake of conformity.
Taking this approach also means I can deliver web apps for a broader range of server installs. Back to V6.* rather than confine myself to V8.* servers thus giving more of my user base a nice warm feeling of being included in the "new" stuff.
This is not to say that I am leaving all of the tools of Notes/Domino behind. I still use Domino Security, Author and Reader fields and loads of LS and JAVA based agents to provide the data handling facilities.
I suppose that another reason that I am heading in this direction is that Domino does not exist in isolation in my sphere of reference. It exists along side data silos in DB2 and Oracle which in the client we can now leverage with Live text linking to composite apps, widgets and side bar apps in the 8* client, which is of course marvellous for those folk on the Full Version 8 client. In the real world where I code not all my users are on V8 and it will (given the current economic climate etc etc) be some time until some of the non-power users have the tin capable of running the full client to its full advantage. In the interim so as not to exclude these users from the momentum of change, I will use the power of non-yellow-tech then it seems prudent to do so.
In several conversations I have had on this topic, there has been an air of disapproval from some that I am at snubbing all the work done to improve things on the platform in the last couple of years. I do not think that I am , I leverage the best for my users with the tools that I have and the facilities they have to use it, if that appears "disloyal" well so be it. I am paid to service my users not some ethereal dogma of yellow oneness. ;-)
For those of you not yet on Version 8 and perhaps held back by budgetary constraints my message would be that you can move forward if you step outside what some refer to as "the bubble" and look at other methods that will maintain your creative momentum with the tools and servers you have to hand.
Monday 16 March 2009
Some regex for the new to the Web programmer
I was asked today how on a web form you could check to see if an email address was correctly formatted before the form was submitted. Well with the advent of Xpages and the pervasiveness of AJAX frameworks, web pages in the Domino World, like any web faced back end are not exempt from the double requirement of being shiny sexy things that users love AND having functions that can stop users doing the stupid things they always do.
The question was posed by a RPG programmer new to the world of the web and when I said "och that's a piece of piss, use a RegEx" they looked at me like I had grown an extra head (which i do do on occasions for extra effect when I am being flash)
RegEx is short for Regular Expression
and is a string that describes a search pattern. *.txt is a RegEx that will be familiar to everyone. But proper RegEx is like that but on steroids, human growth hormone and crack cocaine.
There are loads of web sites that go into great detail about how to correctly form a RegEx and I will let you go find them yourself .. there is thing called Google and it is really useful ;-)
However how to use RegEx and a RegEx pattern to test an email address?
OK lets say you have this HTML on a form
I pass this RegEx to the SEARCH method of the JS String object (which is what the .value of an input field is BTW) and it returns -1 is the pattern does not match or a positive integer if it does match. Which is all very simple BUT ... what does all that gooble-de-gook mean.. if you don't care .. then far enough, copy and paste the code and use it in your own app ;-) if you are curious here is what it means:
1. it begins with a / and the matching / is the very last character these act as the "" would in a normal string
2. The ^ symbol, means start matching at the absolute beginning of the string.
3. \w+ matches one or more alphanumeric characters.
4. This is where this gets interesting :-)
((-\w+)|(\.\w+))*
First, note that the whole thing is surrounded by (...)* which means that we want to match zero or more of whatever is inside.
Inside the ()* parentheses, we have (-\w+) and (\.\w+) separated by the | character This means it with match EITHER -\w+ OR \.\w+
The first one indicates that we should have a match if we find a hyphen followed immediately by a set of alphanumeric characters. The second part matches if we find a period followed immediately by a set of alphanumeric characters.
(NOTE . by itself is a special character so we must delimit it by placing a backslash in front of it.)
So far we have a pattern that will match [some alphanumerics]-[some alphanumerics] or [some aphanumerics].[some aphanumerics]
5. After this match, comes an \@ sign (once again i use \ to override any special meaning @ may have in RegEx
6. Immediately following the @ is [A-Za-z0-9]+ which matches a set of alphanumeric characters of either upper or lower case. I don't use \w+ because this would allow characters like _ and - ... OK?
7. next up is ((\.|-)[A-Za-z0-9]+)*
8. Note that the search is surround by ( ... )* this means we are matching one or none of a match to the pattern inside the ( ... )
9. So take them away and we are left with (\.|-)[A-Za-z0-9]+
10 First (\.|-) This is trying to match the first character as a . or a -
11. Then comes [A-Za-z0-9]+, the match only works if the period or hyphen is followed by a set of alphanumeric characters. This effectively represents an email address that contains a (possible) set of .something or -something sections. Because the * is used, the pattern works if they are present and also if they aren't.
12. Finally the \.[A-Za-z0-9]+ pattern matches a . followed by a set of alphanumerics. Because it is the last part of the regular expression, it represents the final part of the email address, which is the .com .co.uk bit.
13. The $ symbol ensures that the previous bit only matchs the END of the string.
14. The last character (the /) closes the first /
Simple .. init? ;-)
The question was posed by a RPG programmer new to the world of the web and when I said "och that's a piece of piss, use a RegEx" they looked at me like I had grown an extra head (which i do do on occasions for extra effect when I am being flash)
RegEx is short for Regular Expression
and is a string that describes a search pattern. *.txt is a RegEx that will be familiar to everyone. But proper RegEx is like that but on steroids, human growth hormone and crack cocaine.
There are loads of web sites that go into great detail about how to correctly form a RegEx and I will let you go find them yourself .. there is thing called Google and it is really useful ;-)
However how to use RegEx and a RegEx pattern to test an email address?
OK lets say you have this HTML on a form
Email Address <input type='text' name='email' value=''>I am going to use this is a JS function that will return true or false if the email address entered is valid
function emailOK()You will notice that I do NOT use a string literal surrounded by a pair of ""s for the myRegExp. Why? Because in a string literal \ is special (as in new line \n) so the RegEx expression \w+ would become "\\w+" in a sting literal which makes something that is very hard to read even harder to read. JS allows you to delimit RegEx's like this /pattern/ which makes things much nicer!
{
myRegEx = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
if (document.forms[0].email.value.search(myRegEx) != -1)
{
return true;
else
return false;
}
}
I pass this RegEx to the SEARCH method of the JS String object (which is what the .value of an input field is BTW) and it returns -1 is the pattern does not match or a positive integer if it does match. Which is all very simple BUT ... what does all that gooble-de-gook mean.. if you don't care .. then far enough, copy and paste the code and use it in your own app ;-) if you are curious here is what it means:
1. it begins with a / and the matching / is the very last character these act as the "" would in a normal string
2. The ^ symbol, means start matching at the absolute beginning of the string.
3. \w+ matches one or more alphanumeric characters.
4. This is where this gets interesting :-)
((-\w+)|(\.\w+))*
First, note that the whole thing is surrounded by (...)* which means that we want to match zero or more of whatever is inside.
Inside the ()* parentheses, we have (-\w+) and (\.\w+) separated by the | character This means it with match EITHER -\w+ OR \.\w+
The first one indicates that we should have a match if we find a hyphen followed immediately by a set of alphanumeric characters. The second part matches if we find a period followed immediately by a set of alphanumeric characters.
(NOTE . by itself is a special character so we must delimit it by placing a backslash in front of it.)
So far we have a pattern that will match [some alphanumerics]-[some alphanumerics] or [some aphanumerics].[some aphanumerics]
5. After this match, comes an \@ sign (once again i use \ to override any special meaning @ may have in RegEx
6. Immediately following the @ is [A-Za-z0-9]+ which matches a set of alphanumeric characters of either upper or lower case. I don't use \w+ because this would allow characters like _ and - ... OK?
7. next up is ((\.|-)[A-Za-z0-9]+)*
8. Note that the search is surround by ( ... )* this means we are matching one or none of a match to the pattern inside the ( ... )
9. So take them away and we are left with (\.|-)[A-Za-z0-9]+
10 First (\.|-) This is trying to match the first character as a . or a -
11. Then comes [A-Za-z0-9]+, the match only works if the period or hyphen is followed by a set of alphanumeric characters. This effectively represents an email address that contains a (possible) set of .something or -something sections. Because the * is used, the pattern works if they are present and also if they aren't.
12. Finally the \.[A-Za-z0-9]+ pattern matches a . followed by a set of alphanumerics. Because it is the last part of the regular expression, it represents the final part of the email address, which is the .com .co.uk bit.
13. The $ symbol ensures that the previous bit only matchs the END of the string.
14. The last character (the /) closes the first /
Simple .. init? ;-)
Tip of the Day- A JS way to create inline images to display from attachments in a Rich Text Field
Here is a wee Domino related JS tip.
Say you have a RT field into which users can attach files, these will in the natural schemem of things appear as a list of attachments with nice icons to click on. But what if you want to display them but couldn't be arsed coding in the domino bit of the form to get them to display as inline images.
01. Put a DIV tag around your RT field and give it an ID
03. Create an empty target [div] to display them in
04. Create a JS function in the form or page like this
04. Put your dspLinks() function in the onload of the form and voila you have all the images in your RichText field displayed in the target div as well as the normal link icons you get from a RT Field's attachments.
Say you have a RT field into which users can attach files, these will in the natural schemem of things appear as a list of attachments with nice icons to click on. But what if you want to display them but couldn't be arsed coding in the domino bit of the form to get them to display as inline images.
01. Put a DIV tag around your RT field and give it an ID
<div id='imageRT'>[DominoRTField]</div>
03. Create an empty target [div] to display them in
<div id='imageDsp'></div>
04. Create a JS function in the form or page like this
function dspLinks()
{
target = document.getElementById("imageDsp");
imgLinks = document.getElementById("imageRT").getElementsByTagName("a")
for(t=0;t<imgLinks.length;t++)
{
imgLink = imgLinks[t].href;
img = document.createElement("img");
img.src = imgLink;
target.appendChild(img)
}
}
04. Put your dspLinks() function in the onload of the form and voila you have all the images in your RichText field displayed in the target div as well as the normal link icons you get from a RT Field's attachments.
Wednesday 21 January 2009
My First V8.5.0 project - Getting a decent floating layout
It seemed that the only way to do this was with absolute positioning, which I wanted to avoid if at all possible!
Then I came across this article by Shaun Inman and my problem was solved! He describes the solution much better than I can so I advise you to go have a look see if such things make you moist.
He has a really simple CSS and JS resolution to the problem so I copied it down and into a NSF page to see if it would work and it does!! Wonderfully fluid centered [div]s with a header at the top and a footer at the bottom ..(see below) ... Yippee ... Just what I wanted. Now if I can just get it to work in xPages which is being somewhat of a puzzle, but I shall continue on regardless. More tomorrow.
Friday 2 January 2009
Installing IIS7/php and MySql in under 20 mins on a Vista Home Premium PC
I don't take my position as a Geek lightly I can tell you!
When asked "Can I run IIS / PHP / MYSQL on my Vista Home Premium PC?" I must admit that after the bout of laughter induced hiccups had subsided I was intrigued. Could you do it? Personally my php/mysql stuff is all done via an old PIII with 512Mb of memory running Ubuntu Server, Apache PHP and MySql works like a treat too. However the person that wanted to do this has only one box and it is a relatively nice core duo 2gb yadda yadda and Vista HP. #involuntary shudder#
Now it does has to be said. I havent used Vista that much and I am reacting more on the inital reports rather than the way it is now but it is hard to get over that "EEEEEEUIUUUUUUU" moment when you see it first.
After a bit of googling I came across this link and followed the clear consice instructions to the letter and bugger me they worked. Two reboots in total and there it was an IIS server PHP and MySql all running. No Errors .....Nothing...... total time 23 minutes i am stunned and my chum is happy. 3 Cheers for that chaps at Maximum PC Guides!
When asked "Can I run IIS / PHP / MYSQL on my Vista Home Premium PC?" I must admit that after the bout of laughter induced hiccups had subsided I was intrigued. Could you do it? Personally my php/mysql stuff is all done via an old PIII with 512Mb of memory running Ubuntu Server, Apache PHP and MySql works like a treat too. However the person that wanted to do this has only one box and it is a relatively nice core duo 2gb yadda yadda and Vista HP. #involuntary shudder#
Now it does has to be said. I havent used Vista that much and I am reacting more on the inital reports rather than the way it is now but it is hard to get over that "EEEEEEUIUUUUUUU" moment when you see it first.
After a bit of googling I came across this link and followed the clear consice instructions to the letter and bugger me they worked. Two reboots in total and there it was an IIS server PHP and MySql all running. No Errors .....Nothing...... total time 23 minutes i am stunned and my chum is happy. 3 Cheers for that chaps at Maximum PC Guides!
Sunday 30 November 2008
Two useful tools for IE web devs
I was joined by "Wild" Bill Buchan this weekend for a spot of iSeries Geekery, Guinness,champ and Harbour Bar frolicary but more of that later.
Whilst Bill was saying "oh my life" and having pointer size issues. I did a couple of wee changes to some CSS on an app that was having IE issues. I am sure you know the type, looks fine in FF, Safari, Opera but goes tits up in IE. Now I have been using 2 wee tools that helps me with such things. Bill had not come either tool and suggested I throw it out to the web dev horde.
I am as I am sure you all are users of Firebug in FF and long for a similar product for IE. Well Companion.JS from the very nice people at MyDebugBar is a free product that "faces" the Microsoft Script Debugger in a very Firebug way. Full install instructions can be found at the link above, oh and did i mention it is free :-) we here at DYM like free! Free is good!
The other tool comes from the same crowd and is called "My Debug Bar" and although you have to pay for it, you can download it try before you buy.
Now it doesn't debug JS (Companion.JS does that) but it does have a real whiz bang DOM inspector.. you can drag the inspector onto the browser pane point it at an element and get all the details about it. The CSS the element has (and has inherited)
for finding the source of those annoying glitches that make your web page look like shite it is invaluable. The HTML checker is pretty cool too and I use it frequently
Like I said previously you have to pay for MyDebugbar and it is 59 euros and if you do a lot of IE development this tool will pay for itself very quickly.
Whilst Bill was saying "oh my life" and having pointer size issues. I did a couple of wee changes to some CSS on an app that was having IE issues. I am sure you know the type, looks fine in FF, Safari, Opera but goes tits up in IE. Now I have been using 2 wee tools that helps me with such things. Bill had not come either tool and suggested I throw it out to the web dev horde.
I am as I am sure you all are users of Firebug in FF and long for a similar product for IE. Well Companion.JS from the very nice people at MyDebugBar is a free product that "faces" the Microsoft Script Debugger in a very Firebug way. Full install instructions can be found at the link above, oh and did i mention it is free :-) we here at DYM like free! Free is good!
The other tool comes from the same crowd and is called "My Debug Bar" and although you have to pay for it, you can download it try before you buy.
Summary of features
* Menu to customize the DebugBar and check updates.
* Toggle the Development bar
* Alert on javascript errors
* Send page screenshot by email
* Color picker
* Resize IE window
* Zoom page
* View source code
* View MSHTML integrated ActiveX source code
* View HTML DOM Tree
* View original ad interpreted source code
* View tab attributes
* Edit tab attributes
* View HTTP and HTTPS headers
* View page cookies
* Validate html code for main page and frames/iframes
* List all javascript functions
* View javascript function code
* Execute javascript code in the currently loaded page
* Get information about currently loaded page
Now it doesn't debug JS (Companion.JS does that) but it does have a real whiz bang DOM inspector.. you can drag the inspector onto the browser pane point it at an element and get all the details about it. The CSS the element has (and has inherited)
for finding the source of those annoying glitches that make your web page look like shite it is invaluable. The HTML checker is pretty cool too and I use it frequently
Like I said previously you have to pay for MyDebugbar and it is 59 euros and if you do a lot of IE development this tool will pay for itself very quickly.
Tuesday 5 August 2008
HELP ! where are the WAS plugins for domino in Version 8.0.1?
Any gurus out there lend a hand please.
Where have the following gone cos I cant find them on our 8.0.1 servers
c:\\data\plugins\plugin-cfg.xml
c:\\data\domino\\w32\
has the WAS plugin ceased to be for notes.
The reason I ask is we want to run one of the servers behind an IIS server and use it as a front end server on the dangerous outside the firewal and the plugin used to relay the data back and forth to the domino server. Anyone done this any tips traps redbooks etc you can point me at would be gratefully received! This is virgin territory for me.
Where have the following gone cos I cant find them on our 8.0.1 servers
c:\
c:\
has the WAS plugin ceased to be for notes.
The reason I ask is we want to run one of the servers behind an IIS server and use it as a front end server on the dangerous outside the firewal and the plugin used to relay the data back and forth to the domino server. Anyone done this any tips traps redbooks etc you can point me at would be gratefully received! This is virgin territory for me.
Saturday 2 August 2008
People who aren't me
AS part of the whiole Cuil nonsense once again I made the mistake of looking for myself I have and I have found a new someone that isn't me .... this is him, he is an "account executive" and younger and better looking than me....(B%^$&*d!)
So far I have found
(a) A German porn star that looks very very like me, so much so I have been asked for an autograph at the Ocktoberfest.
(b) A celebrity chef on the Food Channel in the US one of the "Hearty Boys"
(c) A film Star of some note ... (Deeply Cool!)
(d) An Analogue Design Engineer ... (now thats impressive)
(e) A Sinn Fein member of the Irish parliment ... (That isn't impressive at all!)
(f) A Hurler (irish sport like field hockey but with less teeth)
Perhaps the grass is always greener on the other side of the hill, but squirrel! Why do they all seem to be younger better looking, more successful than me and mores to the piont higher up on GOOGLE?
Monday 30 June 2008
Adobe pushes Acrobat into Multimedia and challenges a little bit of the Domino world
Geeky followers here is something to have a play with if you are bored. Adobe9 (currently beta and due for gilding in July) introduces flash integration, portfolios and hosted collaboration services. I used to hate PDF it was "printer monkey" world and I spent long enough there in the early 80's. My dislike a side PDF has become fairly pervasive. Open Office exports documents to PDF, M$ Orrifice does it with a free add on (soon I am told to changed to there as standard) But now your 'umble PDF will be able to hold Video!...
I sensed 10,000 notes Mail Admin's buttocks clench there at the thought of the potential increase in mail size and how will we weed out ordinary PDF's from someone trying to sneak "Lavidious Linda Licks Loins III"
onto the corporate network by calling it Quarter_4_Returns.pdf .. sure without things like that the world would be a boring place. This is where Adobe's new hosted collaborative service comes in. You can find here it is beta it is free and you get 5gb of space to fill up with documents you create with BUZZWORD their online Word Processor or with file formats. CONNECTNOW is the other tool and is like a Sametime web conference. I have had a play with BUZZWORD and it is Google.Docs in a party frock with a hint of potential excitement once the kids are in bed.
Go have a play ... it is interesting and the design (all flash) is excellcent
I think it will, given the inroads the PDF format has made into our IT lives, yet more people a glimpse of the value what Web 2 and Enterprise 2 is capable of.
Monday 23 June 2008
Getting intimate with Javascript objects part #2 - the modus operandi of methods
OK Gentle reader here we go with part 2 of this thread and tonight we will a closer look at methods. Now this has NOTHING to do with the way an actor analyzes deeply the motivations and emotions of the character in order to personify him or her with psychological realism and emotional authenticity (... och bless isnt he such a LOVEIEE!...) having said that Robert De Niro as Travis Bickle, need I say more?
... I digress. JS Objects and their methods. Put bluntly methods do things. They are just like ordinary JS functions except they are invoked through the object they are associated with.
Yesterday is said "You are not constrained when it comes to the type of Properties you can store in an object, any of the JS data types can be stored as a property in an object" ... remember? Well the other thing you can store as a data value is a function.
"No" i hear you cry "how do they do that?"
And I would reply, were you here "There were 2 people who knew, God and me, and now only God knows" so basically who cares, functions can be stored in the same way as data values! YIPEE! Ok so how do I "do" a method. Well lets look at this object.
var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
After this code has run in the memory of the browser is an object called MyDingALing
which has two properties LittleBittyBoy which has a boolean value of true and SilverBells which has a value of "On String" lets say we want to add a method to this object we do this
var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
MyDingALing.playWith = function() { alert("Ooh you naughty BOY!") }
To invoke this all you need to do is this
MyDingALong.playWith()
Oddly this code actually works click below
Now methods have one very very important property and it is this. No really it is this. Yes this.
Sorry about that... geek pun.The this keyword in JS is the hook by which we can refer to the object that contains the method we are processing. Consider this
....(sorry did it again but this time by accident :-) )
var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
MyDingALing.playWith = function() { msgText = this.LittleBittyBoy?" are ":" are not ";
alert("You "+msgText+" in possession of the correct Little-Bitty-ness!")
}
this.LittleBittyBoy refers to the value stored in that property of object that invokes the
playWith() method. For those of you going WTF is something?this:that; Well it is a short hand way of doing an if .. then.. else and it works like this
[test of something that will evaluate to true or false]?[true result]:[false result];
OK?
So if I set the LittleBittyBoy property to true what happens
and if I set the LittleBittyBoy property to false what happens
Exciting init?
Anyway that is how you DO JS methods on an object.
Tomorrow's wander will be around the busty statues at the bottom of the JS garden that are Prototypes and Inheritance.
... I digress. JS Objects and their methods. Put bluntly methods do things. They are just like ordinary JS functions except they are invoked through the object they are associated with.
Yesterday is said "You are not constrained when it comes to the type of Properties you can store in an object, any of the JS data types can be stored as a property in an object" ... remember? Well the other thing you can store as a data value is a function.
"No" i hear you cry "how do they do that?"
And I would reply, were you here "There were 2 people who knew, God and me, and now only God knows" so basically who cares, functions can be stored in the same way as data values! YIPEE! Ok so how do I "do" a method. Well lets look at this object.
var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
After this code has run in the memory of the browser is an object called MyDingALing
which has two properties LittleBittyBoy which has a boolean value of true and SilverBells which has a value of "On String" lets say we want to add a method to this object we do this
var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
MyDingALing.playWith = function() { alert("Ooh you naughty BOY!") }
To invoke this all you need to do is this
MyDingALong.playWith()
Oddly this code actually works click below
Now methods have one very very important property and it is this. No really it is this. Yes this.
Sorry about that... geek pun.The this keyword in JS is the hook by which we can refer to the object that contains the method we are processing. Consider this
....(sorry did it again but this time by accident :-) )
var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
MyDingALing.playWith = function() { msgText = this.LittleBittyBoy?" are ":" are not ";
alert("You "+msgText+" in possession of the correct Little-Bitty-ness!")
}
this.LittleBittyBoy refers to the value stored in that property of object that invokes the
playWith() method. For those of you going WTF is something?this:that; Well it is a short hand way of doing an if .. then.. else and it works like this
[test of something that will evaluate to true or false]?[true result]:[false result];
OK?
So if I set the LittleBittyBoy property to true what happens
and if I set the LittleBittyBoy property to false what happens
Exciting init?
Anyway that is how you DO JS methods on an object.
Tomorrow's wander will be around the busty statues at the bottom of the JS garden that are Prototypes and Inheritance.
Thursday 12 June 2008
Javascript event handling - a quick primer for beginners
Ok It has been a while since I had a techie slant to my posts. But this week gave me an excuse to dig deeper into the whys and wherefores associated with the JS event model which to be honest can be somewhat difficult to get your head around.
So if you are just new to javascript or have been afraid to wander around in the world of synthesizing events this post may be for you. Heaven knows I am a simple man replete with a complete set of simple pleasures (some of which are only legal in Kentucky) sadly the event model of the major browsers had passed me by, basically because most of the events I needed were already there so I just used them. However there comes a time in every geeks life when you have to hold your nose, ensure the drawstring on your coding speedos are tied on tight and just jump right in. Which is what I did this week when it became apparent that the order JS fires the events in was causing us accessibility problems. This is what I have learned ... and if one of the luminaries that might come across this post notices a fubar please let me know and I will correct it.
OK Event order
lets say you have two elements on inside the other like this (i'm using [] instead of<>)
[div id='div1' onclick='dothis()']
[span id='span1' onclick='dothat()'] Captian Carrot is Very Tall [/span]
[/div]
Your user clicks on the SPAN tag contents .. which fires both the SPAN and DIV events
"Thats Fair enuff"i hear you say, but what order does it do it in? Would it surprise you to know that there are 3 different models, IE , Mozilla and in the middle sitting on the fence spitting on both sides is the W3C model. ~sigh~
Mozilla says that the DIV event fires first then the SPAN - This is called capturing
IE says that the SPAN event fires first then the DIV - This is called bubbling
W3C will capture DIV,go down to the SPAN then bubble back up to the DIV again
Fascinating init?
Now this is were you the web developer rip of your shirt, sling a bandelero of bullets over your shoulder and tie your "popular computing " bandana around your head and get all Rambo with your code.
The addEventListener([event to listen for],[code to run],[type flag]) method allows you to choose which model you want. The important bit being the [type flag] which is boolean and if you set it to true the event is set to capturing if false it is set to bubbling.
So lets look at
[div id='div1']
[span id='span1'] Captian Carrot is Very Tall [/span]
[/div]
Note I have taken out the event handles from the HTML, instead I add them into the JS on the page. Like this
document.getElementById('div1').addEventListener('click',dothis,true)
document.getElementById('span1').addEventListener('click',dothat,false)
Now this is important .... bubbling or capturing will ALWAYS happen, that is unless you stop it.
If you wanted to stop the dothat from being processed after dothis you would do something like this to ensure that both major browser types stop were you want then to stop.
So if you are just new to javascript or have been afraid to wander around in the world of synthesizing events this post may be for you. Heaven knows I am a simple man replete with a complete set of simple pleasures (some of which are only legal in Kentucky) sadly the event model of the major browsers had passed me by, basically because most of the events I needed were already there so I just used them. However there comes a time in every geeks life when you have to hold your nose, ensure the drawstring on your coding speedos are tied on tight and just jump right in. Which is what I did this week when it became apparent that the order JS fires the events in was causing us accessibility problems. This is what I have learned ... and if one of the luminaries that might come across this post notices a fubar please let me know and I will correct it.
OK Event order
lets say you have two elements on inside the other like this (i'm using [] instead of<>)
[div id='div1' onclick='dothis()']
[span id='span1' onclick='dothat()'] Captian Carrot is Very Tall [/span]
[/div]
Your user clicks on the SPAN tag contents .. which fires both the SPAN and DIV events
"Thats Fair enuff"i hear you say, but what order does it do it in? Would it surprise you to know that there are 3 different models, IE , Mozilla and in the middle sitting on the fence spitting on both sides is the W3C model. ~sigh~
Mozilla says that the DIV event fires first then the SPAN - This is called capturing
IE says that the SPAN event fires first then the DIV - This is called bubbling
W3C will capture DIV,go down to the SPAN then bubble back up to the DIV again
Fascinating init?
Now this is were you the web developer rip of your shirt, sling a bandelero of bullets over your shoulder and tie your "popular computing " bandana around your head and get all Rambo with your code.
The addEventListener([event to listen for],[code to run],[type flag]) method allows you to choose which model you want. The important bit being the [type flag] which is boolean and if you set it to true the event is set to capturing if false it is set to bubbling.
So lets look at
[div id='div1']
[span id='span1'] Captian Carrot is Very Tall [/span]
[/div]
Note I have taken out the event handles from the HTML, instead I add them into the JS on the page. Like this
document.getElementById('div1').addEventListener('click',dothis,true)
document.getElementById('span1').addEventListener('click',dothat,false)
If the user clicks on the SPAN the following happens:
- The CLICK
event starts in the capturing phase of DIV1 so - The CLICK event on DIV1 fires namely dothis
- The event then shimmys down to the SPAN cos CAPTURE goes DOWNWARD
and no more event handlers for the capturing phase are found.
So the event then moves to its bubbling phase and there is a CLICK event so dothat() is executed. - The event travels upwards again and checks if any element of the target has an event handler for the bubbling phase. This is not the case, so the event dies a natural death.
document.getElementById('div1').addEventListener('click',dothis,false)
document.getElementById('span1').addEventListener('click',dothat,false)
Now if the user clicks on SPAN the following happens:
- Events start in the bubbling phase on SPAN1
- SPAN1's event is triggered and
dothat() runs. - Because Bubbling events go UP travel upwards -DIV1 is checked for
for BUBBLING CLICK events. - DIV1 does so dothis() is executed.
Now this is important .... bubbling or capturing will ALWAYS happen, that is unless you stop it.
If you wanted to stop the dothat from being processed after dothis you would do something like this to ensure that both major browser types stop were you want then to stop.
function dothis(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
... rest of your code goes here ;
}
OK? Does that make sense?
I will expound more on events and the fun things you can do to mess with
your user's head in a future post.
Monday 12 May 2008
Getting back to the URL you where at when you opened a document.
I was explaining this to a junior dev today and thought i would pass it on.
If you have a Web App with one form but 3 views and the document can be opened from any one of the 3 views. How do you get back to the view you where at when you opened the document in the first place?
There are several ways of doing this, this is mine and it uses a session cookie in the browser to do it.
First you need some cookie handling JS in your form or external JS file, Something like this.
This will create a session cookie (it deletes itself when the current browser window closes) with the current location stored in the cookie.
Then on your form, place a hidden field called BackURL, or something similar, then on the onLoad event of the form have the following
This pulls back the last place you were from the browser and stores it on the form.
Finally on your WQS agent you can use this to get back to your original place by
Alternately you could populate a $$Return field with the contents of the cookie and use that
to redirect the form to the place that you were.
If you have a Web App with one form but 3 views and the document can be opened from any one of the 3 views. How do you get back to the view you where at when you opened the document in the first place?
There are several ways of doing this, this is mine and it uses a session cookie in the browser to do it.
First you need some cookie handling JS in your form or external JS file, Something like this.
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
createCookie("goback",location.href,0)
This will create a session cookie (it deletes itself when the current browser window closes) with the current location stored in the cookie.
Then on your form, place a hidden field called BackURL, or something similar, then on the onLoad event of the form have the following
document.forms[0].BackURL.value = readCookie("goback");This pulls back the last place you were from the browser and stores it on the form.
Finally on your WQS agent you can use this to get back to your original place by
print |[script language='javascript']location.href='|+ThisDoc.BackURL(0)+|';[/script]|
Alternately you could populate a $$Return field with the contents of the cookie and use that
to redirect the form to the place that you were.
HTML Check Boxes values when Disabled by Javascript clear themselves when saved
Caught this one today.
You have a check box on a form
For one reason or another you use the JS
document.forms[0].myCheckBox.disabled = true;
to stop users changing it on the form.
However if you then SAVE the form back to the Domino server with the disabled status of the field still set to TRUE. Any values the checkbox had will disappear and the field will saved as empty!
This does not happen with RADIO , TEXT and TEXTAREA elements. The only affected one appears to be CHECKBOX. I came across this because I was using AJAX to go back to the server to get some information and based on that one of three sets of CheckBoxes would become available the other 2 would be set to fixed values and then disabled to stop the user breaking the logic.
Simply puting an onSubmit functions that turns the CHECKBOXes Disabled status back to FALSE prevents this from happening.
You have a check box on a form
For one reason or another you use the JS
document.forms[0].myCheckBox.disabled = true;
to stop users changing it on the form.
However if you then SAVE the form back to the Domino server with the disabled status of the field still set to TRUE. Any values the checkbox had will disappear and the field will saved as empty!
This does not happen with RADIO , TEXT and TEXTAREA elements. The only affected one appears to be CHECKBOX. I came across this because I was using AJAX to go back to the server to get some information and based on that one of three sets of CheckBoxes would become available the other 2 would be set to fixed values and then disabled to stop the user breaking the logic.
Simply puting an onSubmit functions that turns the CHECKBOXes Disabled status back to FALSE prevents this from happening.
Sunday 20 April 2008
Aligning Checkboxes in a form for the web
There has to be an easier way of doing this!
When you create a checkbox, the CSS style parms do not work all that well and you get a ghastly thing like this:
Fig1 No styling other that saying there are 3 columns.
What i want is a 5px gap between the box and the label and the label to be a set length.
I have fiddled and footered about with the object trying things like
"[p class='cb1']Customer[p]|Customer" for the available text values in the CB list.
But no matter what I select the list always comes out all higgleded piggly.
Eventually I gave in trying to be smart and I fudged it by doing this
1. Stash the list of available options in an NSF wide Profile Doc Field called SysConfig
2. Place a CB field on the form but Hide it From the Web
3. Place an empty [div] with an id = 'ooi' on the form where I want the Check boxes to appear
3. I ensure the form has "create HTML for all fields"
4. I stick this code on the page up near the top
[script language='javascript']var OOI = '[Computed Text]';[/scrip]
where Computed text =@getprofilefield("SysConfig";"OrgOfIdea");
5. I create a function createOOI() in the JS Header and then call it on the onLoad event of the page
6. The createOOI function looks like this
function createOOI()
{
var OOIa = OOI.split(";");
target = document.getElementById("ooi");
tHTML = "[table]";
ct=1;
for(t=0;t LT OOIa.length;t++)
{
if(ct==4)
{
tHTML=tHTML+"[/tr]"
ct=1;
}
if(ct==1)
{
tHTML=tHTML+"[tr]"
}
tHTML = tHTML+"[td class='cb3'][input style='margin-right:5px;' type='checkbox' name='ooicb' value='"+OOIa[t]+"']"+OOIa[t]+"[/td]"
ct=ct+1
}
tHTML = tHTML+"[/table]";
target.innerHTML = tHTML;
}
07. Place a pseudo class of .cb3 into the CSS file for this form with the width, font, spacing etc set
This results in a nicely formatted table of Checkboxes like this.
Doing it this way means that you have a field with a name OOICB which does not actually appear on the form so you have to do two extra things in the JS.
01. Move the selected boxes from the OOICB field to your hidden parent CB field as a ";" delimited list
02. Test your hidden Parent CB field on page load event after the OOICB has been added to the dom to check those fields that have been selected already.
This is a PAIN and there has to be an easier way but i am buggered if I can see what it is.
Fig1 No styling other that saying there are 3 columns.What i want is a 5px gap between the box and the label and the label to be a set length.
I have fiddled and footered about with the object trying things like
"[p class='cb1']Customer[p]|Customer" for the available text values in the CB list.
But no matter what I select the list always comes out all higgleded piggly.
Eventually I gave in trying to be smart and I fudged it by doing this
1. Stash the list of available options in an NSF wide Profile Doc Field called SysConfig
2. Place a CB field on the form but Hide it From the Web
3. Place an empty [div] with an id = 'ooi' on the form where I want the Check boxes to appear
3. I ensure the form has "create HTML for all fields"
4. I stick this code on the page up near the top
[script language='javascript']var OOI = '
where Computed text =@getprofilefield("SysConfig";"OrgOfIdea");
5. I create a function createOOI() in the JS Header and then call it on the onLoad event of the page
6. The createOOI function looks like this
function createOOI()
{
var OOIa = OOI.split(";");
target = document.getElementById("ooi");
tHTML = "[table]";
ct=1;
for(t=0;t LT OOIa.length;t++)
{
if(ct==4)
{
tHTML=tHTML+"[/tr]"
ct=1;
}
if(ct==1)
{
tHTML=tHTML+"[tr]"
}
tHTML = tHTML+"[td class='cb3'][input style='margin-right:5px;' type='checkbox' name='ooicb' value='"+OOIa[t]+"']"+OOIa[t]+"[/td]"
ct=ct+1
}
tHTML = tHTML+"[/table]";
target.innerHTML = tHTML;
}
07. Place a pseudo class of .cb3 into the CSS file for this form with the width, font, spacing etc set
This results in a nicely formatted table of Checkboxes like this.
Doing it this way means that you have a field with a name OOICB which does not actually appear on the form so you have to do two extra things in the JS.01. Move the selected boxes from the OOICB field to your hidden parent CB field as a ";" delimited list
02. Test your hidden Parent CB field on page load event after the OOICB has been added to the dom to check those fields that have been selected already.
This is a PAIN and there has to be an easier way but i am buggered if I can see what it is.
Tuesday 1 April 2008
Weirdnessin the IE DOM Event Model
Here is a werid if highly esoteric issue I discovered with IE, Well to be fair I didnt, Carl Tyler did when playing with my JS Name Picker Opentf project.
Now I make no secret of the fact I hate iFrames with a passion. I hate them so much I forgot to test the Name Picker App to see if they worked inside one in either IE or FF ....... it didn't in
F***ing IE and here is , as far as I can see the reason why.
I used synthesized events to load the various [divs] within the JS so the developer did not have to code them into the onLoad event of the form or page. Basically when onDomReady was triggered an Init() procedure was called that loaded up the bits and bobs needed for the name picker.
HOWEVER , when you put an iFrame on a page or form the IE event fires at a DOM level for both Parent and iFrame child. So if you override the onLoad event with a listener of your own
even though the code only exists in the iFrame document, it fires when the parent comes ready AND the again because IE thinks the iFrame is ready when it is not. This resulted in my bits and bobs being loaded in the parent and and error when the iFrame couldnt find document.body.
Thankfully it was easily got around for the moment (while i have a play the events and do some head scratching) by placing the INIT() call into the onload event of the iFrame source page. If you do this IE plays ball and does what you expect it to do.
Anyway it gave me an interesting evening and reinforced my belief that the people that coded IE could not find their arses with both hands and a map!
Now I make no secret of the fact I hate iFrames with a passion. I hate them so much I forgot to test the Name Picker App to see if they worked inside one in either IE or FF ....... it didn't in
F***ing IE and here is , as far as I can see the reason why.
I used synthesized events to load the various [divs] within the JS so the developer did not have to code them into the onLoad event of the form or page. Basically when onDomReady was triggered an Init() procedure was called that loaded up the bits and bobs needed for the name picker.
HOWEVER , when you put an iFrame on a page or form the IE event fires at a DOM level for both Parent and iFrame child. So if you override the onLoad event with a listener of your own
even though the code only exists in the iFrame document, it fires when the parent comes ready AND the again because IE thinks the iFrame is ready when it is not. This resulted in my bits and bobs being loaded in the parent and and error when the iFrame couldnt find document.body.
Thankfully it was easily got around for the moment (while i have a play the events and do some head scratching) by placing the INIT() call into the onload event of the iFrame source page. If you do this IE plays ball and does what you expect it to do.
Anyway it gave me an interesting evening and reinforced my belief that the people that coded IE could not find their arses with both hands and a map!
Thursday 27 March 2008
The never ending Web page like Gmail's on domino, is it feasible?
Today I have been thinking about SJAX (I think it should be more corretly PSJAX Pseudo Synchonous JAX) and methods that would allow me to keep the connection open to a client from the server.
I was asked about the feasibility of creating a real time trading room where Ebay Type bidding takes place, but in real time. Bidding rooms last no longer than an hour multiple supplier attendee's each able to see the requirements but not their competitors bids. Where like betting in poker the "current bidder" is passed between the participants.
My intial reaction was to think Java Applet .. then a couple of seconds later an AJAX pages with a timer that polled the server every couple of seconds.. and then what about the never ending web page senario I read about in connection with gmail.
My idea goes along these lines.. (I am sure there is a flashy geeky name for this .. apologies i have no idea what it is)
01. Client logs on to server
02. Client enters bidding "room" by using the normal AJAX method of calling a web agent
03. The agent (one per client) runs and creates Send 99% of the HTML,CSS,JS for the ROOM
04. Then it goes into a loop without closing the connection
while
{
reads "room control" file
is there a response for this client
YES - Send response in an script envelope like this [script]do([actionkey],[actiondata])[/script]
wait for n seconds
}
04. On the client.. I think this is what GMAIL does .. I have a JS function called do() that processes the data as it comes down and does whatever it needs to do based on the key.
05. The client sends data up stream not to this agent but another normal AJAX agent. That agent processes the data and closes with a nominal response BUT updates the ROOM CONTROL file accordingly so that the user gets the response as a DO() command.
this would be how the agent would terminate normally when the client sends a CLOSE request
Now I havent had a go at doing this yet, i will prob have a bash this weekend and see at least if it works. But if any of you have done anything similar I would appreciate your feedback, esp on the admin front. Having long running agents is not a problem for me as a DEV as an ADMIN it makes me nervous, very very nervous.
Steve
I was asked about the feasibility of creating a real time trading room where Ebay Type bidding takes place, but in real time. Bidding rooms last no longer than an hour multiple supplier attendee's each able to see the requirements but not their competitors bids. Where like betting in poker the "current bidder" is passed between the participants.
My intial reaction was to think Java Applet .. then a couple of seconds later an AJAX pages with a timer that polled the server every couple of seconds.. and then what about the never ending web page senario I read about in connection with gmail.
My idea goes along these lines.. (I am sure there is a flashy geeky name for this .. apologies i have no idea what it is)
01. Client logs on to server
02. Client enters bidding "room" by using the normal AJAX method of calling a web agent
03. The agent (one per client) runs and creates Send 99% of the HTML,CSS,JS for the ROOM
04. Then it goes into a loop without closing the connection
while
{
reads "room control" file
is there a response for this client
YES - Send response in an script envelope like this [script]do([actionkey],[actiondata])[/script]
wait for n seconds
}
04. On the client.. I think this is what GMAIL does .. I have a JS function called do() that processes the data as it comes down and does whatever it needs to do based on the key.
05. The client sends data up stream not to this agent but another normal AJAX agent. That agent processes the data and closes with a nominal response BUT updates the ROOM CONTROL file accordingly so that the user gets the response as a DO() command.
this would be how the agent would terminate normally when the client sends a CLOSE request
Now I havent had a go at doing this yet, i will prob have a bash this weekend and see at least if it works. But if any of you have done anything similar I would appreciate your feedback, esp on the admin front. Having long running agents is not a problem for me as a DEV as an ADMIN it makes me nervous, very very nervous.
Steve
Saturday 22 March 2008
The Great Illinois Corn Flake - Resolution
Gentle reader, I wanted to ease you into your Easter Saturday gently without fuss or kerfuffle. However news of great import has just broken. The Great Illinois Corn Flake has been sold!
Yes the cornflake which was withdrawn, added again and withdrawn from auction site eBay over disagreement over "no food" policy has been sold for the princely sum of $1,350 to the owner of TriviaMania.Com.
I am so relieved the issue of the food-iness of cornflakes was causing me sleepless nights and the McDonagh bedsheets were fair tangled by my tossing and turning (oh do stop giggling Nathan!)
I have great hopes for the auction of my Wheetabix with the lotus "waffle-men" apparently embossed on it.
Yes the cornflake which was withdrawn, added again and withdrawn from auction site eBay over disagreement over "no food" policy has been sold for the princely sum of $1,350 to the owner of TriviaMania.Com.
I am so relieved the issue of the food-iness of cornflakes was causing me sleepless nights and the McDonagh bedsheets were fair tangled by my tossing and turning (oh do stop giggling Nathan!)
I have great hopes for the auction of my Wheetabix with the lotus "waffle-men" apparently embossed on it.
Friday 21 March 2008
Thinking about Views, particularly large ones
A few weeks ago i blogged about very large datasets in views, that post came from a desire to maximize performance without usability in a web client. Nathan Freeman amongst others pointed out that very large views should really have a filtering system in both the notes client and on the web.
Thinking about this yes the notes client does make you lazy, categorized views work are easy to get around in, users are used to them and we as developers sometimes fall prone to following the path of least (in this case user) resistance.
So over the past few weeks I have been doing some head scratching about the whole UI thing. Spurred on by posts that posted this toon about design I have tried to do some paper prototypes about a new way (for me) of looking at view navigation.
Needless to say I tried to avoid thinking about coverlfow for fear of band wagon jumping .. that and I having used it on my own iPlod the novelty lasted about a week mainly caused by to many albums to be able to recognize all the covers that and i couldn't be arsed spending the time to get the album art. The more I ignored it the more I came back to variants of the same thing as a potential good idea.
This is the idea I have is something like this:
When the control is unloaded it looks like Fig 1
The user selectes "Content" or "Actions"
Clicking "Content" loads the scroll to The first Level Document types like in Figure 2. For Example approvals , requests etc
Clicking on the scroller moves thru the choices
Clicking on the picture loads the Scroller with the next level down of categorisation.
Using keys or the mouse wheel moves the user thru the levels ... no quite sure how this would work.. prob via a cache.
There would also be a breadcrumb trail below the control So the user would have a visual representation of where they were.
Keyboarders could type "App.." and the scroller would postion the flow at Approvals and you could also use <- and -> to navigate thru the options.
Clicking on Actions would do give the user a list of actions available like .. Create new .. Email to .. etc that would be used in the same way.
Below the control there would be the space where the results of the user selection would appear in table form.
I know this is do-able with a composite application. But i am thinking of doing this all in JS so that the V6 and V7 population can us it as well.
I have the cover flow bit 70% done (for the web) the resizing animations are proving awkward in JS, but i will have a play over easter and see if I can get to grips with that. I am still not sure whether this will be a runner usability wise .. there is rather a lot of clicking
If I manage to get something working i will pop it onto OpenNtf and let the world play with it
Thinking about this yes the notes client does make you lazy, categorized views work are easy to get around in, users are used to them and we as developers sometimes fall prone to following the path of least (in this case user) resistance.
So over the past few weeks I have been doing some head scratching about the whole UI thing. Spurred on by posts that posted this toon about design I have tried to do some paper prototypes about a new way (for me) of looking at view navigation.
Needless to say I tried to avoid thinking about coverlfow for fear of band wagon jumping .. that and I having used it on my own iPlod the novelty lasted about a week mainly caused by to many albums to be able to recognize all the covers that and i couldn't be arsed spending the time to get the album art. The more I ignored it the more I came back to variants of the same thing as a potential good idea.
This is the idea I have is something like this:
When the control is unloaded it looks like Fig 1The user selectes "Content" or "Actions"
Clicking "Content" loads the scroll to The first Level Document types like in Figure 2. For Example approvals , requests etc
Clicking on the scroller moves thru the choices
Clicking on the picture loads the Scroller with the next level down of categorisation.
Using
There would also be a breadcrumb trail below the control So the user would have a visual representation of where they were.
Keyboarders could type "App.." and the scroller would postion the flow at Approvals and you could also use <- and -> to navigate thru the options.
Clicking on Actions would do give the user a list of actions available like .. Create new .. Email to .. etc that would be used in the same way.
Below the control there would be the space where the results of the user selection would appear in table form.
I know this is do-able with a composite application. But i am thinking of doing this all in JS so that the V6 and V7 population can us it as well.
I have the cover flow bit 70% done (for the web) the resizing animations are proving awkward in JS, but i will have a play over easter and see if I can get to grips with that. I am still not sure whether this will be a runner usability wise .. there is rather a lot of clicking
If I manage to get something working i will pop it onto OpenNtf and let the world play with it
Subscribe to:
Posts (Atom)