Widget¶

from flexx import app, ui

class Example(ui.Widget):
    ''' A red widget '''
    CSS = ".flx-Example {background:#f00; min-width:20px; min-height:20px;}"

class flexx.ui.Widget(*init_args, **kwargs)¶

Inherits from: Model

Base widget class.

When subclassing a Widget to create a compound widget (a widget that acts as a container for other widgets), use the init() method to initialize the child widgets. This method is called while the widget is the current widget. Similarly, the init() method of the JS part of a subclass can be used to initialize the Widget (e.g. create the Phosphor widget and HTML DOM elements).

base_size¶

property – The given size of the widget when it is in a layout that allows explicit sizing, or the base-size in a BoxPanel or GridPanel.

children¶

property – The child widgets of this widget. Setting this property will update the “parent” property of the old and new children.

container¶

property – The id of the DOM element that contains this widget if parent is None. Use ‘body’ to make this widget the root.

css_class¶

property – The extra CSS class name to asign to the DOM element. Spaces can be used to delimit multiple names. Note that the DOM element already has a css class-name corresponding to its class (e.g. ‘flx-Widget) and all its superclasses.

dispose()¶

Overloaded version of dispose() that will also dispose any child widgets.

flex¶

property – How much space this widget takes (relative to the other widgets) when contained in a flexible layout such as BoxLayout, BoxPanel, FormLayout or GridPanel. A flex of 0 means to take the minimum size. Flex is a two-element tuple, but both values can be specified at once by specifying a scalar.

icon¶

property – The icon for this widget. This is used is some widgets classes, and is used as the app’s icon if this is the main widget.

Can be a url, a relative url to a shared asset, or a base64 encoded image. In the future this may also support names in icon packs like fontaweome.

init()¶

Overload this to initialize a cusom widget. When called, this widget is the current parent.

key_down¶

emitter – Event emitted when a key is pressed down while this widget has focus. A key event has the following attributes:

• key: the character corresponding to the key being pressed, or a key name like “Escape”, “Alt”, “Enter”.
• modifiers: list of strings “Alt”, “Shift”, “Ctrl”, “Meta” for modifier keys pressed down at the time of the event.

A browser may associate certain actions with certain key presses. If this browser action is unwanted, it can be disabled by overloading this emitter:

@event.emitter
def key_down(self, e):
    # Prevent browser's default reaction to function keys
    ev = super().key_press(e)
    if ev.key.startswith('F'):
        e.preventDefault()
    return ev

key_press¶

emitter – Event emitted when a key is pressed down. This event does not fire for the pressing of a modifier keys. See key_down for details.

key_up¶

emitter – Event emitted when a key is released while this widget has focus. See key_down for details.

mouse_down¶

emitter – Event emitted when the mouse is pressed down.

A mouse event has the following attributes:

• pos: the mouse position, in pixels, relative to this widget
• page_pos: the mouse position relative to the page
• button: what button the event is about, 1, 2, 3 are left, right, middle, respectively. 0 indicates no button.
• buttons: what buttons where pressed at the time of the event.
• modifiers: list of strings “Alt”, “Shift”, “Ctrl”, “Meta” for modifier keys pressed down at the time of the event.

mouse_move¶

emitter – Event fired when the mouse is moved inside the canvas. See mouse_down for details.

mouse_up¶

emitter – Event emitted when the mouse is pressed up.

See mouse_down() for a description of the event object.

mouse_wheel¶

emitter – Event emitted when the mouse wheel is used.

See mouse_down() for a description of the event object. Additional event attributes:

• hscroll: amount of scrolling in horizontal direction
• vscroll: amount of scrolling in vertical direction

parent¶

property – The parent widget, or None if it has no parent. Setting this property will update the “children” property of the old and new parent.

pos¶

property – The position of the widget when it in a layout that allows positioning, this can be an arbitrary position (e.g. in PinBoardLayout) or the selection of column and row in a GridPanel.

style¶

property – CSS style options for this widget object. e.g. "background: #f00; color: #0f0;". If the given value is a dict, its key-value pairs are converted to a CSS style string. Note that setting this propery is cumulative; setting it back to the empty string does not undo previously set styling. A better approach might be to add CSS to the CSS class attribute and use css_class.

tabindex¶

property – The index used to determine widget order when the user iterates through the widgets using tab. This also determines if a widget is able to receive key events. Flexx automatically sets this property when it should emit key events. Effect of possible values on underlying DOM element:

• None: element cannot have focus unless its a special element like

  a link or form control (default).

• -1: element can have focus, but is not reachable via tab.

• 0: element can have focus, and is reachable via tab in the order at which the element is defined.

• 1 and up: element can have focus, and the tab-order is determined by the value of tabindex.

title¶

property – The string title of this widget. This is used to mark the widget in e.g. a tab layout or form layout, and is used as the app’s title if this is the main widget.