Skip to Content

Wiki source code of ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
Hide last authors
Ravi Mendis 227.1 1 == What is Div#a Look? ==
Ravi Mendis 84.1 2
3 Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb.
Ravi Mendis 265.1 4 More specifically, it generates pages that are:
Ravi Mendis 84.1 5
Ravi Mendis 265.1 6 * **Tablesless** or use [[Semantic markup>>url:http://en.wikipedia.org/wiki/Semantic_HTML||shape="rect"]]
Ravi Mendis 261.1 7 * (x)HTML5 compliant
Ravi Mendis 84.1 8 * Sans images, inline styles or presentation attributes
Ravi Mendis 105.1 9
Ravi Mendis 205.1 10 They make use of:
11
Ravi Mendis 227.1 12 * CSS **themes**
Ravi Mendis 205.1 13 * Scriptaculous **effects**
Ravi Mendis 227.1 14 * Javascript **widgets**
Ravi Mendis 261.1 15 * **Ajax**
Ravi Mendis 205.1 16
Ravi Mendis 261.1 17 == Why Table-less Markup? ==
Ravi Mendis 105.1 18
19 Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
Ravi Mendis 265.1 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.
Ravi Mendis 105.1 22
23 This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
Ravi Mendis 265.1 24 Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
25 (So for jQuery it is an absolute requirement).
Ravi Mendis 109.1 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
Ravi Mendis 135.1 31 In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
Ravi Mendis 265.1 32 All images, layout, colors and font information are maintained in the CSS.
Ravi Mendis 109.1 33
34 All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
35
Ravi Mendis 261.1 36 **Examples:**
Ravi Mendis 109.1 37
Ravi Mendis 265.1 38 |=(((
39 Neutral
40 )))|=(((
41 WebObjects
42 )))|=(((
43 Simple
44 )))|=(((
45 Organica Creativa
46 )))
47 |(((
48 [[image:attach:Picture 1.jpg]]
49 )))|(((
50 [[image:attach:Picture 2.jpg]]
51 )))|(((
52 [[image:attach:Picture 3.jpg]]
53 )))|(((
54 [[image:attach:slides_directtoweb_04.jpg.jpeg]]
55 )))
56 |(((
57 D2W Neutral look reverse engineered
58 as a Diva Theme
59 )))|(((
60 D2W WebObjects look reverse engineered
61 as a Diva Theme
62 )))|(((
63 [[//Simple//>>url:http://www.csszengarden.com/?cssfile=/174/174.css&page=2||shape="rect"]] theme from css Zen Garden
64 )))|(((
65 [[//Organica Creativa//>>url:http://www.csszengarden.com/?cssfile=/188/188.css&page=0||shape="rect"]] theme from css Zen Garden
66 )))
67 |(((
68 //Included in ERDivaLookExample//
69 )))|(((
70 //Included in ERDivaLookExample//
71 )))|(((
72 Shawn Chin [[schin@shawnchin.net>>mailto:schin@shawnchin.net||shape="rect"]]
73 )))|(((
74 Eduardo Cesario [[design@criaturacreativa.com.ar>>mailto:design@criaturacreativa.com.ar||shape="rect"]]
75 )))
Ravi Mendis 253.1 76
Ravi Mendis 265.1 77 The above are a sample of themes for Diva look. The first two are included in the {{code language="none"}}Wonder/Examples/Ajax/ERDivaLookExample{{/code}} app.
78 The graphics designer Eduardo Cesario wrote up his experience of developing his //Organica Creativa// design for an early prototype of ERDivaLook on his [[blog>>url:http://www.organicacreativa.com/directtoweb-mutation/||shape="rect"]].
Ravi Mendis 123.1 79
Ravi Mendis 227.1 80 == HowTos ==
Ravi Mendis 149.1 81
Ravi Mendis 265.1 82 {{children all="true"/}}
Ravi Mendis 227.1 83
84 == Features ==
85
86 === 1. CSS Themes ===
87
88 CSS theme you give your application is **fully-customizable**.
Ravi Mendis 265.1 89 However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
Ravi Mendis 227.1 90
91 Instead, the CSS themes need to be hand-rolled.
92
93 === 2. Scriptaculous Effects ===
94
95 The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
96
97 === 3. Javascript Widgets ===
98
Ravi Mendis 269.1 99 The [[widgets>>doc:documentation.Home.Frameworks.ERPrototaculous.WebHome]] are all in the Prototype+Scriptaculous family.
Ravi Mendis 227.1 100
Ravi Mendis 229.1 101 === 4. Well-Formed Semantic Markup ===
Ravi Mendis 227.1 102
Ravi Mendis 261.1 103 The pages produced by Diva look will pretty much validate as (x)HTML5. Features of the DOM:
Ravi Mendis 227.1 104
Ravi Mendis 229.1 105 * Unique IDs for elements
106 * Unique form control names
107 * Use of multiple CSS classes
Ravi Mendis 261.1 108 * Table-less markup (except for tabular data)
Ravi Mendis 227.1 109
Ravi Mendis 257.1 110 === 5. Ajax Page Configurations ===
Ravi Mendis 229.1 111
Ravi Mendis 269.1 112 Prototype provides the Ajax functionality in Diva in the form of [[ERPrototaculous>>doc:documentation.Home.Frameworks.ERPrototaculous.WebHome]].
Ravi Mendis 265.1 113 Diva look introduces the concept of **Ajax pageConfigs**.
114 Example page configurations:
Ravi Mendis 257.1 115
Ravi Mendis 265.1 116 * {{code language="none"}}AjaxQueryMovie{{/code}}
117 * {{code language="none"}}AjaxEditStudio{{/code}}
118 * {{code language="none"}}AjaxListTalent{{/code}}
Ravi Mendis 257.1 119
Ravi Mendis 261.1 120 === 6. Dynamic D2W ===
121
Ravi Mendis 268.1 122 Ajax + //delayed// D2W rules = [[dynamic D2W>>doc:documentation.Home.Frameworks.ERDivaLook.How to use Dynamic D2W.WebHome]].
Ravi Mendis 264.1 123
124 == External Links ==
125
Ravi Mendis 265.1 126 WOWODC 10' - [[DirecToWeb 2.0>>url:http://www.wocommunity.org/wowodc10/slides/D2W2.pdf||shape="rect"]]