How did I do it

Overview
JavaScript Libraries are no longer just for leading edge web development. They used to be hard to learn and it was easier to code the functions yourself.
Now they provide benefit to all web developers

• Cross-browser support – you don't have to do it!
• Fairly stable – fewer bugs
• Well documented
• Well supported
• Much easier to design with and use
• Provide a base for others to build on.
• Large number of features

JavaScript Libraries
The current list of libraries available for use on the web:

• jQuery v1.2.6 – Nokia and MS support
• Sarrisa v0.9.9.4
• Prototype v1.6
• Scriptaculous v1.8.2
• Provides visual effects for Prototype
• Spry v1.6.1 - Adobe
• YUI v2.6 - Yahoo
• EXT v2.2
• MooTools v1.2.1
• Dojo v1.2.3

So why would you want to use Dojo?

• Because IBM supports it.
• Because it's on the 8.5 server
• Version 1.1.1
• It's used in xPages widgets
• DateTime, typeahead, views, rich text editor
• The new web rich text control is built with it
• iNotes
• Supports localization
• More will be coming in 8.5.1, 8.5.2.....

Overview of Dojo
Dojo has 3 parts:

• Core - Event handlers, DOM manipulation, graphical effects        
• Dijit - Widgets – the really fun part!
• DojoX -complex widgets, graphing and charting

Dojo Install Locations

• To use the Domino 8.5 Version the url is  /domjs/dojo-1.1.1/dojo
• You can also install Dojo under the HTML folder /dojo-1.2.3/dojo
• You can use CDN like AOL - http://o.aolcdn.com/dojo/1.0.0
• You can import the Dojo files into a NSF as file resources. /dbname.nsf/dojo
• Use WebDav or download someone else's copy of Dojo in the file resource of a NSF..
• Use Dojomino

Dojo in Domino 8.5
Domino 8.5 ships with version 1.1.1 of Dojo located in data\domino\js\dojo-1.1.1



Web site documents
domjs is defined on the web document


What to do with it
You have Dojo on your server now what do you do with it?

• Add controls to web forms
• Use the rich text editor control
• Add Date or Time pickers
• Field validations
• Tool tips
• Lots of web 2.0 features
• First thing is to test the install with: /domjs/dojo-1.1.1/dijit/themes/themeTester.html

When you try the Dojo test pages they will look ugly! This is because Domino 8.5 Dojo provides Themes support for xPages. They are set on the Database and form. So use the standard Dojo CSS – tundra or soria if you are not using xPages.

Start with the Header
First you need to include the CSS files in the HTML Head Content::


"<style type=\"text/css\">" + @NewLine +
"@import \"/domjs/dojo-1.1.1/dijit/themes/tundra/tundra.css\";"+
"@import \"/domjs/dojo-1.1.1/dijit/themes/soria/soria.css\";"+
"@import \"/domjs/dojo-1.1.1/dojo/resources/dojo.css\";" +
"</style>"


HTML Header
This line will cause Dojo to load and parse the other controls:


"<script type=\"text/javascript\"
src=\"/domjs/dojo-1.1.1/dojo/dojo.js\"
djConfig=\"parseOnLoad: true\">
</script>"


“parseOnLoad:true” – Enables the page-load parsing of the widgets and in-markup code. You can add “isDebug:true” to enable debugging messages :
djConfig="parseOnLoad:true, isDebug:true"


addOnLoad Event
The Dojo addOnLoad is used to insure all functions are loaded and ready.


//common method of loading code onLoad
var init = function(){
console.log("This runs when page is ready." +
          "It will appear in the console");        
};
dojo.addOnLoad(init);


You can use the Form JS onLoad event if your careful  - VERY careful - It's NOT recommended

Rich Text Editor - Choices

• Using HTML - The default behavior renders the control as HTML.
• Using Java Applet -  renders the control as an applet. This allows web users to see mouse-over distinctions for items in the outline, including change of color to indicate a selected item, and see background items.
• Using Best Fit for OS - Domino Web server renders the control as it sees fit depending on the browser.
• Using JavaScript Control - The control is built with the Dojo toolkit using the IBM version of the widget. The benefits are similar to using an applet, but uses standard HTML and CSS.

