Tutorial for flexx.ui - creating widgets and user interfaces



In [1]:

    
%gui asyncio
from flexx import flx
flx.init_notebook()









    




Flexx is ready for use

Displaying widgets

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



In [2]:

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









    Out[2]:

Widgets have many properties to modify their appearance and behavior:



In [3]:

    
b.set_text('click me!')
None  # suppress output

Layout

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



In [4]:

    
with flx.HBox() as hbox:
    slider = flx.Slider(flex=1)
    progress = flx.ProgressBar(flex=3, value=0.7)
hbox









    Out[4]:

Events

Defining reactions is easy:



In [5]:

    
@slider.reaction('value')
def show_slider_value(*events):
    progress.set_value(slider.value)  # or events[-1].new_value

Compound widgets

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



In [6]:

    
class MyWidget2(flx.Widget):
    def init(self):
        with flx.HBox():
            self._slider = flx.Slider(flex=1)
            self._progress = flx.ProgressBar(flex=3)
    
    @flx.reaction
    def show_slider_value(self):
        self._progress.set_value(self._slider.value / 2)

MyWidget2(style='min-height:20px')









    Out[6]:

Widgets are apps

Widgets can be launched as apps. You typically won't do this in the notebook though ...



In [7]:

    
w3 = flx.launch(MyWidget2)

Example apps

Flexx comes with a variety of example apps that can be used as widgets.



In [8]:

    
from flexxamples.demos.drawing import Drawing
Drawing(style='height:100px')  # Draw using the mouse below!









    Out[8]:



In [9]:

    
from flexxamples.demos.twente import Twente
Twente(style='height:300px')









    Out[9]:

Since apps are really just Widgets, they can be embedded in larger apps with ease:



In [10]:

    
from flexxamples.demos.drawing import Drawing
from flexxamples.demos.twente import Twente
from flexxamples.howtos.splitters import Split
with flx.TabLayout(style='height:300px') as w4:  # min-height does not seem to work very well for panel-based layouts
    Twente(title='Twente', flex=1)
    Drawing(title='Drawing', flex=1)
    Split(title='Split', flex=1)
w4









    Out[10]:



In [ ]: