Autoformation_Webdev 17

7/23/2019 Autoformation_Webdev 17

1/256


2/256


3/256


4/256


5/256

SommairePartie 1 - internet : ConCePtsdebase

Quest-ce quun site web ? ................................................................................................11Site statique, semi-dynamique ou dynamique ? ..............................................................12

Les dirents types de sites dynamiques .........................................................................13

Machines et logiciels ncessaires .....................................................................................14

Les dirents types de pages ............................................................................................15

Pages dynamiques et pages AWP ......................................................................................19

Technologie AJAX .................................................................................................................21

Si vous connaissez dj WinDev........................................................................................24

Partie 2 - dveloPPementdunsiteProjet et Analyse .................................................................................................................27Cycle de dveloppement dun site .....................................................................................32

Je cre une page sous lditeur ... .....................................................................................34

Les chiers suivants sont automatiquement crs : ......................................................35

Edition dune page : mode zoning .....................................................................................36

Page interne ........................................................................................................................37

Modles de pages ...............................................................................................................38

Les dirents types de champs standard .........................................................................45

Rpter un groupe de champs : les zones rptes ........................................................55

Les deux types de code ......................................................................................................56Le WLangage : un langage simple et trs puissant ..........................................................59

Ordre dexcution des codes des boutons / liens ............................................................60

Upload : Envoi de chiers vers le serveur .........................................................................62

Modles de champs ...........................................................................................................63

Les tats ..............................................................................................................................64

Modles dtats ..................................................................................................................65

Dirents modes dimpression ..........................................................................................66

Acher et enchaner les pages .........................................................................................67

Raliser un traitement sur plusieurs pages successives .................................................73

Feuilles de styles : pour simplier la mise en page .......................................................... 74

Site centr ou adapt ? .....................................................................................................75

Rrencement dun site .................................................................................................... 76

Partie 3 : environnementdedveloPPementLes diteurs de WebDev .....................................................................................................83

Tableau de bord du projet ..................................................................................................87

WebDev, WinDev, WinDev Mobile : 100% compatible .....................................................88

Conguration de projet .......................................................................................................89

Gnration multiple ............................................................................................................90Gestionnaire de sources (GDS) ..........................................................................................91

Composant interne .............................................................................................................98

Introduction 5


6/256

Composant externe ...........................................................................................................101

Modes de gnration ........................................................................................................109

Les Centres de Contrle ...................................................................................................113

Gestion des exigences ......................................................................................................114Centre de Suivi de Projets ................................................................................................115

Gestion des rgles mtier ................................................................................................116

Partie 4 : dveloPPementdesitesweb : ConCePtsavanCsRAD RID .............................................................................................................................119

Le modle UML ................................................................................................................ 120

Groupware utilisateur .......................................................................................................127

Sites multilingues ..............................................................................................................136

10 conseils dergonomie ... ..............................................................................................140

Superposer les champs ....................................................................................................144Type dimage : dynamique, statique, gnre, ... ? .......................................................145

Personnaliser laspect dun site : lments dambiance ...............................................147

Choisir un type de bouton/lien ........................................................................................149

Empcher le retour sur une page ....................................................................................150

Avantage scuritaire : la gestion du "Back" ....................................................................151

Cookies : des inormations conserves chez linternaute .............................................157

Protger laccs au site : mots de passe.........................................................................158

TLS/SSL : Crypter les inormations sur le Web ...............................................................159

Paiement scuris avec prestataire ................................................................................160Envoyer des emails ...........................................................................................................161

Partie 5 : basesdedonnesAnalyse : Structure de la base de donnes ....................................................................165

Les dirents types de chiers accessibles ...................................................................176

HyperFileSQL Classic ........................................................................................................178

HyperFileSQL Client/Serveur ...........................................................................................179

Clusters HyperFileSQL Client/Serveur.............................................................................180

HyperFileSQL : les chiers crs physiquement .............................................................181

Associer les champs et les donnes ...............................................................................182

Les requtes ..................................................................................................................... 184

Les requtes intgres .....................................................................................................185

Le champ Table/Zone Rpte ........................................................................................186

Rcuprer des donnes sur un site .................................................................................188

Rplication universelle .....................................................................................................193

Architecture 3-tiers ...........................................................................................................194

Partie 6 : testerunsiteweb

Tester un site : Les lments tester .............................................................................197Comment tester un site ? ................................................................................................198

Le dbogueur ................................................................................................................... 200

Quand peut-on utiliser le dbogueur ? ...........................................................................201

6 Introduction


7/256


8/256


9/256

Partie 1

Internet :Concepts de base


10/256


11/256

Quest-ce quunsite web ?Un site web est un ensemble de pages HTML (HyperText Markup Language) stockes

sur un serveur web. Ces pages HTML sont organises dans un but prcis (par exemple,

prsenter une entreprise, vendre des produits, ...).

Un site est destin tre utilis par des internautes. Les internautes utilisent un simple

navigateur pour accder au site.

WebDev permet de crer acilement des sites web qui grent ou non des donnes.

Partie 1 : Concepts de base 11


12/256


13/256

Les dirents types de sitesdynamiquesUn site dynamique permet dacher des pages dont le contenu varie. Le plus souvent, le

contenu de ces pages est li une base de donnes.

Il est ainsi possible par exemple dans un site dynamique de grer en temps rel les

rservations de voyages. Ces rservations sont directement enregistres dans un chier

de donnes et peuvent tre aches tout moment.

WebDev propose deux types de sites dynamiques :

site dynamique WebDev. Ce type de site ncessite un Serveur dApplication Web-

Dev sur le serveur. Il permet de manipuler de nombreuses bases de donnes.

site dynamique PHP. Ce type de site ncessite un moteur PHP sur le serveur. Ce

type de site est conseill pour hberger des sites dynamiques chez un hbergeurgrand public.

Partie 1 : Concepts de base 13


14/256


15/256


16/256


17/256


18/256


19/256


20/256


21/256


22/256


23/256


24/256


25/256


26/256


27/256


28/256


29/256


30/256


31/256


32/256

Cycle de dveloppementdun siteWebDev couvre la totalit du cycle de dveloppement dun site :

Dtail des direntes phases :

Phase de conception : Il est possible de concevoir un site partir dun simple cahier

des charges, dune modlisation UML des traitements ou mme partir de chiers de

donnes prexistants.

Phase de dveloppement : La cration du projet et de lanalyse est ralise laide

dassistants trs complets. Le dveloppement peut tre eectu en mode RAD (Rapid

Development Application) avec gnration automatique du code et des IHM ou tre le

rsultat dune cration manuelle des dirents lments du projet.

32 Partie 2 : Dveloppement dun site


33/256


34/256


35/256


36/256


37/256


38/256

Modles depagesWebDev permet de crer des modles de pages. Un modle est destin contenir des

lments communs un ensemble de pages du site.

Les modications eectues dans un modle de pages sont automatiquement repor-

tes sur toutes les pages utilisant ce modle.

Un modle de pages permet, par exemple, de respecter la charte graphique dnie pour

un site.

Pour crer une page utilisant un modle, slectionnez le modle utiliser lors de la

cration de la page.

Remarque : La programmation associe aux lments du modle peut tre directement

ralise dans le modle.

Les caractristiques des lments peuvent tre dsolidarises du modle. Par exemple,

dsolidariser la position dun champ du modle pour positionner le champ ailleurs touten conservant les autres volutions sur le champ (code, style, ...). On parle alors dhri-

tage. Dans ce cas, les lments sont identis par un carr bleu.

Dfnition dun modle de pages.Le modle est encadr dun

trait jaune sous lditeur.

Utilisation du modle dans plusieurs pages.Les lments appartenant au modle sont identifs par un carr jaune.



39/256


40/256

gnre. Le code est la charge du dveloppeur.Frameset : Permet de crer dirents types de

Framesets. Chaque Frame devra tre associeaux pages de votre projet sous lditeur.

3. Selon le type de page choisi, saisissez les inor-mations demandes dans les dirents crans delassistant (ces crans varient selon le type de pageslectionn).4. Validez la cration de la page.

1.3 Cration des pages du projet parconstruction automatique du site (R.A.D.)

Pour les sites dynamiques, les pages du projetpeuvent tre crs directement en une seule op-ration partir de la description de lanalyse, par la

construction automatique du site (RAD).Pour plus de dtails sur les pages cres par leRAD, consultez laide en ligne.

Pour crer le site dynamique par le R.A.D. :1. Slectionnez loption "Atelier .. RAD Applicationcomplte".Attention : Pour utiliser cette option, le projet doit

tre associ une analyse gnre au moins uneois.2. Slectionnez le pattern RAD utiliser.3. Slectionnez les chiers de donnes utilisspour la gnration.4. Slectionnez les chiers de donnes principauxqui seront les points dentre dans lapplication(principalement, ces chiers de donnes serontutiliss pour mettre en place les options de menu).5. Associez si ncessaire une image chaquechier de donnes. Cette image sera utilise pourreprsenter les chiers de donnes.6. Validez la cration de votre application par leRAD.

