Templates d'applications Metropolis UI

De RAD Studio
Aller à : navigation, rechercher

Remonter à Développement des applications Metropolis UI

Cette rubrique décrit les trois templates d'applications ou de fiches Metropolis UI de RAD Studio. La rubrique inclut les détails d'implémentation pour les deux frameworks - FireMonkey et VCL. Une différence majeure est que FireMonkey implémente de nouveaux contrôles pour Metropolis UI (tels que TMetropolisUIListBoxItem), tandis que le framework VCL utilise les contrôles Windows existants, stylés pour Windows 8.

Voici les templates que vous pouvez choisir dans les experts Metropolis UI :

Les templates Metropolis UI sont spécifiques à Windows

Les templates Metropolis UI pour la disposition Grille et Volet de fractionnement ont été conçus spécifiquement pour Windows 8, bien qu'ils peuvent aussi être déployés sur Windows 7, Vista et XP. Les templates sont représentatifs des applications courantes que vous pouvez voir sur Windows 8.

Nous vous déconseillons d'utiliser les templates Metropolis UI sur le Mac car les conceptions de templates sont spécifiques à Windows 8, et elles n'ont pas été conçues pour livrer une interface utilisateur commune ou une expérience utilisateur familière aux utilisateurs Mac. Néanmoins, il est possible de retirer le style Metropolis UI d'une application, puis de déployer l'application sur le Mac.

Propriétés communes partagées par tous les templates Metropolis UI

Les templates Metropolis UI, à la fois pour VCL et FireMonkey, partagent des propriétés similaires qui caractérisent l'apparence Metropolis UI, tel que :

  • Plein écran : Les fiches Metropolis UI sont automatiquement définies en hauteur plein écran sans zone non-client, afin que votre application soit vraiment plein écran :
    • WindowState est définie sur wsMaximized.
    • BorderStyle est définie sur None.
    • Les propriétés GlassFrame ne sont pas définies.

Fonctionnalités des templates FireMonkey

  • Barre d'application : Les fenêtres des templates Grille et Volet de fractionnement ont une barre d'outils contextuelle (Barre d'application de style Metropolis UI) qui peut être invoquée par un mouvement de glissement à partir du bas de l'écran.
La barre d'application est constituée d'une disposition ToolbarHolder utilisée pour capturer les événements de mouvement, et un TPopup enfant qui contient la barre d'outils elle-même. ToolbarPopupAnimation est déclenchée automatiquement chaque fois que le popup est affiché et masqué, et le code invoquant le popup (*Form.ShowToolbar) calcule la valeur de départ de la position Popup basée sur la dimension de la fenêtre.
  • TListBox avec TMetropolisUIListBoxItem : Les deux contrôles Grille et Volet de fractionnement utilisent les contrôles TListBox avec TMetropolisUIListBoxItem, un nouveau contrôle FireMonkey Metropolis UI.
  • Dans les fiches Metropolis UI, les contrôles FireMonkey utilisent beaucoup les propriétés Align et Padding afin d'occuper l'intégralité de l'espace écran disponible.
  • Le style FireMonkey fait partie d'une fiche Metropolis UI qui inclut un StyleBook contenant le style Metropolis UI spécifique.

Fonctionnalités des templates VCL

  • Barre d'application : La barre d'application tactile est implémentée sous la forme d'un TLabel situé sur le bord inférieur de la fiche, juste au-dessus de la barre de défilement horizontale. Quand vous effectuez un glissement ou une pichenette vers le haut à partir du bord inférieur, la barre d'application s'affiche ; le template contient un bouton Fermer de style Windows 8.
  • Barre de défilement horizontale : En bas de la fiche se trouve un TScrollBox avec la propriété HorzScrollBar définie sur TControlScrollBar.
  • Clavier virtuel : Le fichier .dpr inclut du code pour afficher automatiquement le clavier d'écran pour les composants nécessitant une entrée utilisateur si aucun clavier physique n'est connecté :

Delphi : 

Application.UseMetropolisUI;

C++ : 

Application->UseMetropolisUI();

Template Vide Metropolis UI

Les templates Metropolis UI vides n'ont pas de disposition prédéfinie et peuvent ainsi être traités comme un canevas vide. A l'exécution, vous effectuez un glissement ou une pichenette sur la fiche affichée (par toucher ou avec la souris) pour réaliser un déplacement vers l'autre fiche.

  • Il n'y a pas de composants placés sur la fiche (autre qu'une barre d'application).
  • Le style par défaut pour l'application est MetroDark.
  • Pour le template Vide VCL, la barre de défilement horizontale (englobant la fiche même) est définie sur Visible=True.
Remarque : Quand vous exécutez une application Metropolis UI plein écran vide à partir de l'EDI, vous pouvez fermer l'application en appuyant sur Alt+F4.

Template Grille Metropolis UI

L'application Grille contient plusieurs groupes d'éléments, chacun d'eux ouvrant une page Vue Détail.


Template Grille FireMonkey

DetailView :

GridView :

GridViewFontSm.png

GridPanelSM.png

Les composants notables du template Grille FireMonkey sont :

Le défilement peut être effectué avec une barre de défilement, avec MouseTracking = True il peut être effectué en tirant le contenu avec LMB

  • Activés pour les touchers et les mouvements. Avec GestureManager, tous les mouvements standard peuvent aussi être utilisés.
  • TLayout utilisé pour l'en-tête, le cadre principal et le pied de page
  • Barre de défilement horizontale (THorzScrollBox), qui fonctionne comme un TVertScrollBox orienté horizontalement, contient tous les contrôles et est utilisée pour la pagination à travers l'application à l'exécution. Les dimensions du THorzScrollBox sont calculées en tant que rectangle d'union de tous les contrôles qu'il contient.
  • TMetropolisUIListBoxItem, qui contient un titre et un sous-titre (texte descriptif).
  • Boutons de style Metropolis UI (Enregistrer, Appliquer, Fermer)

Template Grille VCL

Voici les fiches d'exécution VCL pour le template Grille Metropolis UI (les styles VCL ne sont pas employés à la conception) :

VCLGridtemplatePage1.png

VCLGridPage2Small.png

Le template VCL Grille Metropolis UI est une application fiches VCL ayant deux fiches :

  • groupedItems
    La fiche principale, groupedItems.pas, affiche des groupes d'éléments avec des images, un titre et un sous-titre. La disposition de la fiche groupedItems est implémentée par le biais de TFlowPanel et est défilable (vers la gauche et la droite). Cliquer sur l'image affiche la fiche ItemDetail.
  • ItemDetail
    Affiche l'image, le titre et la zone de détail contenant du texte. La zone de détail entière est défilable (vers la gauche et la droite). La zone de détail est implémentée en utilisant les composants TMemo en lecture seule.

Les principales fonctionnalités du template VCL Grille Metropolis UI sont :

  • Le style par défaut pour l'application est MetropolisUIDark (notez que le style est seulement utilisé à l'exécution pour le framework VCL).
  • Cliquer sur une image de groupedItems affiche la fiche itemDetail.
  • La zone de détail de la fiche itemDetail est défilable (vers la gauche et la droite).
  • Un glissement vers le haut à partir du bord inférieur de la fiche affiche une barre d'application. Pour plus d'informations sur les barres d'applications, voir Création d'une barre d'application Metropolis UI.

