Alignement de bout en bout 1s. Nouveau mécanisme de placement d'éléments dans le formulaire. Alignement des éléments et des titres


Introduction

Formulaires gérés. Un nouveau développement 1C conçu pour faciliter le travail du développeur, en lui donnant plus de temps pour écrire du code en simplifiant la conception de l'interface. En fait, il s'avère souvent que ce qu'on appelle. Les « formes contrôlées » sont totalement incontrôlables. Les UV ne peuvent pas faire des choses aussi banales que minimiser/maximiser une fenêtre, sans parler de son positionnement sur l'écran et de la définition de sa taille en pixels. Peut-être que ces fonctions ont été considérées comme non réclamées et n'ont pas été incluses dans la nouvelle interface, mais la pratique montre qu'elles font parfois très défaut. Depuis quelque temps, le problème a été partiellement résolu par WSH, mais je voulais quelque chose de plus. C’est ainsi qu’un composant externe a été implémenté pour rendre les « formulaires gérés » un peu plus gérables.

Quoi? Où? Quand?

Ce VK est une bibliothèque de fonctions permettant de contrôler l'état et la position des fenêtres. La bibliothèque contient également plusieurs fonctions système utiles.

Contrôle de l'état de la fenêtre :

Développer ( Fenêtre d'en-tête ) agrandit la fenêtre en plein écran

Réduire (Titre de la fenêtre) - minimise la fenêtre de la barre des tâches

Masquer (Titre de la fenêtre) - masque la fenêtre (pendant que le code du formulaire continue à être exécuté)

Montrer () - montre la dernière fonction cachée fenêtre masquer()

CollapseWindow (WindowTitle) - dans restaure la fenêtre à son état d'origine

VRAIE Visibilité (WindowTitle) - p vérifie si la fenêtre est visible à l'écran

VRAI étendu (titre de la fenêtre) - vérifie si la fenêtre est agrandie en plein écran

VRAI Réduit (WindowTitle) — vérifie si la fenêtre est réduite dans la barre des tâches

Définir la transparence(Titre de la fenêtre, Coefficient) - définit la transparence de la fenêtre. Le degré de transparence est défini à l'aide d'un coefficient (0-255).

Contrôle de la position des fenêtres :

ObtenirPosition(Titre de la fenêtre, X, Oui) - Obtient les coordonnées du coin supérieur gauche de la fenêtre par rapport à l'écran. Les coordonnées sont renvoyées via des paramètresX,Y.

Se déplacer(Titre de la fenêtre, X, Oui) - déplace la fenêtre vers une position spécifiéeXY. Dans ce cas XYsont les coordonnées du coin supérieur gauche de la fenêtre.

Obtenir les tailles- obtient les dimensions de la fenêtre en pixels. Les valeurs sont renvoyées via les paramètres correspondants.

Définir les tailles(Titre de la fenêtre, Largeur, Hauteur) - définit la taille de la fenêtre en pixels.

Fonctions du système :

Obtenir la permission actuelle(Horz, Vert) - obtient la résolution actuelle de l'écran. Les valeurs sont renvoyées via les paramètres correspondants.

GetPermissionList() - obtient une liste des résolutions d'écran disponibles dans le système. Les données sont renvoyées sous la forme « RESOL.1, RESOL.2, RESOL.3... ». Dans le traitement de démonstration, il existe un exemple de génération d'une liste d'autorisations sur un formulaire.

Définir l'autorisation(Résolution d'écran sélectionnée) - définit la résolution de l'écran. Le paramètre spécifie le numéro de série de l'autorisation. Le traitement de démonstration montre un exemple de définition d'une résolution à partir d'une liste générée précédemment.

Bonus:

Sommeil (heure de sommeil) dormir().Le temps de sommeil est indiqué en millisecondes.

Signal (Fréquence, Durée) - implémentation de la fonction classiquebip().Vous permet de définir la fréquence et la durée du son.

Total

La bibliothèque a été écrite pour nos propres besoins et sera probablement développée davantage si nécessaire. Si quelqu'un a une idée brillante pour étendre ses fonctionnalités dans le domaine pour lequel il a été conçu, écrivez vos souhaits. Si les idées s’avèrent valables, elles seront mises en œuvre.

Le kit de livraison comprend : Une base avec un VC connecté sous la forme d'un aménagement général et d'un traitement de démonstration. VK dans l'archive zip.

Implémenté dans la version 8.3.7.1759.

Pour bien comprendre de quoi nous parlons dans cet article, il est nécessaire de faire une petite explication.

Une caractéristique des formulaires gérés est que le développeur ne façonne pas directement l’apparence du formulaire. Le développeur crée uniquement une description du formulaire en utilisant quelques règles logiques. Sur la base de ces règles, la plateforme génère indépendamment une représentation visuelle du formulaire. De plus, cette représentation visuelle dépend de la taille de la fenêtre dans laquelle le formulaire est affiché. Le même formulaire affiché dans une fenêtre étroite ou dans une fenêtre agrandie en plein écran aura une apparence visuelle différente.

Ainsi, la partie de la plateforme qui forme la représentation visuelle du formulaire est appelée mécanisme pour placer des éléments dans le formulaire.

Pourquoi un nouveau mécanisme était-il nécessaire ?

Premièrement, le mécanisme précédent présentait malheureusement des lacunes. Le plus important d'entre eux était que de nombreuses modifications apportées aux propriétés des éléments de formulaire effectuées sur le client nécessitaient un appel au serveur. Et tout accès au serveur entraîne un ralentissement.

