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,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.
...	...	@@ -45,62 +45,45 @@
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>>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.
	70	+=== 4. Well-Formed Semantic Markup ===
78	78
79		-{{note title="Note"}}
	72	+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).
	74	+* Unique IDs for elements
	75	+* Unique form control names
	76	+* Use of multiple CSS classes
82	82
83		-{{/note}}
	78	+=== 5. Ajax Page Configurations ===
84	84
85		-===== 2. Image Replacement =====
	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:
86	86
87		-{{code}}
	84	+* ##AjaxQueryMovie##
	85	+* ##AjaxEditStudio##
	86	+* ##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		-}
	88	+=== 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}}
	90	+Using ajax in combination with //delayed// D2W rules will result in [[dynamic D2W>>How to use Dynamic D2W]].