Création d'applications

Pour créer une application, vous devez créer des mises en page, des pages, les remplir de contenu et configurer l'interaction avec l'application Web.

Mises en page

Plus tôt, nous avons introduit le concept de Layouts . Pour commencer la création de la mise en page, vous devez d'abord décrire la structure de votre application et identifier les modèles de page à utiliser.

Si vous manquez quelque chose, ne vous inquiétez pas. Vous pouvez augmenter la liste de mises en page selon vos besoins.

Liste de mise en page

La liste des mises en page fournit toutes les mises en page de votre application Web. Ici, vous pouvez effectuer diverses opérations et gérer les mises en page.

Pour accéder à la liste de mise en page , sélectionnez le 4ème onglet de la barre d'outils de gauche dans l'onglet UI Designer ou utilisez la touche de raccourci 4 . Toutes les mises en page de votre application seront affichées ici.

Chaque application doit avoir au moins une mise en page. Lorsque vous créez une nouvelle application, une ou plusieurs mises en page seront automatiquement créées en fonction du modèle d'application sélectionné. L'un d'eux est marqué comme **par défaut**.

Dans la liste des mises en page, vous pouvez effectuer les actions suivantes sur les mises en page :

• sélectionner,
• ajouter du nouveau,
• Renommer,
• dupliquer,
• supprimer.

Disposition par défaut

La mise en page par défaut est automatiquement sélectionnée dans la liste des mises en page lors de la création d'une nouvelle page. Cependant, cela peut être remplacé par une mise en page différente si nécessaire.

L'utilisation de la mise en page par défaut augmente la vitesse de développement, nous vous recommandons donc d'utiliser la mise en page la plus fréquemment utilisée par défaut. Notez qu’une seule mise en page peut être définie par défaut à la fois. Le remplacement de la mise en page par défaut n'affecte pas les pages existantes, sauf si la mise en page initiale est supprimée.

La mise en page par défaut est signalée par une icône en forme d'étoile bleue dans la liste des mises en page.

Créer une nouvelle mise en page

Vous pouvez concevoir différentes mises en page pour différents types de pages. Suivez ces étapes pour créer une nouvelle mise en page :

• Appuyez sur CTRL/⌘+L ou ouvrez la liste de mises en page (raccourci 4 ) à partir de la barre d'outils gauche de UI Designer et cliquez sur le bouton Plus dans l'en-tête du panneau.
• Fournissez le nom de la mise en page dans le modal qui apparaît. Nous vous recommandons d'utiliser un titre lisible qui reflète la structure de la mise en page pour une identification rapide lors de l'attribution des mises en page aux pages.
• Sélectionnez un modèle de mise en page :
  • Base : modèle vierge sans éléments supplémentaires, idéal pour les pages sans navigation, comme les pages d'authentification ou d'erreur.
  • Barre latérale gauche : modèle avec menu de barre latérale, idéal pour les panneaux d'administration, CMS, ERP, etc.
  • Top Menu : modèle avec menu supérieur, idéal pour les sites Web ou les pages de destination.
• Activez le paramètre Mise en page par défaut si cette mise en page doit être définie par défaut.
• Cliquez sur le bouton Créer .

Il n'y a pas de limite au nombre de mises en page que vous pouvez créer.

Renommer la mise en page

Pour renommer une mise en page, double-cliquez sur le nom de la mise en page, apportez les modifications nécessaires et appuyez sur Enter pour enregistrer ou Esc pour annuler les modifications.

Duplication de la mise en page

Pour dupliquer une mise en page, ainsi que son contenu et ses paramètres :

1. Passez la souris sur la mise en page que vous souhaitez dupliquer.
2. Cliquez sur l'icône Dupliquer.

Les mises en page dupliquées apparaissent automatiquement dans la liste avec un index ajouté à leur nom. Si vous dupliquez la mise en page définie par défaut, la mise en page source n'est pas remplacée par celle nouvellement créée.

Suppression d'une mise en page

Pour supprimer une mise en page :

1. Passez la souris sur la mise en page que vous souhaitez supprimer.
2. Cliquez sur l'icône Corbeille.
3. Confirmer la suppression.

