DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 2024 !
Aide / Tuto WEBDEV / Tuto - A la découverte de WEBDEV
  • Leçon 1 - WEBDEV et son environnement
  • Qu'est-ce que WEBDEV ?
  • Premier lancement de WEBDEV : la page d'accueil
  • Environnement de développement
  • L'éditeur
  • Le ruban en détail
  • Le WLangage
  • En résumé

Tuto - A la découverte de WEBDEV

Leçon 1 - WEBDEV et son environnement
Ce que vous allez apprendre :
  • Qu'est-ce que WEBDEV ?
  • Premier lancement de WEBDEV : la page d'accueil
  • Environnement de développement
  • Le WLangage
Durée de la leçon 5 mn
Qu'est-ce que WEBDEV ?
WEBDEV est un Atelier de Génie Logiciel DevOps complet permettant de développer des sites Internet et Intranet sophistiqués dans de nombreux domaines : commerce en ligne, multimédia, etc.
Les sites développés peuvent inclure l'accès à des informations stockées dans des bases de données.
WEBDEV permet de créer :
  • des sites Internet/Intranet statiques. Ces sites gèrent des données qui ne varient pas (site vitrine d'une société, etc.).
  • des sites Internet/Intranet dynamiques, qui gèrent des données. Les sites WEBDEV accèdent à toutes les bases de données, relationnelles ou non, du marché.
Les différents tutoriels sur WEBDEV vont vous permettre d'apprendre à créer des sites (avec ou sans base de données) et à les enrichir en utilisant les nombreuses fonctionnalités proposées par WEBDEV.
Premier lancement de WEBDEV : la page d'accueil
Pour découvrir WEBDEV, nous allons tout simplement lancer WEBDEV 2024.
Identifiez-vous si nécessaire.
L'environnement de développement se lance. La page d'accueil de WEBDEV apparaît.
Page d'accueil
Cette page d'accueil permet de :
  • afficher les actualités des produits PC SOFT,
  • créer un projet,
  • ouvrir un projet existant,
  • ouvrir un exemple,
  • accéder aux différents tutoriels existants sur WEBDEV.
Si vous n'avez jamais lancé WEBDEV 2024, un assistant de bienvenue se lance :
  • Si vous possédiez une ancienne version de WEBDEV, cet assistant permet de récupérer les configurations existantes.
  • Si vous êtes nouvel utilisateur, cet assistant permet de paramétrer votre environnement. Vous pouvez ainsi choisir la configuration écran utilisée et paramétrer les Centres de Contrôle.
Environnement de développement
Pour découvrir les points importants de l'environnement de WEBDEV, ouvrons un premier projet :
  1. Depuis la page d'accueil, cliquez sur "Tutoriel".
  2. Dans la zone "Tuto - Découvrez WEBDEV (Leçon 1 et 2)", double-cliquez sur "Site WEBDEV Complet - Corrigé".
    Exemples du Tutoriel
  3. Le projet correspondant s'ouvre sous l'éditeur. Le tableau de bord du projet est affiché. Le tableau de bord permet d'avoir une vision globale et synthétique de l'état d'avancement d'un projet, via de nombreux éléments (appelés Widgets).
    Tableau de bord du projet

L'éditeur

L'environnement de développement de WEBDEV est constitué d'une UI spécifique et de plusieurs éditeurs permettant de créer les différents éléments de vos sites : l'éditeur de pages permet de créer des pages, l'éditeur d'états permet de créer des états, etc.
Affichons une page dans l'éditeur de pages :
  1. Utilisez la combinaison de touches Ctrl + E.
  2. Dans la fenêtre qui s'affiche, saisissez le nom de la page à ouvrir : PAGE_Liste_des_produits.
  3. Validez. La page apparaît sous l'éditeur.
Tous les éditeurs utilisent le même environnement :
Environnement des éditeurs
  • Menu des éditeurs (1), affiché sous forme de ruban (nous allons voir sa manipulation dans le paragraphe suivant).
  • Editeur en cours (2) (ici, éditeur de pages). Cet espace permet de visualiser de manière WYSIWYG (What You See Is What You Get) l'élément en cours de création ou de modification.
  • Volets (3). L'UI de WEBDEV dispose de plusieurs volets (horizontaux et verticaux) permettant d'accéder rapidement à différents types d'informations.
    Quelques exemples :
    • Le volet "Explorateur de projet" (ici, affiché à gauche) permet de lister tous les éléments du projet par catégorie.
    • Le volet "Rechercher - Remplacer" (ici, affiché en bas) permet d'effectuer rapidement des recherches dans votre projet.
    Si nécessaire, ces volets peuvent être cachés rapidement en utilisant la combinaison de touches Ctrl + W.
  • Barre des documents ouverts (4). Cette barre permet de visualiser rapidement tous les éléments ouverts. Un simple clic sur le bouton correspondant à l'élément l'affiche dans son propre éditeur.

Le ruban en détail

Le ruban est un des éléments clé de l'interface des éditeurs. En effet, toutes les options de WEBDEV sont accessibles via ce ruban.
Le ruban est constitué de 3 zones :
Ruban des éditeurs
Examinons ces différentes zones en détail.
La zone des boutons (1)
Zone des boutons

La zone des boutons regroupe principalement les boutons d'accès rapide. Ces boutons permettent d'effectuer les opérations les plus courantes, bien souvent communes à tous les éditeurs : enregistrer, ouvrir, créer, etc.
Le logo du produit permet d'afficher notamment la fenêtre "A propos".
La zone des volets (2)
Zone des volets
Les différents volets du ruban permettent d'accéder aux options des différents éditeurs pour le projet en cours. Plusieurs types de volets sont disponibles :
  • le volet en cours, gras et souligné.
  • les volets contextuels colorés. Ces volets sont contextuels à l'élément en cours.
  • les autres volets.
La zone des options (3)
Zone des options
En fonction du volet sélectionné, les options affichées dans le ruban diffèrent. Plusieurs types d'options sont disponibles :
  • Options à cocher,
  • Boutons à cliquer,
  • Boutons à flèche permettant de dérouler des options. Deux types de boutons à flèche sont disponibles :
    • les boutons à flèche permettant uniquement de dérouler un menu,
    • les boutons à flèche permettant soit de dérouler un menu (clic sur la flèche), soit d'effectuer une action par défaut (clic sur l'icône du bouton).
