Changes for page ERDivaLook

Summary

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

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,10 +9,9 @@
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	17	= Why Table-less Markup? =
18	18
...	...	@@ -46,35 +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 used in Diva include:
	75	+{{/code}}
69	69
70		-* accordion
71		-* date picker
72		-* modal dialog
73		-* modal window
	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.
74	74
75		-They are all in the Prototype+Scriptaculous family.
	79	+{{note title="Note"}}
76	76
77		-=== 4. Ajax ===
	81	+*IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
78	78
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).
	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}}