Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 203.1
edited by Ravi Mendis
on 2009/04/24 02:05
Change comment: There is no comment for this version
To version 205.1
edited by Ravi Mendis
on 2009/04/28 07:09
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,4 +1,4 @@
1 -=== What is ERDivaLook? ===
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,10 +6,14 @@
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**
12 12  
10 +They make use of:
11 +
12 +* CSS **themes**
13 +* Scriptaculous **effects**
14 +* Javascript **widgets**
15 +* Ajax
16 +
13 13  = Why Table-less Markup? =
14 14  
15 15  Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
... ... @@ -42,54 +42,6 @@
42 42  
43 43  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]].
44 44  
45 -= Using ERDivaLook =
49 +== ERDivaLook HowTos ==
46 46  
47 -=== Setting the D2W Page CSS ===
48 -
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.
51 -
52 -e.g:
53 -
54 -|= LHS |= key |= RHS
55 -| task = 'edit' |**stylesheet**| //NeutralEditPage.css//
56 -| task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
57 -
58 -==== A closer look at the CSS file... ====
59 -
60 -===== 1. CSS Imports =====
61 -
62 -{{code}}
63 -
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");
71 -
72 -{{/code}}
73 -
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.
75 -
76 -===== 2. Image Replacement =====
77 -
78 -{{code}}
79 -
80 -div#a form h1.edit {
81 - background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
82 - text-indent: -5000px;
83 -}
84 -
85 -{{/code}}
86 -
87 -Standard CSS image replacement applies.
88 -
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}}.
90 -
91 -{{tip title="Tip"}}
92 -
93 -All elements in a Diva look D2W page begin with *{{div#a}}*.
94 -
95 -{{/tip}}
51 +{{children all="true"}}{{/children}}