Skip to Content

Wiki source code of ERDivaLook

Version 198.1 by Ravi Mendis on 2009/04/24 02:06
Hide last authors
Ravi Mendis 183.1 1 === What is ERDivaLook? ===
Ravi Mendis 84.1 2
3 Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb.
4 More specifically, it generates pages that are:
5
6 * Semantically-rich or **tables-less**
Ravi Mendis 95.1 7 * XHTML 1.0 strict compliant
Ravi Mendis 84.1 8 * Sans images, inline styles or presentation attributes
Ravi Mendis 183.1 9 * Use a CSS **theme**
10 * With Scriptaculous **effects**
11 * Seamless use of **Ajax widgets**
Ravi Mendis 105.1 12
13 = Why Table-less Markup? =
14
15 Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
16 Mostly they don't work very well on tables, if at all.
17 Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.
18
19 This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
20 Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
21 (So for jQuery it is an absolute requirement).
Ravi Mendis 109.1 22
23 Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.
24
25 === What is a Diva Theme? ===
26
Ravi Mendis 135.1 27 In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
Ravi Mendis 109.1 28 All images, layout, colors and font information are maintained in the CSS.
29
30 All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
31
Ravi Mendis 121.1 32 ===== Example Diva Themes: =====
Ravi Mendis 109.1 33
Ravi Mendis 123.1 34 The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
35
Ravi Mendis 119.1 36 |= Neutral |= WebObjects |= Simple |= Organica
Ravi Mendis 139.1 37 | [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
Ravi Mendis 109.1 38 | D2W Neutral look reverse engineered
39 as a Diva Theme | D2W WebObjects look reverse engineered
Ravi Mendis 119.1 40 as a Diva Theme | [[//Simple//>>http://www.csszengarden.com/?cssfile=/174/174.css&page=2]] theme from css Zen Garden | [[//Organica//>>http://www.csszengarden.com/?cssfile=/188/188.css&page=0]] theme from css Zen Garden
41 | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
Ravi Mendis 123.1 42
43 The graphics designer Eduardo Cesario wrote up his experience of developing his //Organica// design for an early prototype of ERDivaLook on his [[blog>>http://www.organicacreativa.com/organica-creativa.php?area=directtoweb&lang=en]].
Ravi Mendis 149.1 44
David Holt 193.1 45 = Using ERDivaLook =
Ravi Mendis 149.1 46
Ravi Mendis 183.1 47 === Setting the D2W Page CSS ===
Ravi Mendis 149.1 48
49 Diva look introduces a new D2W key: **stylesheet**.
50 The CSS file computed by this key will be set as the stylesheet for the page.
51
52 e.g:
53
54 |= LHS |= key |= RHS
55 | task = 'edit' |**stylesheet**| //NeutralEditPage.css//
56 | task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
57
58 ==== A closer look at the CSS file... ====
59
Ravi Mendis 163.1 60 ===== 1. CSS Imports =====
Ravi Mendis 149.1 61
62 {{code}}
63
64 @import url("Neutral.css");
65 @import url("ERDIVEditPage.css");
66 @import url("NeutralEditToManyFault.css");
67 @import url("NeutralEditToOneFault.css");
68 @import url("NeutralCalendarDateSelect.css");
69 @import url("NeutralAjaxAccordion.css");
70 @import url("NeutralEditToOneRelationship2.css");
71
72 {{/code}}
73
David Holt 193.1 74 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.
Ravi Mendis 149.1 75
Ravi Mendis 163.1 76 ===== 2. Image Replacement =====
Ravi Mendis 149.1 77
78 {{code}}
79
David Holt 193.1 80 div#a form h1.edit {
Ravi Mendis 149.1 81 background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
82 text-indent: -5000px;
83 }
84
85 {{/code}}
86
Ravi Mendis 163.1 87 Standard CSS image replacement applies.
88
Ravi Mendis 197.1 89 Here, the edit page banner is being set. {{color value="red"}}{{div#a form h1.edit}}{{/color}} 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 {{color value="red"}}{{h1.edit}}{{/color}} or more specifically {{color value="red"}}{{div#a form h1.edit}}{{/color}}.
Ravi Mendis 195.1 90
91 {{tip title="Tip"}}
92
Ravi Mendis 197.1 93 All CSS selectors in a Diva D2W page begin with *{{div#a}}*.
Ravi Mendis 195.1 94
95 {{/tip}}