2 Manipulations simples sur une page

Lditeur de pages permet de raliser les manipula-tions suivantes sur les pages :Ouvrir une page sous lditeur : Il sut de double-

cliquer sur le nom de la page ach dans le volet"Explorateur de projet".

Sauvegarder et copier une page.Importer et exporter une page.Modier lordre de navigation.

Pour plus de dtails sur ces manipulations, consul-tez laide en ligne.

3 Principales caractristiques dune page

Une page peut accueillir tous les types de champsdisponibles.Une page peut :avoir une image de ond : cette image est a-

che en ond de la page et les champs viennent

se superposer cette image.avoir un menu droulant : ce menu permettra

aux internautes daccder plus rapidement auxprincipales onctionnalits du site. Pour crer unmenu droulant dans une page, il sut dutiliserloption "Insertion .. Menu". Les deux premiresoptions apparaissent dans la page. Les optionspeuvent tre manipules grce au menu contex-tuel des options. Les options de menu peuvent

ensuite tre manipules par programmation.Pour plus de dtails, consultez "Manipuler les op-tions de menu par programmation", page 44.

avoir une barre de message : cette barre demessage achera les messages daide associs

aux dirents champs de la page. Pour plus dedtails, consultez laide en ligne.tre multilingue : toutes les langues dnies

pour la page seront disponibles pour tous leschamps de la page. Une page peut tre associe plus de langues que le projet (cas par exempledes pages partages entre plusieurs projets).Pour plus de dtails, consultez le chapitre "Sitesmultilingues", page 136.



41/256


42/256

7 Les contextes de pages

7.1 Prsentation

Dans une application Windows, toutes les inorma-tions relatives la entre sont conserves avec laentre.Dans un site dynamique WebDev, pour chaquepage ache sur le navigateur de linternaute, uncontexte de page existe sur le serveur.Le contexte de page regroupe toutes les inorma-tions relatives la page :contenu des champs,variables locales,variables globales,code WLangage "serveur", ...

7.2 Fonctionnement

Gestion automatique

Par daut, WebDev gre automatiquement lescontextes de pages dynamiques :Un contexte de page est ouvert lors de lachage

de la page dynamique sur le navigateur.Le contexte dune page est mis jour en onction

des inormations saisies par linternaute sous lenavigateur. Cette mise jour se ait lors de la vali-dation de la page ( laide dun bouton de type"Envoi au serveur" ou de la onction PageValide).

Les contextes de page existants sont ermslors de lutilisation des onctions PageUtilise ouFramesetUtilise. Les contextes de pages corres-pondants aux pages acher sont alors ouverts.

Gestion avance

WebDev ore la possibilit de raliser une gestionavance des contextes grce aux onctions Contex-teXXX. Il est ainsi possible de :ouvrir le contexte dune page sans en lancer la-

chage sur le navigateur (ContexteOuvre),tester lexistence du contexte dune page sur le

serveur (ContexteExiste),ermer le contexte dune page inutilise (Contex-

teFerme).

Cette gestion avance des contextes de page peuttre utilise pour :Economiser lespace mmoire du serveur (par

exemple, en ermant les contextes des pages pr-cdemment ouvertes mais inutilises).

Prparer des pages destines dialoguer avecdautres applications (par exemple, la page rece-vant les inormations en retour dun site de paie-ment scuris).

Manipuler des pages partir dautres pages.

Cas particulier

Lors de lutilisation de la touche "Prcdent" dunavigateur, une dsynchronisation peut existerentre la page et son contexte. Pour plus de dtails,consultez "Avantage scuritaire : la gestion du"Back"", page 151.

8 Ouvrir une page dans un site WebDev

8.1 Prsentation

Louverture dune nouvelle page dans un site Web-Dev peut tre ralise selon plusieurs mthodes :directement depuis la description du champ qui

doit ouvrir la page (bouton, lien, menu, ...)par programmation en WLangage.

8.2 Ouverture dune page depuis la descrip-tion dun champ

Lors de la description dun bouton, dun lien, duneimage clicable, il est possible de dnir directe-ment laction eectue et la destination de cetteaction.

Pour ouvrir directement une page "xxx" partir dunbouton, lien, image, :1. Achez la description de llment (option "Des-cription" du menu contextuel de llment).2. Slectionnez laction eectuer : "Acher lapage xxx".3. Slectionnez la destination de laction : page encours, navigateur en cours, (rame spciquedans le cas dun rameset). Laction prcdemment

slectionne sera eectue dans cette rame.4. Validez.



43/256


44/256


45/256


46/256

Acher une animation (Gi anim)Image

Acher une page selon la zone clique sur uneimage Image clicable

Acher le contenu dun chier de donnes en

table (Liste des clients, dtail dune commande, ...)Table chier ou

table mmoire,

Zone rpte chier

ou zone rpte m-

moire

Acher une image rarachie rgulirement

Web Camra

Rpter des champs dans une page (Catalogue

Produits avec la photo, ...)

Zone rpte

Utiliser un code HTML existantChamp HTML

Utiliser une applet Java (horloge, ...)

Champ Java

Saisir des inormations

Champ de saisie

Acher des inormations hirarchises (contenu

dun rpertoire, ...) Champ Arbre



47/256


48/256

Acher une page de votre site lintrieur dune

de vos pagesPage Interne

Acher un menu automatique (qui se construit au

ur et mesure du parcours du site) Chemin de naviga-

tion

Permettre linternaute de donner ou de visualiser

une note.

Champ Notation

Acher des vignettes dimages Champ Vignette

Acher des chiers Flex

Champ Flex

Intgrer des champs de type SilverLightChamp SilverLight

Enrouler / Drouler une zone dachageChamp Tiroir

Uploader un ou plusieurs chiers

Champ Upload

Acher une liste dobjets sous orme de liste hori-

zontale dlante. Champ Zone Rp-

te linaire

Crer un eet visuel dans une page en prsentant

une image partiellement recouverte par une autre. Champ Page corne



49/256


50/256

2 Caractristiques dun champ

Pour tous les champs dune page, il est possible

dacher la entre de description des champs.Cette entre est une entre onglets, regroupanttoutes les caractristiques paramtrables dun oude plusieurs champs.Remarque : Il est galement possible de visualiseret/ou de modier les caractristiques dun ou deplusieurs champs dans le modieur. Pour plus dedtails, consultez laide en ligne.

2.1 Afchage des caractristiquesPour acher la entre de description dun champ :

soit double-cliquez sur le champ.soit slectionnez loption "Description" du menu

contextuel du champ (clic droit de la souris).soit slectionnez le champ et slectionnez lop-

tion "Achage .. Description de la slection".soit slectionnez le champ et utilisez le raccourci

clavier [Alt]+[Entre].soit slectionnez loption "Achage .. Options ..

Modier les options" (touche [F12]), slectionnezle champ et cliquez sur le bouton "diter".

Remarques :Il est possible dacher la entre de descrip-

tion pour un ensemble de champs slectionns.Seules les caractristiques communes aux di-rents champs slectionns seront aches.

Plusieurs entres de description peuvent treaches simultanment. Chaque entre de des-cription ache alors les caractristiques dun oude plusieurs champs.

2.2 Caractristiques par onglet

Ce paragraphe prsente rapidement les direntescatgories de caractristiques aches par onglet.Pour plus de dtails sur chacune des caract-ristiques prsentes dans les dirents onglets,consultez laide contextuelle des entres de des-cription.

Onglet Gnral

Longlet "Gnral" permet de spcier le nom duchamp et toutes les caractristiques dachage duchamp (libell, masque de saisie, ...).

Onglet Dtail

Longlet "Dtail" permet de dnir les direntsparamtres du champ :Etat initial du champ louverture de la page.Visibilit du champType du champ

Onglet Liaison

Cet onglet permet de slectionner la rubrique (dunchier ou dune rubrique) laquelle le champ estreli. Selon lenregistrement en cours, le contenude la rubrique relie sera ach dans le champ.

La liaison peut tre mono-chier ou multi-chier.Onglet Contenu

Cet onglet est disponible uniquement pour leschamps des pages.Longlet "Contenu" permet de dnir :soit le contenu initial du champ (pour les champs

de saisie uniquement).soit la source de donnes utilise pour remplir le

champ (pour les listes, les combos et les tablesuniquement).

Onglet Note / AideLonglet "Note/Aide" permet de :dcrire le onctionnement dtaill du champ. Ces

inormations seront imprimes dans les dossiersde programmation (dossier du projet, dossier dela page, ...).

congurer tous les types daides associs auchamp. Un champ peut avoir :Une bulle daide, ache lors du survol du

champ.Un message daide, ach dans la barre de

message lors de lentre dans le champ.

Onglet Avanc

Longlet "Avanc" permet de saisir le code HTMLgnr avant et aprs le champ.

Onglet Style

Longlet "Style" permet de dnir le style des di-rents lments du champ. Cet cran permet de :Modier laspect dun champ : il sut alors de

