Contrôle hiérarchique de DriveWorks

Article par Lee Herron mis à jour le 19 septembre 2017

Article

Dans cette vidéo technique, nous examinons les bases des propriétés des contrôles de formulaires de DriveWorks Hierarchical Control. Dans cet exemple simple, nous verrons comment utiliser ces propriétés sur vos formulaires afin de les rendre plus dynamiques et plus réactifs au type d'appareil sur lequel vos clients consultent DriveWorks.

Dans cette vidéo, nous utilisons trois boîtes simples qui peuvent représenter des contrôles ou des cadres dans un projet DriveWorks, puis nous utilisons les propriétés des contrôles pour faciliter la mise en page du formulaire.

Les propriétés du contrôle hiérarchique que nous allons utiliser ici sont les suivantes :

Hauteur Nom du contrôle .Height
Gauche Nom du contrôle .gauche
Top Nom du contrôle .Top
Largeur Nom du contrôle Largeur

 

Ce sont les principales propriétés que nous utiliserons, mais il en existe beaucoup d'autres. Vous pouvez en obtenir une liste complète ici : http://docs.driveworkspro.com/Topic/HowToControlProperties

En général, la première chose que vous voulez faire lorsque vous mettez en page vos formulaires est d'aligner les contrôles les uns par rapport aux autres. Nous pouvons utiliser la propriété ControlName.Top pour aligner tous les contrôles sur le haut du premier. Cela peut s'avérer très utile lorsque vous créez un grand groupe de contrôles que vous souhaitez déplacer ou déplacer dynamiquement en fonction de la largeur de l'écran. Le fait de lier tous les contrôles entre eux leur permet de se déplacer ensemble.

Contrôle hiérarchique de DriveWorks

Boîte 1 Contrôle

Ensuite, nous commençons à relier horizontalement les zones de texte entre elles. Pour ce faire, nous allons lier l'étiquette d'en-tête à la largeur de notre page Web en utilisant la variable DWFormContainerWidth.

Variable DWFormContainerWidth

Variable DWFormContainerWidth

Vous pouvez maintenant voir que l'en-tête s'étend sur tout l'écran et qu'il est lié à la largeur réelle de la page.

Boîtes liées

Boîtes liées

Ensuite, nous pouvons commencer à relier les trois boîtes ensemble pour qu'elles soient toutes les unes contre les autres. En commençant par la boîte 2 :

Avant

Formule : Box1.Left+Box1.width

Après

Maintenant, nous faisons la même chose pour la boîte 3 :

conseil technique driveworks

Avant

Formule (identique à la précédente, sauf que nous passons à l'utilisation de Box2) : Box2.Left+Box2.width

conseil technique driveworks

Après

Maintenant que les trois boîtes sont liées entre elles, nous pouvons commencer à élaborer des règles pour leurs largeurs individuelles. Ces règles peuvent être ce que nous voulons, mais dans cet exemple, elles seront liées à la largeur.

Les règles pour les trois boîtes sont les suivantes :

Largeur de la boîte 1 = 250 (valeur statique)

Largeur de la boîte 2 = (DWFormContainerWidth-Box1.width)/2

Largeur de la boîte 3 = (DWFormContainerWidth-Box1.width)/2

Et le résultat ressemble à ça :

conseil technique driveworks

Et si nous faisons glisser les fenêtres plus petites, la boîte rouge reste statique à 250, tandis que la bleue et la verte se partagent la différence avec la largeur restante du formulaire.

conseil technique driveworks

N'oubliez pas de télécharger les fichiers d'exemple ici. Il s'agit d'une introduction à DriveWorks Tech Tip, sur laquelle nous nous appuierons dans les prochaines vidéos DriveWorks Tech Tips et les articles de blog. Restez à l'écoute !

Trouver du contenu connexe par TAG :

Lee Herron