Configuration de base du terminal mobile du tutoriel de construction d'application YonBuilder

En plus de la construction d'applications côté PC dans YonBuilder, nous pouvons également créer des pages côté mobile. Pour la même entité de données, la modification synchrone des données peut être réalisée côté PC et côté mobile, ce qui facilite la saisie, la modification, l'approbation, etc. des données. Cet article présente le processus de base de la configuration du terminal mobile YonBuilder en créant la page du terminal mobile de l'entité d'information des employés.

1. Créer une page

Tout d'abord, le principe de la création d'une page est d'avoir une entité publiée.Sélectionnez une nouvelle entité dans l'interface de modélisation des données de la construction de l'application, configurez-la, puis cliquez sur Enregistrer et publier. On appelle ici l'entité d'informations sur les employés créée et publiée précédemment, qui comprend des champs d'informations tels que le nom de l'employé, son sexe, son âge, etc. Les informations de configuration spécifiques sont les suivantes.

insérez la description de l'image ici

Deuxièmement, générer des pages côté PC et côté mobile en fonction de l'entité créée. Il convient de noter ici que le terminal mobile ne prend actuellement en charge que trois modèles de page : une seule carte (tableau), une sous-carte principale (tableau) et une page vide, et l'option de générer des pages côté mobile en même temps doit être cochée. Dans les options de configuration à côté de la page côté mobile, le format de composition de la fiche du document sur la page de liste côté mobile peut être réalisé. Ici, nous sélectionnons une nouvelle page dans l'interface de modélisation de page et sélectionnons un seul modèle de carte pour créer une page mobile.

insérez la description de l'image ici

Cliquez sur l'option de configuration pour accéder à la page de configuration du format de mise en page de la page de liste mobile. Vous pouvez voir qu'elle est divisée en deux parties : le type de modèle et la configuration de la carte.

Dans le type de modèle, nous pouvons définir le type d'affichage du modèle. Après avoir sélectionné l'option, le côté gauche est la page d'aperçu correspondante. Parmi elles, les cartes en texte brut conviennent aux données physiques composées de texte pur ; les cartes graphiques conviennent aux documents contenant des images ; les petites cartes illustrées sont souvent utilisées pour les documents ou les cartes de sous-tableaux contenant moins d'informations.

Dans les paramètres de la carte, le champ d'extension fournit des options d'extension supplémentaires autres que le champ d'entité. Si vous avez besoin que la carte affiche plus de champs, vous pouvez cocher "Champ d'extension" et entrer le nombre de champs qui doivent être développés. Parmi les trois types de modèles, seul le champ de carte miniature ne prend pas en charge les champs d'extension ; si vous cliquez sur l'élément pour prévisualiser rapidement, la page des détails de l'aperçu apparaîtra rapidement lorsque vous cliquez sur les informations de la carte au lieu de passer à la page des détails.

insérez la description de l'image ici

Après avoir terminé le paramétrage du format de mise en page sur le terminal mobile, cliquez sur OK pour revenir au processus de création de page, où l'entité d'informations sur l'employé sélectionnée doit être liée.

insérez la description de l'image ici

Jusqu'à présent, nous avons terminé la création de la page côté PC et de la page côté mobile. Après avoir cliqué sur Terminer, vous pouvez voir que deux pages, la page de liste et la page de détails, ont été générées en même temps. La différence ici est qu'il ne s'agit pas simplement de générer une page côté PC. Cliquez sur une page pour voir que l'édition à ce moment est divisée en deux parties : côté PC et côté mobile. Cliquez sur la partie côté mobile pour configurer la page côté mobile.

2. Paramétrage des pages mobiles

Après avoir entré la configuration de page du terminal mobile, vous pouvez voir que le système a généré automatiquement des pages en fonction du système de configuration d'entité à ce moment, y compris des pages de liste, des schémas de requête, des schémas de sélection multiples et des pages de détail d'élément. Pour les pages générées automatiquement par le système, la relation de saut entre les pages a également été générée de manière synchrone. Conformément à la page PC, le côté gauche du concepteur correspond à la bibliothèque de composants et à la liste hiérarchique, et le côté droit correspond aux panneaux de propriété, de style et d'action du composant sélectionné.

insérez la description de l'image ici

À ce stade, nous pouvons configurer la page selon les besoins. Les composants de gauche peuvent être ajoutés au canevas par glisser-déposer. Après avoir sélectionné un composant, ses informations spécifiques peuvent être configurées. Parmi eux, la méthode d'interaction du composant peut être ajoutée dans l'action, et presque tous les styles CSS peuvent être conçus dans le panneau de style. Dans les propriétés, vous pouvez définir les propriétés de base du composant, les autorisations de champ, les conditions, etc. Ici, nous ajoutons un composant de tri par glisser-déposer, et sélectionnons les paramètres de champ dans le panneau de propriétés à droite, et ajoutons la période de contrat et la date d'entrée en tant que champs de tri.

insérez la description de l'image ici

insérez la description de l'image ici

3. Aperçu

Jusqu'à présent, nous avons terminé le processus de configuration de base de la page mobile YonBuilder, puis nous utilisons les données pour tester l'effet de la page mobile. Tout d'abord, nous avons ajouté deux données via la nouvelle option côté PC. Passez à la page côté mobile et vous pouvez voir que les deux nouvelles données ont été affichées de manière synchrone. Cliquez sur la carte pour voir les informations d'aperçu. En même temps, le tri de deux données peut être réalisé grâce au nouveau composant de tri sur le terminal mobile.

insérez la description de l'image ici
insérez la description de l'image ici

insérez la description de l'image ici

Cliquez sur Ajouter sur la page mobile pour ajouter une donnée, et vous pouvez voir que le nouvel ajout a été réalisé de manière synchrone sur le mobile et le PC.
insérez la description de l'image ici
insérez la description de l'image ici

Pour résumer, nous avons introduit le processus de configuration de base de la page mobile YonBuilder. Si vous avez des questions, n'hésitez pas à communiquer et à discuter dans la zone de commentaires !

Je suppose que tu aimes

Origine blog.csdn.net/weixin_43947457/article/details/128443107
conseillé
Classement