slectionner llment du champ modier, puis

ses caractristiques de style. Seul laspect duchamp en cours est modi.Crer ou modier un style.Choisir un style.



51/256


52/256

Afcher les rgles

Les rgles sont aches par loption "Achage ..Rgles". Deux types de guides peuvent alors treutiliss :les guides, permettant daligner et de disposer

les champs lintrieur des pages.lesguides de bordure, permettant de dterminer

une bordure de taille identique de chaque ctde la page.

Remarque : Loption "Guide visible" du menucontextuel des rgles permet de visualiser la pageavec ou sans ses guides. Visibles ou non, lesguides sont toujours actis : un champ dplac versun repre est automatiquement accol celui-ci.

Manipuler les represLes repres sont acilement manipulables laidede la souris dans lditeur. Lorsque la souris sur-vole un repre, le curseur se transorme en unedouble fche.

4.2 Grille magntique

La grille magntique permet de placer des re-pres (verticaux et horizontaux) dans la page. Leschamps crs viennent se placer contre ces re-pres, comme si les champs et les repres taient

magntiss. La grille magntique permet ainsidaligner les champs selon les repres.

4.3 Correcteur dinterace en temps rel

Lors du dplacement dun champ dans une page,le correcteur dinterace en temps rel ache auto-matiquement des guides. Ces guides sont magnti-ss et permettent daligner le champ dplac avecles champs prsents dans la page.

4.4 Correcteur dinterace avanc

Le correcteur dinterace avanc est un outil per-mettant dharmoniser la disposition des champsdans les direntes pages dun site.Le correcteur dinterace avanc propose pour lapage en cours ou uniquement pour les champs s-lectionns, dappliquer des rgles de prsentationdinterace issues du standard Windows : aligne-ment des champs, normalisation de la taille desboutons, ...

4.5 Les options dalignement

Pour aligner plusieurs champs, WebDev met votre disposition :

soit un alignement prdni (disponible par lemenu droulant "Champ .. Alignement .." ou dansla barre doutils dalignement des champs).

soit un alignement personnalis ("Champ .. Ali-gnement .. Alignement personnalis"). Laligne-ment personnalis permet dutiliser des propri-ts spciques dalignement.

Lors de lalignement personnalis, il est possiblede dnir :lalignement horizontal ou vertical : les champs

peuvent tre aligns gauche en onction du d-

but du champ ou du dbut de la zone de saisie.Ils peuvent aussi tre aligns droite, en onc-tion de la n du champ, ou de la n de la zonede saisie.

lespacement uniorme : lespacement entreles champs est adapt pour tre le mme entrechaque champ (horizontalement ou verticale-ment).

la taille : la taille des champs slectionns estautomatiquement adapte pour obtenir deschamps de mme hauteur et/ou de mme lar-geur.

le champ de rrence : pour lalignement et lataille des champs, le champ de rrence est auchoix :

le premier champ slectionn

le dernier champ slectionn

le plus grand champ slectionn

le champ situ le plus en haut gauche deschamps slectionns

4.6 Le zoom paramtrable

Il est possible de spcier un acteur de zoom pourrduire ou agrandir lachage de la page en cours.Pour spcier un acteur de zoom :1re mthode :Soit slectionnez loption "Achage .. Zoom .."

et choisissez le acteur de zoom utiliser.Soit saisissez directement le acteur de zoom

dans la barre de message de lditeur (en bas droite).

2me mthode :

Appuyez sur la touche [Ctrl].Modiez le acteur de zoom avec la roulette

de la souris tout en maintenant la touche [Ctrl]enonce.



53/256


54/256


55/256

Rpter un groupe dechamps : les zones rptesLes zones rptes permettent de rpter un ensemble de champs dans une page web.

Lors de cette rptition, les champs de la zone rpte peuvent acher des inormations

direntes dans chaque occurrence. Il est ainsi possible dacher chaque rptition

des enregistrements dune base de donnes.

Pour chaque champ de la zone rpte, plusieurs caractristiques peuvent tre modi-

es lors de la rptition : libell, couleur du texte, ...

Les rptitions peuvent tre ralises :

sur une colonne,

sur plusieurs colonnes. Dans ce cas, on parle de "Zone rpte horizontale".

Lors de la cration dune zone rpte, il est possible de lier la zone rpte directement

un chier de donnes ou une requte. Les attributs de la zone rpte sont automa-

tiquement dnis. Aucune programmation nest ncessaire.

Cration de la zone rpte souslditeur de WebDev

Achage de la zone rptesous le navigateur

Partie 2 : Dveloppement dun site 55


56/256


57/256

Code serveur dans une page PHP : code WLangage ou code PHP ?

Les codes excuts sur le poste serveur sont reprsents sous lditeur de code par un

bandeau Jaune ou Rose.

bandeau Jaune = WLangage : le sigle WL prcde lintitul du code.

bandeau Rose = PHP : le sigle PHP prcde lintitul du code.

Pour passer dun code jaune (WLangage) un code rose (PHP), il sut de cliquer sur

le sigle WL prcdant lintitul du code (ou inversement en cliquant sur PHP). Lors de

lenregistrement de la page PHP, le code WLangage est automatiquement converti en

code PHP.

Nous vous conseillons de dvelopper en WLangage.



58/256


59/256


60/256


61/256


62/256


63/256

Modles dechampsWebDev permet de crer des modles de champs. Un modle de champs est un en-

semble de champs, rutilisables dans plusieurs pages.

Les modications eectues dans un modle de champs sont automatiquement repor-

tes sur toutes les pages utilisant ce modle.

Un modle de champs permet de :

regrouper un ensemble de champs dans un but prcis.

rendre les champs indpendants de la page les accueillant.

Un modle de champs peut tre cr :

directement (menu "Fichier .. Nouveau .. Page .. Modle de champs")