Deuxièmement, nous avons évalué l'expérience d'utilisation des formulaires gérés et découvert un certain nombre de besoins critiques qui devaient être satisfaits.

Et troisièmement, nous voulions intégrer dans le nouveau mécanisme des opportunités de développement futur.

Changements majeurs

Le fonctionnement du mécanisme précédent peut être schématiquement représenté comme suit :

Le développeur crée une arborescence d'éléments de formulaire dans le configurateur et définit les propriétés des éléments. Au moment où la solution applicative doit montrer le formulaire à l'utilisateur, ce qui suit se produit. Tout d'abord, sur le serveur, la plateforme crée description de la forme visuelle. Ensuite cette description est transmise au client. Et sur le client visualiseur forme l’image que l’utilisateur verra.

La principale action effectuée sur le serveur lors de la création d'une description de la forme visuelle était le calcul des longueurs des lignes. Cela fait référence à toutes sortes de titres, d'inscriptions, etc. Connaissant les longueurs des lignes, vous pouvez déjà calculer la disposition des éléments dans le formulaire.

Cette opération étant effectuée sur le serveur, il y avait deux aspects négatifs. Premièrement, pour le calcul nous avons utilisé non pas les polices qui seront utilisées sur le client, mais celles installées sur le serveur. Et ils peuvent différer, notamment lorsqu’il s’agit de différentes plateformes (Windows, Linux). Ou même les polices nécessaires peuvent ne pas être installées du tout sur le serveur. Deuxièmement, pour calculer les longueurs, nous avons utilisé le moteur de rastérisation des polices qui se trouve sur le serveur. Et cela peut ne pas fonctionner exactement comme le mécanisme de rendu des chaînes de texte qui existe sur le client dans un navigateur Internet, par exemple. De ce fait, des formulaires pouvaient apparaître soit avec des textes « tronqués », soit, à l’inverse, avec des inscriptions trop larges.

Un autre problème était qu'il n'y avait pas d'adaptation à la taille de la fenêtre dans laquelle le formulaire serait présenté au client. En fait, sur le serveur, la description du formulaire a été créée sur la base de la taille minimale possible de la fenêtre, et le succès ultérieur de son affichage dépendait de sa capacité à s'étirer.

Dans le nouveau mécanisme, nous avons divisé la génération d'une description d'un formulaire visuel, qui était auparavant entièrement réalisée sur le serveur, en deux parties, serveur et client :

La partie serveur est devenue nettement plus petite. Il n'effectue aucun calcul. Seule une description « vierge » est créée sur le serveur, qui ne contient pas la longueur exacte des champs de texte, et les éléments d'adaptabilité n'y sont pas autorisés. Le serveur gère la visibilité des éléments, mais uniquement celle qui est déterminée par les options fonctionnelles et celle définie par l'utilisateur. Mais ici, il est impossible de faire autrement, car les options fonctionnelles elles-mêmes ne sont disponibles que sur le serveur. Et la modification interactive des paramètres par l'utilisateur entraînera dans tous les cas un appel au serveur.

Le résultat est une sorte de « produit semi-fini » d'une représentation visuelle de la forme, qui est transférée au client.

Les modifications nécessaires à la description de la forme visuelle sont apportées au client. Les longueurs de lignes sont calculées, les éléments de réactivité liés à la taille de l'écran client sont calculés et la visibilité est élaborée. Après cela, comme auparavant, le visualiseur commence à fonctionner, ce qui crée le formulaire final que voit le client.

Du fait que le calcul des longueurs de chaînes est effectué par le client, nous avons pu nous débarrasser des « espaces » inutiles et bâclés entre les éléments. Et travailler la visibilité sur le client sans accéder au serveur a permis d'accélérer le travail des formulaires. Parce qu'activer/désactiver la visibilité des éléments de formulaire est l'une des opérations les plus courantes.

Quelques nouveautés

Éléments d'interface réactifs

Le nouveau mécanisme de placement d'éléments sur le formulaire améliore non seulement les fonctionnalités disponibles auparavant, mais ajoute également de nouvelles fonctionnalités. Par exemple, il adapte l'apparence du formulaire à la taille de l'affichage client. Il y a plusieurs moyens de le faire.

Tout d’abord, un retour à la ligne automatique est effectué, ajustant la hauteur des titres et des décorations. Vous pouvez voir comment cela fonctionne sur la figure :

S'il y a de longues lignes dans le formulaire qui peuvent être divisées en mots individuels, ces lignes sont alors renvoyées à la ligne si nécessaire. En conséquence, la hauteur de la forme augmente, car sa partie inférieure « descend ». En conséquence, le formulaire semblera normal même sur des écrans étroits. De plus, ce mécanisme fonctionne de manière dynamique, ce qui signifie que vous pouvez compresser le formulaire en temps réel et que de longues lignes s'enrouleront avec lui.

L'habillage automatique fonctionne pour les titres d'éléments, les titres de groupes, les décorations de texte et le texte dans des boutons qui ressemblent à Lien hypertexte.

Le deuxième élément de l’adaptabilité consiste à changer l’orientation des groupes. Les groupes et le formulaire dans son ensemble ont une nouvelle option d'orientation - " Horizontalement si possible" Dans cette option, si l'afficheur client permet de positionner les éléments horizontalement, ceux-ci sont positionnés horizontalement. Sinon, ils sont situés verticalement.

