Energizing Your UI with DHTML
Click here to load reader
description
Transcript of Energizing Your UI with DHTML
![Page 1: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/1.jpg)
© 2006 Wellesley Information Services. All rights reserved.
Energizing YourUI With DHTML
Chris BlatnickLinde AG
![Page 2: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/2.jpg)
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
![Page 3: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/3.jpg)
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
![Page 4: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/4.jpg)
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
![Page 5: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/5.jpg)
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
![Page 6: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/6.jpg)
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
![Page 7: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/7.jpg)
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)
![Page 8: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/8.jpg)
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
![Page 9: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/9.jpg)
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
![Page 10: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/10.jpg)
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
![Page 11: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/11.jpg)
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
![Page 12: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/12.jpg)
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
![Page 13: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/13.jpg)
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!
![Page 14: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/14.jpg)
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
![Page 15: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/15.jpg)
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
![Page 16: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/16.jpg)
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
![Page 17: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/17.jpg)
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
![Page 18: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/18.jpg)
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
![Page 19: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/19.jpg)
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
![Page 20: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/20.jpg)
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
![Page 21: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/21.jpg)
21
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
![Page 22: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/22.jpg)
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
![Page 23: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/23.jpg)
23
Document Tree Nodes
• Here is a sample document tree
• Notice the relationship between the nodesParentChildAdjacent (siblings)
![Page 24: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/24.jpg)
24
A Real Document Tree Example
• An unordered list such as:
![Page 25: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/25.jpg)
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 …
![Page 26: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/26.jpg)
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
![Page 27: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/27.jpg)
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
![Page 28: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/28.jpg)
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
![Page 29: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/29.jpg)
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
![Page 30: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/30.jpg)
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 …
![Page 31: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/31.jpg)
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
![Page 32: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/32.jpg)
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
![Page 33: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/33.jpg)
33
Exploring Text Nodes – Line 2
• 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)
![Page 34: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/34.jpg)
34
Exploring Text Nodes – Line 3
• Line 3 has multiple text nodes. The line “the end” is obtained by:var theLine = document.getElementById(‘line3’);alert(theLine.childNode[2].firstChild.nodeValue)
![Page 35: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/35.jpg)
35
One More Advanced Example
• Going back to the unordered list from before, let’s answer the question “What’s for dinner?”
![Page 36: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/36.jpg)
36
What Is for Dinner?
• The answer was obtained by traversing the treedocument.getElementById('oParent').childNodes[1].
childNodes[1].childNodes[0].firstChild.nodeValue)
![Page 37: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/37.jpg)
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!”
![Page 38: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/38.jpg)
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()
![Page 39: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/39.jpg)
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>
![Page 40: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/40.jpg)
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”
![Page 41: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/41.jpg)
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
![Page 42: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/42.jpg)
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
![Page 43: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/43.jpg)
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
![Page 44: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/44.jpg)
44
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
![Page 45: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/45.jpg)
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”
![Page 46: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/46.jpg)
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
![Page 47: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/47.jpg)
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
![Page 48: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/48.jpg)
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
![Page 49: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/49.jpg)
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
![Page 50: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/50.jpg)
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)
![Page 51: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/51.jpg)
51
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
![Page 52: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/52.jpg)
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
![Page 53: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/53.jpg)
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">
![Page 54: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/54.jpg)
54
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
![Page 55: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/55.jpg)
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
![Page 56: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/56.jpg)
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
![Page 57: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/57.jpg)
57
Expanding and Collapsing Views … Key Points
• Initially hide the abstract column using the“display” property<tr class=\"descRow\" style=\"position:relative;display:none;\">
![Page 58: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/58.jpg)
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}
}}
![Page 59: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/59.jpg)
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
![Page 60: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/60.jpg)
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
![Page 61: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/61.jpg)
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
![Page 62: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/62.jpg)
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
![Page 63: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/63.jpg)
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”);
![Page 64: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/64.jpg)
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}
![Page 65: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/65.jpg)
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>')}
}
![Page 66: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/66.jpg)
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
![Page 67: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/67.jpg)
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
![Page 68: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/68.jpg)
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”
![Page 69: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/69.jpg)
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.)}
}
![Page 70: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/70.jpg)
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!
![Page 71: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/71.jpg)
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>
![Page 72: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/72.jpg)
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
![Page 73: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/73.jpg)
73
In-View Editing of Documents … Key Points (cont.)
• 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
![Page 74: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/74.jpg)
74
In-View Editing of Documents … Key Points (cont.)
• 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');
}
![Page 75: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/75.jpg)
75
In-View Editing of Documents … Key Points (cont.)
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();
}
![Page 76: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/76.jpg)
76
In-View Editing of Documents … Key Points (cont.)
• 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);
}
![Page 77: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/77.jpg)
77
In-View Editing of Documents … Key Points (cont.)
• 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
![Page 78: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/78.jpg)
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 …
![Page 79: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/79.jpg)
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
![Page 80: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/80.jpg)
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
![Page 81: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/81.jpg)
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
![Page 82: Energizing Your UI with DHTML](https://reader037.fdocuments.in/reader037/viewer/2022100221/559eb4671a28abde6a8b4828/html5/thumbnails/82.jpg)
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