partir de champs prsents dans la page (menu "Champ .. Reactoring .. Crer un

modle de champs avec la slection").

Pour utiliser un modle de champs dans une page, crez un champ de type "Modle de

champs".




dsolidariser la position dun champ du modle pour positionner le champ ailleurs tout

en conservant les autres volutions sur le champ (code, style, ...). On parle alors dhri-tage de champ. Dans ce cas, les lments sont identis par un carr bleu.

Dfnition dun modle de champs : le modle

est encadr dun trait jaune sous lditeur.

Utilisation du modle dans

une page.

Les lments appartenant

au modle sont entours

en bleu et identifs par un

carr jaune.



64/256


65/256

ModlesdtatsDans une socit, bien souvent, les impressions utilisent un look et une mise en page

unis : date en haut droite dans un ormat spcique, bas de page avec heure dim-

pression et nom du chier, logo en haut gauche, ...

Les modles dtats permettent duniormiser simplement la mise en page de vos tats.

Un modle dtats peut tre cr :

directement (option "Fichier .. Nouveau.. Etat .. Modle dEtats").

partir de ltat en cours (option "Fichier .. Enregistrer comme un modle").

Pour crer un tat utilisant un modle, slectionnez le modle utiliser lors de la cra-

tion de ltat.




dsolidariser la position dun champ du modle pour positionner le champ ailleurs touten conservant les autres volutions sur le champ (code, style, ...). On parle alors dhri-

tage. Dans ce cas, les lments sont identis par un carr bleu.

Dfnition dun modle dtatssous lditeur dtats.

Utilisation du modle dans dirents tats.

Les lments appartenant au modle sont identifs par un carr jaune.Les lments du modle surchargs sont identifs par un carr bleu.



66/256

Dirents modesdimpressionPour imprimer des documents gnrs par votre site (actures, devis, ...), crez des tats

grce lditeur dtats.

Pour imprimer ces tats quelle que soit la conguration du poste de linternaute, il est

conseill de proposer au moins deux modes dimpression :

Impression au ormat HTML : Ltat sache dans une nouvelle page du site. Lin-

ternaute na qu utiliser le bouton "Imprimer" du navigateur pour imprimer ltat.

Aucun logiciel spcique nest ncessaire.

Impression au ormat PDF: Ce mode dimpression ncessite la prsence

dAdobe Reader (ou dun logiciel quivalent) sur le poste de linternaute. Limpres-sion se ait directement partir de ce logiciel.

Etat sous lditeur dtats de WebDev

Impression en PDFImpression en HTML



67/256

Afcher et enchanerles pagesUn site est gnralement constitu dun ensemble de pages. Ces pages sont relies

entre elles grce des boutons (ou des liens). Un clic sur un bouton entrane lachage

dune nouvelle page.

Pour acher une nouvelle page, il aut se poser deux questions :

1. o acher la page (nouveau navigateur, rame, ...) ?

2. quelle page acher ?

Quelle page afcher ?La page acher peut tre dnie :

soit sous lditeur de pages (aucune programmation nest ncessaire).

soit sous lditeur de code dans un traitement du bouton (du lien, de limage cli-

cable, ...).

Slection de la page afcher sous lditeur de pages (cas le plus courant)

Pour dnir la page acher :

Achez la entre de descrip-

tion du champ (clic droit sur lechamp, option "Description").

Dans la liste des actions, slec-

tionnez la page acher.

Slection de la page afcher par programmation

Il est ncessaire de slectionner la page acher par programmation lorsque :

plusieurs pages peuvent tre aches (par exemple soit une page derreur si le mot

de passe nest pas saisi, soit la page suivante du site).

une action particulire doit tre eectue sur le serveur (calcul, lecture denregistre-

ment, ...).



68/256

O afcher la page ?Lachage dune page se ait dans une "destination" spcique : page en cours, nou-

veau navigateur, ...

La destination peut tre dnie : soit sous lditeur de pages : aucune programmation nest ncessaire.

soit sous lditeur de code, dans un traitement du bouton (ou du lien).

Plusieurs onctions du WLangage permettent douvrir une nouvelle page (ou rameset).

Les principales onctions sont : PageAfche (pour les pages) et FramesetAfche (pour

les ramesets).

Slection de la destination sous lditeur de pages (cas le plus courant)

Dans un bouton, pour dnir la destination de la page acher :

Achez la description

du bouton ou du lien

(clic droit sur le champ,

option "Description").

Dans la liste des destina-

tions, slectionnez une

destination prdnie ou une rame (dans le cas dun rameset).

Remarque : Les destinations prdnies sont prsentes dans les pages suivantes dece manuel.

Slection de la destination sous lditeur de code

Lorsque la destination dpend dun choix de linternaute, cette destination doit tre

slectionne par programmation. Par exemple, si linternaute nindique pas son mot de

passe, une page derreur apparat dans un nouveau navigateur ; sinon, la page suivante

sache dans le navigateur en cours.

La onction WLangage ChangeDestination permet de modier par programmation la des-

tination dune action. Cette onction doit tre utilise dans un code navigateur.



69/256


70/256


71/256


72/256

Afcher ou Actualiser une page dynamique : PageAfche ouPageActualise ?

Le WLangage propose deux onctions pour acher une page dynamique : PageAfche et

PageActualise. Ces onctions permettent dacher ou dactualiser une page dynamique.

Ces deux concepts sont totalement dirents.

Afchage dune page = nouvelle page

Lachage dune page dynamique correspond louverture dune "nouvelle page" sur

le navigateur. Par exemple, ouverture de la page"Visu_Produit" permettant de visualiser

larticle slectionn dans une table.

Attention : Si vous "achez" une page prcdemment ouverte, la page et son contextesont erms puis rouverts. Toutes les donnes de la page sont r-initialises.

Actualisation dune page = r-afchage de la page (plus rapide)

Lactualisation dune page dynamique consiste r-acher une page dj ouverte sous

le navigateur. Laction eectue est identique lutilisation de la touche "Rarachir" du

navigateur.

Les donnes dynamiques prsentes dans la page sont mises jour en onction des

contextes prsents sur le serveur. Seules les donnes modies sont raches.

Exemple : Dans un site commercial, la page prsentant la liste des produits slectionns

est actualise lorsquun nouveau produit est command.

Conseil de perormances :

Pour actualiser les donnes afches dans une page dynamique, utilisez la onction

"PageActualise". Avec la onction "PageAfche", le temps de chargement de la page

est plus long.



73/256

Raliser un traitement surplusieurs pages successivesDans un site commercial, une prise de commande peut par exemple tre ralise sur

direntes pages :

page 1 : Slection des produits commander.

page 2 : Visualisation du panier.

page 3 : Validation de la commande et saisie des coordonnes du client.

Dans ce cas, lcriture des donnes dans les fchiers de donnes doit seectuer UNI-

QUEMENT dans le code du bouton de validation de la commande : tous les lments de

la commande doivent tre mmoriss jusqu la validation nale. Ncrivez pas dans les

chiers de donnes en cours de traitement.

Remarque : Il est galement possible dutiliser une transaction, mais nous vous recom-

mandons de mmoriser les inormations de la commande.

Page 1 : Slection des produits

Page 3 : Saisie des coordonnes du client

Page 2 : Visualisation du panier



74/256

Feuilles de styles : poursimplifer la mise en pageLes euilles de styles sont des modles qui permettent duniormiser la prsentation des

champs dans les pages.

Les euilles de styles permettent de dnir :

la taille et la orme de vos textes, la police,

lalignement de vos paragraphes, les retraits de paragraphe, ...

le style de texte (gras ou italique), sa couleur, ...

Et bien plus encore.

Quand vous modiez une caractristique du style, tous les champs associs ce style

sont mis jour. Il est ainsi possible de modifer la charte graphique dun site en eec-tuant uniquement quelques modifcations dans les styles utiliss.

Un exemple dutilisation des euilles de styles : augmenter la taille de 8 15 :

Remarque : Longlet "CSS personnalis" permet de saisir directement du code CSS. Ce

code sera ensuite ajout dans la euille de styles.



75/256


76/256

Rrencementdun sitePour que votre site soit visit, les internautes doivent le trouver. Pour cela, votre site doit

tre propos lorsque linternaute saisira les mots-cls caractrisant votre site dans un

moteur de recherche.

Pour aider au rrencement de votre site, WebDev propose :

un assistant de rrencement. Cet assistant liste toutes les optimisations pouvant

tre ralises pour amliorer le rrencement de votre site. Pour lancer lassistant,

utilisez le menu "Projet .. Rrencement .. Optimiser le rrencement").

la possibilit de saisir une description et des mots-cls sur chaque page de votre

site.

lintgration dune page daccueil. Cette page daccueil permet de saisir la descrip-

tion de votre site et les mots-cls dcrivant votre site.

Il est possible dintgrer une page daccueil votre site :

soit lors de la cration du projet (dans lassistant de cration du projet).

soit lors du dveloppement du projet (option "Fichier .. Nouveau .. Page", option

"Page" puis option "Accueil").

Plusieurs modles de pages daccueil sont proposs.

Remarque : le rrencement est une technique dont les rgles sont dictes par les

moteurs de recherche (Google, Bing, etc.), ne sont pas toujours explicites et voluent trs

vite. Nhsitez pas consulter des ouvrages ou des sites spcialiss sur ce sujet.



77/256

Rrencement dun site en pratique

1 Principes du rrencement

Pour que votre site WebDev soit visit, il aut queles internautes puissent le trouver. Pour cela, votresite doit tre propos lorsque linternaute saisirales mots-cls caractrisant votre site dans un mo-teur de recherche.Pour vous aider, WebDev propose :Un rrencement de chaque page statique

et AWP: pour chaque page il est possible de

dnir une description et un ensemble de mots-cls. Ces mots-cls permettront aux internautesdaccder directement la page. Il est galementpossible de ne pas rrencer une page.

Un assistant daide au rrencement, indiquantpour chaque page les amliorations pouvant treeectues pour optimiser le rrencement.

La possibilit dintgrer ou dutiliser une pagespcifque en tant que page daccueil. Cette

solution permet par exemple de rrencer lespages dynamiques, en associant des mots-cls la page daccueil. Cette page daccueil contienttous les mots-cls qui permettront aux inter-nautes de trouver votre site.

Remarque : Pour optimiser le rrencement devos pages dans les moteurs de recherche, il estconseill dutiliser des pages AWP. Si vous devez

rrencer un site dynamique, utilisez :une page daccueil.une partie du site en statique. Le site statique

permettra deectuer le rrencement et de lan-cer le site dynamique.

une partie du site en mode AWP. Le site AWP per-mettra deectuer le rrencement et de lancerle site dynamique.

2 Rrencer ou non une page statique ou AWP dun site

Pour rrencer une page statique ou AWP de votresite :1. Achez la entre de description de la page.2. Dans longlet "Dtail", une zone spciquepermet de grer le rrencement de la page.

Il est possible de :Ne pas rrencer la page en cours.Rrencer la page en cours, en lui associant des

expressions et des mots-cls (bouton "Editer lesexpressions et les mots-cls").

3 Rrencer et saisir les mots-cls dune page

Pour rrencer une page statique ou AWP de votresite :1. Achez la entre de description de la page.2. Dans longlet "Dtail", une zone spcique per-met de grer le rrencement de la page. Danscette zone, cliquez sur le bouton "Editer les expres-sions et les mots-cls".3. Dans longlet "Description" de la entre de r-rencement, saisissez la description de la page.Cette description apparat le plus souvent danslachage du rsultat dune recherche eectue

avec un moteur de recherche. Quelques conseils :Utilisez des phrases courtes, limitez le nombre

de mots (200 caractres maximum)

Cette description doit donner aux in-ternautes envie dacher la page.Remarque : Cette description peut tre modiedynamiquement grce la proprit ..Descrip-tion.

4. Dans longlet "Mots-cls" de la entre de r-rencement, saisissez les mots-cls associs lapage. Ces mots-cls (ou expressions) seront lesmots-cls pour lesquels la page sera rrence :si linternaute saisit un de ces mots-cls, le moteurde recherche proposera la page correspondante.

