A CSS Validator written in EGL Rich UI
ChrisLaffra 060000KCEQ Comment (1) Visits (2740)
In an earlier posting I mentioned the importance of using external style sheets to separate look and feel from behavior in EGL Rich UI applications. In practice, some EGL Rich UI users have experienced challenges in keeping the CSS syntactically valid. The CSS editors that come with Eclipse/WTP, and which we use without change in RBD, do not validate the CSS that is being edited inside them. And RBD does not add any extra help either.
Not having CSS validation in our tooling makes CSS error detection and debugging more difficult. The best technique we can come up with is to use Firebug in Firefox, but that requires quite some extra setup and work by the developer. A very useful online service called Jigsaw is also available at w3.org. You simply enter your CSS into a form, and the service will tell if it is valid CSS or not. Here is the service with an intentionally invalid sample:
After pressing the "Check" button, you will see a result looking like this:
After including the widget into our EGL Rich UI application that uses the bad CSS, we now see an error message appear automatically when we run the application:
The widget itself defines a VEWidget annotation, so you can easily drag and drop it from the palette in the visual editor (make sure to hit the "refresh palette" button on the design toolbar). Here is how the widget can be used:
The actual widget is shown below. Copy it to your workspace, feel free to rename the package name. Let me know when you find any problems with it.