Présentation du concepteur d'interface utilisateur

Après avoir créé avec succès l'application, vous serez dirigé vers l'onglet UI Designer.

Le concepteur d'interface utilisateur d'AppMaster est conçu pour être convivial, vous permettant de créer sans effort de superbes pages d'applications Web.

Grâce à son interface intuitive par glisser-déposer, vous pouvez concevoir des pages Web et les remplir de contenu de manière transparente, éliminant ainsi le besoin de compétences avancées en codage.

L'UI Designer est divisé en quatre sections principales avec lesquelles les utilisateurs peuvent interagir :

1. Barre d'outils gauche
2. Panneau du haut
3. Panneau du bas
4. Zone de toile
5. Panneau Propriétés

Barre d'outils gauche

La barre d'outils sur le côté gauche propose des outils pour structurer votre site Web. En cliquant sur les icônes situées en haut de cette barre latérale, les panneaux suivants seront dévoilés :

• Liste des éléments de l'interface utilisateur
• Arbre des éléments
• Arbre des pages
• Arborescence des mises en page
• Gestionnaire d'actifs

Liste des éléments de l'interface utilisateur (raccourci : 1 )

La liste des éléments de l'interface utilisateur fournit tous les éléments qui peuvent être ajoutés à la zone de canevas en les faisant glisser depuis le panneau.

Les éléments de l'interface utilisateur sont organisés en catégories en fonction de leur objectif, ce qui facilite la navigation et la recherche du widget approprié pour votre application.

Pour accéder rapidement à l'élément, vous pouvez utiliser la barre de recherche en haut du panneau.

Arbre des éléments (raccourci : 2 )

À partir de l' arborescence des éléments , vous pouvez gérer et organiser tous les composants placés sur la page sélectionnée de votre application Web.

Ici, vous pouvez interagir avec ces éléments :

• déplacer les éléments entre l'arborescence en les faisant glisser,
• renommer les composants,
• modifier l'état de visibilité des éléments sur le canevas (masquer/afficher).

Utilisez la barre de recherche en haut du panneau pour l'élément de recherche rapide dans l'arborescence.

Arbre des pages (raccourci : 3 )

L' arborescence des pages vous permet d'organiser et de gérer les pages de votre site. Vous pouvez créer de nouvelles pages ou dossiers ici.

Dans l'arborescence des pages, vous pouvez dupliquer ou supprimer des pages ou des dossiers.

Utilisez la barre de recherche en haut du panneau pour la page de recherche rapide ou le dossier dans l'arborescence.

Liste des mises en page (raccourci : 4 )

L' arborescence des mises en page vous aide à gérer vos mises en page. Comme dans l'arborescence des pages, vous pouvez dupliquer ou supprimer des mises en page.

Utilisez la barre de recherche en haut du panneau pour la disposition de recherche rapide dans l'arborescence.

Gestionnaire d'actifs (raccourci : 5 )

Le gestionnaire d'actifs facilite le téléchargement et l'organisation des actifs (tels que des documents, des images et des animations) pour l'utilisation de votre site Web.

Toutes les ressources que vous téléchargez pendant le développement seront conservées dans Asset Manager et pourront être réutilisées sans avoir à être re-téléchargées.

Vous pouvez également supprimer tout actif dont vous n’avez plus besoin.

Barre du haut

La barre supérieure fournit un ensemble supplémentaire de paramètres d'affichage. En partant du côté gauche, à côté du bouton de menu, et en s'étendant vers la droite, vous disposez de l'ensemble d'outils suivant :

• Document actuel : affiche la page ou la mise en page sur laquelle vous travaillez actuellement.
• Points d'arrêt : les icônes de points d'arrêt vous permettent de basculer entre différents points d'arrêt pour prévisualiser et modifier la façon dont votre site apparaît sur différentes tailles d'appareils.
• Annuler et Rétablir : les boutons Annuler et Rétablir vous permettent d'annuler ou de réappliquer les actions que vous avez effectuées dans le Designer, comme l'application d'un style ou la suppression d'un élément. Des raccourcis sont également disponibles : pour annuler une action - CRTL/⌘+Z et pour refaire une action - CTRL/⌘+SHIFT+Z .

Barre inférieure

Le panneau inférieur vous permet de zoomer ou de redimensionner la page vue.

Sur le côté gauche du panneau, vous pouvez définir une résolution de page personnalisée en définissant la hauteur et la largeur de votre toile.

Sur le côté droit, vous pouvez contrôler l'échelle :

• Zoomer ou dézoomer
• Définir l'échelle en pourcentages
• Définir la taille réelle
• Ajuster la fenêtre actuelle à la zone visible

Toile

Le canevas est votre espace de travail interactif. C'est ici que vous pouvez interagir avec les composants de la page. Vous pouvez sélectionner des éléments, les repositionner et modifier le contenu directement sur la page.

En outre, vous pouvez copier ( CRTL/⌘+C ) et coller ( CRTL/⌘+V ) des éléments entre les pages et les applications ou dupliquer des éléments dans la page actuelle ( CRTL/⌘+D ).

Panneau Propriétés

Le panneau Propriétés sur le côté droit du Designer vous permet de personnaliser l'apparence visuelle et le comportement de l'élément, de la mise en page ou de la page sélectionné.

Le panneau Propriétés comprend 4 panneaux principaux :

• Panneau d'apparence
• Panneau d'options supplémentaires (facultatif)
• Panneau de requêtes multimédias
• Panneau de logique métier

Sur l'en-tête du panneau, vous pouvez renommer l'élément sélectionné en cliquant sur le nom de l'élément, lire la description ou supprimer l'élément en cliquant sur l'icône Corbeille.

Panneau d'apparence

Le panneau d'apparence vous permet d'accéder au contenu statique et aux propriétés affichés de l'élément sélectionné. Vous pouvez saisir ou sélectionner ces valeurs dans leurs champs correspondants, et les styles seront appliqués immédiatement à vos éléments sur le canevas.

Si aucun élément n'est sélectionné sur le canevas, ce panneau affichera les paramètres de la page ou de la mise en page actuelle.

Panneau d'options supplémentaires

Le panneau Options supplémentaires est destiné aux éléments qui nécessitent des données de configuration ou des options supplémentaires.

Vous pouvez définir la source de données ou saisir des options manuellement en fonction du composant sélectionné.

Panneau de requêtes multimédias

Le panneau Media Queries vous permet de remplacer les propriétés d'élément pour chaque point d'arrêt défini.

Panneau de logique métier

Le panneau de logique métier fournit tous les déclencheurs pour un élément et vous permet d'établir une interaction entre les éléments lorsque le déclencheur se déclenche.