Skip to Content

Wiki source code of ERModernLook

Last modified by Kieran Kelleher on 2010/10/04 23:03
Show last authors
1 = ERModernLook =
2
3 === Overview ===
4
5 [[Go to David LeBer's original blog post introducing ERModernLook to the world.>>url:http://davidleber.net/?p=402||shape="rect"]]
6
7 [[David's introductory presentation to WONoVA (screencast)>>url:http://www.wocommunity.org/podcasts/ERModernDirectToWebIntro.mov||shape="rect"]]
8
9 === Working with the ERModernLook in your new projects ===
10
11 ERModernLook is now the default Look framework used in DirectToWeb projects. You simply create a New -> Wonder D2W Application in your workspace and you're already using it!
12
13 === [[image:attach:EclipseScreenSnapz002.png]] ===
14
15 === Features of the ERModernLook ===
16
17 ~1. [[ClickToOpen>>doc:documentation.Home.WOLips Tutorials.Click to Open.WebHome]] support is now included by default with ERModernLook. Just set your wolips password and you're good to go! (by default the properties file has it set to "my_password"). You should see the expanded WOLToolbar below the D2WDebugFlags.
18
19 === [[image:attach:ERD2WDebugFlags - Click to Open.jpg]] ===
20
21 2. Simple styling for the conditional error message on the login page has been added to the project template which results in the following error block:
22
23 [[image:attach:Error styling on login page.png]]
24
25 3. There is a built-in D2W component that will automatically handle ERAttachments. To use it, name the property key that you have used for your ERAttachment and then specify componentName = "ERMD2WEditAttachment". That's it!
26
27 [[image:attach:RuleModeler.png]]
28
29 This results in the following component in your "Create" page.
30
31 [[image:attach:Safari.png]]
32
33 4. To add your own CSS styling that won't be overwritten by any changes to the default stylesheets, follow these steps:
34
35 (% style="color: rgb(0,0,0);" %)1. Add a style sheet to the app's WebServerResources.
36
37 (% style="color: rgb(0,0,0);" %)2. Add a rule to your app's rules
38
39
40
41 {{unmigrated-wiki-markup}}
42 20 : \*true\* => appScreenStylesheet = {"filename" = "app_screen_stylesheet.css"; "framework" = "app"; "media" = "screen"; } \[WO:com.webobjects.directtoweb.Assignment\]
43 {{/unmigrated-wiki-markup}}
44
45 (% style="color: rgb(0,0,0);" %)3. Copy the stylesheets rule from ERModernLook and add it to your app's rules with a higher priority and a reference to your stylesheet:
46
47 (% style="color: rgb(0,0,0);" %)30 : *true* => stylesheets = ("defaultMainScreenStylesheet", "defaultMainPrintStylesheet", "datepickerStylesheet", "appScreenStylesheet") [WO:com.webobjects.directtoweb.Assignment]