energizing your ui with dhtml

© 2006 Wellesley Information Services. All rights reserved.

Energizing YourUI With DHTML

Chris BlatnickLinde AG

2

What We’ll Cover …

• Exploring the foundation of DHTML• Examining the essential elements of DHTML• Demystifying positioning and the box model• Improving printing in your Web application• Building innovative view UIs with DHTML

3

DHTML Defined

• What exactly is DHMTL?DHTML stands for Dynamic HTML and is a term that refersto using a combination of internet technologies to createmore responsive and interactive Web applications

4

The Components of DHTML

• DHTML is not a single technology … it’s actually a mixIn general, DHTML utilizes a combination of:

HTML (Hypertext Markup Language)CSS (Cascading Style Sheets)The DOM (Document Object Model)JavaScript

5

Dynamic Puts The “D” In DHTML

• Standard HTML creates a static Web page By utilizing DHTML, all of the elements making upa traditional Web page become programmable

• What kinds of things can be controlled with DHTML?ContentPositioningStyles

6

A Quick Refresher on HTML

• HTML = The lingua franca of the WebThe markup language interpreted by the Web browserto display the content of the page being requested

• Information on HTML specifications, documentation, and future directions can be found at the W3C Web site

www.w3.org

7

Utilizing Cascading Style Sheets

• Cascading Style Sheets (CSS)The language used to specify the appearance of textand other elements on a Web page

Primary purpose is to separate page layout (presentation) from page content (data)

8

CSS Is Important For Good UIs

• Style sheets are an enormous resource for developers, since site appearance can often be controlled in asingle place

Changes are made once and propagate through the entire siteDecoupling UI look and feel from code that controls the data makes maintenance easier for both aspects

• For an amazing demo of what CSS can do, check outthe CSS Zen Garden

http://csszengarden.com

9

Intro to the Document Object Model

• The Document Object Model (DOM) is one of the most important aspects of DHTML

• To take advantage of all that DHTML has to offer, it is imperative that developers gain a good understanding of the DOM

10

So What Exactly Is the DOM?

• The Document Object Model describes an HTML document in tree form

• The DOM allows you to use an object-oriented methodology to parse HTML and operate on its contents

11

The Role of JavaScript

• JavaScript is a client-side programming languageused mainly for Web development

• Use JavaScript to manipulate the DOMChange existing elements on the fly by using methodsand properties of the DOMJavaScript can add and remove objects, which greatlyadds to the dynamic nature of the content

12

Security Considerations for DHTML

• Before implementing certain aspects of DHTML,be aware of any security issues that could arise

• In particular, consider:Use of innerHTML

Since this can bring back more than text, it may be necessary to validate the content to prevent malicious code from being usedIf only text is needed, use innerText or textContent properties instead

13

DHTML Security Is Important

• Also watch out for cross-site scriptingValidate any user-posted dataIf using frames, guard against invalid interactionsbetween frames

• Example: Malicious code posted in a commentIf posted to a site, the malicious code runs with the same security privileges as any other code in that domain!

14

Using HTML … Transitional or Strict?

• Doctypes define the type of HTML to be usedin Web pages

Transitional Doctypes allow for transitioning from old markup to the newer standardsStrict Doctypes only allow the HTML tags as they were designed in the specifications

• Browsers check documents as they are receivedThe browser needs to “repair” incorrect HTML before displaying it, resulting in differences between browsers

15

Quirks Mode

• The Doctype selected determines whether thebrowser uses Standards mode or Quirks mode

Quirks mode causes the browser to behave like an older oneStandards mode supports the latest and greatest tagsand elements

• A listing of the valid Doctypes can be found in the article “My website is standard! And yours?” by the W3C

www.w3.org/QA/2002/04/Web-Quality

16

Transitional or Strict in Your Environment

• Using Transitional or Strict Doctype … do I care?Maybe not, unless the aim is to validate code for companyor government requirementsBut maybe so, if supporting as many browsers as possibleis an important goal

17

Domino 6.5.3 Added Support for Both