Template Volet de fractionnement Metropolis UI

L'application Volet de fractionnement contient le même GridView que l'application Grille, mais avec moins d'éléments. Chaque élément ouvre un SplitPaneView (Vue Volet de fractionnement), qui contient une liste d'éléments sur la gauche et le DetailView (Vue Détail) sur la droite.

Template Volet de fractionnement FireMonkey

GridPaneView :

SplitPaneView :

FMXSplitPane.png

FMXSplitPanepage2.png

Les composants notables du template Volet de fractionnement FireMonkey sont :

  • Un en-tête qui contient le titre et les boutons facultatifs : un TLayout avec un TLabel
  • TImageControl pour les graphiques
  • TLayout avec des TLabels pour l'affichage des informations
  • TLabels pour l'affichage
  • Pied de page avec des boutons :
    • TToolBar avec des boutons
    • TLayout avec des boutons de style Metropolis UI

{{f|vcl|

Template Volet de fractionnement VCL

Voici les fiches d'exécution VCL pour le template Volet de fractionnement Metropolis UI (les styles VCL ne sont pas employés à la conception) :

Volet GroupedItems :

VCLSplitPane3.png


Volet ItemDetail :

VCLPaneSmall3.png

Le template VCL Volet de fractionnement Metropolis UI est une application Fiches VCL ayant deux fiches :

  • groupedItems
    La fiche principale est groupedItems.pas. Cette fiche affiche les groupes d'éléments, les images, un titre et un sous-titre pour le groupe. La zone des éléments est défilable (vers la gauche et la droite). Cliquer sur l'image affiche la fiche splitItemDetail.
  • splitItemDetail.
    Affiche une vue de fractionnement utilisant deux éléments TScrollBox.
  • Le TScrollBox sur la gauche simule l'apparence d'une vue liste avec des images et du texte. Cela est effectué en utilisant TGridPanel. Cliquer sur une image, un titre, un sous-titre ou une description sur la gauche actualise les libellés titre et sous-titre de la zone de détail située sur la droite.
  • La zone de détail sur la droite est un TScrollBox contenant un TImage et les composants TMemo en lecture seule pour afficher les informations. La zone de détail sur la droite est défilable (vers le haut et le bas).

Les principales fonctionnalités du template VCL Volet de fractionnement Metropolis UI sont :

  • Le style par défaut pour l'application est MetropolisUIDark.
  • La disposition de la fiche groupedItems est implémentée par le biais de TFlowPanel et est défilable (vers la gauche et la droite).
  • Cliquer sur une image dans groupedItems affiche la fiche splitItemDetail, et le titre est dérivé à l'exécution de l'élément d'origine sur le volet groupedItems.
  • La vue liste sur la gauche dans splitItemDetail est implémentée par des composants TGridPane.
  • La zone de détail sur la droite de la fiche splitItemDetail est défilable (vers le haut et le bas).

Voir aussi

Récupérée de « http://docwiki.embarcadero.com/RADStudio/Rio/f/index.php?title=Templates_d%27applications_Metropolis_UI&oldid=192513 »