La saisie des mots-cls se ait de la manire sui-vante : saisissez le premier mot-cl puis appuyezsur la touche [ENTREE] pour saisir le suivant.



78/256

Quelques conseils :Les trois premiers mots-cls sont les plus impor-

tants. Utilisez des mots-cls usuels et discrimi-nants.

Les mots-cls ne doivent pas tre rpts.

Utilisez des variantes (singulier/pluriel, mascu-lin/minin, nom/verbe ...).Remarque : Ces mots-cls peuvent tre modisdynamiquement grce la proprit ..MotsCls.

5. Validez la entre de rrencement, puis la e-ntre de description de la page.

4 Utiliser lassistant daide au rrencement

Pour vous aider optimiser le rrencement devos sites et de vos pages, WebDev propose un as-sistant daide au rrencement. Cet assistant peuttre utilis sur une page spcique, ou sur toutesles pages de votre projet. Cet assistant analyse la

composition des pages du site et indique les am-liorations apporter pour maximiser le positionne-ment des pages dans les moteurs de recherche.Quelques exemples doptimisations dtectes parlassistant :Le titre de la page doit tre renseign.Trois mots-cls doivent tre spcis au mini-

mum dans la page.La description de la page doit tre renseigne.Le texte alternati doit tre saisi pour tous les

champs le proposant (si possible en utilisant les

mots-cls dnis pour la page) ...

Pour lancer lassistant daide au rrencementsur une page :1. Achez la page voulue dans lditeur.2. Slectionnez loption "Page .. Optimiser le r-rencement de la page".

3. Lassistant de rrencement se lance. Vouspouvez double-cliquer directement sur une propo-sition pour eectuer loptimisation correspondante.Le bouton "Rarachir" permet de mettre la liste despropositions jour.

Pour lancer lassistant daide au rrencementsur lensemble des pages du site :1. Slectionnez loption "Projet .. Perormances etAmliorations .. Optimiser le rrencement".2. Lassistant de rrencement se lance. Vouspouvez double-cliquer directement sur une propo-

sition pour eectuer loptimisation correspondante.Le bouton "Rarachir" permet de mettre la liste despropositions jour. Les rsultats peuvent tre trispar page ou par type de conseils.

5 Intgrer une page daccueil dans votre site

Il est possible dintgrer une page daccueil dansvotre site :lors de la cration du projet. Il est alors possible

de choisir une page daccueil pr-dnie.lors de la cration dune nouvelle page (option

"Fichier .. Nouveau .. Page", onglet "Vierge / mo-dles", option "Accueil").

Si aucune page daccueil nest associe votreprojet, vous pouvez :soit choisir une page daccueil parmi les pages

statiques de votre sitesoit choisir une page daccueil pr-dnie.



79/256


80/256



81/256

Environnement dedveloppement

Partie 3


82/256


83/256


84/256


85/256


86/256


87/256

Tableau de bord duprojetLe tableau de bord du projet est un lment indispensable la gestion de projets Web-

Dev. Le tableau de bord permet davoir une vision globale et synthtique de ltat davan-

cement dun projet.

Le tableau de bord propose deux modes de visualisation du projet :

Le mode Dveloppeur,

Le mode Che de projet.

Le tableau de bord du projet en mode Dveloppeur est compos :

de voyants : Si les voyants sont verts, tout va bien. Les voyants rouges signalent un

problme potentiel. de listes dlments, permettant un accs rapide aux principales options du projet.

de compteurs, permettant de grer les nouveauts, les demandes, ...

Le tableau de bord en mode Che de Projet permet dobtenir des inormations graphiques

sur ltat davancement du projet et la qualit du projet. Ce mode est recommand lorsde lutilisation du Centre de Suivi de Projets avec une gestion des exigences.

Partie 3 : Environnement de dveloppement 87


88/256

WebDev, WinDev, WinDevMobile : 100% compatiblesLes projets crs actuellement sont souvent multi-cibles.

Par exemple, pour un ERP destin onctionner sous Windows, il est ort probable quen

plus de lapplication qui sera le socle de la solution applicative, des commerciaux seront

quips de PDA ou de Smartphones, les magasiniers utiliseront des terminaux mobiles

pour la gestion des stocks et quun site Intranet et un site Internet seront mis en place.

Tous les lments, hormis lIHM (pages et entres) sont 100% compatibles et parta-

geables entre des projets WinDev, WebDev et WinDev Mobile.

Il est ainsi possible de partager des collections de procdures ou des classes par exemple

entre plusieurs projets.

Quel que soit le produit avec lequel un projet a t cr, il est possible de louvrir avec

les autres produits.

Lorsque vous ouvrez un projet dans un produit di-

rent de celui qui a permis de le crer, un assistant

sache, permettant de crer une conguration de

projet spcique au produit utilis.

Par exemple, si un projet WinDev est ouvert avecWebDev, vous pouvez crer une conguration de pro-

jet nomme "Site", permettant de regrouper tous les

lments ncessaires au site WebDev.

Dans les phases dutilisation de lenvironnement, il

est possible de visualiser depuis chaque environne-

ment les lments de chaque cible. Un projet sous

WebDev ache les vignettes des entres WinDev et

WinDev Mobile par exemple. Cliquer sur une entre

WinDev depuis lditeur de projet WebDev ouvre la e-ntre WinDev (WinDev doit tre install sur le poste).

88 Partie 3 : Environnement de dveloppement


89/256


90/256

GnrationmultipleLes congurations de projets permettent de dnir simplement les direntes "Cibles"

de votre projet. Vous pouvez ainsi dnir pour un mme projet plusieurs sites, plusieurs

bibliothques ou plusieurs composants.

Pour gnrer le rsultat de chaque conguration, vous pouvez bien entendu slectionner

une une chaque conguration, et gnrer llment correspondant.

Un autre moyen plus rapide existe : la gnration multiple. Vous slectionnez en une

seule opration les congurations gnrer et le rsultat est immdiat.

Pour lancer une gnration multiple, utilisez le menu "Atelier .. Gnration multiple".



91/256


92/256

Fonctionnement du Gestionnaire de Sources

Voici un exemple dutilisation du Gestionnaire de Sources :

Si un lment (page, tat, ...) du projet est extrait, ce mme lment ne pourra pas tre

extrait une seconde ois.

Aprs modication des lments extraits, il est ncessaire de rintgrer ces lments

pour que le projet de base prenne en compte ces modications. En eet, la base de

sources conserve un historique de tous les lments du projet depuis leur cration.

A chaque rintgration dun lment, le numro de version du projet de base est incr-

ment de 1.



93/256


94/256


95/256


96/256


97/256


98/256


99/256

Composant interne en pratique

1 Prsentation

Un composant interne est un regroupement dl-ments dun projet. Ce regroupement permet de :Organiser un projet : vous pouvez crer des com-

posants internes pour regrouper les lmentsdun projet par exemple par onctionnalit.

Partager des lments entre dirents pro-jets : Les lments prsents dans un composantinterne peuvent tre partags entre plusieurs

projets par lintermdiaire du GDS. Pour plus dedtails, consultez "Partager des composants in-ternes (via le GDS)", page 100.

Un des avantages du composant interne par rap-port au composant classique est de pouvoir dbo-

guer directement le composant interne depuis leprojet qui lutilise.Dirence avec un composant classique : Un com-posant interne permet dintgrer la totalit deslments du composant dans linterace du projetcontenant le composant interne. Il est possible demanipuler tous les lments "publiques" du compo-sant interne directement sous lditeur.

Lors de lutilisation dun composant classique, leslments "publics" du composant ne peuvent pastre manipuls directement. Il est ncessaire pourmodier le composant classique douvrir le projetcorrespondant.

2 Crer un composant interne

2.1 Les direntes tapes

Pour crer un composant interne :1. Slectionnez loption "Atelier .. Composant In-terne .. Crer un composant interne". Lassistant decration dun composant interne se lance.2. Indiquez les caractristiques du composantinterne :son nom. Le nom du composant interne sera

utilis pour le chier WCI correspondant ladescription du composant interne. Ce nom seragalement utilis pour crer un sous-rpertoiredans votre projet contenant tous les lments du

composant interne.son libell.sa description.3. Indiquez les lments intgrer dans le compo-sant interne. Un composant interne peut contenirtous les types dlments prsents dans un projet :pages, tats, modles, ...Remarque : Si les lments intgrs dans le com-posant interne contiennent des liens vers les l-ments prsents par exemple dans le projet ou dansun autre composant interne, une erreur de compi-

lation apparat indiquant quil nest pas possibledaccder un lment du projet depuis un com-posant interne.4. Indiquez les lments du composant interne quiseront directement accessibles dans le code et

dans les actions prdnies du projet accueillant le

