Client side components base on Google Closure. Lot of UI component are base on Closure components, or use Closure components internally.
-
wzk.ui.Button provides basic button functionality with default wzk.ui.ButtonRenderer.
-
wzk.ui.ClearableInput a HTML input field with a clear icon (remove its value)
-
wzk.ui.CloseIcon a component that is rendered as a close/remove icon
-
wzk.ui.Flash renders application messages with fadeout and a closing icon
-
wzk.ui.Input a HTML input field a default wzk.ui.InputRenderer
-
wzk.ui.Link a HTML anchor with a default wzk.ui.LinkRenderer
-
wzk.ui.TagContainer a container of wzk.ui.Tag component. Provides adding/removing ability with a remove icon etc.
-
wzk.ui.ac.SelectAutoComplete decorates HTML Select element and builds auto complete from it. Could be decorated with an image. It should be used with select-one.
-
wzk.ui.ac.ExtSelectbox decorates HTML Select element and builds auto complete from it. Could be decorated with an image. It should be used with select-many.
-
wzk.ui.dialog.Dialog extended goog.ui.Dialog component that is rendered as Bootstrap dialog.
-
wzk.ui.dialog.Confirm a confirm dialog with prepared buttons, rendered as Bootstrap dialog.
-
wzk.ui.form.AjaxForm decorates a HTML form and send it via a XHR request.
-
wzk.ui.form.buttons contains functions for preventing multiform submission.
-
wzk.ui.form.Checbox a HTML checkbox element.
-
wzk.ui.form.MirrorInput a component that watches a given HTML input and copies its value to itself by key-up.
-
wzk.ui.form.RemoveButton a HTML button that sends data via a XHR request. It takes values from given inputs and adds them as a requests parameters.
-
wzk.ui.form.RestForm decorates a HTML form and send it via a XHR request but as a REST request (json data).
-
wzk.ui.form.Select a HTML select element.
-
wzk.ui.form.Textarea a HTML textarea element.
-
wzk.ui.grid.Grid a HTML table elements that provides paging, filtering, sorting and it uses REST API for as a connection with a server
-
wzk.ui.inlineform.DynamicForm decorates Django's inline forms and adds dynamic ability to add or delete an item
-
wzk.ui.tab.Tabs decorates HTML elements and adds tabs behaviour
Werkzeug provides an architecture for independent components. Basic idea is calling one function from HTML template and register components via CSS3 selector. Werkzeug provides wzk.app.App class. Every component is registered via on method.
app = wzk.app.buildApp()
app.on '.my-class', (element, dom, xhrFactory) ->
# do stuffWhere:
- element is a current HTML element matched by selector
- dom is a wzk.dom.Dom instance
- xhrFactory is a wzk.net.XhrFactory instance
Every registered component is loaded asynchronously and independently to others. If the component fails (throws an exception etc.) occured errors are handled automatically and it does not block other components.
wzk.net.XhrFactory by default shows a loading message via wzk.net.FlashMiddleware when a XHR is in progress.
The application structure follows:
- start.coffee
- app/base.coffee
- index.html
A whole example could be (start.coffee):
goog.require 'app'
app.start = (win, msgs) ->
flash = wzk.ui.buildFlash win.document # decorates or builds Flash component
app._app.registerStandardComponents flash # registers standard UI components from Werkzeug
app._app.run win, flash, msgs # runs the application
# ensure the symbol will be visible after compiler renaming
goog.exportSymbol 'app.start', app.startAnd app/base.coffee file:
goog.provide 'app'
goog.require 'wzk.app'
app._app = wzk.app.buildApp()index.html
<html>
<head><title>Werkzeug</title></head>
<body>
<script type="text/javascript">
app.start(window, {error: 'Internal error occurred, sorry.', loading: 'Loading...'});
</body>
</html>wzk.app.App.registerStandardComponents registers follow components:
- flash messages
- UI grids
- remote button for AJAX buttons
- AJAX forms
- autocomplete components
- dynamic inline forms
- rich tooltips
- Bootstrap navbar-toggle buttons
- snippet loaders
- related object lookup buttons
- more details wzk.app.App
See demos in `wzk-demo/index.html.
Run demos via grunt --gruntfile wzk-demo/Gruntfile.coffee and wzk-demo/index.html in a browser.