Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 224.1
edited by Ravi Mendis
on 2009/04/27 02:45
Change comment: Factoring out How to embed D2WList
To version 233.1
edited by Ravi Mendis
on 2009/07/20 10:44
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,4 +1,4 @@
1 -== What is ERDivaLook? ==
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 4  More specifically, it generates pages that are:
... ... @@ -9,11 +9,12 @@
9 9  
10 10  They make use of:
11 11  
12 -* A CSS **theme**
12 +* CSS **themes**
13 13  * Scriptaculous **effects**
14 -* **Ajax widgets**
14 +* Javascript **widgets**
15 +* **Ajax**
15 15  
16 -= Why Table-less Markup? =
17 +== Why Table-less Markup? ==
17 17  
18 18  Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
19 19  Mostly they don't work very well on tables, if at all.
... ... @@ -32,10 +32,8 @@
32 32  
33 33  All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
34 34  
35 -===== Example Diva Themes: =====
36 +**Examples:**
36 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 39  |= Neutral |= WebObjects |= Simple |= Organica
40 40  | [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
41 41  | D2W Neutral look reverse engineered
... ... @@ -43,64 +43,48 @@
43 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 44  | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
45 45  
45 +The above are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
46 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 47  
48 -= How to use ERDivaLook =
48 +== HowTos ==
49 49  
50 -== How to set the CSS/Theme of a D2W Page ==
50 +{{children all="true"}}{{/children}}
51 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.
52 +== Features ==
54 54  
55 -e.g:
54 +=== 1. CSS Themes ===
56 56  
57 -|= LHS |= key |= RHS
58 -| task = 'edit' |**stylesheet**| //NeutralEditPage.css//
59 -| task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
56 +CSS theme you give your application is **fully-customizable**.
57 +However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
60 60  
61 -==== A closer look at the CSS file... ====
59 +Instead, the CSS themes need to be hand-rolled.
62 62  
63 -===== 1. CSS Imports =====
61 +=== 2. Scriptaculous Effects ===
64 64  
65 -{{code}}
63 +The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
66 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");
65 +=== 3. Javascript Widgets ===
74 74  
75 -{{/code}}
67 +The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
76 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.
69 +=== 4. Well-Formed Semantic Markup ===
78 78  
79 -{{note title="Note"}}
71 +The pages produced by Diva look will validate as (almost) XHTML strict. Features of the DOM:
80 80  
81 -*IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
73 +* Unique IDs for elements
74 +* Unique form control names
75 +* Use of multiple CSS classes
82 82  
83 -{{/note}}
77 +=== 5. Ajax Page Configurations ===
84 84  
85 -===== 2. Image Replacement =====
79 +Prototype provides the Ajax functionality in Diva in the form of [[ERPrototaculous>>ERPrototaculous]].
80 +Diva look introduces the concept of **Ajax pageConfigs**.
81 +Example page configurations:
86 86  
87 -{{code}}
83 +* ##AjaxQueryMovie##
84 +* ##AjaxEditStudio##
85 +* ##AjaxListTalent##
88 88  
89 -div#a h1.edit {
90 - background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
91 - text-indent: -5000px;
92 -}
87 +=== 6. Dynamic D2W ===
93 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 -{{children}}{{/children}}
89 +Using ajax in combination with //delayed// D2W rules will result in [[dynamic D2W>>How to use Dynamic D2W]].