Pour supprimer la mise en page liée à des pages, vous devez réaffecter la mise en page de toutes les pages liées avant de la supprimer. Cela peut être fait via le modal de confirmation ou manuellement pour chaque page.

Pour supprimer la mise en page par défaut, vous devez configurer une autre mise en page par défaut.

❗️ Important : Vous ne pouvez pas annuler une opération de suppression de mise en page.

Paramètres de mise en page

Cliquez sur la mise en page cible dans la liste des mises en page pour accéder à ses paramètres à partir de la barre latérale des paramètres de gauche.

Dans l'en-tête de la barre latérale Paramètres, vous pouvez renommer la mise en page sélectionnée en cliquant sur le nom ou la supprimer.

Vous pouvez définir la mise en page sélectionnée par défaut et afficher toutes les pages liées ici. Pour modifier une page liée, cliquez dessus dans la liste.

De plus, vous pouvez créer une logique métier pour la mise en page.

Logique métier de mise en page

Dans l'onglet Logique métier, sélectionnez un déclencheur pour définir une action. Cela ouvrira l'éditeur de processus métier, axé sur le déclencheur sélectionné.

Ici, vous pouvez créer un flux d'action pour un ou plusieurs déclencheurs, comme la mise en œuvre de la navigation, la modification conditionnelle des propriétés, le basculement de la visibilité, l'envoi de données, etc. Reportez-vous à notre guide sur la création d'un processus métier pour plus d'informations.

🔔 Pour des performances applicatives optimales, créez des processus métier complexes côté backend.

Modification de la mise en page

Les mises en page, en tant que composants globaux et modèles de page, appliquent automatiquement toutes les modifications à toutes les pages liées.

Pour modifier une mise en page, sélectionnez l'élément cible dans la liste des mises en page et ajoutez tous les composants nécessaires à partir du panneau des éléments de l'interface utilisateur en les faisant glisser et en les déposant sur la zone de canevas.

Lors de la modification d'une mise en page, n'oubliez pas que le modèle inclut un composant Conteneur de page immuable. Cela détermine l'emplacement du contenu de votre page dans le modèle. Le conteneur de page est surligné en vert et ne peut pas contenir de composants internes en mode édition de mise en page. Le contenu est défini directement sur la page et la taille du conteneur de page est déterminée par son composant parent.

Pages

Après avoir créé les mises en page nécessaires, quel est le meilleur moment pour commencer à créer les pages de l'application Web. Après avoir créé les mises en page nécessaires, quel est le meilleur moment pour commencer à créer les pages de l'application Web. Chaque page d'application Web fournit un contenu affiché sur le navigateur Web de l'utilisateur par l'URL cible.

Arbre des pages

L'arborescence des pages vous montre la structure de votre site Web : les pages de votre site et les dossiers qui hébergent ces pages. Ici, vous pouvez effectuer diverses opérations et organiser des pages et des dossiers.

Pour ouvrir l'arborescence des pages, sélectionnez le 3ème onglet dans la barre d'outils de gauche de UI Designer ou appuyez sur 3. Ici seront affichées toutes les pages de votre application.

Chaque candidature doit comporter au moins une page. Lorsque vous créez une nouvelle application, une ou plusieurs pages sont déjà créées en fonction du modèle d'application sélectionné.

Vous pouvez effectuer les actions suivantes sur les pages et les dossiers :

• sélectionner,
• ajouter une nouvelle page ou un nouveau dossier,
• Renommer,
• déplacer la page et les dossiers vers/hors du dossier,
• dupliquer,
• supprimer.

Sommaire

La page Index est la page initiale de votre candidature. Lorsque votre application s'exécute, cette page sera affichée en premier si vous n'avez créé aucune redirection.

La page d'index a marqué l'icône Maison dans l'arborescence des pages et ne peut pas être basculée vers une autre page. Par défaut, cette page est liée à la mise en page par défaut créée automatiquement, mais vous pouvez la modifier dans les paramètres de la page.

Créer une nouvelle page

Pour ajouter une page à votre application Web :