• Configuration document in Domino Directory allows setting of DominoCompleteDoctype to use:

Old wayTransitionalStrict

• Using one of the new Doctypes requires testingold applications

CSS becomes case-sensitiveMIME types are needed for CSS and JavaScriptHTML engine output does not change!

Warning

18

Heads Up!

• If the new option to change the Doctype is notbeing used, Domino will automatically put IEinto Quirks mode!

Even though Domino is generating a Doctype, it is incorrect

19

And What About XHTML?

• XHTML (eXtensible HyperText Markup Language) is the successor to HTML

• In essence, it is HTML reworked as XMLSince it is XML, it requires a stricter syntax

Case-sensitivityExplicit closing tags for elements

20

So Should Notes Developers Use XHTML?

• There’s nothing special about DHTML with XHTML, although this is the path the industry is heading toward

• But, when working with Domino, there aresome trade-offs

Forms must be XHTML onlyMust use the XHTML DoctypeMany @Formulas will not be applicable

• Bottom line: Avoid using XHTML, unless there isa compelling need that can’t be accomplished byother means

21



22

More on the Document Object Model

• The Document TreeWhen a page loads in the browser, the browser creates a hierarchical representation of the HTML elementsThe hierarchical representation is often referred to as the Document Tree

The Document Tree consists of “nodes”, or objects, that have properties and methods

23

Document Tree Nodes

• Here is a sample document tree

• Notice the relationship between the nodesParentChildAdjacent (siblings)

24

A Real Document Tree Example

• An unordered list such as:

25

A Real Document Tree Example (cont.)

• Would be represented as a document tree, like so:

Note: This tree has been simplified for clarity. There’s more to it and we’ll see that in a bit …

26

Accessing DOM Nodes

• You can programmatically access the nodesvia JavaScript

If the “Appetizer” element has an ID of “node1” and the first ul (unordered list) element has an ID of “nodeA” then

node1.parentNode = nodeA

27

The Document Root

• The root of the node tree is the document object The document object has some important parameters

There is only one document object on a Web pageHas some properties used for backward compatibility

Images, links, bgcolorUse methods for getting and creating other nodes in the document tree

Note

28

Getting Other Elements

• The easiest way to get at other elements (which is also the most common) is to use the element’s ID attribute

The method to use is document.getElementByID()• Let’s look at a simple example in action

Find the text in a paragraph and display it

29

Getting the Text Explained

• Use the DOM to get at the text inside the <p> tag<p id="paragraph_example">DHTML sure is cool!</p><form><input TYPE="button" VALUE="Press Me" NAME=“test" onClick="alert(document.getElementById('paragraph_example').

childNodes[0].nodeValue)"></form>

• childNodes[0] … gets the first child node of <p>• nodeValue … returns the value of that node

30

Text Nodes

• Dynamically changing content of elements other than fields makes use of the Text Node

If an element contains text, it has a text node• This can get tricky, since most tags that have text

create their own branches of the document tree• Confused? We need another demo …

31

Exploring Text Nodes

• In this demo, there are three lines displayedby the browser

Here’s the HTML<p id="line1">Let's call this text line 1</p><p id="line2">And this is text <b>line 2</b></p><p id="line3"><i>Finally</i>, we have <b>the end</b>, line

3</p>• This demo uses the firstChild node property to get

at the text

32

Exploring Text Nodes – Line 1

• In this case, firstChild.nodeValue retrieves the full text of line 1, but only partial pieces of lines 2 and 3

This is because the bold and italic tags create theirown sub trees

33


• Line 2 has two text nodes, one for the <p> element and one for the <b> elementvar theLine = document.getElementById(‘line2’);alert(theLine.childNode[1].firstChild.nodeValue)

34


• Line 3 has multiple text nodes. The line “the end” is obtained by:var theLine = document.getElementById(‘line3’);alert(theLine.childNode[2].firstChild.nodeValue)

35

One More Advanced Example

• Going back to the unordered list from before, let’s answer the question “What’s for dinner?”

