Wiki source code of ERDivaLook
Version 235.1 by Ravi Mendis on 2009/07/20 10:43
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
227.1 | 1 | == What is Div#a Look? == |
| |
84.1 | 2 | |
| 3 | Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb. | ||
| 4 | More specifically, it generates pages that are: | ||
| 5 | |||
| 6 | * Semantically-rich or **tables-less** | ||
| |
95.1 | 7 | * XHTML 1.0 strict compliant |
| |
84.1 | 8 | * Sans images, inline styles or presentation attributes |
| |
105.1 | 9 | |
| |
205.1 | 10 | They make use of: |
| 11 | |||
| |
227.1 | 12 | * CSS **themes** |
| |
205.1 | 13 | * Scriptaculous **effects** |
| |
227.1 | 14 | * Javascript **widgets** |
| |
229.1 | 15 | * **Ajax** |
| |
205.1 | 16 | |
| |
229.1 | 17 | == Why Table-less Markup? == |
| |
105.1 | 18 | |
| 19 | Scriptaculous, jQuery effects, etc work by manipulating CSS attributes. | ||
| 20 | Mostly they don't work very well on tables, if at all. | ||
| 21 | Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without. | ||
| 22 | |||
| 23 | This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite. | ||
| 24 | Like jQuery, which takes this a step further, by applying functionality via CSS selectors. | ||
| 25 | (So for jQuery it is an absolute requirement). | ||
| |
109.1 | 26 | |
| 27 | Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative. | ||
| 28 | |||
| 29 | === What is a Diva Theme? === | ||
| 30 | |||
| |
135.1 | 31 | In ERDivaLook, or Diva for short, your application is not complete without a CSS theme. |
| |
109.1 | 32 | All images, layout, colors and font information are maintained in the CSS. |
| 33 | |||
| 34 | All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules). | ||
| 35 | |||
| |
235.1 | 36 | ===== Examples: ===== |
| |
109.1 | 37 | |
| |
235.1 | 38 | The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app. |
| 39 | |||
| |
119.1 | 40 | |= Neutral |= WebObjects |= Simple |= Organica |
| |
139.1 | 41 | | [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]] |
| |
109.1 | 42 | | D2W Neutral look reverse engineered |
| 43 | as a Diva Theme | D2W WebObjects look reverse engineered | ||
| |
119.1 | 44 | 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 |
| 45 | | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]] | ||
| |
123.1 | 46 | |
| 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]]. | ||
| |
149.1 | 48 | |
| |
227.1 | 49 | == HowTos == |
| |
149.1 | 50 | |
| |
227.1 | 51 | {{children all="true"}}{{/children}} |
| 52 | |||
| 53 | == Features == | ||
| 54 | |||
| 55 | === 1. CSS Themes === | ||
| 56 | |||
| 57 | CSS theme you give your application is **fully-customizable**. | ||
| 58 | However, Diva lacks CSS theming tools (such as jQuery ThemeRoller). | ||
| 59 | |||
| 60 | Instead, the CSS themes need to be hand-rolled. | ||
| 61 | |||
| 62 | === 2. Scriptaculous Effects === | ||
| 63 | |||
| 64 | The effects library used for ERDivaLook is Wonder's choice - Scriptaculous. | ||
| 65 | |||
| 66 | === 3. Javascript Widgets === | ||
| 67 | |||
| |
229.1 | 68 | The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family. |
| |
227.1 | 69 | |
| |
229.1 | 70 | === 4. Well-Formed Semantic Markup === |
| |
227.1 | 71 | |
| |
229.1 | 72 | The pages produced by Diva look will validate as (almost) XHTML strict. Features of the DOM: |
| |
227.1 | 73 | |
| |
229.1 | 74 | * Unique IDs for elements |
| 75 | * Unique form control names | ||
| 76 | * Use of multiple CSS classes | ||
| |
227.1 | 77 | |
| |
229.1 | 78 | === 5. Ajax Page Configurations === |
| 79 | |||
| 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: | ||
| 83 | |||
| 84 | * ##AjaxQueryMovie## | ||
| 85 | * ##AjaxEditStudio## | ||
| 86 | * ##AjaxListTalent## | ||
| 87 | |||
| 88 | === 6. Dynamic D2W === | ||
| 89 | |||
| |
231.1 | 90 | Using ajax in combination with //delayed// D2W rules will result in [[dynamic D2W>>How to use Dynamic D2W]]. |