Wiki source code of ERModernLook
Last modified by Kieran Kelleher on 2010/10/04 23:03
Hide last authors
author | version | line-number | content |
---|---|---|---|
![]() |
21.1 | 1 | = ERModernLook = |
2 | |||
3 | === Overview === | ||
4 | |||
![]() |
61.1 | 5 | [[Go to David LeBer's original blog post introducing ERModernLook to the world.>>url:http://davidleber.net/?p=402||shape="rect"]] |
![]() |
39.1 | 6 | |
![]() |
61.1 | 7 | [[David's introductory presentation to WONoVA (screencast)>>url:http://www.wocommunity.org/podcasts/ERModernDirectToWebIntro.mov||shape="rect"]] |
![]() |
21.1 | 8 | |
![]() |
61.1 | 9 | === Working with the ERModernLook in your new projects === |
![]() |
21.1 | 10 | |
![]() |
61.1 | 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! |
![]() |
21.1 | 12 | |
![]() |
61.1 | 13 | === [[image:attach:EclipseScreenSnapz002.png]] === |
![]() |
21.1 | 14 | |
![]() |
61.1 | 15 | === Features of the ERModernLook === |
![]() |
47.1 | 16 | |
![]() |
74.1 | 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. |
![]() |
47.1 | 18 | |
![]() |
61.1 | 19 | === [[image:attach:ERD2WDebugFlags - Click to Open.jpg]] === |
![]() |
47.1 | 20 | |
![]() |
61.1 | 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: |
![]() |
47.1 | 22 | |
![]() |
61.1 | 23 | [[image:attach:Error styling on login page.png]] |
![]() |
47.1 | 24 | |
![]() |
61.1 | 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! |
![]() |
49.1 | 26 | |
![]() |
61.1 | 27 | [[image:attach:RuleModeler.png]] |
![]() |
49.1 | 28 | |
![]() |
61.1 | 29 | This results in the following component in your "Create" page. |
![]() |
55.1 | 30 | |
![]() |
61.1 | 31 | [[image:attach:Safari.png]] |
![]() |
55.1 | 32 | |
![]() |
61.1 | 33 | 4. To add your own CSS styling that won't be overwritten by any changes to the default stylesheets, follow these steps: |
![]() |
55.1 | 34 | |
![]() |
61.1 | 35 | (% style="color: rgb(0,0,0);" %)1. Add a style sheet to the app's WebServerResources. |
![]() |
55.1 | 36 | |
![]() |
61.1 | 37 | (% style="color: rgb(0,0,0);" %)2. Add a rule to your app's rules |
![]() |
59.1 | 38 | |
39 | |||
40 | |||
![]() |
61.1 | 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}} | ||
![]() |
59.1 | 44 | |
![]() |
61.1 | 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] |