Hands-on: Hello World

Before diving into real analytical scenarios, let's first explore how to work with widgets and define actions. We'll start by creating a simple interactive notebook that allows users to enter input and display it when they click a button. The screenshots below illustrate how the notebook should appear when rendered using Voilà.

Initial notebook view
Initial notebook view
Button click processed
Button click processed

Initial setup

To create the initial interactive notebook, use the prepared template notebook notebooks/3-hello_world.ipynb. The parts that need to be completed are marked with a # TODO comment.

You need to open the notebook as a regular notebook instead of using the Voila view to edit it. To do so, right-click the notebook in the left panel and select Open With → Notebook (see the following screenshots). This opens a classic notebook where you can easily edit the individual sections.

To see how the notebook is rendered using Voila, click the Voila icon (a yellow wave with a blue line) in the notebook control panel. This will open the Voila view in a new panel. By default, this view does not automatically update when you save changes to the notebook. To refresh it, simply reload the page.

Notebook view open
Open using Notebook view
Opened notebook
Opened notebook
Voila view
Voila view

Note

For inspiration on how to compose the different parts, you can look at Examples → Notebook Template.

If you ever get stuck or are unsure about the next steps, you can refer to the final version of the notebook prepared in tutorial_solutions/3-hello_world.ipynb. But we believe that won't be necessary.

Before you start implementing any step of the analytical workflow, you need to prepare the whole notebook environment. Thanks to the prepared template, you don't have to define it so much. You only need to add your name or nickname to the notebook header. To change the <INSERT YOUR NAME> value, double-click on the section, which will switch the comment to the editing mode. Just run the cell to switch back to the view mode (► icon in the notebook control panel). Remember that each section of the notebook can include comments written in Markdown that may serve as functionality documentation.

You don’t need to modify the already defined next section of the notebook, which includes module imports and logging setup. For this simple scenario, just leave it as it is and proceed to the next section, where we define the widgets.

Widgets definition

From the initial screenshots, you can see that three widgets need to be defined. The first is an input widget for users to enter text. The second is a button to trigger an action. The third is an output widget, which dynamically displays content.

To correctly display the widgets, place them inside a layout widget. It's best to define this layout as the third code block, right after the action function definition (labeled Display widgets in the template).

Now, check the provided widgets documentation and try defining all the widgets, ensuring they are correctly displayed in the notebook.

Solution: Widgets definition 
"""Widgets definition.
"""

# Input text widget
w_input = widgets.Text(
    description="Input:"
)

# Action button widget
w_button = widgets.Button(
    description="Process input",
    button_style="primary",
    layout={"width": "20em", "margin": "1em 0 0 4em"}
)

# Output widget
w_output = widgets.Output(layout={"margin": "1em 0 0 0"})

"""Display widgets.
"""

# Display all widgets.
widgets.VBox([w_input, w_button, w_output])

Widgets function definition

Once all the widgets are defined, the final step is to add a function that executes when the button is pressed. Register a callback function, foo, using button.on_click(foo). This function will be called with the button instance as its only argument.

Now, create a function that retrieves the value from the input widget and displays it in the output widget.

Solution: Widgets function definition 
"""Action function definition.
"""

# Function taking text from the input widget and printing it to the output widget.
def process_input(button):
    button.disabled = True
    with w_output:
        if w_input.value:
            print(w_input.value)
        else:
            logger.error("No input")
    button.disabled = False
w_button.on_click(process_input)


Great! You now have a solid understanding of how to use Jupyter Widgets. Let’s move on to a more practical analytical task in the following section: Hands-on → Network Traffic Analysis.