composant interne.Remarque : Les lments du composant interneaccessibles (ou "public") seront automatiquementproposs par la compltion. Ils pourront tre uti-liss par les lments prsents dans le projet oudepuis un autre composant interne. Les lmentsnon accessibles (ou "privs") pourront tre manipu-ls uniquement par un autre lment du compo-sant interne (la compltion proposera ces lments"privs" uniquement depuis les lments dun com-posant interne).5. Indiquez le mode de gestion des donnes et des

contextes dexcution. Trois modes de gestion desdonnes et des contextes dexcution sont dispo-nibles :Partage complet : Le composant interne accde

aux chiers de donnes du projet. Le composantinterne utilise galement les mmes contextesdexcution que le projet.Ce mode correspond au mode par daut si lecomposant interne nutilise pas danalyse.

Partage de donnes uniquement (mode avan-c) : Le composant interne accde aux chiers

de donnes du projet. Le composant interne uti-lise des contextes dexcution distincts de ceuxdu projet.Ce mode est utiliser dans des cas trs spci-



100/256


101/256


102/256

Composant externe en pratique

1 Prsentation

1.1 Dfnition

Un composant externe est un ensemble dlmentsWebDev : pages, tats, analyse, ... Cet ensembledlments eectue une onctionnalit prcise. Parexemple, un composant peut correspondre unedes onctionnalits suivantes :Envoi de Fax

Envoi demails, ...Remarques :

Pour optimiser lorganisation de vos projets, il estpossible dutiliser des composants internes. Pourplus de dtails, consultez "Composant interne",page 98.

Dans la suite de ce chapitre, le terme "compo-sant" signie "composant externe".

Un composant externe peut tre redistribu dautres dveloppeurs WebDev (gratuitement ou

non). Ces dveloppeurs pourront ainsi intgrer sim-plement la onctionnalit propose par le compo-sant dans leur site. Le composant sera donc int-gr lapplication ou au site, et distribu avec lesite.

Lors de la cration du composant, lauteur spci-e :la provenance des lments du composant. Le

dveloppeur peut construire un composant par-tir dun projet WinDev li un projet WebDev et /ou un projet WinDev Mobile.

les lments du composant visibles ou non parlutilisateur du composant. Les lments visiblesseront accessibles dans le graphe du projet oupar programmation.

le mode dutilisation du composant (commentutiliser le composant, les paramtres permettantdaccder aux onctionnalits du composant, ...).Une documentation succincte ( complter) estautomatiquement gnre et associe au com-posant.

Remarques : Des exemples de composants sontlivrs en standard avec WebDev. Ces compo-sants sont accessibles depuis le volet "Assistants,Exemples et Composants" (option "Composants").

1.2 De quoi est constitu un composantexterne ?

Un composant externe est dni et gnr par-tir dun projet WebDev existant. Il peut tre ensuiteintgr dans dautres projets WebDev.Tous les lments du composant sont totalementindpendants du projet dans lequel le composant

est intgr. Le composant peut avoir sa propreanalyse, ses pages, ses tats, ses chiers de don-nes, ... Lors de la cration de la gnration ducomposant, il sut dindiquer si ces lments pour-ront tre manipuls ou non dans le projet WebDevintgrant ce composant.Le composant est constitu de trois chiers :

.WDK

Fichier composant. Contient tousles lments du composant.Ce chier est ncessaire lintgration du composant dansun projet.

Ce chier doit galement tre livrdans la procdure dinstallationdu site utilisant le composant.

.WDI

Description du composant(uniquement pour ledveloppement de sites).Ce chier est ncessaire lintgration du composant dansun projet.Ce chier ne doit pas tre livrdans la procdure dinstallationdu site utilisant le composant.

.WDO(chier optionnel)

Fichier optionnel

Fichier au ormat texte contenantla liste des dirents lmentslivrs en plus avec le composant(chiers de donnes, chiers .INI,...). Consultez "Le chier WDO",page 107.

1.3 Que contient un composant externe ?

Un composant externe contient :les dirents lments redistribuer (pages,

tats, ...). Ces lments peuvent tre accessibles

ou non lors de limportation du composant dansun projet WebDev.une brve description du composant.une aide permettant de r-utiliser ce composant.



103/256

Cette aide est gnre partir des commen-taires de code.

Remarque : Par daut, si un composant utiliseune analyse, des chiers, ... les onctions HyperFi-

leSQL manipuleront ces lments dans un contexteindpendant. Ces paramtres peuvent tre modi-s dans les options avances du composant. Pourplus de dtails, consultez laide en ligne.

2 Crer et gnrer un composant externe

La cration dun composant externe doit treeectue partir dun projet contenant tous leslments ncessaires au onctionnement du com-posant. Il est donc conseill dutiliser un projet

spcifque pour crer chaque composant.

La cration dun composant se ait en plusieurstapes :1. Dveloppement des lments du composant.2. Cration du composant3. Dnition des options avances du composant.4. Gnration du composant.

Le composant peut alors tre distribu et r-utilis.

3 Distribuer un composant externe

3.1 Prsentation

Lorsque le composant a t cr, test et gnr, ilpeut tre mis disposition des dveloppeurs. Plu-sieurs mthodes sont possibles :utilisation directe du composant

Exemple : le composant est directement utilissur le poste du dveloppeur qui a cr le com-posant.

distribution simple, en ournissant directementles chiers ncessaires.Exemple : le composant est destin tre utilis lintrieur dune mme socit, par plusieursdveloppeurs. Dans ce cas, les chiers nces-saires peuvent tre copis sur un disque rseau.

procdure dinstallation du composant(avecune procdure dinstallation du composant iden-

tique celle utilise pour les applications).Exemple : ce mode de distribution est conseillsi le composant est destin tre vendu ou tre distribu grande chelle, avec des mises

jour rgulires.

3.2 Utilisation directe du composant externe

Le composant est cr et utilis sur le mme poste.Lors de limportation du composant dans un projetWebDev, il sut de slectionner le chier WDI cor-respondant au composant. Ce chier est disponible

dans le rpertoire EXE du projet composant.Attention : Si le composant utilise des chiers sp-ciques (chiers de donnes, chiers texte, ...), il estncessaire de crer un chier .

WDO aprs la gnration du composant. Ce chiercontient la liste des chiers externes (chiers dedonnes, chiers texte, ...) utiliss par le composant.Ces chiers rrencs dans le chier .WDO seront automatiquement recopis dansle rpertoire EXE du projet utilisant le composant

WebDev.

3.3 Distribution simple dun composantexterne

La distribution simple dun composant consiste ournir uniquement les chiers ncessaires auonctionnement du composant par simple copie.Les chiers sont copis dans un rpertoire spci-que. Ce rpertoire peut par exemple tre prsentsur un serveur rseau.Lors de limportation du composant dans un pro-

jet WebDev, il sut de slectionner le chier WDIcorrespondant au composant dans le rpertoire dedistribution.Pour distribuer un composant, il est ncessaire deournir :Les chiers automatiquement gnrs par Web-

Dev (chier .WDK et chier.WDI).

Si ncessaire, les chiers spciques manipulspar le composant (chiers de donnes, chiersdinitialisation, ...) ainsi que le chier .WDO.Le chier texte .WDO contientla liste des chiers qui doivent tre ournis avecle composant. Pour plus de dtails sur ce chier,



104/256

consultez le paragraphe "Le chier WDO", page107.

3.4 Distribution grce une procdure

dinstallationLa diusion des composants laide dune pro-cdure dinstallation consiste ournir aux utilisa-teurs du composant WebDev, un programme dins-tallation. Ce programme installe tous les chiersncessaires lutilisation du composant dans lerpertoire spci par lutilisateur.Ce mode dinstallation permet de grer automati-quement :le chier WDO et linstallation des chiers sp-

ciques (chiers de donnes, ...) utiliss par le

composant.linstallation doutils spciques (MDAC, driver

ODBC pour HyperFileSQL, ...).la mise jour automatique des chiers de don-

nes utiliss par le composant (si ncessaire).la dsinstallation du composant.

Pour proposer une procdure dinstallation pour uncomposant :1. Crez la procdure dinstallation du composant :soit directement par loption "Atelier .. Compo-

sant externe .. Crer la procdure dinstallationdun composant".

