Écrans et composants · Manuel

Un flash ne dessine rien lui-même : il décrit un écran sous forme de données, et l’application l’affiche avec ses composants natifs, dans le style de Flash, en mode clair ou sombre, à la taille de police choisie par l’utilisateur.

Afficher un écran

flash.ui.show(écran) remplace l’écran courant et renvoie une poignée. Un écran a un title, un body (la liste des composants) et un footer facultatif (boutons fixés en bas). Avec tabs, il se présente en onglets.

const screen = await flash.ui.show({
  title: 'Nouvelle demande',
  body: [
    { type: 'input', key: 'objet', label: 'Objet', required: true },
    { type: 'select', key: 'service', label: 'Service', options: [
      { value: 'compta', label: 'Comptabilité' },
      { value: 'tech', label: 'Assistance technique' },
    ] },
    { type: 'date', key: 'le', label: 'Date souhaitée' },
  ],
  footer: [{ label: 'Envoyer', action: 'send', style: 'primary', validate: true }],
});

const { values } = await screen.next('send');

Réagir aux actions

Les éléments interactifs portent une action : un simple identifiant, jamais du code. Quand l’utilisateur touche l’élément, le flash reçoit un évènement avec l’action, les valeurs de tous les champs (values) et, selon le composant, l’élément touché (item) ou une valeur (value).

screen.on(action, gestionnaire) : réagir à chaque fois ;
await screen.next(...actions) : attendre la prochaine action parmi celles indiquées ;
validate: true sur un bouton : l’action n’est envoyée que si les champs obligatoires sont remplis.

Les composants

Type	Rôle
`text`	Texte ; `style` : `title`, `subtitle`, `caption`, `muted`, `success`, `warning`, `error`.
`input`	Champ de saisie ; `format` : `text`, `number`, `decimal`, `email`, `phone`, `password`, `multiline`.
`select`, `radio`	Choix dans une liste d’`options` (`value`, `label`).
`checkbox`, `switch`	Case à cocher ou interrupteur.
`date`	Sélecteur de date (valeur au format `AAAA-MM-JJ`).
`file`	Choix d’une image ou d’un fichier par l’utilisateur.
`button`, `buttons`	Boutons ; `style` : `primary`, `secondary`, `text`, `danger`.
`link`	Ligne cliquable menant à un autre écran.
`list`	Liste d’éléments (`id`, `title`, `subtitle`, `image`…), en cartes ou séparés.
`section`	Regroupe des composants dans une carte titrée.
`image`, `gallery`	Image seule ou carrousel d’images.
`qrcode`	Code QR généré à partir d’un texte.
`html`	Bloc HTML sans JavaScript ; un lien produit l’action `link`.
`divider`	Séparation.

Les images ne peuvent venir que des données intégrées (data:) ou des domaines déclarés par le flash : aucune image ne sert à suivre l’utilisateur.

Dialogues et messages

await flash.ui.alert('Votre demande est enregistrée.', { title: 'Merci' });

if (await flash.ui.confirm('Supprimer ce brouillon ?', { danger: true })) { … }

const code = await flash.ui.prompt({ label: 'Code reçu par SMS', format: 'number' });
if (code === undefined) { /* l’utilisateur a annulé */ }

flash.ui.toast('Enregistré', { level: 'success' });

flash.ui.busy(true, 'Envoi en cours…');
try { … } finally { flash.ui.busy(false); }

Le cadre de l’écran

flash.ui.configure fixe le titre et un menu. Les actions du menu arrivent par flash.ui.onAction, quel que soit l’écran affiché.