Making a Text User Interface (TUI) dialog from Quo Renderables
Tags: python, cli, tutorial, quo
Published: 2022-02-16 15:01:31



## Installation
Install from the command line 
```console
  pip install -U quo
```
Quo ships with a high level API for displaying [dialog](https://en.m.wikipedia.org/wiki/Dialog_box) boxes to the user for informational purposes, or get input from the user.


##  `Message Box`

Use the `quo.dialog.MessageBox` function to display a
simple message box. For instance:
```python
 from quo.dialog import MessageBox

 MessageBox(
    title='Example dialog window',
    text='Do you want to continue?\nPress ENTER to quit.')
```

![messagebox](https://quo.readthedocs.io/en/latest/_images/messagebox.png) 


## Input Box`

Function `quo.dialog.InputBox` function can display an
input box. It will return the user input as a string.
```python
 from quo.dialog import InputBox
InputBox(
    title='Input dialog example',
    text='Please type your name:') 
```
![promptbox] (https://quo.readthedocs.io/en/latest/_images/inputbox.png) 

The ``hide=True`` option can be passed to the `quo.dialog.InputBox` function to turn this into a password input box.


## `Confirmation Box`

Function `quo.dialog.ConfirmBox`displays a yes/no
confirmation dialog. It will return a boolean according to the selection.
```python
from quo.dialog import ConfirmBox

ConfirmBox(
    title='Yes/No dialog example',
    text='Do you want to confirm?')
```
![confirm](https://quo.readthedocs.io/en/latest/_images/confirm.png)

## `Choice Box`
Function `quo.dialog.ChoiceBox` function displays a dialog
with choices offered as buttons. Buttons are indicated as a list of tuples, each providing the label (first) and return value if clicked (second).

```python
from quo.dialog import ChoiceBox

ChoiceBox(
    title='Button dialog example',
    text='Do you want to confirm?',
    buttons=[
        ('Yes', True),
        ('No', False),
        ('Maybe...', None)
    ])
```

![button] (https://quo.readthedocs.io/en/latest/_images/button.png)

## `Radiolist Box`

Function `quo.dialog.RadiolistBox` function displays a dialog
with choices offered as a radio list. The values are provided as a list of tuples,
each providing the return value (first element) and the displayed value (second element).
```python
from quo.dialog import RadiolistBox

RadiolistBox( 
    title="RadioList dialog", 
    text="Which breakfast would you like ?", 
    values=[ 
        ("breakfast1", "Eggs and beacon"), 
        ("breakfast2", "French breakfast"), 
        ("breakfast3", "Equestrian breakfast") 
    ])
```


## `Check Box`
Function `quo.dialog.CheckBox` has the same usage and purpose than the Radiolist dialog, but allows several values to be selected and therefore returned.
```python
from quo.dialog import CheckBox

CheckBox( 
    title="CheckboxList dialog", 
    text="What would you like in your breakfast ?",
    values=[ 
        ("eggs", "Eggs"),
        ("bacon", "Bacon"),
        ("croissants", "20 Croissants"),
        ("daily", "The breakfast of the day")
    ])
```
![styled] (https://quo.readthedocs.io/en/latest/_images/messagebox.png)

## Styling of dialogs

A custom class `quo.style.Style` instance can be passed to all
dialogs to override the default style. Also, text can be styled by passing a `quo.text.Text` object.

```python
 from quo.dialog import MessageBox
from quo.style import Style
from quo.text import Text

example = Style.add({
    'dialog': 'bg:#88ff88',
    'dialog frame.label': 'bg:#ffffff fg:#000000',
    'dialog.body': 'bg:#000000 fg:#00ff00',
    'dialog shadow': 'bg:#00aa00' })
 MessageBox(
    title=Text('<style bg="blue" fg="white">Styled</style> '
   '<style fg="red">dialog</style> window'),
    text='Do you want to continue?\nPress ENTER to quit.',
    style=example)
```
![styled](https://quo.readthedocs.io/en/latest/_images/styled.png)