Skip to Content

Wiki source code of ERDivaLook

Version 180.1 by Ravi Mendis on 2009/04/27 02:42
Show last authors
1 == What is ERDivaLook? ==
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**
7 * XHTML 1.0 strict compliant
8 * Sans images, inline styles or presentation attributes
9
10 They make use of:
11
12 * A CSS **theme**
13 * Scriptaculous **effects**
14 * **Ajax widgets**
15
16 = Why Table-less Markup? =
17
18 Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
19 Mostly they don't work very well on tables, if at all.
20 Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.
21
22 This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
23 Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
24 (So for jQuery it is an absolute requirement).
25
26 Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.
27
28 === What is a Diva Theme? ===
29
30 In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
31 All images, layout, colors and font information are maintained in the CSS.
32
33 All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
34
35 ===== Example Diva Themes: =====
36
37 The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
38
39 |= Neutral |= WebObjects |= Simple |= Organica
40 | [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
41 | D2W Neutral look reverse engineered
42 as a Diva Theme | D2W WebObjects look reverse engineered
43 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
44 | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
45
46 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]].
47
48 = How to use ERDivaLook =
49
50 == How to set the CSS/Theme of a D2W Page ==
51
52 Diva look introduces a new D2W key: **stylesheet**.
53 The CSS file computed by this key will be set as the stylesheet for the page.
54
55 e.g:
56
57 |= LHS |= key |= RHS
58 | task = 'edit' |**stylesheet**| //NeutralEditPage.css//
59 | task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
60
61 ==== A closer look at the CSS file... ====
62
63 ===== 1. CSS Imports =====
64
65 {{code}}
66
67 @import url("Neutral.css");
68 @import url("ERDIVEditPage.css");
69 @import url("NeutralEditToManyFault.css");
70 @import url("NeutralEditToOneFault.css");
71 @import url("NeutralCalendarDateSelect.css");
72 @import url("NeutralAjaxAccordion.css");
73 @import url("NeutralEditToOneRelationship2.css");
74
75 {{/code}}
76
77 The CSS file //NeutralEditPage.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.
78
79 {{note title="Note"}}
80
81 *IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
82
83 {{/note}}
84
85 ===== 2. Image Replacement =====
86
87 {{code}}
88
89 div#a h1.edit {
90 background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
91 text-indent: -5000px;
92 }
93
94 {{/code}}
95
96 Standard CSS image replacement applies.
97
98 Here, the edit page banner is being set. {{color value="red"}}{{div#a h1.edit}}{{/color}} is an example of a **CSS selector**. Diva D2W page content is nested inside a ##<div id="a">..</div>##. It's CSS selector is {{color value="red"}}{{div#a}}{{/color}}. The page title is marked up as ##<h1 class="edit">..</h1>##, so the resulting CSS selector for that element would be {{color value="red"}}{{h1.edit}}{{/color}} or more specifically {{color value="red"}}{{div#a h1.edit}}{{/color}}.
99
100 {{tip title="Tip"}}
101
102 All CSS selectors in a Diva D2W page begin with *{{div#a}}*.
103
104 {{/tip}}
105
106 == How to use an Embedded D2WList ==
107
108 In //ERDivaLookExample// ##Studio.movies## is displayed as an embedded D2W list:
109
110 [[image:Picture 4.jpg]]
111
112 You use it be setting the following rules:
113
114 |= LHS |= key |= RHS
115 | entity.name = 'Studio' and task = 'inspect' and propertyKey = 'movies' |**componentName** | //ERDList2//
116 | pageConfiguration = 'ListEmbeddedMovie' and parentPageConfiguration like '**Studio' **|**displayPropertyKeys**| //("title","category","rated")//