ERModernLook

= ERModernLook =

=== Overview ===

[[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

20 : \*true\* => appScreenStylesheet = {"filename" = "app_screen_stylesheet.css"; "framework" = "app"; "media" = "screen"; } \[WO:com.webobjects.directtoweb.Assignment\]

43

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]

Wiki source code of ERModernLook