Aperçu de la plateforme du point de vue de l'interface utilisateur

Changelog

Consigner les changements effectués par le solution developer et les mises à jour de la plateforme (si l’option est activée).

Mode Designer

Quelle est la différence entre Page Designer et Layout Designer ?

Le Page Designer permet à l’utilisateur de modifier tout aspect de l’interface utilisateur du contenu des pages.

Le Layout Designer permet d’appliquer des changements aux panneaux de l’application, qui sont des menus fixes.

Le modèle d’application par défaut avait un panneau de menu sur le côté gauche, ainsi qu’en haut, mais les applications créées à l’aide de la plateforme no-code DAZZM peuvent avoir des panneaux sur n’importe lequel des quatre côtés. La plateforme dispose également de menus tiroir, qui s’ouvrent de chaque côté. Ceux-ci sont particulièrement utiles lors de la création d’une application mobile ou tablette.

Lorsque l’un des 2 modes « designer » est activé, tous les panneaux peuvent être activés/fermés : Component, Structure et Toolbox. Cependant, le panneau « Project Explorer » peut être ouvert/fermé même lorsque le « designer » est désactivé.

Mode Mobile / Tablette

Cette plateforme permet à ses utilisateurs de concevoir des applications mobiles et tablettes et de basculer la vue d’un point de vue horizontal et vertical.

N.B. : Vous devez activer le mode mobile pour voir l’option « tablet mode ».

Mise à jour de la plateforme

Cette icône devient jaune lorsqu’une mise à jour est disponible. Il peut s’agir d’une mise à jour de la plateforme, d’une mise à jour de l’application, ou des deux en même temps. Gardez à l’esprit qu’avant d’effectuer une mise à jour, il est fortement recommandé de consulter le changelog. Cela aidera à comprendre ce qu’il faut tester dans l’application après avoir poussé la mise à jour.

L’utilisateur peut choisir d’afficher ou non la mise à jour de la plateforme dans le Changelog à l’aide de l’interrupteur, au bas de la boîte de dialogue.

Publication

Voir vidéo 1.3

Mode Preview

Permet à l’utilisateur de tester l’application sans quitter la plateforme, facilitant ainsi les allers-retours entre les tests et l’application des changements.

N.B. : Il n’est visible qu’avec le mode Designer

Mode Wireframe

Ce mode est particulièrement utile lorsqu’il faut déplacer ou ajouter un composant dans une section qui contient déjà de nombreux composants.

Mode Visibility

Ce mode affiche les éléments qui pourraient être visibles sur cette page, selon la sélection d’un utilisateur, mais qui sont actuellement masqués.

Annuler/Réappliquer

Permet à l’utilisateur d’annuler un changement ou de le réappliquer. La coche verte à côté des deux flèches indique que le changement qui vient d’être effectué a été automatiquement enregistré par le système.

N.B. : Cela n’affecte que les changements d’interface utilisateur qui ne sont pas encore publiés sur votre page, et cela n’affectera pas les changements effectués dans le « project explorer panel ».

Page d’accueil

Éventuellement, l’utilisateur pourra configurer et définir sa propre page d’accueil.

Recherche

Effectuer une recherche par mot-clé de bas niveau dans la définition et les métadonnées de l’application.

Signaler un problème

Demander une nouvelle fonctionnalité en cliquant sur « a feature is missing », poser une question ou signaler un dysfonctionnement*.

N.B. : Notre système enregistrera automatiquement tous les messages affichés dans un ruban rouge, il n’est donc pas nécessaire de les signaler.

Icône utilisateur

Éventuellement, l’utilisateur pourra définir ses propres préférences en cliquant sur l’icône utilisateur, comme sa langue IDE par défaut ou sa configuration de panneau préférée.

Créer

Permet à l’utilisateur de créer des pages, des types*, des composants, etc.

*Les types sont également connus sous le nom d’« aggregate » dans notre système.

Panneau Project Explorer

Panneau où vous créez la modélisation des données.

Sous le dossier « types », chaque aggregate a des sous-dossiers pour ses fields et commands.

Lors de la création d’une nouvelle page, faites un clic droit sur le dossier « pages ». L’utilisateur peut également naviguer vers des pages statiques, en d’autres termes : des pages qui ne contiennent pas de clés dynamiques.

N.B. : Les clés dynamiques sont des variables dans les routes qui commencent par /: , et elles supportent généralement des valeurs uniques comme les identifiants.

Properties

Donne accès à la modification des propriétés de l’élément de l’application sélectionné. Naturellement, les champs disponibles varieront selon le type d’élément sélectionné.

Go To Definition

Permet de rechercher un champ dans la structure de données, en utilisant la valeur de ce champ. En cliquant sur un résultat, il sera mis en surbrillance dans la structure de données du project explorer.

Project Configuration

Offre différentes options d’organisation pour le modèle de données du projet :

Panneau Component

Il donne accès à un panneau des caractéristiques d’un composant sélectionné. Il est divisé en 3 onglets : Attribute, Style et Behavior.

Attribute

Répertorie les attributs et propriétés du composant selon le composant sélectionné dans l’interface utilisateur de l’application.

Style

Cet onglet comporte de nombreuses sections : Text, background, Border, spacing, etc.

Behavior

Depuis cet onglet, l’utilisateur peut définir les données du composant, définir une condition de visibilité ou appliquer une action à un clic, etc.

Panneau Structure

Affiche une arborescence des composants de la page courante. C’est comme la section fil d’Ariane, mais avec la différence que celle-ci met l’accent sur un composant sélectionné.

Panneau Toolbox

Offre une variété d’éléments visuels et structurels utilisés pour construire une page. Les plus couramment utilisés sont text, button, icon et box. Après qu’un utilisateur a créé des composants réutilisables, il pourra également les trouver dans la toolbox.

N.B. : Ces 4 panneaux peuvent tous être ouverts ou fermés et redimensionnés selon les préférences de l’utilisateur, pour offrir une expérience personnalisée.

Theme Editor

Permet à l’utilisateur de modifier les couleurs dans toute l’application, sur toutes les pages, en une seule fois. C’est la solution à privilégier lorsqu’il faut appliquer des changements de couleur.

*Gardez à l’esprit que cela n’affectera pas les changements de couleur effectués depuis l’onglet style.

Cette méthode doit être utilisée pour capter l’attention du spectateur et appliquer un changement permanent.