How to use CSS with your EGL CE programs
ChrisLaffra 060000KCEQ Visits (2750)
In the following picture we show how easy it is in EGL CE to change visual attributes for any widget using the visual editor. In this case we show 4 buttons, each with different attributes defining distinguishing features.
To add styling to your Rich UI applications, EGL CE offers the following three modes:
In practice, we advise people that are just learning EGL to start with mode 1. and use direct attributes. This will give them an idea of the possible attributes and their effects most directly. Once a development process matures, we recommend stepping to mode 3, and use CSS classes.
Note that the EGL widgets and the Dojo widgets use various styles for each of their widgets (and the subcomponents inside those widgets). This means that without any EGL coding, you can make widgets look differently by simply adding a new stylesheet to your application. Use the xray tool described below to figure out what styles are used, or consult the source for each widget by selecting the typename and hitting F3.
In two blog postings that were published before we launched EGL CE, in the EGL Rich UI blog, I talked about two tools that can help develop and debug your CSS.
The first posting, Writing with Style, shows the xray tool, which allows you to inspect any given element in the browser's document, so you can find out what CSS class, padding, margin, and borders it has. This is useful for making sure you did not make any typos when referring to certain style classes, for instance.
The second posting, A CSS Validator written in EGL Rich UI, discusses a CSS Validator which can be used to verify the CSS you are entering in your CSS files is conforming to the W3 standards. For this purpose we wrote a widget in EGL Rich UI that calls services to the W3 Jigsaw validator.
Have fun with styling your EGL CE programs and share your tips and experiences in a comment below...