Contrôles standard

Ce chapitre est court : il s’agit de vous donner une idée de tous les contrôles et outils qui existent dans x4js, et de ce à quoi ils servent.

Les propriétés et les méthodes exactes de chacun sont dans la référence de l’API.

Conteneurs

Contrôle	Description
Box, HBox, VBox	Conteneur générique, horizontal, vertical.
HSplitBox, VSplitBox	Panneaux côte à côte ou empilés, redimensionnables par l’utilisateur.
StackBox	Pile de pages dont une seule est visible.
AssistBox	Pile de pages parcourue dans l’ordre, pour un assistant.
GridBox	Grille de lignes et de colonnes.
MasonryBox	Disposition en mosaïque.
Tabs	Pages accessibles par des onglets.
Panel	Conteneur avec un titre.
ScrollView	Zone défilante.
Flex, Space	Éléments vides : l’un prend la place restante, l’autre a une taille fixe.

Affichage

Contrôle	Description
Label	Texte, avec une icône optionnelle.
SimpleText	Texte seul.
Icon	Icône (SVG, variable CSS ou image).
Image	Image, qui peut aussi accepter le dépôt d’un fichier.
Link	Lien.
Tag	Étiquette courte, avec une icône optionnelle.
Progress	Barre de progression.
Gauge	Jauge à aiguille.
Rating	Note (étoiles…).
TickLine	Mini-graphique d’une série de valeurs, en barres ou en ligne.
Chart	Graphique simple : lignes, aires, barres, camembert, anneau.
Canvas	Zone de dessin libre.
SvgComponent	Composant SVG, base des contrôles dessinés.
Video	Lecteur vidéo.
Breadcrumbs	Fil d’Ariane.

Saisie

Contrôle	Description
Button	Bouton, avec texte et/ou icône, et un menu optionnel.
BtnGroup	Groupe de boutons, avec des boutons prédéfinis (ok, cancel…).
Input	Champ de saisie natif : texte, nombre, date, heure, fichier…
TextEdit	Champ de saisie avec son libellé.
TextArea	Zone de saisie multiligne.
Checkbox, Radio, Switch	Case à cocher, bouton radio, interrupteur.
Slider	Curseur.
Select	Liste de choix native.
Combobox	Liste déroulante sur une liste connue.
AutoComplete	Champ avec des suggestions obtenues à la demande.
ColorInput, ColorPicker	Saisie et choix d’une couleur.
Calendar	Calendrier. Existe aussi en version popup.
FileDrop	Zone de dépôt de fichiers.
Keyboard	Clavier virtuel.

Listes et données

Contrôle	Description
Listbox	Liste simple, avec colonnes optionnelles.
Treeview	Liste arborescente.
Gridview	Affichage tabulaire d’un DataStore.
Spreadsheet	Tableau de type tableur, éditable en ligne.
PropertyGrid	Éditeur de propriétés.

Fenêtres et menus

Contrôle	Description
Popup	Base de tout ce qui s’affiche par-dessus la page.
Dialog	Base des boîtes de dialogue.
MessageBox, InputBox, PromptBox	Message, saisie d’une valeur, saisie avec un éditeur au choix.
ProgressionBox	Suivi d’une opération longue, avec textes et erreurs.
Menu	Menu contextuel ou déroulant.
Notification	Notification à l’utilisateur.

Les info-bulles s’obtiennent avec la propriété tooltip, commune à tous les composants, après un appel à initTooltips( ) au démarrage.

Outils

Outil	Description
Application	Singleton qui définit l’application.
State	État observable de l’application.
DataModel, DataStore, DataView	Enregistrements, stockage et vues filtrées ou triées.
Store	Stockage par cellule, pour Spreadsheet.
Router	Routage par adresse.
_tr, addTranslation…	Système de traduction.
Color, Rect, Point, Size	Couleurs et géométrie.
dragManager	Glisser-déposer.
Stylesheet, ComputedStyle	Lecture et modification des styles.
SvgBuilder	Construction de dessins SVG.
X4PDFBuilder	Génération de PDF.

À cela s’ajoutent bon nombre de fonctions pratiques pour manipuler les dates, les chaînes ou le DOM. Vous pouvez jeter un œil à core_tools dans les sources pour en avoir une idée.

L’éditeur de code MonacoEditor est fourni à part, par l’import x4js/monaco, pour ne pas alourdir les applications qui ne s’en servent pas.