Contrôle hiérarchique de DriveWorks

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.

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.

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.

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 :

Formule : Box1.Left+Box1.width

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

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

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 :

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.

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 !