Le troisième élément d'adaptabilité est la détermination automatique du nombre de colonnes d'un interrupteur ou d'un interrupteur à bascule. Auparavant, sauf instructions particulières, le nombre de colonnes était fixé au maximum et affiché sur une seule ligne. Maintenant, dans la même situation, la largeur du formulaire est analysée et le nombre de colonnes est défini de manière à ce que l'interrupteur/interrupteur à bascule apparaisse bien à l'écran.

Alignement horizontal et vertical

Auparavant, cette possibilité était absente et pour mettre en œuvre un alignement non standard, il fallait inventer diverses « astuces ». Le formulaire et le groupe peuvent désormais être spécifiés comment leurs éléments doivent être alignés verticalement et horizontalement. Par exemple, dans l'image ci-dessous, un groupe de boutons affiche trois options d'alignement possibles : Gauche, Centre Et Droite:

Sur cette image, les boutons sont placés dans un groupe régulier qui s'étend horizontalement. Le placement des boutons dans un groupe est contrôlé par la propriété du groupe HorizontalPositionSubordonnés.

Contrôle d'alignement externe

Par exemple, vous disposez d'un formulaire qui contient des champs Subdivision, groupes Adresse Et Téléphone. Le mécanisme précédent alignait les champs de ces groupes comme le montre la figure de gauche. Les champs du formulaire étaient alignés les uns avec les autres et les champs de chaque groupe étaient alignés les uns avec les autres.

Vous avez désormais la possibilité de définir un alignement de bout en bout pour les groupes, grâce auquel, par exemple, tous les champs du formulaire seront alignés de la même manière. Cette option est affichée dans l'image de droite.

De plus, vous pouvez gérer l'alignement de bout en bout pour chaque groupe séparément. Ainsi, vous pouvez, par exemple, désactiver l'alignement de bout en bout pour un groupe Téléphone, et le formulaire ressemblera alors à celui montré dans l'image de droite.

Alignement des éléments et des titres

Une autre nouvelle fonctionnalité apparue est la possibilité de contrôler la position relative des éléments et des titres. Aussi bien sous toutes les formes qu’en groupes individuels. Par exemple, vous pouvez « étirer » les titres et les éléments sur différents bords du formulaire, ou vice versa, les « tirer » les uns vers les autres, en alignant les titres à droite et les éléments à gauche.

Limiter la largeur maximale des éléments

Auparavant, si vous demandiez à un élément de s'étirer, il s'étirait aussi loin qu'il le pouvait. Par exemple, plein écran. Pour certains éléments, c'était bien (comme un champ HTML), mais pour d'autres éléments, ce n'était peut-être pas aussi bien. Par exemple, pour les champs numériques. Parce que les données numériques, ou les boutons qui contrôlent le champ, se trouvaient quelque part très à droite.

Les éléments ont désormais des propriétés booléennes, avec lesquelles vous pouvez définir le mode d'étirement automatique en largeur ou en hauteur. Dans ce mode, la plateforme détermine indépendamment jusqu'où le champ peut être étendu. Si le mode automatique est désactivé, alors la plateforme se comportera de la même manière qu'auparavant. Si vous spécifiez une largeur/hauteur de champ spécifique, celle-ci sera utilisée. Et si vous spécifiez la valeur 0, l'élément s'étirera autant que possible.

Contrôler l'espacement entre les éléments

Il est également possible de contrôler l'espacement horizontal et vertical entre les éléments. Par exemple, dans la figure suivante, le groupe de gauche présente un espacement vertical accru, tandis que le groupe de droite présente un espacement vertical réduit.

Désactiver l'étirement du formulaire

Nous avons implémenté un autre nouveau mode de fonctionnement du formulaire, qui désactive l'étirement vertical de ses éléments. Ce mode sera utile pour les formulaires contenant un petit nombre d'éléments.

Désactiver le défilement des pages

Pour les formulaires contenant un grand nombre d’éléments, nous avons également légèrement modifié le comportement. Désormais, le défilement vertical n'apparaît pas sur les pages. Le défilement vertical peut désormais s'effectuer sur le formulaire lui-même ou à l'intérieur d'éléments de formulaire, tels qu'un tableau, une feuille de calcul, etc. Et la page du formulaire sera toujours en pleine hauteur. Cela devrait rendre l'expérience utilisateur plus facile, car un grand nombre de scrollers sur un formulaire peut souvent être déroutant et déroutant.

Résumé

Dans cet article de synthèse, nous n'avons répertorié que les principales fonctionnalités apportées par le nouveau mécanisme de placement d'éléments dans le formulaire. Mais ce qui est tout aussi important, à notre avis, est que ce mécanisme contient une réserve importante pour un développement futur.

Sur les formulaires classiques, l'emplacement des éléments est dessiné entièrement manuellement. Pour faciliter ce processus, la plateforme propose plusieurs mécanismes :

- alignement des éléments- permet un centrage automatique, ou un « appui » des commandes les unes sur les lignes directrices des autres, ou un alignement des tailles des commandes :

- filet- grâce aux Options vous pouvez configurer l'affichage de la grille pour un alignement manuel précis des éléments :

La bonne réponse est la deuxième. Il s'agit d'un panneau permettant d'aligner et d'unifier les tailles des éléments.

Question 10.79 de l'examen 1C : Plateforme Professionnelle.

  1. Rien ne changera
  2. L'élément "Inscription1" sera décalé horizontalement et sa bordure droite sera alignée avec la bordure droite de l'élément "Inscription2"
  3. L'élément "Inscription2" sera décalé horizontalement et sa bordure droite sera alignée avec la bordure droite de l'élément "Inscription1"
  4. Les deux éléments seront déplacés vers la ligne d'alignement du bord droit du formulaire.