soit depuis la liste des composants gnrs partir du projet (option "Atelier .. Composant Ex-

terne .. Liste des composants gnrs partir dece projet", bouton "Installation").

2. Dans les dirents plans de lassistant, spci-ez :le support dinstallation du composant.les langues proposes dans la procdure dins-

tallation.le rpertoire dinstallation par daut du compo-

sant.les modules optionnels installer. Il est possible

de modier la liste des chiers distribuer avec

le composant. Le chier WDO sera automatique-ment cr partir de cette liste.

...

Par daut, les chiers ncessaires linstallationdun composant sont crs dans le sous-rpertoireINSTALL COMPO du projet.Rappel : Lors de la cration de linstallation duneapplication, les chiers ncessaires sont crsdans le rpertoire INSTALL du projet.

4 Utiliser un composant externe dans un site

Un composant externe peut tre r-utilis toutmoment dans nimporte quel site WebDev : il sutde connatre le rpertoire des chiers du compo-sant.Lorsquune nouvelle version dun composant estdisponible, il sut dinstaller les nouveaux chiersde cette mise jour dans le rpertoire dinstallation

du composant (selon le mode dinstallation utilis).Pour plus de dtails sur les dirents modes dins-tallation dun composant, consultez "Distribuer un

composant externe", page 103Si le composant a t publi et import via le GDS,les mises jour sont proposes louverture duprojet utilisant le composant.

Si le composant a t distribu avec un site Web-Dev, il est ncessaire de mettre le composant

jour. Pour plus de dtails, consultez le paragraphe"Dploiement dun site utilisant un composant ex-terne".

5 Dploiement dun site utilisant un composant externe

5.1 Prsentation

Le dploiement dun site utilisant un ou plusieurscomposants se ait de la mme aon que le d-

ploiement dun site classique (option "Atelier ..Crer la procdure dinstallation").

Lors du dploiement dun site utilisant un compo-sant, les chiers suivants sont automatiquementinstalls sur le poste serveur :

.WDK,les chiers ncessaires au onctionnement du

composant et de lapplication.



105/256

5.2 Mise jour des composants et des sitesdploys

Lors de la mise jour dun composant et/ou dunsite dploy, il est possible dinstaller sur le postede dploiement du site :soit le site, le composant et les chiers nces-

saires leur onctionnement.soit uniquement le site et les chiers ncessaires

au onctionnement du site.soit uniquement le composant et les ventuels

chiers ncessaires son onctionnement.

Pour plus de dtails sur la gestion de la compatibi-lit entre le site et son composant, consultez laideen ligne.

Pour mettre jour un composant en clientle, deuxpossibilits existent :

1. La recompilation du projet hteRecompilez le projet qui utilise le composant et re-distribuez le site avec le composant. Dans ce cas,

aucun problme de version ou de compatibilit nesera rencontr. La recompilation est ncessairedans les cas suivants :De nouvelles onctions ont t ajoutes dans le

composant et doivent tre prises en compte.Les paramtres de certaines procdures ont t

modis.Incompatibilit de la nouvelle version avec les

anciennes versions du composant....

2. Distribution directe du fchier .WDKFournissez directement une mise jour du compo-sant (chier .WDK) en clientle sans recompilationdu projet.Cette possibilit sapplique en gnral lorsque :La nouvelle version sert corriger un ou des dys-

onctionnements dune version antrieure.De nouvelles onctions ont t ajoutes dans le

composant mais ne sont pas ncessaires au bononctionnement du site.

6 Modifer un composant externe

6.1 Prsentation

A tout moment, un composant cr et gnr peuttre modi. Cette modication peut correspondre :soit lajout dlments dans le composant.soit la suppression dlment du composant.soit la modication des droits sur les lments

du composant.soit la modication dun des lments du com-

posant.

Dans tous les cas, aprs cette modication, le com-

posant doit tre re-gnr pour prendre en compteles modications eectues.

6.2 Les dirents types de compatibilit

La gestion de la compatibilit est lie aux versionsdun composant. En eet, si des modications ontt apportes au composant, les sites qui utilisentle composant en dploiement peuvent rencontrer

des problmes dexcution si elles ne sont pas enphase avec ce composant.La gestion de la compatibilit est une tape impor-tante dans la modication dun composant. Il existe2 types de compatibilit :la compatibilit descendante : la version du

composant utilise (chier .WDK) pour com-piler les sites utilisant ce composant doittre toujours suprieure ou gale la ver-sion actuellement utilise en dploiement.Cette compatibilit est automatiquement gre.Si le composant install avec le site est dune

version inrieure celle utilise par le site, lesite reusera de onctionner.

la compatibilit ascendante : lutilisation dunenouvelle version dun composant avec les projetscompils avec une ancienne version peut treinterdite. Il est donc ncessaire de recompiler lesprojets pour utiliser correctement la nouvelle ver-sion du composant.



106/256


107/256


108/256

Diusion dun composant avec WDO

Pour diuser un composant utilisant un chierWDO :Si vous nutilisez pas de procdures dinstallation

pour le composant, il est ncessaire de ournir :le chier WDKle chier WDIle chier WDOtous les chiers ncessaires rrencs dans le

chier WDO.

Si vous utilisez une procdure dinstallation pourle composant, le chier WDO sera automatique-ment cr lors de la cration de la procduredinstallation du composant.

Il sut pour cela dans lassistant de :1. Demander la modication des chiers instal-ler (option "Modier la liste des chiers instal-ler" dans les "modules additionnels").2. Slectionner les chiers supplmentaires installer.Le chier WDO sera automatiquement cr etinstall avec le composant.



109/256

Modes degnrationAu del des sites web, WebDev vous permet galement de gnrer de nombreux autres

types de projets.

SitesLes sites sont le mode de gnration le plus rquemment utilis.

WebDev permet de gnrer :

des sites statiques, semi-dynamiques, dynamiques

des sites PHP

BibliothquesUne bibliothque est un chier unique rassemblant plusieurs l-

ments dun projet WebDev : des pages, des tats, etc. Il est pos-

sible de gnrer des bibliothques autonomes pouvant tre utili-

ses par dautres sites.

Gadgets Windows Vista/Windows 7Un gadget est une orme particulire de site web destin tre in-

tgr comme une mini-application sur le bureau de Windows Vistaou Windows 7. WebDev ournit en standard les lments nces-

saires pour crer en distribuer acilement de tels gadgets.

Composants externesLes composants externes sont des briques applicatives permet-

tant de partager une ou plusieurs onctionnalits spciques entre

direntes applications. Un composant gnr avec WinDev peut

galement tre utilis dans un projet WebDev ou WinDev Mobile.

WebservicesA partir dun projet WebDev, il est possible de gnrer un Webser-

vice (galement appel service Web XML). Un Webservice expose

un ensemble de onctions (gnralement une ou plusieurs collec-

tions de procdures). Il les rend accessibles travers le web (ou un

rseau priv) en utilisant les protocoles standard de communica-

tion HTTP et SOAP.

Remarque : Un Webservice doit tre dploy sur un Serveur dAp-

plication WebDev pour tre utilisable.



110/256

Sites spcifques iPhoneLes sites web destins tre vus sur le tlphone Apple iPhone

peuvent bncier denrichissements particuliers : splash screen

au lancement, mode plein cran, ... Ces onctionnalits les ont

ressembler de vritables applications. WebDev permet de para-

mtrer aisment toutes ces spcicits tout en prservant la com-

patibilit avec les autres navigateurs (mobiles ou non) du march.



111/256

Gnration PHP en pratique

1 Prsentation

WebDev permet de gnrer des sites PHP sanspour autant connatre le langage PHP. Le dve-loppement du site peut se aire compltement enWLangage, comme pour un site WebDev classique.Il est touteois possible de saisir votre propre codePHP (code serveur).

1.1 Quest-ce quun site PHP ?

Un site PHP est compil en PHP. Si ce site mani-pule une base de donnes, laccs cette basese era par un driver ODBC (MyODBC, ODBC pourOracle, ...) ou via laccs nati pour MySQL.Concernant le driver ODBC, il est spcique chaque base de donnes (et peut tre trouv sur lesite de lditeur de la base de donnes).Un site PHP est compos de pages ".php" et nces-site un moteur PHP pour tre lanc.Pour compiler (en PHP) un projet PHP avec WebDev,il est ncessaire dinstaller sur le poste de dve-

loppement un moteur PHP. De nombreux moteurs

PHP sont disponibles sur internet. Il est ncessaireden tlcharger un et de linstaller. Vous avez parexemple EasyPHP (http://www.easyphp.org/). Cemoteur est donn titre indicati et vous pouvezutiliser tout autre moteur PHP.Remarque : PHP 4.3.2 version minimale est n-cessaire. Une base de donnes MySQL est nces-saire. Les sites PHP gnrs avec WebDev peuventgalement tre utiliss avec des serveurs PHP ver-sion 5.

1.2 Pourquoi dvelopper un site PHP avecWebDev ?

Pour certains sites, surtout de petits sites, il peuttre pratique de dsirer raliser ces sites en PHPan de aciliter leur hbergement gratuit. Vous enavez dsormais la possibilit avec WebDev.Remarque : le nombre de onctions WLangage utili-sables dans un projet PHP est limit dans cette ver-sion. Ce nombre de onctions est amen crotrergulirement.

2 Fonctionnalits pour un projet PHP

2.1 Cration dun projet PHP

Pour crer un projet PHP, il sut dindiquer danslassistant de cration dun projet (option "Fichier ...Nouveau ... Projet") que vous voulez gnrer un sitedynamique PHP.Ds que le projet est congur comme un projetPHP, tous les outils WebDev disponibles sont auto-matiquement paramtrs pour le projet PHP :Le RAD PHP qui gnre du code PHP depuis un

projet pour de nombreuses onctionnalits deWebDev.

Le compilateur indique les onctions ou champsnon utilisables en PHP. Un message apparat enviolet dans le volet "Erreurs de compilation".

Le dploiement du site PHP via loutil WDDploie.

Remarque : il est conseill de crer un nouveauprojet WebDev pour dvelopper un site PHP pluttque de transormer un site WebDev en PHP.

2.2 RAD PHP

Comme sur tout projet associ une analyse, vouspouvez utiliser le RAD pour gnrer les pages devotre site.

Le RAD prend en compte toutes les spcicits dela gnration PHP (champs, traitements, onctionsutilisables dans un site PHP gnr depuis Web-Dev).

2.3 Test dun site PHP sous lditeur

Lors du test dun site PHP, le site est compil enPHP et lanc dans votre navigateur. Vous visualisezdirectement les pages PHP gnres par WebDev.Rappel : Un moteur PHP est ncessaire sur le postede dveloppement.

La compilation dun site PHP permet de :connatre les erreurs de programmation WLan-

gage



112/256

visualiser les champs, traitements, onctionsWLangage non disponibles en gnration PHP.Ces erreurs apparaissent en violet dans le volet"Erreurs de compilation".

Pour plus de dtails sur les lments WebDevnon disponibles dans un site PHP, consultezlaide en ligne.

2.4 Dployer un site PHPLe dploiement dun site PHP se ait de la mmemanire que pour un site statique. Lors de la cra-tion de la procdure dinstallation, WDDploie se

lance et vous assiste dans la mise en place devotre site PHP.Pour plus de dtails, consultez laide en ligne.



113/256


114/256


115/256

Centre de Suivide ProjetsLe Centre de Suivi de Projets permet aux dirents intervenants dun projet de grer leur

planning des tches. Ces tches peuvent tre lies des exigences, et correspondre

plusieurs projets.

Fonctionnement du Centre de Suivi de projets

Aprs avoir list lensemble des tches dun projet, le Centre de Suivi de Projets soccupede tout. La saisie du temps pass est quasi automatique, ne demande aucune action

spcique et ne gnre aucune contrainte particulire.

Lors de louverture du projet concern, le Centre de Suivi de Projets demande ou indique

la tche en cours. Ds quune tche est ralise, il sut dindiquer que cette tche est

termine et de spcier la nouvelle tche.

Une tche peut tre relie un lment du projet (page, tat, ...). Chaque ois que ll-

ment concern est ouvert, le temps pass sur cet lment est dcompt et mmoris

dans le Centre de suivi. Inversement, depuis la liste des tches, il est possible douvrir

automatiquement llment correspondant la tche que vous voulez raliser.

Chaque dveloppeur peut galement visualiser directement sa liste de tches dans le

volet "Centre de Suivi de Projets".



116/256

Gestion desrgles mtierWebDev permet de grer des rgles mtier. Une rgle mtier permet de dnir un mode

opratoire prcis ou de prciser un traitement particulier. Par exemple : le calcul dun

taux de TVA avec ses particularits, les rgles de changement de statut dun client ; la

ormule de calcul dun montant de rais de port, une commission commerciale, un taux

de remise, un coecient de vtust, ...

Une rgle mtier peut tre simple ou labore.

Les rgles mtier peuvent provenir :

du cahier des charges (correspondant aux

exigences).de suggestions aites par les utilisateurs de

lapplication.

Pendant le dveloppement, les rgles mtier dnies pour le projet sont aches direc-

tement dans le volet "Rgles mtier" de lenvironnement de dveloppement. Ce volet

prsente le nombre dlments du projet auxquels les rgles mtier sappliquent et le

pourcentage de rgle actuellement ralis.



117/256


118/256


119/256

RADRIDLe RAD (Rapid Application Development) et le RID (Rapid graphical Interace Design)

permettent de crer des pages partir :

de lanalyse lie au projet,

des patterns RAD standard ou personnaliss,

des gabarits.

En gnration RAD, les pages gnres contiennent tout le code ncessaire leur

onctionnement. Ces pages peuvent tre testes immdiatement, avec les donnes pr-

sentes sur le poste de dveloppement.

En gnration RID, les pages gnres contiennent uniquement les champs lis aux ru-briques de lanalyse. Tout le code ncessaire au onctionnement de ces pages reste la

charge du dveloppeur. Vous pouvez directement saisir votre code personnalis.

Partie 4 : Concepts avancs 119


120/256

Le modleUMLWebDev permet de crer ces neu types de modle UML :

Diagramme de classes : dcrit de manire gnrale la structure dun systme.

Diagramme de cas dutilisation : reprsente les onctionnalits du systme du point

de vue de lutilisateur.

Diagramme dobjet: reprsente un ensemble dobjets et leurs relations un mo-

ment donn.

Diagramme de composants : dcrit larchitecture physique et statique dune appli-

cation inormatique.

Diagramme dactivit : reprsente le comportement dune mthode ou le droule-

ment dun cas dutilisation. Diagramme de squences : reprsente lordre chronologique des messages envoys

et reus par un ensemble dobjets.

Diagramme de collaboration : prsente lorganisation structurelle des objets qui

envoient et reoivent des messages.

Diagramme dtats-transitions : prsente un automate tats nis.

Diagramme de dploiement: montre la rpartition des matriels (les nuds) utili-

ss dans un systme et lassociation des programmes excutables ces matriels.

120 Partie 4 : Concepts avancs


121/256


122/256


123/256


124/256


125/256


126/256


127/256

GroupwareutilisateurLe Groupware Utilisateur permet dinclure simplement une gestion des utilisateurs et de

leurs droits dans un site WebDev.

Deux types dutilisateurs sont pris en compte :

utilisateur simple, utilisant directement le site.

superviseur, pouvant congurer les utilisateurs et leurs droits.

Partie 4 : Concepts avancs 127


128/256

Le groupware utilisateur en pratique

1 Prsentation

Un site Intranet ou Internet ncessite la dnitiondu rle des dirents intervenants. Il est souventncessaire de prvoir dirents niveaux daccsselon les onctions de lutilisateur.En eet, tous les utilisateurs nont pas les mmesonctions, ni les mmes besoins. Leur domainedaction doit donc tre plus ou moins limit.Prenons un exemple simple : lors de la mise en

place dune gestion commerciale, lapplication pro-pose les onctionnalits suivantes :Consultation du tari,Modication du tari,Saisie des commandes,Saisie des clients.Selon lutilisateur les accs possibles sont di-rents. Quelques exemples :les secrtaires peuvent consulter le tari et crer

des commandes.

les commerciaux peuvent consulter le tari et ta-blir les commandes, grer de nouveaux clients.

les directeurs commerciaux ont accs toutesles options.

Pour grer ces niveaux daccs dans vos sitesWebDev, il sut dintgrer le groupware utilisateur votre site. Quelques clics de souris susent transormer une application classique en une ap-plication grant de nombreux niveaux daccs. Lamise en place est instantane.Lors de lexcution du site, le responsable pourracrer des utilisateurs (identis par leur login etleur mot de passe) et leur donner accs lune oulautre des onctionnalits du site.Remarque : le groupware utilisateur est disponibledans les sites dynamiques WebDev excuts sousWindows ou Linux. Le groupware utilisateur nestpas disponible dans les sites statiques, semi-dyna-miques, PHP, AWP ou Ajax.

2 Comment onctionne le groupware utilisateur ?

Un site utilisant le groupware utilisateur a deuxniveaux dutilisation :le niveau utilisateur.le niveau superviseur.

2.1 Le niveau utilisateur

Lutilisateur se connecte lapplication grce unepage de login et accde aux onctionnalits qui luisont autorises.Remarque : le groupware utilisateur peut permettrede se connecter en utilisant un annuaire LDAP.

2.2 Le niveau superviseur

Le superviseur se connecte lapplication parune page de login et accde un menu avanc luipermettant de congurer les utilisateurs et leursdroits, ou bien de lancer lapplication.

La page de conguration permet au superviseurde :lancer lapplication.congurer le groupware.

La conguration du groupware consiste crer desutilisateurs, des groupes, et dassocier des utilisa-teurs aux groupes, grer les droits de chaque uti-lisateur (ou groupe) sur chacune des pages du site.Les droits sont dnissables au niveau des optionsde menu, des groupes de champs et des champs.Le superviseur peut rendre ces lments griss,

inactis ou invisibles. Ces congurations sont prio-ritaires sur toute conguration eectue dans leprogramme.Pour plus de dtails sur la conguration dugroupware par le superviseur consultez le para-graphe "Paramtrer le site utilisant le groupwareutilisateur", page 130.

Remarque : Toutes les inormations concernantles utilisateurs et leurs droits sont stockes dansdes chiers de donnes au ormat HyperFileSQL.Les chiers de donnes concernant les utilisa-teurs peuvent tre communs plusieurs sites. Leschiers de donnes concernant les droits des utili-sateurs sur les direntes pages du site sont sp-ciques a

Documents

Autoformation_Webdev 17