Skip to Content

Wiki source code of ERDivaLook

Version 235.1 by Ravi Mendis on 2009/07/20 10:43
Show last authors
1 == What is Div#a Look? ==
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 * CSS **themes**
13 * Scriptaculous **effects**
14 * Javascript **widgets**
15 * **Ajax**
16
17 == Why Table-less Markup? ==
18
19 Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
20 Mostly they don't work very well on tables, if at all.
21 Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.
22
23 This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
24 Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
25 (So for jQuery it is an absolute requirement).
26
27 Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.
28
29 === What is a Diva Theme? ===
30
31 In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
32 All images, layout, colors and font information are maintained in the CSS.
33
34 All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
35
36 ===== Examples: =====
37
38 The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
39
40 |= Neutral |= WebObjects |= Simple |= Organica
41 | [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
42 | D2W Neutral look reverse engineered
43 as a Diva Theme | D2W WebObjects look reverse engineered
44 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
45 | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
46
47 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]].
48
49 == HowTos ==
50
51 {{children all="true"}}{{/children}}
52
53 == Features ==
54
55 === 1. CSS Themes ===
56
57 CSS theme you give your application is **fully-customizable**.
58 However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
59
60 Instead, the CSS themes need to be hand-rolled.
61
62 === 2. Scriptaculous Effects ===
63
64 The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
65
66 === 3. Javascript Widgets ===
67
68 The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
69
70 === 4. Well-Formed Semantic Markup ===
71
72 The pages produced by Diva look will validate as (almost) XHTML strict. Features of the DOM:
73
74 * Unique IDs for elements
75 * Unique form control names
76 * Use of multiple CSS classes
77
78 === 5. Ajax Page Configurations ===
79
80 Prototype provides the Ajax functionality in Diva in the form of [[ERPrototaculous>>ERPrototaculous]].
81 Diva look introduces the concept of **Ajax pageConfigs**.
82 Example page configurations:
83
84 * ##AjaxQueryMovie##
85 * ##AjaxEditStudio##
86 * ##AjaxListTalent##
87
88 === 6. Dynamic D2W ===
89
90 Using ajax in combination with //delayed// D2W rules will result in [[dynamic D2W>>How to use Dynamic D2W]].