La bonne réponse est la deuxième. Les étiquettes seront alignées à droite.

Question 10.82 de l'examen 1C : Plateforme Professionnelle. Que se passe-t-il lorsque vous cliquez sur le bouton de la barre de commandes indiqué dans l'image ?

  1. Toutes les inscriptions auront la même taille horizontalement
  2. Rien ne changera
  3. Les étiquettes vont changer. L'axe vertical de symétrie de chaque élément de commande coïncidera avec l'axe vertical de symétrie de la forme, c'est-à-dire centrer chaque contrôle horizontalement
  4. Les étiquettes se déplaceront horizontalement. Les commandes ne bougeront pas les unes par rapport aux autres au sein du groupe, c'est-à-dire centrer, pour ainsi dire, un élément dans son ensemble
  5. Les étiquettes se déplaceront verticalement. Les commandes ne bougeront pas les unes par rapport aux autres au sein du groupe, c'est-à-dire centrer, pour ainsi dire, un élément dans son ensemble

La bonne réponse est la quatrième. Tous les contrôles sélectionnés seront centrés autour de leur ligne centrale commune.

Question 10.83 de l'examen 1C : Plateforme Professionnelle. Que se passe-t-il lorsque vous cliquez sur le bouton de la barre de commandes indiqué dans l'image ?

  1. Toutes les inscriptions auront la même taille verticalement. L'élément de contrôle "Inscription1" sera pris comme échantillon.
  2. Rien ne changera
  3. Toutes les inscriptions auront la même taille verticalement. L'élément de contrôle "Inscription3" sera pris comme échantillon.
  4. Chaque étiquette sera centrée verticalement
  5. Il y aura une répartition uniforme des inscriptions dans le sens vertical. Les contrôles "Inscription1" et "Inscription3" resteront en place, et l'élément "Inscription2" sera déplacé dans le sens souhaité. Lors du déplacement d'un élément, l'accrochage à la grille de mise en page n'est pas pris en compte
  6. Il y aura une répartition uniforme des inscriptions dans le sens vertical. Les contrôles "Inscription1" et "Inscription3" resteront en place, et l'élément "Inscription2" sera déplacé dans le sens souhaité. Lorsque vous déplacez un élément, il s'alignera sur la grille de marquage si le mode de son utilisation est défini

La bonne réponse est la première. La hauteur des éléments sera standardisée

Question 10.86 de l'examen 1C : Plateforme Professionnelle. Que se passe-t-il si vous cliquez sur le bouton de la barre de commandes annulé dans l'image ?

  1. Toutes les inscriptions auront la même taille verticalement et horizontalement. L'élément de contrôle "Inscription1" sera pris comme échantillon.
  2. Toutes les inscriptions auront la même taille verticalement et horizontalement. L'élément de contrôle "Inscription3" sera pris comme échantillon.
  3. Rien ne changera
  4. Les étiquettes seront automatiquement alignées
  5. Toutes les étiquettes auront un fond transparent.

La bonne réponse est la numéro quatre, le bouton lui-même s'appelle « Aligner automatiquement »

Question 10.90 de l'examen 1C : Plateforme Professionnelle. Désactivez le mode d'alignement à l'aide de lignes d'alignement dans un formulaire créé précédemment :

  1. C'est interdit
  2. Peut. Pour ce faire, dans la palette des propriétés du formulaire, vous devez désactiver la propriété "Utiliser les lignes d'alignement".
  3. Peut. Pour ce faire, en sélectionnant l'élément du menu principal "Outils-Options", dans l'onglet "Formulaire", vous devez désactiver la propriété "Utiliser les lignes d'alignement".
  4. Peut. Pour ce faire, dans la palette des propriétés du formulaire, vous devez désactiver la propriété "Utiliser les lignes d'alignement" ou, en sélectionnant l'élément de menu principal "Outils-Options", dans l'onglet "Formulaire", désactiver la propriété "Utiliser les lignes d'alignement".

La bonne réponse est la deuxième. Les lignes d'alignement (marquées d'une flèche) sont désactivées par la propriété de formulaire correspondante :

Question 10.92 de l'examen 1C : Plateforme Professionnelle. Lors de l'alignement des éléments du formulaire, une grille de mise en page peut s'afficher :

  1. Lignes continues
  2. Points en damier
  3. Points situés à l'intersection des lignes de marquage
  4. Les réponses 1 et 2 sont correctes
  5. Les réponses 2 et 3 sont correctes
  6. Les réponses 1, 2 et 3 sont correctes

La bonne réponse est la cinquième. L'emplacement des points est contrôlé par l'option Damier dans les paramètres système (voir capture d'écran dans l'article).

Question 10.95 de l'examen 1C : Plateforme Professionnelle.

  1. Un marqueur d'alignement spécial qui montre le décalage des contrôles. Il est proposé de déplacer l'élément de contrôle sélectionné vers la gauche
  2. Un marqueur d'alignement spécial qui montre le décalage des contrôles. L'élément de contrôle sélectionné est proposé pour être déplacé vers le bas
  3. Un marqueur d'alignement spécial montrant la superposition des contrôles. Il est proposé de déplacer l'élément de contrôle sélectionné vers la gauche
  4. Un marqueur d'alignement spécial montrant la superposition des contrôles. L'élément de contrôle sélectionné est proposé pour être déplacé vers le bas

