 |
AD313 Developing Cutting Edge Dynamic DHTML Applications
Download the presentation
from this session
  |  |
The subject was DHTML, and Vinod Seraphin, iNotes Web Access lead architect, began by introducing his co-speaker, iNotes developer Daniel Gurney as the person who developed "one of the most sophisticated DHTML components in iNotes Web Access, the virtual list component." Together they set out to explain different ways to use DHTML to create cutting edge applications.
Vinod defined DHTML as HTML 4.0 with support for cascading style sheets (CSS), DOM (Document Object Model) objects for both HTML and XML, and scripting such as ECMAScript, JavaScript, and JScript (the implementation of JavaScript in Internet Explorer 5) as well as VBScript. He explained that while his focus would be on Internet Explorer 5 because of its better DOM level support, both IE 4 and 5 allow for superior scripting for several reasons. The ID element parameter allows any element on a page to be accessed by a script and document.all[] collection makes access very easy. More events are supported on more elements and there are rich object properties and methods for more elements. Finally, style expressions provide a way to specify dynamic behavior.
Vinod Seraphin
Vinod explored IE's dynamic page updates, saying that every HTML element object has properties and methods to manipulate HTML. Some key new properties include innerText and innerHTML, which let you manipulate contents within start and end tags, and outerText and outerHTML, which let you manipulate contents including the element's attributes. Some of the new methods are insertAdjacentHTML, insertAdjacentText, getAttribute, setAttribute, and removeAttribute. Using these, you can change a portion of a page without reloading the entire page.
To demonstrate how dynamic page updates are useful, Dan showed the Calendar control used in iNotes Web Access, which updates the calendar months using innerHTML. Users easily flip through the months and years with only the monthly calendar portion of the page being refreshed. Vinod and Dan explained that this is accomplished by building a grid of the month and then inserting the appropriate information using innerHTML. There can be different styles for different days and months—for example, the current day appears in bold white.
Cascading style sheets (CSS) are another important tool. This standard has evolved with CSS1 being the rules that may be applied to any HTML element that control such things as color, alignment, border, margins, padding, and so on. CSS-P defines element positioning. And CSS2 is a combination of CSS1 and CSS-P that also includes some additional style definitions.
They next examined a style definition for the current day class. You can define a style block, including its background color, font family, font size, font weight, color, and alignment as well as the shape of the cursor upon mouse-over. Then for any element on the page, you can specify a class attribute and name and use that style. This approach was used in the Calendar control to make the current month and day display in different color than the adjacent months and days.
Vinod reviewed two key HTML building blocks, the <DIV> and <SPAN> tags. They allow you to block out a chunk of "stuff" that you want to do something with, for example, content that you want to apply a particular style to. You use the <DIV> tag to define a rectangular block of content that usually starts at the left margin. You use the <SPAN> tag to define any in-line content, such as several words in a paragraph.
Once you define the block or span, you can use the CSS Position attribute to define it's position. The default Position is static, but by making Position absolute, you can place the block or span at a specific place on the page. With absolute Position, you define the left and top coordinates and height and width. These can be in relative units—pixels (px), the height of the elements font (em), the height of the lowercase x (ex), or a percentage—or in absolute units—inches (in), centimeters (cm), millimeters (mm), picas (pi), or points (pt).
Finally, you can show or hide the block or span. The CSS Visibility attribute preserves the space on the page, even when it is hidden; this attribute can be set to hidden, visible, or inherit from parent (which is the default). The CSS Display attribute does not preserve the space on the page when the block or span is hidden; this attribute can be set to block, none, or inline (which is the default). Because the space is not preserved, when the hidden element become visible, it pushes everything else down the page.
To demonstrate these methods, Dan showed the audience the Date Picker control in iNotes Web Access. In the Main view, the Date Picker control always stays in position on the left of the page. Its <DIV> block has absolute positioning and is not hidden. In other places, such as fields where the user needs to choose a date, they created a drop-down of the Date Picker control. For example, when the user needs to choose a due date, the same <DIV> block is used with absolute positioning (based on the field position) but its Visibility attribute is hidden or visible based on the click. To demonstrate the Display attribute, Dan showed a radio button, that when clicked, caused a text field to appear. Because the text field uses the Display attribute, it pushes the fields below it down the page when it appears.
Next, Vinod talked about how to create Windows-like dialog boxes. He showed a table that compared Windows controls to Notes fields to HTML elements to give the audience an idea of what the equivalent controls were. He noted that there are a number of controls with no HTML equivalents, that is, there are no tags for them yet. These include combo control (edit and list box), rich text control, menu control, tree control, and calendar control. These were the controls that the iNotes Web Access team implemented using DHTML.
Vinod and Dan then discussed and demoed three types of windows/dialogs: showModalDialog (which constrains the user from working anywhere else until they've responded to that child window), showModelessDialog (which allows the user to work in the parent window), and window.open (which opens a separate window in a separate browser). They also mentioned some other tricks to create Windows-like dialogs, such as creating a tab index with the TabIndex attribute to make the tab order different than the automatic order HTML uses.
Turning attention to JavaScript, Vinod pointed out some differences to keep in mind between using JavaScript and coding a Windows application. JavaScript is interpreted code rather than compiled code, so you don't have the opportunity to find problems at compile time but instead have to do that at run time. For maintenance, you usually put lots of comments and meaningful identifiers in code, but for JavaScript that means larger amounts of code, which take longer to display on the Web. Vinod recommended that you strip out comments and remap identifiers so that the JavaScript code is small and therefore displays more efficiently.
Fine-tuning the performance of your dynamic application is critical for a Web application. Among the suggestions Vinod shared with the audience was to use text instead of images where possible because images have a lot of bytes and so take a lot of time to load, as well as to minimize code as mentioned before. Dan illustrated this last point by improving the load-time of a page by 51 percent by stripping out all comments and white space.
Using shared style sheets with common style rules also improves performance because once they are transferred and cached by the browser they are available for use across multiple pages without a server hit. Additionally, using shared code like Java static pages (.js) and behavior pages (.htc)—which are available only in IE and are a way of taking an element and giving it a new behavior such as a change of color on click—help with performance.
Another performance tip the iNotes Web Access team learned was that you can improve performance by using the DOM model rather than a lot of innerHTML. Dan displayed a four-column table generated by a long string of HTML text that puts data into a table. When the table had only 100 rows, both the innerHTML approach and the DOM model approach loaded in about the same amount of time. But when the table had 1,000 rows, the DOM model method was noticeably quicker—two seconds as opposed to eight seconds.
Vinod closed the session by reiterating that you can do much more in a browser today than previously and that it has become a full event-driven programming environment. To see what you can accomplish in this environment, he suggested you check out iNotes Web Access.
Download the presentation from this session. |