36

What Is for Dinner?

• The answer was obtained by traversing the treedocument.getElementById('oParent').childNodes[1].

childNodes[1].childNodes[0].firstChild.nodeValue)

37

The Case for Using IDs With Elements

• Traversing the tree can get ugly pretty quicklyThe value in using the ID parameter becomes very evident

• If the list element containing the main dish had an ID, it could be accessed via:document.getElementById('mainDish').firstChild.nodeValue

<UL ID="oParent">

<LI>Appetizer

<LI ID="oNode">Main Course

<UL>

<LI ID="mainDish">Meat

<LI ID="oChild2">Veggie

<LI>Bread

</UL>

<LI>Dessert

</UL>“That was easy!”

38

Manipulating Element Attributes

• DHTML is commonly used to change, add, or remove the attributes of elements

e.g., <a href=…> - href is an attribute of <a>• The DOM has an Attribute Node

Note: The Attribute Node is not a part of the document treeManipulate the Attribute Node via:

setAttribute() getAttribute()createAttribute() removeAttribute()

39

Changing Attributes Explained

• In this example, the setAttribute() method dynamically changes the link reference<form><input TYPE="button" VALUE=“Change URL" NAME=“test2" onClick="document.getElementById(‘thelink'). setAttribute(‘href’,

‘http://www.eview.com’)"></form>

40

It Is All About Style

• Another common use of DHTML is changingelement styles

• Modify style parameters by getting the element andthen using style.parameter-name

e.g., document.getElementByID(‘cool’).style.visibility=“visible”

41

Learn More About The DOM

• There is so much to the DOM, it could take the rest of this session to explain it

• Instead, use the following resources to learn moreW3C Document Object Model specifications

www.w3.org/DOMW3C DOM Compatibility Chart

www.quirksmode.org/dom/w3c_html.htmlLearn what works and what doesn’t in all major browsers

42

The Mouseover DOM Inspector … an Awesome Tool

• Get the Mouseover DOM Inspector and make sure to bookmark it for future use

• Available at: http://slayeroffice.com/tools/modi/v2.0/modi_help.html

43

The Mouseover DOM Inspector … an Awesome Tool (cont.)

• Use it to explore the DOM for a specific Web page• Extremely useful for deconstructing sites or trying to

determine a problem with an existing site

44



45

The Box Model

• Another important topic to be aware of when using DHTML is the Box Model

This is the formatting model used by CSS todisplay informationEVERY element is surrounded by at least one “box”

46

The Box Model Diagram

• Print this out and keep it near!Having a visual representation of the box model will help immensely when developing in DHTMLNeed to know this to position elements

47

Properties of The Box Model

• Boxes can contain multiple boxes• There are two basic types of boxes

Block: Generated by DIV, TABLE, PInline: Generated by inline tags (I, B), graphics, and text

• Block boxes serve as containers for other boxeswithin them

Positioning and dimensions of contained boxes are relative to the block box

48

Positioning Elements

• Positioning refers to the placement of an element on a Web page. There are a few types to understand:

Relative positioningAbsolute positioningFixed positioning

• In the normal flow of a Web page, all block boxes stack vertically and inline boxes flow left to right

49

Positioning … It’s All Relative (or Absolute)

• A relative positioned element is positioned in thenormal flow of a page and then it is moved

Remember that this positioning will be relative to the constraining block

Not constrained Constrained

50

… But Sometimes It’s Absolute

• Absolute positioning – positions an element outsidethe normal flow

Absolute positioned elements use the container block of the closest element that is outside of them

• Using fixed positioning locks an element in placeUses the browser window as the container blockDoes not work in IE!

• Hint: Use the z-index to control stacking (higher z-index means element goes on top)

51



52

A Few Words About Printing

• Although this is mostly a CSS solution, it’s nice to know how to create great printouts

• Stylesheets can be specified to apply to screen,print, etc.

This means a Web site can have one style for online viewing and a completely different style for printing

53

Specifying the Media Type

