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,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.
...	...	@@ -33,8 +33,10 @@
33	33
34	34	All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
35	35
36		-**Examples:**
	35	+===== Example Diva Themes: =====
37	37
	37	+The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
	38	+
38	38	|= Neutral |= WebObjects |= Simple |= Organica
39	39	| [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
40	40	| D2W Neutral look reverse engineered
...	...	@@ -42,48 +42,64 @@
42	42	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
43	43	| //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
44	44
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		-== HowTos ==
	48	+= How to use ERDivaLook =
49	49
50		-{{children all="true"}}{{/children}}
	50	+== How to set the CSS/Theme of a D2W Page ==
51	51
52		-== 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.
53	53
54		-=== 1. CSS Themes ===
	55	+e.g:
55	55
56		-CSS theme you give your application is **fully-customizable**.
57		-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// |
58	58
59		-Instead, the CSS themes need to be hand-rolled.
	61	+==== A closer look at the CSS file... ====
60	60
61		-=== 2. Scriptaculous Effects ===
	63	+===== 1. CSS Imports =====
62	62
63		-The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
	65	+{{code}}
64	64
65		-=== 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");
66	66
67		-The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
	75	+{{/code}}
68	68
69		-=== 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.
70	70
71		-The pages produced by Diva look will validate as (almost) XHTML strict. Features of the DOM:
	79	+{{note title="Note"}}
72	72
73		-* Unique IDs for elements
74		-* Unique form control names
75		-* Use of multiple CSS classes
	81	+*IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
76	76
77		-=== 5. Ajax Page Configurations ===
	83	+{{/note}}
78	78
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:
	85	+===== 2. Image Replacement =====
82	82
83		-* ##AjaxQueryMovie##
84		-* ##AjaxEditStudio##
85		-* ##AjaxListTalent##
	87	+{{code}}
86	86
87		-=== 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	+}
88	88
89		-Using ajax in combination with //delayed// 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}}