In this post, I want to show you how I:
- added some CSS-DSL to make the checkbox and label look more pleasing by aligning vertically the checkbox
- Fixed the HTML-DSL to embed links in the label’s text
First, we start with a basic DSL implementation:
This renders as:
which bothers me because the checkbox seems elevated above the text. So let’s fix that first. I’m going to specify a style called “checkbox-valign” using the CSS DSL:
which has a very simple definition:
resulting in a more pleasing alignment of the checkbox:
The helper functions call return the HTML generated by passing an expression to the DSL’s inline function:
In the HtmlDsl class, the inline function is implemented as follows:
leveraging some functions we’ve already written in the DSL as well.
Now, when we click on the links in the “I acknowledge…” label, we get taken to the appropriate text.
Note that the notable “problem” with this is, since these are not separate pages, pressing “Back” on the browser doesn’t take you back to the registration page.