If you have ever found yourself in a position to present some YAWL workflows, but would like to use something looking a bit moe modern, then this tutorial might be something for you.
I am going to present a new stylesheet for YAWL dynamic forms, giving them a more modern feeling using some CSS techinques. Of course this means some older browsers will not be able to display these new features, but for presentation purposes, it can give you an advantage to style the forms in the corporate design or colors of the company. To show the difference between the two styles, a side by side comparison is the best way, so now the results of the face-lift:
What I have done is adding some elements, that you surely have already seen on other web sites. Here is a list of the changes:
- the form's edges have been smoothed
- shadows have been added to the text fields
- fields in focus now glow in a light blue
- buttons now have a blue color and have an hover-over effect
- invalid fields glow red instead of the field being filled red
- other colors have been removed to get a cleaner look
- required fields are now marked with a "*", instead of having a yellow background
Attached to this tutorial is the stylesheet.css file and the star.png used for the required fields. Both files have to be copied to the sub folder "resource" of the "resourceService" folder in the webapps dircetory of your YAWL installation. To use the new .css file you may need to reload the resource service site without using the cache, because some browsers don't load the css file everytime a website is called and use the cached file instead. In the Firefox browser this is done by the keybord shortcut [Ctrl] + [Shift] +[r].
The original CSS file is already well structured, so the classes used by the dynamic form generator are marked. Here is a list of classes that I have modified to achieve the result above:
- dynformOuterPanel - the outer panel surrounding the entire form
- dynformSubPanel - panel that is used to group together fields
- dynformSubPanelAlt - panel that is used alternately with dynformSubPanel to create a visual distinction
- dynFormButton - used for the three buttons below the form
- dynformOccursButton - used for the buttons to increase or decrease number of elements using maxOccurs
- dynformInput - text field for a not mandatory field
- dynformInputRequired - text field for a mandatoy field
- dynformInputError - fields that have invalid values
With CSS you can also use effects like the hover effect on the buttons or the focus effect on the fields. Since some elements could not be changed by just editing these classes, the specifity had to be increased for the date field to take effect:
td span .TxtFld{ ... }and the checkbox would have received the style of the other text fields, which have to be overwritten by this rule:
dynformInput.CbSpn{ ... }CSS allows a lot of customization itself and interesting effects can be made with animations. It would be interesting to receive styles that other users have made and give YAWL users a range of styles to choose from.
