old web2py blog

Web2py supports the concept of components. Here we try explain what they are.

Consider the following complete web2py app, comprised of a controller (controllers/default.py):

def index():
    return dict()

def auxiliary():
    form=SQLFORM.factory(Field('name'))
    if form.accepts(request.vars): return "Hello %s" % form.vars.name
    return form

and the following view for the "index" action (views/default/index.html):

{{extend 'layout.html'}}
<h1>Hello World</h1>
{{=LOAD('default','auxiliary',ajax=True)}}

When visiting the URL "http://hostname/app/default/index", the "index" action is called and it is rendered by the "index.html" view. The view includes the component called "auxiliary" via the LOAD function. A component is just another web2py action.

There is a lot of "magic" that goes on in the LOAD function. First of all, the LOAD function generates a <div></div> and jQuery code to load the content of the "auxiliary" action into the DIV via AJAX. But this is not all. If the action auxiliary contains a form (as in this example) the form submission is intercepted by web2py so that the form is also submitted via AJAX. When the form is submitted, the response replaces the original component. In practice the component talks to the server without ever reloading the calling page and without any spacial programming effort other than using the LOAD function.

This is all transparent to the programmer. There can be multiple components per page and any web2py action can be used as a component, even if it has an associated view. The calling page can also pass parameters to the component and the server, LOAD(...,vars=dict()), and can give instructions to the calling page by passing JS instructions along with the response (not documented here).

The LOAD function allows a modular design for interactive web2py applications. Components can be distributed with their own models/views/controllers/static files packaged together using the web2py plugin mechanism.

{{=LOAD(a,b,args=args,vars=vars,ajax=ajax,ajax_trap=ajax_trap)}}

a, b, args, and vars are used to build the URL URL(request.application,c=a,f=b,args=args,vars=vars)

if ajax=False the URL is called BEFORE the page is served

if ajax=True the URL LOAD just generates JS code to request the page via AJAX

if ajax_trap=True all forms in the content are captured and submitted via AJAX

ajax=True implies ajax_trap=True

ajax=False implies args and vars are ignored and request.args and request.vars are used.