Introducing Components

Pages on a web site are often compositions of many smaller pieces which we call components. These components are assembled together, sometimes along with some content and theme to form an entire page. Components which used to be mostly static page elements are increasingly becoming dynamic and often make use of CSS and JavaScript and associated libraries. Assembling all of these components together into a page so that everything ends up in the right place can be messy.

To make this simpler DataZoomer, DataZoomer can take care of these details for you. To create a page element, you simply need to pass the various parts of the component to the component function and DataZoomer will make sure the various parts get to the right place.

Example:

def app():
    msg = 'Are you sure you want to delete {}?'
    content = msg.format(record.name)
    button = '<button onclick="reallySure()">Delete</button>
    js = """
        function reallySure() {
            alert("I am an alert box!");
        }
    """
    css = """
        button { color: red; }
    """
    content = component(button, js=js, css=css)
    return page(content, title='Delete Record')

This is designed to be very similar to the way entire pages are created using the page function, and in fact it handles many of the same parameters. Those are:

• js - JavaScript code you want to include
• libs - URLs to JavaScript libraries you want to include
• css - CSS
• styles - URLs to CSS style sheets you want to bring in
• head - anything you want placed into the head of the page
• tail - anything you want placed at the end of the page

In the future we're going to add support for additional types, such as LESS, HAML, Coffee, etc..