La bonne réponse est la première. La marge inférieure est décalée vers la droite par rapport au haut, il est donc proposé de la déplacer vers la gauche.

Question 10.96 de l'examen 1C : Plateforme Professionnelle. Puis-je utiliser des lignes d’alignement pour redimensionner et déplacer les contrôles de formulaire ?

  1. C'est interdit
  2. Oui, si les champs sont rattachés à ces lignes
  3. C'est possible si les champs sont attachés à ces lignes, mais seulement les déplacer
  4. C'est possible si les champs sont attachés à ces lignes, mais uniquement redimensionnés
  5. Tu peux toujours

La bonne réponse est la deuxième. Les éléments attachés à un même hauban peuvent être déplacés ensemble.

Question 10.97 de l'examen 1C : Plateforme Professionnelle. Sur la figure, le cercle rouge indique :

  1. Un marqueur d'alignement spécial qui montre le décalage des contrôles. L'élément de contrôle sélectionné est proposé pour être déplacé vers la gauche et vers le haut
  2. Un marqueur d'alignement spécial qui montre le décalage des contrôles. L'élément de contrôle sélectionné peut être déplacé vers la droite et vers le bas
  3. Un marqueur d'alignement spécial montrant la superposition des contrôles. L'élément de contrôle sélectionné est proposé pour être déplacé vers la gauche et vers le haut
  4. Un marqueur d'alignement spécial montrant la superposition des contrôles. L'élément de contrôle sélectionné peut être déplacé vers la droite et vers le bas

La bonne réponse est la quatrième. Là où pointent les flèches, vous devez vous y déplacer.

Question 10.98 de l'examen 1C : Plateforme Professionnelle. Sur la figure, le cercle rouge indique :


Question 10.110 de l'examen 1C : Plateforme Professionnelle. Comment puis-je utiliser le bouton de la barre de commandes illustré dans la figure pour aligner les trois étiquettes à droite ?

  1. Sélectionnez tout d'abord le champ « Inscription1 » en cliquant dessus avec le bouton gauche de la souris et en appuyant simultanément sur la touche . Appuyez ensuite sur le bouton indiqué
  2. Cliquez simplement sur le bouton indiqué
  3. En utilisant ce bouton, vous ne pouvez pas aligner les étiquettes, car elles appartiennent à des panneaux différents
La bonne réponse est la troisième. L'alignement fonctionne au sein d'un seul panneau.

Question 10.115 de l'examen 1C : Plateforme Professionnelle. Pour afficher une grille de mise en page dans un formulaire existant, il suffit :

  1. Dans la palette des propriétés du formulaire, définissez la propriété "Utiliser la grille".
  2. En sélectionnant l'élément du menu principal "Outils-Options", dans l'onglet "Formulaire", cochez le drapeau "Utiliser la grille".
  3. En sélectionnant l'élément du menu principal "Outils-Options", dans l'onglet "Formulaire", cochez le drapeau "Grille d'affichage".
  4. En sélectionnant l'élément du menu principal "Outils-Options", dans l'onglet "Formulaire", définissez le drapeau "Afficher la grille", puis dans la palette des propriétés du formulaire, définissez la propriété "Utiliser la grille".
  5. En sélectionnant l'élément du menu principal "Outils-Options", dans l'onglet "Formulaire", cochez les drapeaux "Afficher la grille" et "Utiliser la grille".

La bonne réponse est la quatrième ; pour le formulaire, vous pouvez également spécifier l'option d'affichage ou non.

L'éditeur de formulaires est utilisé pour créer et modifier des formulaires d'objets de solution d'application. Les formes d'objet sont utilisées par le système pour afficher visuellement les données d'objet pendant que l'utilisateur travaille.

Toute forme représente une combinaison de trois composants :

  • boîte de dialogue de formulaire - une fenêtre qui s'affichera à l'écran ;
  • module de formulaire - un programme dans un langage intégré chargé de travailler avec les contrôles de formulaire et le traitement des événements ;
  • détails du formulaire - un ensemble d'objets appartenant au formulaire, dont il utilise les données dans son travail.

L'éditeur de formulaire assure lui-même l'édition du dialogue du formulaire, de ses détails et appelle l'éditeur de texte et de module pour éditer le module de formulaire.

La fenêtre de l'éditeur de formulaire contient trois onglets qui permettent de modifier les trois composants du formulaire.

Modification d'une boîte de dialogue de formulaire

L'éditeur de formulaires permet au développeur de profiter pleinement d'un large éventail de fonctionnalités de dialogue. Listons les principaux :

Panneaux, pages, signets

L'éditeur de dialogue permet au développeur de placer des contrôles spéciaux sur le formulaire qui contribuent à donner au formulaire son propre style reconnaissable, à rendre l'accès aux données simple et clair, et également à insérer une grande quantité d'informations dans une zone limitée.

L'éditeur permet de placer plusieurs panneaux sur un formulaire, chacun pouvant contenir plusieurs pages. Par exemple, un formulaire de document peut contenir un panneau de deux pages : Produits et Supplémentaires :

Le développeur a la possibilité de définir un mode dans lequel les pages défileront dans le panneau ou d'utiliser des signets pour basculer entre les pages. L'éditeur permet de définir un grand nombre d'options différentes pour la localisation et l'affichage des favoris :

Par exemple, les signets peuvent être placés horizontalement sur le dessus :

Ou vous pouvez disposer les signets sur la gauche verticalement :

Contrôles