• To specify if a stylesheet applies to the screen or if it’s for printing, make use of the media parameter

<style type="text/css" media="print"><style type="text/css" media=“screen">

54



55

Energizing Domino Views

• Everyone agrees: Default Domino views are UGLY!• The good news is that with some DHTML, not only

can they look great, but they can have someamazing functionality

Expand/Collapse without a server tripCreate tabs or accordions from categoriesRight-click actionsBuild dynamic menusIn-view editing

56

Expanding and Collapsing Views

• Here’s an easy one to start with … mimicking expand and collapse for Web views

• The approach: Generate the HTML ourselves and use the display style and JavaScript to perform the expand/collapse action

DEMODEMO

57

Expanding and Collapsing Views … Key Points

• Initially hide the abstract column using the“display” property<tr class=\"descRow\" style=\"position:relative;display:none;\">

58

Expanding and Collapsing Views … Key Points (cont.)

• In the view action, call a JavaScript function that will toggle the display property

function showHide( theClass, action ) {//get all the elements with the given class nametheDescriptions = getElementsByClassName(document, '*', theClass);for(var j=0; j<theDescriptions.length; j++){ //iterate through the elements and set the display of each

aDescription = theDescriptions[j];if(action == 1) {

aDescription.style.display = ''; //shows the element}else {

aDescription.style.display = 'none'; //hides the element}

}}

59

Building Accordion Views

• Accordion tables (as they are known on the Web) are analogous to caption tables in the Notes client

• Using DHTML, it’s possible to create accordion tables for a view that use the categories as the headers

• The approach: Use the prototype.js and rico.js libraries with their pre-built functions, add a little HTML to the view, and be amazed

60

Building Accordion Views … Required Elements

• Two JavaScript libraries are needed to implement the accordion views

prototype.js – a JavaScript framework that allows for class-driven developmentrico.js – a JavaScript library that uses prototype.js to create rich dynamic effects and behaviors on the Web

• You can learn more about Prototype and Rico in my presentation “JavaScript Best Practices”

Also see the project Web siteshttp://prototype.conio.nethttp://openrico.org

61

Building Accordion Views … Key Points

• The view must have the following structure<div id="accordionDiv">

<div id="overviewPanel"> <div id="overviewHeader">

Overview </div> <div id="panel1Content">

... content text ... </div>

</div> </div>

• In the onLoad event, call the function that sets up the accordion table. Rico does all the work:new Rico.Accordion( $('accordionDiv'), {panelHeight:200});

Check out the demo database

62

Right-Click Actions in Views

• One great use of DHTML is to create a context menu from view actions activated when the user right-clicks on the page

• The approach: Use a freely available JavaScript library to handle the menu generation

This demo uses Dynamic Drive’s “Context menu script”http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm

• Get Domino-generated code for actions and use this to build the context menu

63

Right-Click Actions in Views … Key Points

• Context menu script expects a series of <div>s in a certain format<div class="menuitems" url="urlvalue"

onClick="code">LabelName</div>• Use the DOM to get an array of the actions generated by

the Domino action barGet the first table on the page. This is the action bar:

var actionBarTable = document.getElementsByTagName(“Table”)[0];

Get all the <a> tags in the tablevar actionAnchors =

actionBarTable.getElementsByTagName(“a”);

64

Right-Click Actions in Views … Key Points (cont.)

• Iterate through the <a> elements to build new arrays that will hold the action, href, and text labelfor (i=0; i < actionAnchors.length; i++) {

if(actionAnchors[i].onclick) {contextAction[i] = actionAnchors[i].getAttribute("onclick").toString().replace(/^function anonymous\n{\n/,"").replace(/\n}$/,"");contextAction[i] = contextAction[i].replace(/return false/, "");whatAction[i] = "click";

}else {contextAction[i] = actionAnchors[i].href;whatAction[i] = "href";}

labelAction[i] = actionAnchors[i].firstChild.nodeValue}

65

Right-Click Actions in Views … Key Points (cont.)

