Changes for page ERDivaLook

Summary

• Page properties (1 modified, 0 added, 0 removed)

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,9 +9,10 @@
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	16	= Why Table-less Markup? =
17	17
...	...	@@ -45,62 +45,35 @@
45	45
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 =
	49	+== HowTos ==
49	49
50		-== How to set the CSS/Theme of a D2W Page ==
	51	+{{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.
	53	+== Features ==
54	54
55		-e.g:
	55	+=== 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// |
	57	+CSS theme you give your application is **fully-customizable**.
	58	+However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
60	60
61		-==== A closer look at the CSS file... ====
	60	+Instead, the CSS themes need to be hand-rolled.
62	62
63		-===== 1. CSS Imports =====
	62	+=== 2. Scriptaculous Effects ===
64	64
65		-{{code}}
	64	+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");
	66	+=== 3. Javascript Widgets ===
74	74
75		-{{/code}}
	68	+The widgets used in Diva include:
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.
	70	+* accordion
	71	+* date picker
	72	+* modal dialog
	73	+* modal window
78	78
79		-{{note title="Note"}}
	75	+They are all in the Prototype+Scriptaculous family.
80	80
81		-*IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
	77	+=== 4. Ajax ===
82	82
83		-{{/note}}
84		-
85		-===== 2. Image Replacement =====
86		-
87		-{{code}}
88		-
89		-div#a h1.edit {
90		- background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
91		- text-indent: -5000px;
92		-}
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}}
	79	+Wonder and Prototype provide the Ajax functionality in Diva.
	80	+Support for turning on property-level Ajax updates is included (for to-one and to-many relationships on edit pages).