Passer au contenu principal

Splitter

Ouvrir dans ChatGPT
Ombre dwc-splitter 24.00
Java API

Le composant Splitter, conçu pour diviser et redimensionner le contenu de votre application, encapsule deux composants redimensionnables : le panneau maître et le panneau de détail. Un diviseur sépare ces composants, permettant aux utilisateurs d'ajuster dynamiquement la taille de chaque composant selon leurs préférences.

Création d'un splitter​

Créez un Splitter en transmettant deux composants à son constructeur. Le premier devient le panneau maître et le second devient le panneau de détail.

Afficher le code

Taille minimale et maximale​

Le composant Splitter fournit des méthodes pour définir des tailles minimales et maximales pour ses panneaux, vous permettant de contrôler le comportement de redimensionnement des composants au sein du Splitter. Lorsque les utilisateurs essaient de redimensionner les panneaux au-delà des tailles minimales ou maximales spécifiées, le composant splitter impose ces contraintes, garantissant que les panneaux restent dans les limites définies.

Définir les tailles​

La méthode setMasterMinSize(String masterMinSize) spécifie la taille minimale pour le panneau maître du splitter. De même, la méthode setMasterMaxSize(String masterMaxSize) spécifie la taille maximale pour le panneau maître.

Vous pouvez spécifier les tailles en utilisant n'importe quelle unité CSS valide, comme montré ci-dessous :

Afficher le code

Orientation​

Vous pouvez configurer l'orientation dans le composant Splitter, vous permettant de créer des mises en page adaptées à des exigences de conception spécifiques. En spécifiant l'orientation, le composant dispose les panneaux horizontalement ou verticalement, offrant une polyvalence dans la conception des mises en page.

Pour configurer l'orientation, utilisez l'énumération des orientations prises en charge pour spécifier si le Splitter doit rendre horizontalement ou verticalement :

Afficher le code

Position relative​

Pour définir la position initiale de la barre de division dans le composant Splitter, utilisez setPositionRelative. Cette méthode prend une valeur numérique de 0 à 100 représentant le pourcentage de l'espace donné dans le Splitter, et affiche le diviseur au pourcentage donné de la largeur totale :

Afficher le code

Imbrication​

L'imbrication des splitters vous permet de créer des mises en page complexes avec des niveaux de panneaux redimensionnables. Cela permet de créer des interfaces utilisateur sophistiquées avec un contrôle granulaire sur l'agencement et le redimensionnement du contenu.

Pour imbriquer des composants Splitter, instanciez de nouvelles instances de Splitter et ajoutez-les comme enfants aux composants Splitter existants. Cette structure hiérarchique permet de créer des mises en page multi-niveaux avec des capacités de redimensionnement flexibles. Le programme ci-dessous illustre cela :

Afficher le code

Sauvegarde automatique​

Le composant Splitter inclut une option de sauvegarde automatique, qui enregistre l'état des tailles de panneau dans le stockage local pour maintenir les dimensions constantes entre les rechargements.

Lorsque vous définissez la configuration de la sauvegarde automatique, le composant Splitter stocke automatiquement l'état des tailles de panneau dans le stockage local du navigateur web. Cela garantit que les tailles choisies par les utilisateurs pour les panneaux persistent à travers les rechargements de page ou les sessions de navigateur, réduisant ainsi le besoin d'ajustements manuels.

Nettoyage de l'état​

Pour ramener programatiquement le Splitter aux paramètres et dimensions par défaut, appelez la méthode cleanState() pour supprimer toute donnée d'état enregistrée liée au composant Splitter du stockage local du navigateur web.

Afficher le code

Dans la démo précédente, chaque instance de Splitter active la fonctionnalité de sauvegarde automatique en appelant la méthode setAutosave. Cela garantit que les tailles de panneaux sont automatiquement sauvegardées dans le stockage local. Ainsi, lors du rechargement du navigateur, les tailles de ces splitters restent les mêmes.

Cliquer sur le bouton "Effacer l'état" appelle la méthode cleanState() et rafraîchit la fenêtre du navigateur pour afficher les dimensions d'origine.

Mise en forme​

Loading...

Meilleures pratiques​

Pour garantir une expérience utilisateur optimale lors de l'utilisation du composant Splitter, prenez en considération les meilleures pratiques suivantes :

  • Ajustez en fonction du contenu : Lors de la décision sur l'orientation et les tailles initiales des panneaux, considérez la priorité du contenu. Par exemple, dans une mise en page avec une barre latérale de navigation et une zone de contenu principal, la barre latérale devrait généralement rester plus étroite avec une taille minimale définie pour une navigation claire.

  • Imbrication stratégique : L'imbrication des splitters peut créer des mises en page polyvalentes, mais peut compliquer l'interface utilisateur et impacter les performances. Planifiez vos mises en page imbriquées pour garantir qu'elles sont intuitives et améliorent l'expérience utilisateur.

  • N'oubliez pas les préférences des utilisateurs : Utilisez la fonctionnalité de sauvegarde automatique pour se souvenir des ajustements des utilisateurs à travers les sessions, améliorant ainsi l'expérience utilisateur. Fournissez une option permettant aux utilisateurs de réinitialiser aux paramètres par défaut.