ERDivaLook

Version 204.1 by Ravi Mendis on 2009/04/24 02:05

For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

What is ERDivaLook?

Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb.
More specifically, it generates pages that are:

Semantically-rich or tables-less
XHTML 1.0 strict compliant
Sans images, inline styles or presentation attributes
Use a CSS theme
With Scriptaculous effects
Seamless use of Ajax widgets

Why Table-less Markup?

Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
Mostly they don't work very well on tables, if at all.
Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.

This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
(So for jQuery it is an absolute requirement).

Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.

What is a Diva Theme?

In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
All images, layout, colors and font information are maintained in the CSS.

All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).

Example Diva Themes:

The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.

Neutral	WebObjects	Simple	Organica

D2W Neutral look reverse engineered as a Diva Theme	D2W WebObjects look reverse engineered as a Diva Theme	Simple theme from css Zen Garden	Organica theme from css Zen Garden
Included in ERDivaLookExample	Included in ERDivaLookExample	Shawn Chin schin@shawnchin.net	Eduardo Cesario design@criaturacreativa.com.ar

The graphics designer Eduardo Cesario wrote up his experience of developing his Organica design for an early prototype of ERDivaLook on his blog.

Using ERDivaLook

Setting the D2W Page CSS

Diva look introduces a new D2W key: stylesheet.
The CSS file computed by this key will be set as the stylesheet for the page.

e.g:

LHS	key	RHS
task = 'edit'	stylesheet	NeutralEditPage.css
task = 'inspect' and session.theme = 'Simple'	stylesheet	SimpleInspectPage.css

A closer look at the CSS file...

1. CSS Imports

@import url("Neutral.css");
@import url("ERDIVEditPage.css");
@import url("NeutralEditToManyFault.css");
@import url("NeutralEditToOneFault.css");
@import url("NeutralCalendarDateSelect.css");
@import url("NeutralAjaxAccordion.css");
@import url("NeutralEditToOneRelationship2.css");

The CSS imports a global CSS for the theme, Neutral.css, a generic one for the edit page ERDIVEditPage.css and CSS files for D2W components used on an edit page.

2. Image Replacement

div#a form h1.edit {
background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
text-indent: -5000px;
}

Standard CSS image replacement applies.

Here, the edit page banner is being set. Unknown macro: color. Click on this message for details.
The [color] macro is not in the list of registered macros. Verify the spelling or contact your administrator.
is an example of a CSS selector. The page title is a <h1> with a class edit, so the resulting CSS selector for that element would be Unknown macro: color. Click on this message for details.
The [color] macro is not in the list of registered macros. Verify the spelling or contact your administrator.
or more specifically Unknown macro: color. Click on this message for details.
The [color] macro is not in the list of registered macros. Verify the spelling or contact your administrator.
.

Tip

All elements in a Diva look D2W page begin with *{{div#a}}*.