hypothesis/h — pull request #165 by tilgovi (2012-10-06 20:41:33+00:00)
Title: custom tinyman template, bootstrappy dropdowns

Here's one I'd like your feedback on @jtremback.

Since we already depend on the deform_bootstrap package for its bootstrap-ready deform templates I decided to bundle the bootstrap CSS into our app. I noticed that it made some things more attractive, others different, I had to override some things to get closer to what we had in places (or change the spelling of the selector to match how bootstrap addressed the same elements).

The advantage that I see is that bootstrap provides a lot of sane defaults, especially around some of the transitional effects and things that make UI fast to prototype. We can always override them later, or replace components as we good, but I wanted to have pills, tabs, etc all available. I've overridden the tabs, already, with what you had (as you'll see).

The other thing this commit does is show how to customize a deform template nicely. Deform widgets serve two roles: templating a control (or set of controls) and validating / deserializing the form input. For an example of the latter, the `CheckedPasswordWidget` will show two password fields and ensure that they match on submit, but the return value from validation has only a single password key. It's an elegant way to separate the details of how you present your form from the logical data you care about. In other words, just because you want to show someone two password fields and check them doesn't mean that your registration code actually needs two passwords, so the form schema actually only has one password field but its `Widget` can take care of the details of presentation, consumption and validation.

Here, I've taken the `SelectWidget`, since it models a list of choices, but used a custom template, `tinyman`, to show how its display can be customized and implemented using alternative DOM. In this case, I've chosen to use bootstrap's dropdown-menu features as a quick prototype (the hover action on the dropdown menu could use some tweaking to be in line with our aesthetic). I even set it up so that the form includes a hidden input with the "selected" value and clicking on any of the choices changes this value and then triggers a "change" event, just as if it had been implemented with a real select control all along.

Also, the text field glows I didn't override. I'm not sure whether I like them or not, TBH, and wanted to let you make the call.