1. Appuyez sur CTRL/⌘+P ou ouvrez l'arborescence des pages (raccourci 3 ) à partir de la barre d'outils gauche de UI Designer et cliquez sur le bouton Plus dans l'en-tête du panneau.
2. Fournissez l' URL de la page dans le modal qui apparaît.
3. Sélectionnez le dossier parent de la page ou laissez le champ vide pour placer la page à la racine.
4. Sélectionnez Mise en page .
5. Cliquez sur le bouton Créer .

💡 Pour créer un itinéraire imbriqué sans créer de dossiers, fournissez un chemin complet vers la page cible dans le champ URL de la page, par exemple, paramètres/profil. La page Profil sera créée imbriquée dans le dossier Setting dans ce cas.

Vous pouvez créer un nombre illimité de pages et de dossiers pour votre application Web.

🔔 Les applications Web créées avec AppMaster Studio génèrent un routage d'application par URL de page. Ainsi, dans le formulaire de génération de page, utilisez l'URL de page au format correct et, pour une meilleure compréhension, utilisez une URL conviviale.

Créer un nouveau dossier

Vous pouvez créer des dossiers pour organiser la navigation et créer le bon routeur pour les pages. Pour créer un nouveau dossier :

• Appuyez sur CTRL/⌘+SHIFT+P ou ouvrez l'arborescence des pages (raccourci 3) à partir de la barre d'outils gauche de UI Designer et cliquez sur le bouton Dossier dans l'en-tête du panneau.
• Fournissez le nom du dossier dans le modal qui apparaît.
• Sélectionnez le dossier parent si nécessaire pour créer un routeur imbriqué
• Cliquez sur le bouton Créer .

Éléments de l'interface utilisateur

L'interface utilisateur de votre application se compose d'éléments : champs de saisie, boutons, images, cases à cocher, calendriers, images et icônes qui remplissent chacun un objectif spécifique.

AppMaster propose un éditeur visuel par glisser-déposer qui vous permet de sélectionner et de placer des éléments directement sur la page au lieu d'écrire du code et de le prévisualiser immédiatement.

Ajout d'éléments

Pour ajouter un élément au canevas :

1. Ouvrez le panneau des éléments de l'interface utilisateur avec une liste d'éléments de l'interface utilisateur (raccourci 1 ).
2. Sélectionnez l'élément nécessaire ou utilisez la barre de recherche.
3. Faites glisser l'élément sélectionné sur la page ou le canevas de mise en page.

Pour placer l'élément glissant à l'intérieur de la cible, déposez l'élément au-dessus des éléments cibles.

Pour ajouter un élément avant ou après un élément, faites glisser l'élément au-dessus de la bordure de la cible jusqu'à ce qu'un séparateur apparaisse.

Le diviseur dépend de la direction du conteneur parent :

• Si le conteneur parent Direction est Vertical , les éléments seront ajoutés par le haut ou le bas.
• Si le conteneur parent Direction est Horizontal , les éléments seront ajoutés à partir de la gauche ou de la droite.

Personnaliser les éléments

Chaque composant que vous ajoutez au canevas est doté d'un ensemble complet de paramètres personnalisables. Avec les propriétés des éléments, vous pouvez gérer à la fois l'apparence de l'élément et les données qui seront affichées.

Pour configurer un élément :

• Sélectionnez le composant cible sur le canevas.
• Accédez au panneau Apparence, le premier onglet de la barre latérale droite.
• Dans le panneau, choisissez l'élément de paramètre spécifique que vous souhaitez modifier.
• Entrez vos valeurs préférées dans les champs désignés.

Le canevas répond en temps réel, affichant immédiatement vos ajustements.

Pour obtenir des conseils supplémentaires, passez brièvement le curseur de votre souris sur un paramètre pour faire apparaître une info-bulle, fournissant une description concise de la fonction de ce paramètre.

Au-delà de ces fonctionnalités interactives, AppMaster améliore les capacités de personnalisation grâce à ses blocs de processus métier spéciaux, Set Properties et Set Data . Ces blocs offrent un niveau d'accès avancé, vous permettant de modifier les paramètres de chaque composant par programmation dans votre application Web.