L'éditeur permet de placer un grand nombre de champs différents sur le formulaire. Vous pouvez placer des contrôles en les faisant glisser ou en utilisant une boîte de dialogue spéciale pour insérer des contrôles, qui vous permet de définir simultanément les propriétés souhaitées du contrôle sélectionné :

Dans le cas où le formulaire contient un grand nombre de champs, le développeur peut utiliser le mode d'affichage des champs sous forme de liste, qui permet de naviguer rapidement jusqu'au champ souhaité :

L'éditeur offre la possibilité de spécifier l'ordre dans lequel l'utilisateur contournera les contrôles du formulaire lors de la saisie et de la modification des données. Il est possible de définir un ordre de parcours automatique ou de définir manuellement l'ordre de parcours dans une liste spéciale de contrôles, ou en cliquant directement avec la souris sur le formulaire :

Grille, alignement

L'éditeur de formulaire possède d'excellentes capacités pour contrôler le placement des éléments sur le formulaire. En particulier, il prend en charge la disposition en grille, où les bordures et les tailles des contrôles sont alignées sur la grille de disposition située sur le formulaire. Le développeur a la possibilité de modifier le pas de la grille de marquage et ainsi d'obtenir une localisation plus précise des commandes :

L'éditeur prend également en charge l'utilisation de lignes d'alignement, qui servent à faciliter l'alignement et la position relative des contrôles de formulaire. Par exemple, dans l'illustration suivante, les lignes d'alignement sont utilisées pour positionner les contrôles sur la page Plus :

Le développeur a la possibilité de placer le nombre requis de lignes d'alignement horizontales ou verticales sur la page, ainsi que d'utiliser des lignes d'alignement invisibles. L'éditeur crée automatiquement des lignes d'alignement invisibles une fois qu'au moins deux contrôles sont alignés le long de l'une des limites. Par exemple, si deux champs de même taille étaient alignés à gauche, une ligne d'alignement invisible sera créée le long des bordures alignées à droite de ces champs.

L'alignement des commandes peut également être effectué à l'aide de marqueurs spéciaux indiquant le sens de déplacement souhaité des commandes. Des marqueurs apparaissent lorsque deux contrôles sont très proches l’un de l’autre.

Des poignées d'alignement bleues indiquent le sens de déplacement souhaité du champ pour l'aligner avec une des bordures du champ adjacent :

Les poignées d'alignement rouges indiquent la direction souhaitée pour déplacer le contrôle lorsqu'il chevauche un autre contrôle :

Il faut dire également que l'éditeur prend en charge les opérations d'alignement, de redimensionnement et d'ordonnancement d'un groupe de champs :

Reliures

L'éditeur de formulaire permet de personnaliser le comportement des champs situés dans le formulaire, afin que lors du changement de taille du formulaire, une perception naturelle de l'information soit assurée : une partie des éléments reste en place, l'autre partie se déplace avec le limites du formulaire, et la troisième partie change de taille en fonction du changement de taille du formulaire.

Pour spécifier ce comportement des éléments de formulaire, le développeur peut décrire des liaisons - la dépendance de la position des bordures des contrôles sur la position des bordures du formulaire. La bordure d'un contrôle peut être alignée sur la bordure ou le centre d'un formulaire, ou sur la bordure ou le centre d'un autre contrôle.

L'éditeur prend en charge une grande variété de types de liaisons différents et peut les afficher graphiquement :

Séparateurs

Les séparateurs sont des contrôles spéciaux qui permettent de redistribuer l'espace d'un formulaire sans modifier sa taille. En mode 1C:Entreprise, le séparateur a la possibilité d'être « saisi » par la souris et déplacé au sein du formulaire dans ses limites, en tenant compte de la possibilité de localisation d'autres contrôles et de l'orientation du séparateur :

Lorsque vous déplacez un séparateur, tous les contrôles liés au séparateur seront redimensionnés ou déplacés en fonction des ancres définies :

ActiveX

L'éditeur permet de placer des contrôles ActiveX sur un formulaire, que le développeur peut configurer puis gérer à l'aide du langage intégré :

Modification d'un module de formulaire

Pour éditer le module de formulaire, le configurateur appelle l'éditeur de texte et de module. Cet éditeur offre au développeur une grande variété d'options pour créer et modifier le texte du module.

Modification des détails du formulaire

La modification des détails du formulaire s'effectue dans la liste, ce qui vous permet de créer de nouveaux détails, de modifier les détails existants et de supprimer les détails inutiles :

Si un formulaire possède un attribut principal qui détermine le comportement du formulaire différent du formulaire standard, il est mis en évidence en gras. Le développeur peut placer le curseur sur l'attribut souhaité et, à l'aide de la commande de menu, accéder immédiatement à la boîte de dialogue du formulaire, à l'élément de contrôle qui correspond à l'attribut sélectionné.

Informations Complémentaires

Vous pouvez vous familiariser avec l'utilisation de l'éditeur de formulaires en temps réel. Pour ce faire, vous pouvez télécharger la vidéo de démonstration « Exemple de développement d'un mini-système de trading », qui montre le processus de développement d'un mini-système de trading à l'aide de cet éditeur pour créer des formulaires de documents « Facture de réception », « Facture de dépenses » et rapport formulaires « Analyse des ventes » et « Analyse des ventes par période ».

19.05.2015

Implémenté dans la version 8.3.7.1759.

Pour bien comprendre de quoi nous parlons dans cet article, il est nécessaire de faire une petite explication.

