Tuto - A la découverte de 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.

• 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.

Pour découvrir WEBDEV, nous allons tout simplement lancer WEBDEV SaaS.

• 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.

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é".
   
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).
   

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.

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.

• 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.

• la zone des boutons, à gauche (1).
• la zone des volets en haut (2).
• la zone des options (3).

Examinons ces différentes zones en détail.

	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)

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.

• 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 . 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.

Le WLangage est le langage de programmation commun de WINDEV, WEBDEV et WINDEV Mobile.

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.