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:
...	...	@@ -6,16 +6,12 @@
6	6	* Semantically-rich or **tables-less**
7	7	* XHTML 1.0 strict compliant
8	8	* Sans images, inline styles or presentation attributes
	9	+* Use a CSS **theme**
	10	+* With Scriptaculous **effects**
	11	+* Seamless use of **Ajax widgets**
9	9
10		-They make use of:
	13	+= Why Table-less Markup? =
11	11
12		-* CSS **themes**
13		-* Scriptaculous **effects**
14		-* Javascript **widgets**
15		-* **Ajax**
16		-
17		-== Why Table-less Markup? ==
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.
21	21	Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.
...	...	@@ -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:**
	32	+===== Example Diva Themes: =====
37	37
	34	+The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
	35	+
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,56 @@
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 ==
	45	+= Using ERDivaLook =
49	49
50		-{{children all="true"}}{{/children}}
	47	+=== Setting the D2W Page CSS ===
51	51
52		-== Features ==
	49	+Diva look introduces a new D2W key: **stylesheet**.
	50	+The CSS file computed by this key will be set as the stylesheet for the page.
53	53
54		-=== 1. CSS Themes ===
	52	+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).
	54	+|= LHS |= key |= RHS
	55	+| task = 'edit' |**stylesheet**| //NeutralEditPage.css//
	56	+| task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
58	58
59		-Instead, the CSS themes need to be hand-rolled.
	58	+==== A closer look at the CSS file... ====
60	60
61		-=== 2. Scriptaculous Effects ===
	60	+===== 1. CSS Imports =====
62	62
63		-The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
	62	+{{code}}
64	64
65		-=== 3. Javascript Widgets ===
	64	+@import url("Neutral.css");
	65	+@import url("ERDIVEditPage.css");
	66	+@import url("NeutralEditToManyFault.css");
	67	+@import url("NeutralEditToOneFault.css");
	68	+@import url("NeutralCalendarDateSelect.css");
	69	+@import url("NeutralAjaxAccordion.css");
	70	+@import url("NeutralEditToOneRelationship2.css");
66	66
67		-The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
	72	+{{/code}}
68	68
69		-=== 4. Well-Formed Semantic Markup ===
	74	+The 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:
	76	+===== 2. Image Replacement =====
72	72
73		-* Unique IDs for elements
74		-* Unique form control names
75		-* Use of multiple CSS classes
	78	+{{code}}
76	76
77		-=== 5. Ajax Page Configurations ===
	80	+div#a form h1.edit {
	81	+ background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
	82	+ text-indent: -5000px;
	83	+}
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	+{{/code}}
82	82
83		-* ##AjaxQueryMovie##
84		-* ##AjaxEditStudio##
85		-* ##AjaxListTalent##
	87	+Standard CSS image replacement applies.
86	86
87		-=== 6. Dynamic D2W ===
	89	+Here, the edit page banner is being set. {{color value="red"}}{{div#a form h1.edit}}{{/color}} is an example of a **CSS selector**. The page title is a <h1> with a class //edit//, so the resulting CSS selector for that element would be {{color value="red"}}{{h1.edit}}{{/color}} or more specifically {{color value="red"}}{{div#a form h1.edit}}{{/color}}.
88	88
89		-Using ajax in combination with //delayed// D2W rules will result in [[dynamic D2W>>How to use Dynamic D2W]].
	91	+{{tip title="Tip"}}
	92	+
	93	+All elements in a Diva look D2W page begin with *{{div#a}}*.
	94	+
	95	+{{/tip}}