The NSF containing the recipe from my four Dojo posts, is available for download and reuse - plus there is an added bonus too! If you want to see the code for;
Dojo Dialogs for Validation and Help.
Dojo Stack Container for Wizards.
Dojo : Its not just Eye Candy.
Dojo without JavaScript Enabled.
The added bonus ?
I've included all of the image resources, example framesets, outlines, forms from the post Lotus Notes and Web UI Examples. That's right, if you have a lotus notes application that is looking a little 'long in the tooth' then you can use the application resources to create a little more up-to-date look.
How to get started ?
1 - download the zipped nsf from here.
2 - sign the agent on you server.
3 - open the register form using http://[yourserver]/[file&directory]/register?open
A little more about the examples.
The NSF is to demonstrate the Dojo samples from the articles, I tried to keep the number of places where the code is located to a minimum. So you'll only need to look in the register form and the two agents. In practice you could take the JS Header contents and place them in a separate file.
The database is version ND8 (8.0.1), but should work the same for ND7 - I haven't tried that.
The dojo version is 1.0.2, which was the latest when I started using Dojo - again, should work with later versions but I haven't tried.
What if I need more help with the example ?
You have two options,
1) - Free. I'll do my best to answer - but that will be limited to my availability and workload.
2) - Hire me. If you need more involved assistance or have a deadline.
Wednesday, August 06, 2008
Friday, August 01, 2008
Dojo without JavaScript Enabled
So what can you do if the users browser does not have JavaScript enabled ?
Even in todays day and age, there are still a small minority of Joe Average users that either don't have JavaScript enabled through bad set-up or overzealous security settings. Even for an intranet you might like to be able to help out the poor employee that 'some how' has managed to turn off JavaScript and give them a message that all is not well with the page that they are using.
If you are using JavaScript or an Ajax toolkit for use in building forms that collect data, and rely on scripting to perform validation, then having JS disabled can be a problem.
Like most things there are various schools of thought and regardless of whether you choose progressive enhancement or graceful degradation, you should at least have an alternative to solely relying on JS being available.
I decided that a simple graceful degradation was the most appropriate option for me. That is, if JS is disabled then show an error message and disabled the Ajax form. The solution is so simple that I wasn't sure if it would be worth a post - but hey what the heck!
The idea is to hide all the forms and buttons using css, then if JS is disabled use the <noscript> tag to display a suitable message. If JS is available, then use the Dojo goodness to replace the style of the form objects.
In Domino, I added a subform to contain the contents between the noscript tag.
<noscript><img src="design/bb70/$file/error.jpg"/>
<h1>Error : JavaScript is not enabled</h1>
<p ><strong>Message:</strong>Your browser does not have JavaScript enabled and is required for this website to function correctly.</p>
<p ><strong>Action:</strong>You can do one of the following;</p>
<ul>
<li>Enable JavaScript for this website in your browser</li>
<li>Contact your IT support department or supplier to get JavaScript enabled in your browser</li>
</ul>
<p >You will need to refresh this page once JavaScript is enabled.</p>
</noscript>
In the sylesheet add in a new class.
.noscript {
display:none;
}
In the HTML node that contains the form, update (or add) the class to be "noscript", which hides the form so that it can't be submitted. Do the same for other nodes that rely on JS.
In the onload() event of the form, add the code to change the hidden forms, to be visible using the dojo.removeClass and dojo.addClass.
dojo.removeClass("caseForm","noscript");
dojo.addClass("caseForm","case-form");
dojo.removeClass("dojopopups","noscript");
You can take the noscript idea further and provide an alternative non JS form to submit, rather than an error message. You could also use server side validation as the definitive way ensure the forms submitted have been completed correctly.
Even if you don't expect JS to be disabled, implementing a system like the one described is simple and quick enough, that its not much extra effort and might just save you a headache or two.
Even in todays day and age, there are still a small minority of Joe Average users that either don't have JavaScript enabled through bad set-up or overzealous security settings. Even for an intranet you might like to be able to help out the poor employee that 'some how' has managed to turn off JavaScript and give them a message that all is not well with the page that they are using.
If you are using JavaScript or an Ajax toolkit for use in building forms that collect data, and rely on scripting to perform validation, then having JS disabled can be a problem.
Like most things there are various schools of thought and regardless of whether you choose progressive enhancement or graceful degradation, you should at least have an alternative to solely relying on JS being available.
I decided that a simple graceful degradation was the most appropriate option for me. That is, if JS is disabled then show an error message and disabled the Ajax form. The solution is so simple that I wasn't sure if it would be worth a post - but hey what the heck!
The idea is to hide all the forms and buttons using css, then if JS is disabled use the <noscript> tag to display a suitable message. If JS is available, then use the Dojo goodness to replace the style of the form objects.
In Domino, I added a subform to contain the contents between the noscript tag.
<noscript><img src="design/bb70/$file/error.jpg"/>
<h1>Error : JavaScript is not enabled</h1>
<p ><strong>Message:</strong>Your browser does not have JavaScript enabled and is required for this website to function correctly.</p>
<p ><strong>Action:</strong>You can do one of the following;</p>
<ul>
<li>Enable JavaScript for this website in your browser</li>
<li>Contact your IT support department or supplier to get JavaScript enabled in your browser</li>
</ul>
<p >You will need to refresh this page once JavaScript is enabled.</p>
</noscript>
In the sylesheet add in a new class.
.noscript {
display:none;
}
In the HTML node that contains the form, update (or add) the class to be "noscript", which hides the form so that it can't be submitted. Do the same for other nodes that rely on JS.
In the onload() event of the form, add the code to change the hidden forms, to be visible using the dojo.removeClass and dojo.addClass.
dojo.removeClass("caseForm","noscript");
dojo.addClass("caseForm","case-form");
dojo.removeClass("dojopopups","noscript");
You can take the noscript idea further and provide an alternative non JS form to submit, rather than an error message. You could also use server side validation as the definitive way ensure the forms submitted have been completed correctly.
Even if you don't expect JS to be disabled, implementing a system like the one described is simple and quick enough, that its not much extra effort and might just save you a headache or two.
Subscribe to:
Posts (Atom)