WebBot - Build Web Apps as Easily as Native Ones

GuiBuilder - Website for Gui Builder tool

Latest Version:0.5.0

Loading ContentControl...

OverviewDirectory StructureAdding a PageModifying a PageModifying Style

WebBot API Overview

This section of the WebBot site provides an overview of variuos features of the WebBot framework. However, to get more in depth usage guides you will want to look at the individual libraries WebBot uses to enable dynamic web page development.

Python Libraries used by WebBot

WebElements - Used to provide reusable html / css and javascript creating widgets - that can be combined to form any possible web app.
DynamicForm- Used to accept requests and abstract the concept of AJAX, allowing individual sections of the page to be reloaded.

Tools and Applications used with WebBot

GuiBuilder- Enables building and editing WebBot templates visuallly, in a drop and drop fashion.
Compass - Enables writing very condensed style definitions using the Sass language, that then produce the apps css file.

The WebBot Directory Structure Guide

WebBot strives to provide a directory structure that makes it easy and clear where changes are made. In case the layout itself was not self evident - below is a definition of every folder used by WebBot:

[AppName] /

The root WebApp directory is generally the name of your app verbatim. There are no WebBot specific files in this directory - only sub-folders.

[AppName] /Pages/

All the pages used by your app are defined as subdirectories of this folder.

[AppName] /Pages/[PageURL]/

The name of the directory for an individual page should be the same as the sub-url used to access that page. Within this directory there should be all the files needed to define the page:

Servlet.py- contains the server side definition and processing code for the page.
Template.wui- Defines the appearance and visual structure of the page as a WebElement template file - editable by GuiBuilder.

[AppName] /WebBot/

Any WebBot specific settings, as well as the frame used by every other WebBot page is placed in here:

__init__.py - The base page object that defines the frame used by other pages is defined in this file.
Page.wui- Defines the appearance and visual structure of the frame as a WebElement template file - editable by GuiBuilder.

[AppName] /static/

All the static files (javascript, compiled css, images) used by WebBot should be stored in the appropriate subclasses of this directory.

config.rb- The config file used by compass to define how css should be created from the provided sass files.

[AppName] /static/images/

All images used by your WebBot app should be stored within this directory.

favicon.png - The favicon used by your app should be defined here. To change your fav icon, simply replace this file.

[AppName] /static/js/

Any static javascript files used by your app should be stored here.

WebBot.js- the base javascript file used by all WebBot pages. Generally shouldn't be modified as new versions of WebBot may modify its contents highly.

[AppName] /static/sass/

Defines the sass files that are compiled down into css by compass.

Site.sass- The style definition used by every page in your app. Edit this freely to modify your apps appearance.
_WebBot.scss- The global WebBot style definition that defines how built-in widgets should be styled by defualt. This file should not be edited.

[AppName] /static/stylesheets

Raw css files are stored in this directory, generally these are the result of doing a compass compile in the base static directory. However, you can also add css files here manually if needed.

Adding a New WebBot Page

WebBot makes it easy to separate the function of your app into different pages, and therefore distinct URLS.

To add a new page simply run the following command from the root directory of your app:

instantly create_webbot_page

It will ask you for the python name of your new page (which will double as it's URL) and a general description of your page. Using this information it will create your new page accessible from [AppURL]/[PageName].

Modifying a WebBot Page

Each page in WebBot is placed in its own directory and has its definition split into a minimum of two files: The view file(Template.wui) and control file (Servlet.py).

Modifying the View

While you can certainly modify the view by hand, we recommend using GuiBuilderfor its ease of use and the widget / property discovery capablities it provides.

To install GuiBuilder you must first have installed the official qt python bindings: PySide.

Once PySide is installed run:

pip install GuiBuilder

or if you prefer:

easy_install GuiBuilder

This will install the latest version of GuiBuilder which you can then use to edit the pages view:

guiBuilder [AppDirectory]/Pages/[PageName]/Template.wui

Modifying the Control

The sever side definition and processing code is stored in Servlet.py and should look as follows:

'''
    The Home Page for your App
'''

import logging as log
from WebBot import Page, PageControls
from WebElements import UITemplate

class Home(Page):
    class ContentControl(PageControls.TemplateControl):
        template = UITemplate.fromFile("Pages/Home/Template.wui")

        def initUI(self, ui, request):
            '''
                The initial setup of the interface (such as dynamically adding widgets that are not present in the
                view) should be done here.
            '''
            pass

        def setUIData(self, ui, request):
            '''
                Any data populating that occurs as a result of the data in the request should be done here.
            '''
            pass

        def processPost(self, ui, request):
            '''
                Any unique processing that needs to be done on a post should be done here.
                Note: There is corresponding process(Get|Delete|Put) methods.
            '''
            pass

        def validPost(self, ui, request):
            '''
                Any validation of post data should occur here: with true being returned only if the data
                is valid.
                Note: There is corresponding valid(Get|Delete|Put) methods.
            '''
            return True

You can modify each respective method to change the behaviour of your page. For more info see: DynamicForm.

Modifying the Appearance of a WebBot App

WebBot is designed to make editing the appearance of your app as quick and DRY(Don't Repeat Yourself) as possible. Toward this goal WebBot comes with a base stylesheet, that defines good defaults for most HTML objects and WebElement widgets.

More info here.

Additionally WebBot takes advantage of Compass / Sass to allow you to write more succinct style definitions where they are needed.

Install Compass to modify your stylesheets.

Once you have compasss installed on your system you can modify the Site.sass file located in [AppName]/static/sass/. After you have made the necessary modifications to your apps style definition run the following from [AppName]/static/:

compass compile

That's all there is to it! This compiles your style definition into the appropriate CSS files so that it can take effect.