Loading Static Contents¶

Contents on the Web¶

As an example, use bootstrap.

To use bootstrap, one css file (bootstrap.min.css) and two js files (jquery and bootstrap.min.js) are need to be loaded. To load css file, use <link> tag and insert into the <head>. And to load js files, use <script> tag and insert into the <body>. Both <head> and <body> tags can be accessed via document.head and document.body (same as JavaScript).

from wdom.document import get_document
from wdom.server import start
from wdom.tag import Link, Script, Button

if __name__ == '__main__':
    document = get_document()
    # Add <link>-tag sourcing bootstrap.min.css on <head>
    document.head.appendChild(Link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'))

    # Add <script>-tag sourcing jquery and bootstrap.min.js to <body>
    document.body.appendChild(Script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'))
    document.body.appendChild(Script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'))

    # Add bootstrap button element
    document.body.appendChild(Button('click', class_='btn btn-primary'))

    start()

As frequently required to load css and js files on document, WDOM provides shortcut method; document.add_cssfile({/path/to/cssfile}) and document.add_jsfile({/path/to/jsfile}).

from wdom.document import get_document
from wdom.server import start
from wdom.tag import Button

if __name__ == '__main__':
    document = get_document()
    # Add <link>-tag sourcing bootstrap.min.css on <head>
    document.add_cssfile('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
    # Add <script>-tag sourcing jquery and bootstrap.min.js to <body>
    document.add_jsfile('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
    document.add_jsfile('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')

    # Add bootstrap button element
    document.body.appendChild(Button('click', class_='btn btn-primary'))

    start()

Local Resources¶

User’s css files and other static contents, like images or html files, are also available on WDOM app.

For the directory tree like below:

.
├── static
│   └── css
│       └── app.css
├── app.py
├── module1.py
├── ...
...

When want to use static/css/app.css from app.py, app.py will become as follows:

from os import path

from wdom.document import get_document
from wdom.server import start, add_static_path
from wdom.tag import Button

if __name__ == '__main__':
    static_dir = path.join(path.dirname(path.abspath(__file__)), 'static')
    document = get_document()
    document.add_cssfile('/static/css/app.css')

    # Add button element
    document.body.appendChild(Button('click'))

    add_static_path('static', static_dir)
    start()

The first argument of the add_static_path is a prefix to access the static files and the second argument is a path to the directory to be served. Files under the assigned directory can be accessed by URL like http://localhost:8888/prefix/(dirname/)filename. For example, if accessed to http://localhost:8888/static/css/app.css with a browser, app.css will be shown.

It’s not necessary to use the same name for the prefix as the directory name to be registered. For example, in case to use my_static as a prefix, change to add_static_path('my_static', STATIC_DIR) and then can be accessed to app.css from http://localhost:8888/my_static/css/app.css.

Not only css files but also any static files, like js files, html files, or images are able to be served.

Any prefixes can be used if it is valid for URL, but _static and tmp is already used by WDOM internally, so do not use them for a prefix.

Loading Static Contents¶

Contents on the Web¶

Local Resources¶

WDOM

Navigation

Related Topics