Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de import

Packages Brython

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

browser.widgets.dialog

Classes

Affiche une boite de dialogue avec un message d'information

• title est le titre de la boite
• message est le message à afficher
• si top et left sont fournis ils indiquent la position de la boite par rapport au haut et à la gauche de la partie affichée de la page. Par défaut la boite est affichée au milieu de la page
• default_css indique s'il faut utiliser la feuille de style fournie par le module. Si la valeur est False, les styles définis dans la page HTML sont utilisés (voir "Style CSS" ci-dessous)
• remove_after est le nombre de secondes après lequel la fenêtre est automatiquement fermée
• ok indique s'il faut afficher un bouton "Ok". Si la valeur passée est une chaine de caractère, elle est affichée dans le bouton, si c'est la valeur True la chaine "Ok" est affichée

from browser.widgets.dialog import InfoDialog

# Boite d'information avec bouton "Ok" personnalisé
d1 = InfoDialog("Test", "Message d'information", ok="Compris")

from browser.widgets.dialog import InfoDialog

# Boite d'information qui disparait après 3 secondes
d1 = InfoDialog("Test", "Je ferme dans 3 secondes", remove_after=3)

Affiche une boite de dialogue avec un message d'information et une zone de saisie. Quand l'utilisateur clique sur le bouton "Ok", ou tape sur la touche Entrée dans la zone de saisie, un événement nommé "entry" est déclenché sur sur l'instance de EntryDialog.

• title, top, left, default_css et ok ont la même signification que pour InfoDialog
• message est le texte optionnel à afficher à gauche de la zone d'entrée

Les instances de EntryDialog possèdent l'attribut value, qui contient la chaine de caractère entrée dans la zone de saisie. Cette value peut être utilisée dans le gestionnaire de l'événement "entry".

from browser import bind
from browser.widgets.dialog import InfoDialog, EntryDialog

d = EntryDialog("Test", "Nom")

@bind(d, "entry")
def entry(ev):
  value = d.value
  d.close()
  InfoDialog("Test", f"Bonjour, {value} !")

Affiche une boite de dialogue générique, qu'on peut compléter en ajoutant des élements à son attribut panel

• title, top, left et default_css ont la même signification que ci-dessus
• ok_cancel indique s'il faut afficher les boutons "Ok" et "Annuler". Si la valeur passée est une liste ou un tuple de 2 chaines de caractères, ces chaines sont affichées dans les boutons; si la value est True, les chaines "Ok" et "Cancel" sont affichées

• title_bar : l'élément DIV qui contient la barre de titre
• panel : l'élément DIV auquel on peut ajouter des éléments pour construire la boite de dialogue
• ok_button et cancel_button : les boutons "Ok" et "Annuler". On peut leur attacher des gestionnaires d'événement pour l'événement "click"

from browser import bind, html
from browser.widgets.dialog import Dialog, EntryDialog, InfoDialog

translations = {'Français': 'Salut', 'Español': 'Hola', 'Italiano': 'Ciao'}

d = Dialog("Test", ok_cancel=True)

style = dict(textAlign="center", paddingBottom="1em")

d.panel <= html.DIV("Nom " + html.INPUT(), style=style)
d.panel <= html.DIV("Langue " +
                    html.SELECT(html.OPTION(k) for k in translations),
                      style=style)

# Gestionnaire d'événement pour le bouton "Ok"
@bind(d.ok_button, "click")
def ok(ev):
  """Boite de dialogue avec message, positionnée à la place de la boite
  d'origine."""
  language = d.select_one("SELECT").value
  prompt = translations[language]
  name = d.select_one("INPUT").value
  left, top = d.scrolled_left, d.scrolled_top
  d.close()
  d3 = InfoDialog("Test", f"{prompt}, {name} !", left=left, top=top)

Style CSS

:root {
    --brython-dialog-font-family: Arial;
    --brython-dialog-font-size: 100%;
    --brython-dialog-bgcolor: #fff;
    --brython-dialog-border-color: #000;
    --brython-dialog-title-bgcolor: CadetBlue;
    --brython-dialog-title-color: #fff;
    --brython-dialog-close-bgcolor: #fff;
    --brython-dialog-close-color: #000;
}

.brython-dialog-main {
    font-family: var(--brython-dialog-font-family);
    font-size: var(--brython-dialog-font-size);
    background-color: var(--brython-dialog-bgcolor);
    left: 10px;
    top: 10px;
    border-style: solid;
    border-color: var(--brython-dialog-border-color);
    border-width: 1px;
    z-index: 10;
}

.brython-dialog-title {
    background-color: var(--brython-dialog-title-bgcolor);
    color: var(--brython-dialog-title-color);
    border-style: solid;
    border-color: var(--brython-dialog-border-color);
    border-width: 0px 0px 1px 0px;
    padding: 0.4em;
    cursor: default;
}

.brython-dialog-close {
    float: right;
    background-color: var(--brython-dialog-close-bgcolor);
    color: var(--brython-dialog-close-color);
    cursor: default;
    padding: 0.1em;
}

.brython-dialog-panel {
    padding: 0.6em;
}

.brython-dialog-message {
    padding-right: 0.6em;
}

.brython-dialog-button {
    margin: 0.5em;
}

Zones d'une boite de dialogue et classes CSS