Une caractéristique des formulaires gérés est que le développeur ne façonne pas directement l’apparence du formulaire. Le développeur crée uniquement une description du formulaire en utilisant quelques règles logiques. Sur la base de ces règles, la plateforme génère indépendamment une représentation visuelle du formulaire. De plus, cette représentation visuelle dépend de la taille de la fenêtre dans laquelle le formulaire est affiché. Le même formulaire affiché dans une fenêtre étroite ou dans une fenêtre agrandie en plein écran aura une apparence visuelle différente.

Ainsi, la partie de la plate-forme qui forme la représentation visuelle du formulaire est appelée le mécanisme permettant de placer des éléments dans le formulaire.

Pourquoi un nouveau mécanisme était-il nécessaire ?

Premièrement, le mécanisme précédent présentait malheureusement des lacunes. Le plus important d'entre eux était que de nombreuses modifications apportées aux propriétés des éléments de formulaire effectuées sur le client nécessitaient un appel au serveur. Et tout accès au serveur entraîne un ralentissement.

Deuxièmement, nous avons évalué l'expérience d'utilisation des formulaires gérés et découvert un certain nombre de besoins critiques qui devaient être satisfaits.

Et troisièmement, nous voulions intégrer dans le nouveau mécanisme des opportunités de développement futur.

Changements majeurs

Le fonctionnement du mécanisme précédent peut être schématiquement représenté comme suit :

Le développeur crée une arborescence d'éléments de formulaire dans le configurateur et définit les propriétés des éléments. Au moment où la solution applicative doit montrer le formulaire à l'utilisateur, ce qui suit se produit. Tout d'abord, la plateforme crée une description de la forme visuelle sur le serveur. Ensuite cette description est transmise au client. Et sur le client, le visualiseur génère l'image que l'utilisateur verra.

La principale action effectuée sur le serveur lors de la création d'une description de la forme visuelle était le calcul des longueurs des lignes. Cela fait référence à toutes sortes de titres, d'inscriptions, etc. Connaissant les longueurs des lignes, vous pouvez déjà calculer la disposition des éléments dans le formulaire.

Cette opération étant effectuée sur le serveur, il y avait deux aspects négatifs. Premièrement, pour le calcul nous avons utilisé non pas les polices qui seront utilisées sur le client, mais celles installées sur le serveur. Et ils peuvent différer, notamment lorsqu’il s’agit de différentes plateformes (Windows, Linux). Ou même les polices nécessaires peuvent ne pas être installées du tout sur le serveur. Deuxièmement, pour calculer les longueurs, nous avons utilisé le moteur de rastérisation des polices qui se trouve sur le serveur. Et cela peut ne pas fonctionner exactement comme le mécanisme de rendu des chaînes de texte qui existe sur le client dans un navigateur Internet, par exemple. De ce fait, des formulaires pouvaient apparaître soit avec des textes « tronqués », soit, à l’inverse, avec des inscriptions trop larges.

Un autre problème était qu'il n'y avait pas d'adaptation à la taille de la fenêtre dans laquelle le formulaire serait présenté au client. En fait, sur le serveur, la description du formulaire a été créée sur la base de la taille minimale possible de la fenêtre, et le succès ultérieur de son affichage dépendait de sa capacité à s'étirer.

Dans le nouveau mécanisme, nous avons divisé la génération d'une description d'un formulaire visuel, qui était auparavant entièrement réalisée sur le serveur, en deux parties, serveur et client :

La partie serveur est devenue nettement plus petite. Il n'effectue aucun calcul. Seule une description « vierge » est créée sur le serveur, qui ne contient pas la longueur exacte des champs de texte, et les éléments d'adaptabilité n'y sont pas autorisés. Le serveur gère la visibilité des éléments, mais uniquement celle qui est déterminée par les options fonctionnelles et celle définie par l'utilisateur. Mais ici, il est impossible de faire autrement, car les options fonctionnelles elles-mêmes ne sont disponibles que sur le serveur. Et la modification interactive des paramètres par l'utilisateur entraînera dans tous les cas un appel au serveur.

Le résultat est une sorte de « produit semi-fini » d'une représentation visuelle de la forme, qui est transférée au client.

Les modifications nécessaires à la description de la forme visuelle sont apportées au client. Les longueurs de lignes sont calculées, les éléments de réactivité liés à la taille de l'écran client sont calculés et la visibilité est élaborée. Après cela, comme auparavant, le visualiseur commence à fonctionner, ce qui crée le formulaire final que voit le client.

Du fait que le calcul des longueurs de chaînes est effectué par le client, nous avons pu nous débarrasser des « espaces » inutiles et bâclés entre les éléments. Et travailler la visibilité sur le client sans accéder au serveur a permis d'accélérer le travail des formulaires. Parce qu'activer/désactiver la visibilité des éléments de formulaire est l'une des opérations les plus courantes.

Quelques nouveautés

Éléments d'interface réactifs

Le nouveau mécanisme de placement d'éléments sur le formulaire améliore non seulement les fonctionnalités disponibles auparavant, mais ajoute également de nouvelles fonctionnalités. Par exemple, il adapte l'apparence du formulaire à la taille de l'affichage client. Il y a plusieurs moyens de le faire.

Tout d’abord, un retour à la ligne automatique est effectué, ajustant la hauteur des titres et des décorations. Vous pouvez voir comment cela fonctionne sur la figure :

