search

Kotti / deform_bootstrap

Bootstrap compatible templates for the deform form library. (Merged into deform 2.)
http://pypi.python.org/pypi/deform_bootstrap
34 stars 30 forks source link

readme

================ deform_bootstrap

deform_bootstrap provides Twitter Bootstrap <http://twitter.github.com/bootstrap/> compatible widgets, templates and styles for the deform form library <http://pypi.python.org/pypi/deform/0.9.4>.

deform_bootstrap is developed on GitHub <https://github.com/Kotti/deform_bootstrap>_. Latest releases are available on PyPI <http://pypi.python.org/pypi/deform_bootstrap>_.

How to use it

I just downloaded this and wanna use it

In your Paste Deploy configuration file (e.g. development.ini) add deform_bootstrap to the list of pyramid_includes, or add a this line if a pyramid.includes setting does not exist::

[app:main] ... pyramid.includes = deform_bootstrap

This will put the templates in deform_bootstrap/templates into the deform search path <http://docs.pylonsproject.org/projects/deform/en/latest/templates.html>_.

I want to try it before using

If you want to quickly try out deform_bootstrap and see how it looks in practice you can run these commands, assuming that you have a virtualenv <http://pypi.python.org/pypi/virtualenv>_ set up in your deform_bootstrap directory::

$ git clone https://github.com/Pylons/deformdemo.git $ cd deformdemo $ ../bin/python setup.py develop $ cd .. $ bin/pserve demo.ini

You should now be able to access the demo site at http://0.0.0.0:8521

Using tabs in forms

To make a tabbed form, use mapping. Each mapping will appear as a new tab, taking the title of the mapping as the name for the tab. If you specify no tabs for some information, it will default to a 'Basic' tab.

A form using the following Client schema will render with two tabs 'Person data' and 'Car stuffs':

::

import colander

class Person(colander.Schema):
    name = colander.SchemaNode(
        colander.String(),
        title='Name',
        )
    surname = colander.SchemaNode(
        colander.String(),
        title='Surname',
        )

class Car(colander.Schema):
    color = colander.SchemaNode(
        colander.String(),
        title='Color',
        )
    horsepower = colander.SchemaNode(
        colander.Integer(),
        title='Horsepower',
        )

class Client(colander.Schema):
    person = Person(title='Person data')
    car = Car(title='Car stuffs')

Additional widgets / getting rid of legacy stuff

jQueryUI

Deform depends on jQueryUI for these wigdgets:

deform_bootstrap comes with widgets that replace these, and that are compatible with Bootstrap. If you don't use any of these, you can skip the remainder of this section and just delete jQueryUI from your CSS and JS imports. Otherwise you'll need to add bootstrap-typeahead.js and/or bootstrap-datepicker.js to your JS includes.

You can then use deform_bootstrap's TypeaheadInputWidget as a drop in replacement for deform's AutocompleteInputWidget.

Unfortunately things are a litte more complicated for DateInputWidget and DateTimeInputWidget, because bootstrap does not provide native widgets for that usecases (yet?). Therefore you will need to either use deform_bootstrap.css provided by deform_bootstrap or build your own bootstrap.css using LESS <http://lesscss.org/>. Once you have lessc installed it can be done like this::

$ cd deform_bootstrap/static $ lessc deform_bootstrap.less

You'll then find your custom deform_bootstrap.css which immediately leads to a shiny new look for DateInputWidgets. For DateTimeInputWidgets you'll have to replace your existing imports. This is as easy as replacing from deform.widget import DateTimeInputWidget with from deform_bootstrap.widget import DateTimeInputWidget in your code.