<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 Tutorial for flexx.ui - creating widgets and user interfaces
Step1:  Displaying widgets
Widgets can be inserted into the notebook by making them a cell output
Step2:  Widgets have many properties to modify their appearance and behavior
Step3:  Layout
Layout is done using special layout widgets, and written in a structured way using the with statement
Step4:  Events
Defining reactions is easy
Step5:  Compound widgets
The above quickly gets messy. You can better create new widgets by wrapping together other widgets
Step6:  Widgets are apps
Widgets can be launched as apps. You typically won't do this in the notebook though ...
Step7:  Example apps
Flexx comes with a variety of example apps that can be used as widgets.
Step8:  Since apps are really just Widgets, they can be embedded in larger apps with ease
<ASSISTANT_TASK:>
Python Code:
%gui asyncio
from flexx import flx
flx.init_notebook()
Explanation: Tutorial for flexx.ui - creating widgets and user interfaces
End of explanation
b = flx.Button(text='foo')
b
Explanation: Displaying widgets
Widgets can be inserted into the notebook by making them a cell output:
End of explanation
b.set_text('click me!')
None  # suppress output
Explanation: Widgets have many properties to modify their appearance and behavior:
End of explanation
with flx.HBox() as hbox:
    slider = flx.Slider(flex=1)
    progress = flx.ProgressBar(flex=3, value=0.7)
hbox
Explanation: Layout
Layout is done using special layout widgets, and written in a structured way using the with statement:
End of explanation
@slider.reaction('value')
def show_slider_value(*events):
    progress.set_value(slider.value)  # or events[-1].new_value
Explanation: Events
Defining reactions is easy:
End of explanation
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')
Explanation: Compound widgets
The above quickly gets messy. You can better create new widgets by wrapping together other widgets:
End of explanation
w3 = flx.launch(MyWidget2)
Explanation: Widgets are apps
Widgets can be launched as apps. You typically won't do this in the notebook though ...
End of explanation
from flexxamples.demos.drawing import Drawing
Drawing(style='height:100px')  # Draw using the mouse below!
from flexxamples.demos.twente import Twente
Twente(style='height:300px')
Explanation: Example apps
Flexx comes with a variety of example apps that can be used as widgets.
End of explanation
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
Explanation: Since apps are really just Widgets, they can be embedded in larger apps with ease:
End of explanation
<END_TASK>