Articles
Da Honey Pot
About meBizzyBee’s BizzyThoughts
Archive for the 'JavaScript' Category
In the first part of this article I talked about why you should consider the Spry framework as a valid alternative for input validation in the browser. Now I’ll demonstrate how it works in Dreamweaver and in the next article, how to transfer the validation to Domino Designer (I decided to split up the article in different parts for the Dreamweaver side and for the Domino Designer side).
Adding the input validation to a form in Dreamweaver CS3
I invite you to start the beetorial to the left. In less than 5 minutes it shows you how to add input validation to a form in Dreamweaver CS3 (although it took more than 5 hours to build it :-)). I recommend running it in full screen (press <F11> in most browsers).
It’s not only intended for Notes developers, but is also useful for anybody that wants to learn about input validation in Dreamweaver CS3.
In the beemo I start with a form I already prepared (it’s loosely based on a form I found in The Art & Science Of CSS, a very inspiring Sitepoint book about practical and visually stunning CSS techniques.
I add validation to fields for name, email, date and checkboxes and I show how it looks like in the browser.
Bare in mind that the validation messages look a bit boring at the moment, but in a future part I will demonstrate how easy it is to create validation eyecandy.
I know there’s Dojo. I know there’s Prototype. jQuery. There are a lot of JavaScript libraries available, and most of them have objects dealing with input validation. I saw Rocky’s session about Dojo on LotuSphere. An inspiring session that got me started delving into it, but I found myself a bit disappointed about how it looks. There are 3 themes available that change the look and feel a bit, but they all look rather ugly to me. Creating a theme of your own, so they tell, is a huge work (and that’s why there are only 3 themes).
While thinking about alternatives, I started looking at Spry, the Adobe’s framework embedded in Dreamweaver CS3. Spry can do much more than input validation, but for now I’m only interested in this part. It’s available for free, but if you want the ease-of-use you will need Dreamweaver CS3.
In this first article about Spry, I want to show you why it can be important to you if you are a Dreamweaver user. It’s just a warming-up to get your attention actually :-).
In a second article I’ll start with a Dreamweaver prototype form and Spry it up and in a third article, I’ll transfer it to a Notes webform. If there’s enough interest, a fourth article could be about Sprying up an existing Notes webform.
When Firefox is your webmachine and you need to debug your JavaScript code, the answer is simple: use Firebug. 6 950 000 google search results can’t be wrong (ehm, t.i., if all hits are about the tool and we forget a firebug is also a beastie, but you get the point).
When it comes to debugging in IE (if IE is your target browser, you have to be able to test in it), choices are more limited. There used to be one from Microsoft, and there are some 3rd party tools for it too.
In this article I posted a solution to collapse/expand all sections on a Domino web page. However, there was one issue with it: it doesn’t work in Firefox, because Domino renders different html for sections in non-IE browsers.
In non-IE environments, expanding a section means that a request is send to the server to retrieve the section data. This is silly, because the code for this to happen clientside shouldn’t be that different from the IE javascript.
This post is about how to create collapse/expand sections that work in all browsers (as long as JavaScript is enabled). It’s an alternative for this solution, for people who are wanting to put a little more effort in it.
Let’s start with a demonstration before explanation.
A little warning: the little twisty icons don’t show up in my demo page, because I cannot put the default Domino twisties where they should belong. This shouldn’t be a concern for you: if you copy/paste the source of that page in a Domino page and mark the page as html, this should work for you.
UPDATE: if you’re ready to put a little more effort in the implementation, this cross-browser solution is more suitable.
A post on Notes.Net inspired me today: somebody asked how you can expand/collapse all sections in a document on the web with the click of a button.
This is the code I came up with. Throw it in the JS Header of the page and call it with a button (here I used 2 separate functions for the expand and collapse, but it can’t be that hard to make it one button if desired).
(2 votes, average: 5 out of 5)
Loading ...