• Finally, iterate through the new array of actions and write the <div>s in the format requiredfor (i=0; i < contextAction.length; i++) {

if(whatAction[i] == "href") {document.write('<div class=\"menuitems\" url=\"' +

contextAction[i] + '\">' + labelAction[i] + '</div>')}else {

document.write('<div class=\"menuitems\" url=\"\" onClick=\"' + contextAction[i] + '\">' + labelAction[i] + '</div>')}

}

66

Creating Dynamic Menus From View Actions

• The same technique can be employed to create a nice, cascading menu for view actions

• The approach: Again, use a freely available JavaScript library to handle the menu generation

This demo uses WebFX’s DHTML Menu 4http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html

67

Creating Dynamic Menus From View Actions (cont.)

• Drop down menu script expects a function callin the form:testMenu.add(tmp = new MenuItem(label , event));

label is text to be shown on menuevent is the URL to navigate totestMenu is an object representing the menu bar

• Again, use the DOM to get an array of the actions generated by the Domino action bar

• Then write out the list of actions in the format expected by the library

68

Creating Dynamic Menus From View Actions (cont.)

• The trick used here is to group related actions by the title for the drop-down selection

• Then parse these while going through the actions to generate the separate menu items

e.g., to create the menu “View Actions” with drop-down values of “Action1”, “Action2”, and “Action3”

69

Creating Dynamic Menus From View Actions … Key Points//Generate our new menus in the format expected by DHTML Menu 4var menuBar = new MenuBar(); //DHTML Menu 4 method to generate the menu bar

var currentMenu; //Object representing our current menu itemvar menuButtonText; //Text of the action (e.g. Open, Close, Save)var currentMenuLabel; //Label of the drop down (e.g. File, Edit, View)

for (i=0; i < contextAction.length; i++) {menuButtonText = labelAction[i].split('*'); //gets an array of the label and text from our actionif (menuButtonText[0] == currentMenuLabel) { //just add to the current menu if labels are the same

domAddMenuItem(menuButtonText[1], contextAction[i], whatAction[i], currentMenu)}else {

currentMenuLabel = menuButtonText[0];currentMenu = new Menu()menuBar.add(tmp = new MenuButton(currentMenuLabel, currentMenu)); //adds the new

menu drop down (e.g. File,Edit,etc.)domAddMenuItem(menuButtonText[1], contextAction[i], whatAction[i], currentMenu)

//creates the new menu item (e.g. Open,Close,etc.)}

}

70

In-View Editing of Documents

• Using DHTML, it is possible to create a simple in-view edit function that allows the user to change certain values of a document directly from the view

• The approach: Create HTML in views to generate fieldsActivate on click and run a LotusScript Agent to save the new value when focus leaves the field

Yes … this is a view!

71

In-View Editing of Documents … Key Points

• Two <div> tags are used for view column editing• One to show the current value

<div id=\"" + docunid + "-display\" class=\"titleDisplay\" onClick=\"toggleField('" + docunid + "', 1)\">" + Title + "</div>

Notice the onClick event. Use this to determine which editable field should be shown (using the UNID as a reference)

• The second <div> holds the editable field<div id=\"" + docunid + "-edit\" class=\"editRow\" style=\"position:relative;display:none;\"> <input type=\"text\" name=\"" + docunid + "-fld\" id=\"" + docunid+ "-fld\" class=\"editField\" value=\"" + Title + "\" + size=\"" + @Text(@Length(Title)) + "\" onblur=\"writeFieldToDoc('" + docunid + "' , '" + ThisFieldName + "' , this.value)\"></div>

72

In-View Editing of Documents … Key Points (cont.)

• There’s a lot to that second <div>, so let’s break it down<div id=\"" + docunid + "-edit\“ class=\"editRow\"

style=\"position:relative;display:none;\"> Sets the ID to xxxxx-edit, where xxxxx is the UNIDThis gives us a unique element IDWe also supply a class name for style purposes

73


• Continuing with the second <div><input type=\"text\" name=\"" + docunid + "-fld\" id=\"" +

