Writing with Style
ChrisLaffra 060000KCEQ Visits (2137)
Web2.0 applications are all about style, a word that is typically defined in dictionaries as "a fashionable manner of doing things." Websites tend to be customized to a common look and feel (e.g., all pages at http://eclipse.org follow the same theme), or pay homage to a well-known style (e.g., that copy the no-nonsense minimalist style of the Apple homepage), or that simply reflect the personality of the designer (see http
What all these pages have in common is that they separate content from styling. There is a useful lesson to learn there. Programmers that are really good at writing event-driven browser applications, calling services in SOAP and REST, tend to be awful UI designers (I speak from my own personal experience here, mind you). I know how to paint. I know what brushes are, and what how to get the paint onto the canvas. I can even do a decent job copying a photograph to canvas, making it look like I painted quite a good painting. However, I am not a natural talent. I know, and I leave that to others. The same is true for web design. It is best to leave color selection, gradients, spacing, font choices, etc, to the people who use Macs, scribble things in moleskin notebooks, know what Hue saturation means, and who can make sliding doors in CSS.
So, for EGL Rich UI, we recommend the same separation of concerns. Admittedly, EGL Rich UI allows you to directly modify visual attributes on widgets because sometimes you simply want to quickly built a UI prototype of your application to test it out. However, it is very important to separate substance from style. By merging styling into your UI layout and event logic, you run the risk of developing an application that is hard to customize to another theme, or to get the look and feel adopted to the needs of the "pixel perfect" designer in your corporate design team.
Therefore, for EGL Rich UI applications we recommend you use an external style sheet and rely on that exclusively for styling of web application. When EGL Rich UI creates widgets, it attaches a style class to each widget which uses the simple pattern of "EglRui" + widget handler name. For the "Button" widget, the class is "EglRuiButton". For "CheckBox", it is "EglRuiCheckBox". Etc. Some nested widgets use synthetic class names. For instance, "Grid" gives its children class names "EglRuiGridHeader" and "EglRuiGridCell". Other widgets, such as the various TextField widgets, use different classes to indicate their state. In doubt, refer to the widget's source, or use Firebug inside Firefox to inspect the styling of a given widget on the screen.
A RUIHandler can import its own stylesheet using the "includeFile" annotation on the handler's definition. The CSS file will be located in the workspace using the path relative to the "WebContent" folder. You can also edit/update the com.
To inspect styling on web applications, various people have written extensions to browsers (such as Firebug). An alternative, and quite intriguing approach is taken by "xray" (see http
When you click on the small xray button, you can inspect any element in the web application by simply clicking on it:
As you can see, the button is now highlighted by a blue box, and it shows the attributes such as "class" being "EglRuiButton" and "margin" being 25px.
Here is the simple implementation: we define a new widget as follows:
The widget acts like a button, and is positioned using absolute placement at the top left of the browser window. It registers a handler for the mouse click event. When the user presses inside the div area, a script is loaded into the document and executed. That brings up the xray UI until the user closes it again.
The xray widget can be included into any existing by adding it to its UI and by declaring a variable like this:
Because we also added a "VEWidget" annotation, this handy-dandy tool also appears in the Visual Editor. Switch to the design tab while editing your Rich UI application, and hit the "refresh palette" toolbar button. Then drag the xray tray icon anywhere into your design. Then switch to the preview tab and enjoy using xray!