Rich Tech Editor Caveats
The content is saved in MIME format and is converted to Notes CD if edited or saved in Notes. Not everything converts correctly:

• Fonts: Web fonts are x-small, small, medium, large, etc. where the Notes fonts are point sizes.
• Table borders
• Embedded images – visible but lost when saved
• Tab tables – only the visible row is saved
• “Hide when” - if hidden from web are lost during the save

The Domino Rich Text Control is set to prevent Dojo from parsing controls. So your choice is to load the control yourself or change the behavior for the server.
To change the behavior for the server, edit this file on the server:
data\domino\template\dojo-1.1.1\dom_common.htm


<script type="text/javascript" src="&DOMINO_CTRL_URI_JSLIB;/dojo/dojo.js" djConfig="locale: '&DOMINO_CTRL_ACCEPT_LANGUAGE;', isDebug: true, parseOnLoad: true"></script>


Restart http

Some of the Dojo Widgets

• dijit.Editor
• dijit.form.Textarea
• dijit.form.Button
• dijit.form.ValidationTextBox
• dijit.form.ComboBox
• dijit.Tooltip
• dojox.validate.regexp
• dijit.form.CheckBox
• dijit.form.TimeTextBox
• dijit.form.DateTextBox
• dijit.Menu
• dijit.form.Slider

Using the widgets
You have to add the controls you need to the html head content:

"<script type=\"text/javascript\">" +
"dojo.require(\"dojo.parser\");"  +
"dojo.require(\"dijit.Editor\");" +
"dojo.require(\"dijit.form.Textarea\");" +
"dojo.require(\"dijit.form.Button\");" +
"dojo.require(\"dijit.form.ValidationTextBox\");"+
"dojo.require(\"dijit.form.ComboBox\");" +
"dojo.require(\"dijit.Tooltip\");" +
"dojo.require(\"dojox.validate.regexp\");" +
"dojo.require(\"dijit.form.CheckBox\");" +
"dojo.require(\"dijit.form.TimeTextBox\");" +
"dojo.require(\"dijit.form.DateTextBox\");" +
"dojo.require(\"dijit.form.TextBox\");" +
"</script>"


TextBox
The base widget dijit.form.Textbox by itself can trim, change case, and require input.
Add to the Field Properties other: dojoType="dijit.form.TextBox" trim="true" propercase="true"

Available Attributes:

• Lowercase - Converts all characters to lowercase
• Maxlength - HTML INPUT tag maxlength declaration.
• Propercase - Set the first character of each word to uppercase
• Trim - Removes leading and trailing whitespace
• uppercase

ValidationTextBox
Validating the input when the box loses focus

• InvalidMessage – the error message
• PromptMessage – display when user enters field
• Required – Field is required to have a value
• regExp - Uses the standard Regular expression syntax

The start and ending qualifiers ^ and $ are implicit
You can use the HTML attributes for the field or the Field Properties HTML other:


dojoType="dijit.form.ValidationTextBox"
regExp="\d{5}"
required="true"
invalidMessage="Zip code needs 5 digits."



NumberTextBox
Similar to the textBox, lets you control the values entered.

Attributes:

• currency: the 3 letter currency code - “USD"
• fractional: (currency only) to include the fractional portion.
• locale: override the locale on this widget only
• pattern: override localized convention with this pattern.
• places: number of decimal places to accept.
• strict: strict parsing
• symbol: (currency only) override currency symbol.
• type: Format type: decimal, percent, currency

DateTextBox
Returns the Selected date in text format but it's easy to convert to Notes date/time

Attibutes:

• datePattern: override localized convention using this pattern regardless of locale.
• formatLength: choose from full, long, medium or the default format of short
• locale: override the locale on this widget only, choosing from djConfig.extraLocale
• Strict (default is false):
• True - parsing matches exactly by regular expression.
  False -  more tolerant matching is used for abbreviations and some white space.

ComboBox

Works like a Select list but lets user enter a value or select a value.

dojoType="dijit.form.ComboBox" autocomplete="false" value="Breakfast" onChange="setVal1"