S'il y a de longues lignes dans le formulaire qui peuvent être divisées en mots individuels, ces lignes sont alors renvoyées à la ligne si nécessaire. En conséquence, la hauteur de la forme augmente, car sa partie inférieure « descend ». En conséquence, le formulaire semblera normal même sur des écrans étroits. De plus, ce mécanisme fonctionne de manière dynamique, ce qui signifie que vous pouvez compresser le formulaire en temps réel et que de longues lignes s'enrouleront avec lui.

L'habillage automatique fonctionne pour les titres d'éléments, les titres de groupes, les décorations de texte et le texte des boutons dotés de la vue Lien hypertexte.

Le deuxième élément de l’adaptabilité consiste à changer l’orientation des groupes. Les groupes et le formulaire dans son ensemble disposent d'une nouvelle option d'orientation : « Horizontale si possible ». Dans cette option, si l'afficheur client permet de positionner les éléments horizontalement, ceux-ci sont positionnés horizontalement. Sinon, ils sont situés verticalement.

Le troisième élément d'adaptabilité est la détermination automatique du nombre de colonnes d'un interrupteur ou d'un interrupteur à bascule. Auparavant, sauf instructions particulières, le nombre de colonnes était fixé au maximum et affiché sur une seule ligne. Maintenant, dans la même situation, la largeur du formulaire est analysée et le nombre de colonnes est défini de manière à ce que l'interrupteur/interrupteur à bascule apparaisse bien à l'écran.

Alignement horizontal et vertical

Auparavant, cette possibilité était absente et pour mettre en œuvre un alignement non standard, il fallait inventer diverses « astuces ». Le formulaire et le groupe peuvent désormais être spécifiés comment leurs éléments doivent être alignés verticalement et horizontalement. Par exemple, dans l'image ci-dessous, un groupe de boutons affiche trois options d'alignement possibles : Gauche, Centre et Droite :

Sur cette image, les boutons sont placés dans un groupe régulier qui s'étend horizontalement. Le placement des boutons au sein d'un groupe est contrôlé par la propriété HorizontalPositionSubordonnées du groupe.

Contrôle d'alignement externe

Par exemple, vous disposez d'un formulaire dans lequel se trouvent le champ Département, les groupes Adresse et Téléphone. Le mécanisme précédent alignait les champs de ces groupes comme le montre la figure de gauche. Les champs du formulaire étaient alignés les uns avec les autres et les champs de chaque groupe étaient alignés les uns avec les autres.

Vous avez désormais la possibilité de définir un alignement de bout en bout pour les groupes, grâce auquel, par exemple, tous les champs du formulaire seront alignés de la même manière. Cette option est affichée dans l'image de droite.

De plus, vous pouvez gérer l'alignement de bout en bout pour chaque groupe séparément. Par conséquent, vous pouvez, par exemple, désactiver l'alignement de bout en bout pour le groupe Téléphone, et le formulaire ressemblera alors à celui illustré dans la figure de droite.

Alignement des éléments et des titres

Une autre nouvelle fonctionnalité apparue est la possibilité de contrôler la position relative des éléments et des titres. Aussi bien sous toutes les formes qu’en groupes individuels. Par exemple, vous pouvez « étirer » les titres et les éléments sur différents bords du formulaire, ou vice versa, les « tirer » les uns vers les autres, en alignant les titres à droite et les éléments à gauche.

Limiter la largeur maximale des éléments

Auparavant, si vous demandiez à un élément de s'étirer, il s'étirait aussi loin qu'il le pouvait. Par exemple, plein écran. Pour certains éléments, c'était bien (comme un champ HTML), mais pour d'autres éléments, ce n'était peut-être pas aussi bien. Par exemple, pour les champs numériques. Parce que les données numériques, ou les boutons qui contrôlent le champ, se trouvaient quelque part très à droite.

Les éléments ont désormais des propriétés booléennes, avec lesquelles vous pouvez définir le mode d'étirement automatique en largeur ou en hauteur. Dans ce mode, la plateforme détermine indépendamment jusqu'où le champ peut être étendu. Si le mode automatique est désactivé, alors la plateforme se comportera de la même manière qu'auparavant. Si vous spécifiez une largeur/hauteur de champ spécifique, celle-ci sera utilisée. Et si vous spécifiez la valeur 0, l'élément s'étirera autant que possible.

Contrôler l'espacement entre les éléments

Il est également possible de contrôler l'espacement horizontal et vertical entre les éléments. Par exemple, dans la figure suivante, le groupe de gauche présente un espacement vertical accru, tandis que le groupe de droite présente un espacement vertical réduit.

Désactiver l'étirement du formulaire

Nous avons implémenté un autre nouveau mode de fonctionnement du formulaire, qui désactive l'étirement vertical de ses éléments. Ce mode sera utile pour les formulaires contenant un petit nombre d'éléments.

Désactiver le défilement des pages

Pour les formulaires contenant un grand nombre d’éléments, nous avons également légèrement modifié le comportement. Désormais, le défilement vertical n'apparaît pas sur les pages. Le défilement vertical peut désormais s'effectuer sur le formulaire lui-même ou à l'intérieur d'éléments de formulaire, tels qu'un tableau, une feuille de calcul, etc. Et la page du formulaire sera toujours en pleine hauteur. Cela devrait rendre l'expérience utilisateur plus facile, car un grand nombre de scrollers sur un formulaire peut souvent être déroutant et déroutant.

Résumé

Dans cet article de synthèse, nous n'avons répertorié que les principales fonctionnalités apportées par le nouveau mécanisme de placement d'éléments dans le formulaire. Mais ce qui est tout aussi important, à notre avis, est que ce mécanisme contient une réserve importante pour un développement futur.