Tutorial for flexx.ui - creating widgets and user interfaces



In [1]:

    
from flexx import app, ui, react
app.init_notebook()









    



Serving apps at http://localhost:54307/






    




Injecting Flexx JS and CSS

Displaying widgets

Widgets can be inserted into the notebook by making them a cell output:



In [2]:

    
b = ui.Button(text='foo')
b









    Out[2]:

Widgets have many input signals to modify their appearance and behavior:



In [3]:

    
b.text('Push me!')

Layout

Layout is done using special layout widgets, and written in a structured way using the with statement:



In [4]:

    
with ui.HBox() as hbox:
    slider = ui.Slider(flex=0)
    label = ui.Label(flex=1, text='xx')
hbox









    Out[4]:

React

Defining reactions is easy:



In [5]:

    
@react.connect('slider.value')
def show_slider_value(v):
    label.text(str(v))









    



new ws connection __default__

Compound widgets

The above quickly gets messy. You can better create new widgets by wrapping together other widgets:



In [6]:

    
class MyWidget(ui.Widget):
    def init(self):
        with ui.HBox():
            self._slider = ui.Slider(flex=0)
            self._label = ui.Label(flex=1, text='xx')
    
    @react.connect('_slider.value')
    def show_slider_value(self, v):
        self._label.text(str(v))

w = MyWidget()
w

Reactions in JS

If you want reactions to be handled in JS, use a JS nested class:



In [7]:

    
class MyWidget2(ui.Widget):
    def init(self):
        with ui.HBox():
            self.slider = ui.Slider(flex=0)
            self.label = ui.Label(flex=1, text='xx')
    
    class JS:
        @react.connect('slider.value')
        def show_slider_value(self, v):
            self.label.text(str(v))
    
w = MyWidget2()
w