Can use dojo.data to pull selection from server. The displayed value is passed back so the option tags do not have hidden submit values .
To use a hidden value use FilteringSelects.

FilteringSelect
Filter the combo box as the user enters text. It will display an error if the user enters invalid selection. Good for long list that normally need scrolling.

In the US it great for selection of states.: "dojo.require(\"dijit.form.FilteringSelect\");" \
In other properties add this:  dojoType="dijit.form.FilteringSelect" autocomplete="true""

Checkbox and RadioButtons
Both are included in the CheckBox.js so use dojo.require("dijit.form.CheckBox").
Work like the normal Domino equivalents, so use the Dojo version more for consistency then for additional functionality

NumberSpiner
Used to let the user enter integer values.
The down and up arrow buttons "spin" the number up and down.
Holding down a button makes the spinning accelerates.

Attrributes

• LargeDelta – amount adjusted using the PgUp/Dn keys
• SmallDelta  - amount adjusted using the arrow keys
• DefaultTimeout - milliseconds before a held button becomes typematic
• TimeoutChangeRate - fraction of time used to change the typematic timer between events

 

Form Widget
Provide control over all dijits used in a form. Method work only on dijits in the form

Methods:

• GetValues - generate a JSON structure from all widgets on the form
• IsValid - Return true if every widget's isValid method returns true.
• SetValues - fill in form values from a JSON structure
• Submit - programmatically submit form

Sample form: archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/Form.html

Tooltip
Display pop-up text to help or provide information


<span id="Help">  </span>
<div dojoType="dijit.Tooltip" connectId="Help"
label="Select one or more categories to group this recipe">
</div>


Slider
Slider can be horizontal or Vertical


dojo.require(“dijit.form.slider”);
dojoType=dijit.form.VerticalSlider”
<div dojotype="dijit.form.HorizontalSlider" name="Rate1"
value="<Computed Value>"  maximum="10" minimum="0" discretevalues="11"
style="margin-left: 5px; height: 50px;" id="Rate1" onchange="setRating(arguments[0]);" >

Add labels:

<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:1em;font-size:75%; color:gray;">
<li>0</li><li>2</li><li>4</li>
<li>6</li><li>8</li><li>10</li>
</ol>
 

Use the onchange event to update other fields, so if you want to save the value to Domino, you will have to code for it.

Tree
Displays a graphical tree structure of the data. The data is a JSON structure that can be from view, page, file or an agent

The TreeStoreModel has a single root - dijit.tree.TreeStoreModel


<div dojoType="dijit.tree.TreeStoreModel" jsId="model" childrenAttrs="kids" store="store" query="{id:'root'}"> </div>


The ForestStoreModel has multiple roots - dijit.tree.ForestStoreModel

Debugging
Companion.js for IE
Firebug for Firefox

• Let's you step through Javascript
• See what is downloading
• Watch HTTP requests

Yslow

• Give you a list of potential bottlenecks
• Ignore the CDN error or update it. In Firefox type about:config in the url bar  Do a right click, select New -> String Type extensions.firebug.yslow.cdnHostnames as preference name Set the value to your domain eg kalechi.com

Performance
Don't include everything on one page!
Set the expiration on files and forms. Forms can be set in header and Files can be set using web rules. Create a separate rule for css, js, jpg, png, ect.
Do a custom Build of Dojo so you load a smaller file at one time.
Don't Parse, load programmatically Dojo controls but load when first needed:

new dijit.form.Button({caption:"Name ",onclick:'logMessage("clicked simple")'});

To see the difference between parse and loading a control

Dojo button test:
turtle.dojotoolkit.org/~owen/bench/dojo/dijit/bench/test_Button-programmatic.html?count=100

On your server – Test page:
yourserver/domjs/dojo-1.1.1/dijit/bench/benchTool.html

On your server - Results:
yourserver/domjs/dojo-1.1.1/dijit/bench/test_button-results.html


Resources
The home of Dojo - dojotools.com
Developerworks - www.ibm.com/developerworks/lotus/community/wikis.html
Dojo tools for all Domino releases - Dojomino.com
Sitepen - www.sitepen.com/

Comments (0)