Resource registry, widget CSS and JavaScript

Introduction

Deform supports a resource registry allowing widgets to signal they want particular CSS and JavaScript files to be present in page rendering. E.g. a date picker widget tells it needs date picking JavaScript and CSS files to be present in rendered HTML. Then these static assets will be placed in the <head> section of HTML.

Note

Most widgets work without additional JS or CSS files. Only complex widgets need additional asset support. For more information see deform.widget.default_resources.

You can include JS and CSS from a Deform form using websauna.system.form.resourceregistry.ResourceRegistry.pull_resources(). This will walk through all form widgets and include widget specific assets in a rendering loop.

Example usage:

import colander
import deform
from deform import Form

from websauna.system.form.schema import CSRFSchema
from websauna.system.form.resourceregistry import ResourceRegistry


class MySchema(CSRFSchema):
    """Ask for email."""

    email = colander.SchemaNode(
        colander.Str(),
        title='Email',
        widget=deform.widget.TextInputWidget(size=40, maxlength=260))



@simple_route("/form", route_name="my_form", renderer="myapp/my_form.html")
def my_form(request):

    schema = MySchema().bind(request=request)

    form = Form(schema, resource_registry=ResourceRegistry(request))

    # User submitted this form
    if request.method == "POST":
        # ...
        pass

     # This will populate self.request.on_demand_resource_renderer
     # with JS and CSS static assets from widgets
     form.resource_registry.pull_in_resources(request, form)

     return locals()

Details

  • Websauna’s resource registry is websauna.system.form.resourceregistry.ResourceRegistry

  • Form is constructed with resource_registry argument

  • When the form is finalized, before the page rendering starts call websauna.system.form.resourceregistry.ResourceRegistry.pull_resources()

  • This will go through the form widget stack and extract CSS and JS files from widgets. The required files are passed to websauna.system.core.render.OnDemandResourceRenderer

  • JS is included in site/javascript.html template and CSS is included in site site/css.html template.

  • By default <script> tags comes before closing of </body>. If any Deform widgets require JS all <script> goes to <head>. This is due to current Deform template limitations.

Deform comes with some default Bootstrap-compatible JS and CSS files, see deform.widget.default_resources. Resource registry can also manage bundling of the resources, so that instead of pulling the actual JS file it pulls a bundle where this JS file is present.

See also