docunid+ "-fld\" class=\"editField\" value=\"" + Title + "\" + size=\"" + @Text(@Length(Title)) + "\" onblur=\"writeFieldToDoc('" + docunid + "' , '" + ThisFieldName + "' , this.value)\"></div>

Here define the field, again constructing a unique name and ID via the UNID The field’s onblur event triggers the JavaScript code that will call the LotusScript Agent, passing it the UNID, fieldname, and the new value

74


• toggleField is the function used to show or hide the editable field in the viewfunction toggleField(unid, action ) {

if (action == 1) {var divToShow = document.getElementById(unid + '-edit');var divToHide = document.getElementById(unid + '-display');var fieldToEdit = document.getElementById(unid+ '-fld');

}

75


else {var divToShow = document.getElementById(unid + '-

display');var divToHide = document.getElementById(unid + '-edit');

}divToShow.style.display = '';divToHide.style.display = 'none';if (action ==1) fieldToEdit.select();

}

76


• writeFieldToDoc is a function that uses AJAX toexecute the LotusScript Agent and pass thenew value back if successfulfunction writeFieldToDoc (unid, updateFieldName, updateFieldValue) {

var parameters = 'unid=' + encodeURI(unid) + '&updateField=' + encodeURI(updateFieldName) + '&updateValue=' + encodeURI(updateFieldValue);global_unid = unid;global_updateFieldValue = updateFieldValue;makePOSTRequest('./InViewDocUpdate?OpenAgent', parameters);

}

77


• If the AJAX call is successful (meaning that the Agent updated the doc), then the editable field is hidden and the new value shown in its place

• Please note: This example is simplified to focus on the main points of the technique

In production, the developer wouldCheck if the user had rights to edit the documentValidate the data being enteredProvide user-friendly help on the functionality

Don't Forget

78

Running With It

• All of the techniques used in views are applicable to working with any other element in Domino

• So what else can be done with DHTML? How about:Dynamically show and hide information on a formCreate tabbed sections that don’t require a page refreshGenerate a “pop-up” dialogAnd more …

79

The DHTML Toolkit

• The database for this session (included on the conference CD) contains a toolkit of DHTML elements

Elements are documented by their use and configurationExamples include:

Easily add tool tips to your documentsCreate drop-down menus from view actionsCreate right-click menus from view actionsGenerate tabbed table code via a wizardSimulate a modal dialog box

80

Resources

• Danny Goodman, DHTML: The Definitive Reference (O’Reilly Media, 2002).

• Elisabeth Freeman and Eric Freeman, Head First HTML with CSS & XHTML (O’Reilly Media, 2005).

• Stuart Landridge, DHTML Utopia: Modern Web Design Using JavaScript & DOM (SitePoint, 2005).

• www.w3.orgWorld Wide Web Consortium (keeper of Web standards)

• http://icant.co.uk/csstablegallery/Great resource for table layouts used with views

• www.interfacematters.comMy blog, where I discuss UI issues with a focus onNotes and Domino

81

7 Key Points to Take Home

• DHTML is a combination of technologies and it is tothe advantage of a developer to learn them all andhow they interoperate

• The Document Object Model (DOM) is the foundationfor performing DHTML tricks

The document tree is made up of nodes, and developers can programmatically access these nodes with JavaScript

• Make good use of the ID parameter to make traversing the DOM tree much easier

• When having issues with DHTML, one thing to check is if the browser is going into quirks mode

82

7 Key Points to Take Home (cont.)

• For positioning and spacing, always refer backto the box model

Don’t forget to account for invisible items such as the margin• It’s good practice to create “print” media stylesheets

that automatically remove unnecessary elements (such as navigation) when a user prints a page from a site

• Almost any HTML that Domino generates automatically can be overridden using DHTML

Often, it’s good for the developer to write the HTMLrather than letting Domino generate it in order tohave complete control

83

Your Turn!

Questions?

How to Contact Me:Chris Blatnick

http://[email protected]

energizing your ui with dhtml

Business