Les options sont rassemblées par groupe. Chaque groupe d'options a un nom et peut avoir un bouton de regroupement Bouton de regroupement. Ce bouton permet d'effectuer une action spécifique selon le groupe en cours : affichage de la description de l'élément en cours, affichage de l'aide, etc.
Dans les différents tutoriels WEBDEV, pour désigner une option de menu, nous parlerons donc de volets et de groupes. Par exemple : Pour afficher l'aide, sous le volet "Accueil", dans le groupe "Aide en ligne", cliquez sur "Aide".
Le WLangage
Le WLangage est le langage de programmation commun de WINDEV, WEBDEV et WINDEV Mobile.
Si vous ne connaissez pas ce langage, nous vous conseillons de suivre les différentes leçons du tuto présentant les bases de la programmation. Ces leçons présentent rapidement les différents types de variables, les instructions de base du WLangage, les procédures, etc.
En résumé
Nous venons de découvrir l'environnement de WEBDEV. Nous avons ouvert un projet et affiché une page sous l'éditeur. La prochaine leçon vous permettra de découvrir le principe d'un site Internet appliqué à un site WEBDEV.
Nous avons terminé cette première leçon, pensez à fermer le projet en cours :
  1. Sous le volet "Accueil", dans le groupe "Général", déroulez "Fermer" et sélectionnez "Fermer le projet".
  2. Validez la sauvegarde des éléments modifiés si nécessaire.
La page d'accueil de WEBDEV apparaît.
SommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 15/11/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale