Core Widgets
============
We refer to the widgets that are bundled with Jibe as the
Core Widgets. This is a minimal collection of widgets that
allow you to compose the great majority of more complex
widgets, simply by combining them together.
Contents:
.. contents:: :local:
Widget
------
All other widgets inherit from the Widget class. By itself
it is of little use, but it serves as a blank canvas to build
other widgets from scratch, at a low level. For most applications
you will not need to use this class directly, instead, you will
inherit from other widgets and will customize their behavior.
See the Widget API for more details.
Div
---
This is identical to Widget. It represents a ``
…
``
in the DOM (a plain empty container in your page).
Button
------
A button. Represents a ```` in the DOM.
It has 1 property: `label`, which is displayed on the face of
the button, and triggers 1 event: `click`.
.. code-block:: python
btn = Button('button')
btn.register('click', click_handler)
.. raw:: html
Input
-----
A single-line text input. It represents an ```` in the DOM.
It has 1 property: `value`, and triggers 1 event: `change`.
.. code-block:: python
input = Input('input')
input.register('change', change_handler)
.. raw:: html
Label
-----
A simple text label. It has 1 property: `value`, and no events.
It represents a ``
...
`` structure in the DOM.
.. code-block:: python
label = Label('I am a label')
.. raw:: html
I am a label
CheckBox
--------
A check box. It represents a ```` in the DOM.
It has one property: `checked` and triggers one event: `change`.
.. code-block:: python
chk = CheckBox()
chk.register('change', on_change)
.. raw:: html
Dropdown
--------
A selection drop-down. It represents a ```` in the DOM.
It has two properties: `value` and `options`, and triggers one event: `change`.
.. code-block:: python
dropdown = Dropdown(
options=[
'apples',
'banannas',
'chocolate'
]
)
dropdown.register('change', on_change)
.. raw:: html
SelectMultiple
--------------
A multiple-selection list. It represents a
```` in the DOM.
It has two properties: `value` and `options`.
.. code-block:: python
sel = SelectMultiple(
options=[
'apples',
'banannas',
'chocolate'
]
)
sel.register('change', on_change)
.. raw:: html
ProgressBar
-----------
Simple horizontal progress bar. It has one property: `value`, which
represents the percentage of completion (0 to 100). This is a composite
widget (a ``Div`` of fixed size for the background and another ``Div``
with variable width for the progress). It is not a "core" widget, since
you can build it yourself from other core widgets, but it is provided
as a example.
.. code-block:: python
bar = ProgressBar(30)
.. raw:: html
Image
-----
An image/png. It represents a ```` in the DOM and has one
property: `data`. The `data` is the image data, as a base64-encoded utf8 string
(see the code below).
.. code-block:: python
import base64
with open("image.png", "rb") as img:
data = base64.encodebytes(img.read()).decode('utf8')
img = Image()
img.data = data
.. image:: image.png
Redirect
--------
An invisible widget that allows redirecting the browser to a
different url.
.. code-block:: python
redir = Redirect()
redir.redirect('/other')
HBox
----
A container widget that arrange its children horizontally. It does not
have any properties or events.
.. code-block:: python
hbox = HBox()
hbox.children = [
Button('Left'), Button('Right')
]
.. raw:: html
VBox
----
Same a ``HBox`` but vertical.
.. code-block:: python
vbox = VBox()
vbox.children = [
Button('Top'), Button('Bottom')
]
.. raw:: html