Composants d’interface utilisateur
Chaque partie d’un écran métier, Prêt en Java.
webforJ est le framework Java full-stack pour les applications web métier : créez toute l’application, écrans compris, en Java. Ses composants couvrent la mise en page, la saisie de données, les boîtes de dialogue, l’affichage des données et les notifications. Chacun est une classe Java que vous créez, configurez et ajoutez à une mise en page.
- Composants de la galerie
- 57
- Éléments HTML typés
- 29
- Thèmes intégrés
- 3
- Groupes par objectif
- 5
Par objectif
Choisissez un groupe, puis un composant. Chaque tuile ouvre la page de documentation dédiée à ce composant.
Mise en page
Le cadre d’un écran : structures d’application, barres d’outils, mises en page flex et en colonnes, volets divisés et surfaces.
8 composants
AppLayoutUne mise en page structurée pour la navigation principale de l’application et son contenu.
FlexLayoutOrganise ses éléments enfants selon les règles flexbox pour un alignement adaptatif.
ColumnsLayoutDispose les éléments enfants en colonnes, utile pour les formulaires et les structures en grille.
ToolbarUn conteneur horizontal pour les boutons d’action, les icônes et autres commandes.
SplitterRépartit l’espace entre deux composants que l’utilisateur peut redimensionner par glisser-déposer.
AccordionEnsemble de panneaux repliables empilés avec des en-têtes cliquables.
CardUne surface avec des zones réservées aux médias, aux en-têtes, au contenu et aux pieds de page.
DialogUne fenêtre modale qui se superpose au contenu et invite l’utilisateur.
Formulaires et champs de saisie
Tout ce qu’un utilisateur saisit, sélectionne ou importe : texte, nombres, dates, masques, listes et fichiers.
20 composants
TextFieldUn champ de saisie sur une seule ligne pour saisir et modifier du texte.
MaskedTextFieldLimite le texte à un modèle, comme un numéro de téléphone.
NumberFieldUn champ numérique avec des commandes pour augmenter ou diminuer la valeur.
MaskedNumberFieldImpose un format numérique, comme une devise ou un pourcentage.
PasswordFieldChamp de saisie sur une ligne masquant les mots de passe.
DateFieldUn sélecteur de date dans un champ de saisie du navigateur.
MaskedDateFieldUn champ de date qui impose un format précis.
TimeFieldUn sélecteur d’heure dans un champ de saisie, intégré au navigateur.
MaskedTimeFieldUn champ horaire qui impose un format défini.
DateTimeFieldPermet de sélectionner une date et une heure dans un seul champ.
ColorFieldSélecteur de couleur du navigateur dans un champ de saisie.
TextAreaUne zone de saisie multiligne pour les blocs de texte plus longs.
CheckBoxUne option binaire qui bascule entre cochée et décochée.
RadioButtonSélectionne une option parmi plusieurs choix exclusifs.
SwitchBascule entre deux états, comme activé et désactivé, par glissement.
ChoiceBoxUne liste déroulante d’options prédéfinies.
ComboBoxUne liste déroulante associée à un champ de texte modifiable.
ListBoxUne liste défilante permettant de sélectionner un ou plusieurs éléments.
SliderSélectionne une valeur dans une plage en faisant glisser une poignée le long d’une piste.
UploadSélecteur de fichiers intégré avec glisser-déposer, filtres et événements par fichier.
Données et contenu
Affichez des enregistrements, des hiérarchies, des graphiques et du texte en continu, et chargez-en davantage au fil du défilement.
8 composants
GoogleChartsGraphiques et visualisations de données via Google Charts.
TreeDonnées hiérarchiques que les utilisateurs peuvent développer, réduire et avec lesquelles interagir.
InfiniteScrollCharge plus d’éléments au défilement et détecte lorsque tout le contenu a été chargé.
RefresherUne interaction « tirer pour actualiser » dans des conteneurs défilables.
MarkdownViewerAffiche le Markdown progressivement, idéal pour les conversations avec l’IA et le texte en streaming.
TerminalUne interface en ligne de commande intégrée à l’application pour saisir des commandes textuelles.
AvatarPhotos de profil ou initiales, de différentes tailles, formes et thèmes.
BadgeUne petite étiquette pour les compteurs, les statuts ou les métadonnées succinctes.
Navigation et actions
Naviguez entre les vues et les sections, parcourez les données page par page et déclenchez l’action suivante.
6 composants
AppNavUn menu de navigation permettant de passer d’une section ou d’une vue à l’autre.
DrawerPanneau coulissant pour la navigation latérale ou du contenu supplémentaire.
TabbedPaneOrganise le contenu en onglets entre lesquels les utilisateurs peuvent basculer.
NavigatorPagination avec boutons Première, Dernière, Suivant et Précédent, et accès rapide.
ButtonUn composant cliquable qui déclenche une action lorsqu’on appuie dessus.
IconUn symbole graphique représentant une action, un état ou une catégorie.
Retours et boîtes de dialogue
Informez les utilisateurs de ce qui se passe, demandez-leur de confirmer et recueillez une valeur, un fichier ou un identifiant.
12 composants
ToastUne notification non bloquante qui disparaît d’elle-même.
AlertMessages ou avertissements importants dans un format bien visible.
DesktopNotificationNotifications de bureau personnalisées via l’API de notifications du navigateur.
ProgressBarBarre qui se remplit au fur et à mesure de l’avancement d’une tâche.
BusyIndicatorUn indicateur global signalant qu’un processus est en cours.
LoadingIndicateur de chargement limité à un composant parent
SpinnerAnimation rotative indiquant qu’une action est en cours.
MessageDialogUn message informatif que l’utilisateur confirme avec OK.
ConfirmDialogDemande à l’utilisateur de confirmer ou d’annuler une action.
InputDialogDemande à l’utilisateur une valeur avec les boutons OK et Annuler.
FileUploadDialogImporte des fichiers du système de fichiers local dans l’application.
LoginInterface de connexion prédéfinie avec nom d’utilisateur, mot de passe et bouton de validation.
Composition
Vos propres composants, Construit à partir des nôtres.
webforJ privilégie la composition à l’héritage. Vous n’étendez pas Button. Vous écrivez une classe qui étend Composite, y combinez des composants et choisissez les méthodes accessibles au reste de votre application.
public class SearchBar extends Composite<FlexLayout> {
private final FlexLayout self = getBoundComponent();
private TextField searchField;
private Button searchButton;
public SearchBar() {
searchField = new TextField("Search");
searchButton = new Button("Go");
self.setDirection(FlexDirection.ROW)
.add(searchField, searchButton);
}
}
Une classe, une unité.
Un
Compositeencapsule un composant lié unique et contient votre structure interne, faisant d’une barre de recherche, d’un formulaire d’adresse ou d’une carte de tableau de bord entière une classe réutilisable.Vous choisissez l’API.
Les appelants ne voient que les méthodes que vous exposez, contrairement à l’héritage, où tout est exposé.
Les composants intégrés restent intacts.
Les composants intégrés sont finaux, ce qui garantit la cohérence et la prévisibilité du composant web sous-jacent. Votre logique s’articule autour d’eux, sans les modifier.
Au-delà de l’ensemble
Pas dans l’ensemble ? Utilisez n’importe quel composant sur le Web.
Les composants métier sont un point de départ, pas une fin en soi. Chaque élément HTML est une classe Java, et n’importe quel composant web peut le devenir.
- 29 éléments HTML
La page elle-même, saisie
webforJ fournit des composants qui correspondent directement aux éléments HTML standard, comme Div, Paragraph, les titres, les listes, Img et Anchor, avec une API Java typée.
Composants HTML - Web components
N’importe quel composant web, encapsulé
ElementComposite encapsule un élément HTML personnalisé ou un composant web tiers et expose ses propriétés, attributs et événements via l’API Java.
Élément composite - Packages npm
Le registre npm, depuis Java
Le bundler frontend transforme les annotations d’une classe en ressources frontend compilées, permettant ainsi à un composant d’intégrer le package npm dont il dépend.
Frontend bundler
Votre système de design
Vous avez votre propre système de design ? Emportez-le avec vous.
Les composants webforJ sont une possibilité, pas une obligation. Si votre système de design est fourni sous forme de web components, vous l’encapsulez une fois et construisez toute l’application avec, en Java.
- 01
Encapsuler les composants
ElementCompositetransforme chaque élément personnalisé en classe Java et expose ses propriétés, attributs et événements via l’API Java. - 02
Regroupez-les en un seul module
Le bundler frontend permet à une classe de déclarer les packages npm dont elle a besoin, afin que les wrappers embarquent leur système de design. Une application n’a qu’à ajouter la dépendance.
- 03
Compilez l’application comme d’habitude.
Le routage, la sécurité et la liaison de données fonctionnent de la même manière. Un composant encapsulé qui implémente
ValueAwarese lie à votre modèle comme n’importe quel champ intégré.
Vos écrans conservent l’apparence déjà conçue par votre entreprise. Le framework sous-jacent reste webforJ.
Utilisé depuis Java
Un composant est un objet vous créez avec new.
Vous définissez son état à l’aide de méthodes typées, écoutez ses événements avec des lambdas et l’ajoutez à un conteneur. L’écran est écrit en code Java, sans modèle à synchroniser.
FlexLayout container = new FlexLayout();
container.add(new Button("Click Me"));
TextField nameField = new TextField("Name");
TextField emailField = new TextField("Email");
Button submitButton = new Button("Submit");
container.add(nameField, emailField, submitButton);
// Reveal an additional field when a checkbox is checked
TextField advancedField = new TextField("Advanced setting");
advancedField.setVisible(false);
CheckBox enableAdvanced = new CheckBox("Show advanced settings");
enableAdvanced.addValueChangeListener(e -> advancedField.setVisible(e.getValue()));
// Enable a button only when the required field has a value
Button submitButton = new Button("Submit");
submitButton.setEnabled(false);
TextField nameField = new TextField("Name");
nameField.addValueChangeListener(e -> submitButton.setEnabled(!e.getValue().isBlank()));
Thématisation
Un système de design derrière chaque composant.
webforJ est fourni avec un système de conception nommé DWC. Ses variables CSS, les design tokens, couvrent les couleurs, la typographie, les bordures et l’espacement, et tous les composants les utilisent. Modifiez un token, et tous les composants qui l’utilisent s’adaptent.
Le même champ, les mêmes boutons, le même interrupteur, le même badge et la même barre de progression dans le thème clair.
lightPar défaut. Fond clair, légère teinte de la couleur principale.Le même champ, les mêmes boutons, le même interrupteur, le même badge et la même barre de progression en thème sombre.
darkFond sombre, légère teinte de la couleur principale.Trois thèmes intégrés
light, dark et dark-pure, qui supprime la teinte principale au profit de gris neutres purs. Changez de thème à l’exécution avec App.setTheme(), sans recompilation.
Suit le système d’exploitation
Enregistrez un thème clair et un thème sombre, puis transmettez "system". webforJ choisit celui qui correspond aux préférences de l’utilisateur et bascule lorsque celles-ci changent.
@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
// app code
}
Renouvelez votre image de marque en quelques jetons
Remplacez les jetons de base des thèmes intégrés : tous les composants adoptent alors le nouveau style. Les Shadow Parts permettent d’intervenir à l’intérieur d’un composant lorsqu’un jeton ne suffit pas.
:root {
--dwc-color-primary-seed: #6366f1;
--dwc-font-size: var(--dwc-font-size-l);
}
La galerie
Ouvrir la galerie et tout voir (57)
La galerie de la documentation répertorie chaque composant avec un aperçu et une brève description, répartis dans les quatre mêmes sections que dans la documentation.