Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 266.1
edited by Ravi Mendis
on 2010/09/10 01:14
Change comment: Migrated to Confluence 5.3
To version 259.1
edited by Ravi Mendis
on 2009/07/16 08:36
Change comment: Add note on ajax page configs

Summary

Details

Page properties
Parent
... ... @@ -1,1 +1,0 @@
1 -Frameworks
Tags
... ... @@ -1,1 +1,0 @@
1 -webobjects|erdivalook|erd2w|d2w|directtoweb
Content
... ... @@ -1,10 +1,10 @@
1 1  == What is Div#a Look? ==
2 2  
3 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:
4 +More specifically, it generates pages that are:
5 5  
6 -* **Tablesless** or use [[Semantic markup>>url:http://en.wikipedia.org/wiki/Semantic_HTML||shape="rect"]]
7 -* (x)HTML5 compliant
6 +* Semantically-rich or **tables-less**
7 +* XHTML 1.0 strict compliant
8 8  * Sans images, inline styles or presentation attributes
9 9  
10 10  They make use of:
... ... @@ -12,17 +12,17 @@
12 12  * CSS **themes**
13 13  * Scriptaculous **effects**
14 14  * Javascript **widgets**
15 -* **Ajax**
15 +* Ajax
16 16  
17 -== Why Table-less Markup? ==
17 += Why Table-less Markup? =
18 18  
19 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.
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 22  
23 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).
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 26  
27 27  Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.
28 28  
... ... @@ -29,57 +29,26 @@
29 29  === What is a Diva Theme? ===
30 30  
31 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.
32 +All images, layout, colors and font information are maintained in the CSS.
33 33  
34 34  All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
35 35  
36 -**Examples:**
36 +===== Example Diva Themes: =====
37 37  
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 -)))
38 +The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
76 76  
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"]].
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]]
79 79  
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 +
80 80  == HowTos ==
81 81  
82 -{{children all="true"/}}
51 +{{children all="true"}}{{/children}}
83 83  
84 84  == Features ==
85 85  
... ... @@ -86,7 +86,7 @@
86 86  === 1. CSS Themes ===
87 87  
88 88  CSS theme you give your application is **fully-customizable**.
89 - However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
58 +However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
90 90  
91 91  Instead, the CSS themes need to be hand-rolled.
92 92  
... ... @@ -96,31 +96,24 @@
96 96  
97 97  === 3. Javascript Widgets ===
98 98  
99 -The [[widgets>>doc:ERPrototaculous]] are all in the Prototype+Scriptaculous family.
68 +The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
100 100  
101 101  === 4. Well-Formed Semantic Markup ===
102 102  
103 -The pages produced by Diva look will pretty much validate as (x)HTML5. Features of the DOM:
72 +The pages produced by Diva look will validate as 98% XHTML strict. Features of the DOM:
104 104  
105 105  * Unique IDs for elements
106 106  * Unique form control names
107 107  * Use of multiple CSS classes
108 -* Table-less markup (except for tabular data)
109 109  
110 110  === 5. Ajax Page Configurations ===
111 111  
112 -Prototype provides the Ajax functionality in Diva in the form of [[ERPrototaculous>>doc:ERPrototaculous]].
113 - Diva look introduces the concept of **Ajax pageConfigs**.
114 - Example page configurations:
80 +Prototype provides the Ajax functionality in Diva in the form of [[ERPrototype>>ERPrototaculous]].
81 +Diva look introduces the concept of **Ajax pageConfigs**.
82 +Example page configurations:
115 115  
116 -* {{code language="none"}}AjaxQueryMovie{{/code}}
117 -* {{code language="none"}}AjaxEditStudio{{/code}}
118 -* {{code language="none"}}AjaxListTalent{{/code}}
84 +* ##AjaxQueryMovie##
85 +* ##AjaxEditStudio##
86 +* ##AjaxListTalent##
119 119  
120 -=== 6. Dynamic D2W ===
121 -
122 -Ajax + //delayed// D2W rules = [[dynamic D2W>>doc:How to use Dynamic D2W]].
123 -
124 -== External Links ==
125 -
126 -WOWODC 10' - [[DirecToWeb 2.0>>url:http://www.wocommunity.org/wowodc10/slides/D2W2.pdf||shape="rect"]]
88 +Support for turning on property-level Ajax updates is included (for to-one and to-many relationships on edit pages).
Picture 1.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -50.3 KB
Content
Picture 2.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -62.5 KB
Content
Picture 3.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -6.3 KB
Content
Picture 4.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -32.2 KB
Content
slides_directtoweb_04.jpg.jpeg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -145.7 KB
Content