Skip to Content

Changes for page ERDivaLook

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

Summary

Details

Page properties
Content
... ... @@ -1,4 +1,4 @@
1 -== What is Div#a Look? ==
1 +== What is ERDivaLook? ==
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,12 +9,11 @@
9 9  
10 10  They make use of:
11 11  
12 -* CSS **themes**
12 +* A CSS **theme**
13 13  * Scriptaculous **effects**
14 -* Javascript **widgets**
15 -* **Ajax**
14 +* **Ajax widgets**
16 16  
17 -== Why Table-less Markup? ==
16 += Why Table-less Markup? =
18 18  
19 19  Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
20 20  Mostly they don't work very well on tables, if at all.
... ... @@ -46,45 +46,62 @@
46 46  
47 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 48  
49 -== HowTos ==
48 += How to use ERDivaLook =
50 50  
51 -{{children all="true"}}{{/children}}
50 +== How to set the CSS/Theme of a D2W Page ==
52 52  
53 -== Features ==
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 54  
55 -=== 1. CSS Themes ===
55 +e.g:
56 56  
57 -CSS theme you give your application is **fully-customizable**.
58 -However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
57 +|= LHS |= key |= RHS
58 +| task = 'edit' |**stylesheet**| //NeutralEditPage.css//
59 +| task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
59 59  
60 -Instead, the CSS themes need to be hand-rolled.
61 +==== A closer look at the CSS file... ====
61 61  
62 -=== 2. Scriptaculous Effects ===
63 +===== 1. CSS Imports =====
63 63  
64 -The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
65 +{{code}}
65 65  
66 -=== 3. Javascript Widgets ===
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");
67 67  
68 -The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
75 +{{/code}}
69 69  
70 -=== 4. Well-Formed Semantic Markup ===
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.
71 71  
72 -The pages produced by Diva look will validate as (almost) XHTML strict. Features of the DOM:
79 +{{note title="Note"}}
73 73  
74 -* Unique IDs for elements
75 -* Unique form control names
76 -* Use of multiple CSS classes
81 +*IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
77 77  
78 -=== 5. Ajax Page Configurations ===
83 +{{/note}}
79 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:
85 +===== 2. Image Replacement =====
83 83  
84 -* ##AjaxQueryMovie##
85 -* ##AjaxEditStudio##
86 -* ##AjaxListTalent##
87 +{{code}}
87 87  
88 -=== 6. Dynamic D2W ===
89 +div#a h1.edit {
90 + background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
91 + text-indent: -5000px;
92 +}
89 89  
90 -Using ajax in combination with delayed (or //dynamic//) D2W rules will result in [[dynamic D2W>>How to use Dynamic D2W]].
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}}