Modeleur Web

1. Description du Modeleur Web​

Le Modeleur Web Softyflow est une application conviviale qui offre aux utilisateurs des fonctionnalités puissantes pour concevoir leurs propres interfaces utilisateur. Il utilise une interface de glisser-déposer facile à utiliser, conçue pour tous les types de développeurs, des développeurs No-code/Low-Code aux ingénieurs logiciels professionnels. Il offre une grande configuration, de nombreux composants UI et un éditeur de script si vous voulez aller plus loin.

2. Configuration de l'Interface Web​

Une fois que vous avez créé l'interface web, vous pouvez la configurer via l'onglet paramètres de la page :

• Informations Générales
  • Nom : Le nom que vous choisissez pour la page, il apparaîtra sur chaque écran de l'interface web.
  • URL Favicon : Vous pouvez définir votre favicon qui sera l'icône de votre site web, l'icône d'onglet ou l'icône de signet. Vous pouvez choisir n'importe quel format d'image et insérer l'URL pour utiliser le favicon.
  • Utilisateur : Les utilisateurs ou le groupe d'utilisateurs autorisés à ouvrir et interagir avec l'interface.
  • Afficher en HP : Afficher ou non l'interface sur la Page d'Accueil.
• Configuration :
  • Titre : Où vous voulez placer le titre de chaque composant. Vous pouvez choisir parmi : Gauche, Droite ou Haut.
  • Largeur de l'étiquette : Définissez la largeur des éléments de la page
  • Afficher la barre latérale : Choisissez si la barre latérale sera affichée ou non. Chaque élément de la barre latérale correspond à une section de la page. Seules les sections visibles apparaîtront dans la barre latérale.
  • Taille : La taille des éléments de la page. Vous pouvez choisir parmi : moyen, petit ou mini
  • Langue : Définissez la langue de la page. C'est utile pour les textes prédéfinis, à choisir parmi : Anglais, Français et Arabe.
• Barre de Menu : Choisissez la barre de navigation que vous souhaitez afficher sur votre page.
• Écrans : Vous pouvez joindre de nombreux écrans à la même interface. Rassembler les interfaces avec des composants ou des comportements similaires dans les écrans vous aidera à réduire le nombre d'interfaces web et à gagner en performance.
• Liens :

3. Widgets​

Le modeleur web contient une liste de composants prêts à l'emploi avec une fonctionnalité de glisser-déposer pour créer facilement des mises en page et des pages web. Chaque composant est configurable à trois niveaux :

• Configuration globale : Configuration partagée entre tous les composants.
• Configuration personnalisée : Configuration dépendant de chaque type de composant.
• Validation : Gestion des composants sur chaque écran.

3.1. Configuration Globale​

Tous les composants ont en commun une configuration qui nécessite de définir un nom, un modèle et un ID.

• Nom : Nom que vous donnez à vos composants. Dans certains cas : PopUp, Divider ou Input, il sera affiché lors du rendu
• Modèle : Nom distinctif qui contient le modèle de données du composant.
• ID : Un identifiant distinctif unique que vous donnez à votre composant.

3.2. Composants​

Softyflow offre de nombreux composants prédéfinis qui peuvent être divisés en quatre catégories : composants de base, composants avancés, composants de mise en page et composants graphiques.

4. Écrans​

4.1. Créer des Écrans​

Dans les Paramètres de Page, vous pouvez créer autant d'écrans que vous le souhaitez et les lier à la même page / Interface Web.

4.2. Gérer les Écrans​

Softyflow offre une gestion des règles pour chaque widget qui vous permet de définir ou de personnaliser les règles des widgets pour chaque écran.

• Disponible : Si le widget est disponible ou non sur l'écran.
• Visible : Le widget est disponible, mais vous pouvez choisir s'il est affiché ou non.
• Requis : Utile pour choisir si une entrée dans un formulaire est requise ou non.
• Désactiver : Vous pouvez désactiver un widget. Les interactions des utilisateurs avec celui-ci sont désactivées.

5. Gestion de la Navigation​

La gestion de la navigation consiste à créer un système qui permet aux utilisateurs d'interagir avec votre application. Softyflow offre un outil Barre de navigation qui vous aidera à orienter la navigation comme vous le souhaitez.

5.1. Barre de navigation​

Dans l'UI, une Barre de navigation est une section utilisée pour aider les visiteurs à accéder aux pages. Dans Softyflow, vous pouvez créer facilement une Barre de navigation à l'aide du modeleur web.

5.2. Organiser la navigation​

Une fois la Barre de navigation créée, vous pouvez y ajouter des éléments.

Chaque élément est une interface avec un ID spécifique, pour redirection lors du clic ; ou une liste déroulante qui contient une liste d'interfaces.

Vous pouvez choisir parmi les utilisateurs ou les groupes d'utilisateurs, ceux à afficher pour chaque élément de la Barre de navigation.

6. Actions​

Softyflow vous permet de joindre des [actions](/docs/fr/ressources/project/web-interface/actions) à vos composants UI. Ces [actions](/docs/fr/ressources/project/web-interface/actions) peuvent être déclenchées Au montage : lorsque l'interface est rendue, en mode Surveiller : Un composant spécifique est surveillé et s'il est touché, cliqué ou mis à jour, l'action sera exécutée, en mode Au clic : l'action est exécutée lorsque le composant (il doit être un bouton) est cliqué ou Calculé : lorsque la fonction « calculera » la valeur de retour à partir des informations existantes.

7. Script​

Softyflow est construit et basé sur VueJS 2 - il utilise les mêmes crochets de cycle de vie et il vous offre des fonctions scriptables pour contrôler cette fonctionnalité.