PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Lancement de WEBDEV
  • Environnement de développement
  • L'éditeur
  • La barre de menu (ruban) en détail
  • Les couleurs de l'environnement
  • Le WLangage
Leçon 1.1. Découvrez WEBDEV
Ce que vous allez apprendre dans cette leçon
  • Lancement de WEBDEV.

Durée estimée : 5 mn
SommaireLeçon suivante
Présentation
WEBDEV est un AGL (Atelier de Génie Logiciel) complet permettant de développer des sites Internet et Intranet sophistiqués dans de nombreux domaines : commerce en ligne, multimédia, ...
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é, site disponible sur un CD-ROM, ...).
  • 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é.
Tout au long de ce cours d'auto-formation, vous allez apprendre à créer vos sites (avec ou sans base de données) et à les enrichir en utilisant les nombreuses fonctionnalités proposées par WEBDEV.
Lancement de WEBDEV
  • Lancez WEBDEV 24 (si ce n'est déjà fait).
  • Si vous n'avez jamais lancé WEBDEV 24, 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.
  • Si vous avez déjà lancé WEBDEV 24, identifiez-vous si nécessaire. L'environnement de développement se lance. La page d'accueil de WEBDEV apparaît.
    Cette page d'accueil permet de :
    • afficher les actualités,
    • créer un projet,
    • ouvrir un projet existant,
    • ouvrir un exemple,
    • ouvrir un des projets du cours d'auto-formation.
  • Arrêtons-nous un instant sur l'environnement de développement de WEBDEV. Pour cela, depuis la page d'accueil de WEBDEV :
    • Cliquez sur "Cours d'auto-formation".
    • Double-cliquez sur "Site WEBDEV complet (Corrigé)".
    • 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).
Environnement de développement

L'éditeur

L'environnement de développement de WEBDEV est constitué d'une interface spécifique et de plusieurs éditeurs permettant de créer les différents éléments de vos applications.
Ainsi, l'éditeur de pages permet de créer des pages, l'éditeur d'états permet de créer des états, ...
  • Pour découvrir WEBDEV, nous allons ouvrir la fenêtre "Fiche du produit" :
    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
  1. Menu des éditeurs, affiché sous forme de ruban (nous allons voir sa manipulation dans le paragraphe suivant).
  2. Editeur en cours (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.
  3. Volets. L'interface 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é à droite) 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.
  4. Barre des documents ouverts. 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.

La barre de menu (ruban) en détail

La barre de menu de WEBDEV est présentée sous forme d'un ruban. Ce ruban est composé de volets dans lesquels sont regroupées les différentes options des éditeurs.
Nous allons détailler ici, les différents éléments importants du ruban, ainsi que la manière dont nous le manipulerons dans ce cours.
Ruban des éditeurs
Les différents éléments du ruban
Le ruban est constitué de 3 zones :
  • la zone des boutons, à gauche (1).
  • la zone des volets en haut (2).
  • la zone des options (3).
Voyons 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, ...
Les 3 logos en haut de cette zone sont également spécifiques :
  • Le logo du produit permet d'afficher la fenêtre "A propos", les perso-menus (menus personnalisés) et les menus déroulants de l'ancienne interface des éditeurs.
  • Les 2 logos suivants permettent de retrouver les barres d'outils et les menus déroulants de l'ancienne interface des éditeurs.
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 : L'onglet du volet apparaît en gris clair et un trait bleu est affiché en haut de l'onglet.
  • les volets contextuels, spécifiques à l'élément en cours : Le nom du volet est affiché en orange.
  • les volets disponibles : Le nom du volet apparaît en blanc.
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, ...
Dans ce cours, 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"."

Les couleurs de l'environnement

Par défaut, l'environnement utilise un thème clair.
Plusieurs autres thèmes sont également disponibles :
  • Thème clair, ruban gris. Dans ce mode, la barre de menu n'est plus colorée : elle est grise.
  • Thème gris. Dans ce mode, l'environnement et les différentes fenêtres de l'interface sont affichés sur fond gris clair.
  • Thème sombre. Dans ce mode, l'environnement et les différentes fenêtres de l'interface sont affichés sur fond noir ou gris foncé.
  • Pour modifier le thème utilisé par l'environnement :
    1. Sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez l'option "Options générales de WEBDEV".
    2. Dans l'onglet "Editeur", dans la zone "Thèmes", sélectionnez le thème de l'éditeur à utiliser.
    3. Validez. Le thème sera pris en compte au prochain lancement de WEBDEV.
Remarque : Pour une meilleure lisibilité de ce cours, nous avons choisi d'utiliser le thème clair pour les différentes images illustrant les manipulations à réaliser.
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 leçons 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, ...
SommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire