WEBDEV - Concepts

Version 25 - (1) 03-2020 In which order should the guides be read?

WEBDEV is a powerful tool for developing Web sites that includes all the tools required for
developing and maintaining sites.

To quickly and efficiently learn how to use WEBDEV, we recommend that you proceed in the
following order:

1
Reading the “Concepts”
This guide presents the main concepts required to create a WEBDEV site. Some concepts
are followed by a “Practical” section that presents some features of the editor.

2
“Tutorial” (guide + exercises)
The tutorial provides a first “hands-on” approach to WEBDEV. It allows you to familiarize
yourself with the main editors of WEBDEV.

3
Test of examples
Check the different examples supplied with WEBDEV in the fields you are interested in
(e-business, directory, scheduling, ...).

Online help, accessible on http://doc.windev.com or installed with WEBDEV, allows you to

quickly find the syntax of a WLanguage function and to get help about the interface, ... For
each programming theme, you will find a description of the associated feature and the list of
corresponding WLanguage functions.

Remark: If a difference exists between the guides and the online help, follow the instructions
given in the online help.

Remember to visit the download section of www.windev.com on a regular basis to check

We hope you enjoy getting started with WEBDEV.
whether upgraded versions are available.

Email address of our Free Technical Support: [email protected].

This documentation is not contractually binding. Modifications may have been made to the
software since this guide was published. Please check the online help.

All product names or other trademarks mentioned in this publication are registered trademarks of their
respective owners.
© PC SOFT 2020: This publication may not be reproduced in part or in full without the express consent of
PC SOFT.

:
 3
 Organization of guide Summary
This guide presents the main concepts required to create a powerful WEBDEV site. Some concepts
are followed by a "Practical" section that presents some features of the editor.
Part 1 - Internet: main concepts
Therefore, two types of pages are included in this guide: What is a Web site?..............................................................................................................................................11
Static or dynamic site?.........................................................................................................................................12
The different types of dynamic sites....................................................................................................................13
The different types of pages................................................................................................................................14
Principle for displaying a dynamic WEBDEV site.................................................................................................18
Principle for displaying an AWP site.....................................................................................................................20
AJAX technology....................................................................................................................................................24
If you are already familiar with WINDEV..............................................................................................................27
Hardware and software requirements................................................................................................................28

Concept page Part 2 - Developing a site

Project and analysis............................................................................................................................................. 31
Development cycle of a site.................................................................................................................................34
I want to create a page in the editor.....................................................................................................................36
The following files are automatically created......................................................................................................37
Editing a page: zoning mode................................................................................................................................38
"Mobile friendly" site: Dynamic serving...............................................................................................................39
"Mobile friendly" site: Responsive Web Design...................................................................................................40
Internal page........................................................................................................................................................ 41
Page templates.....................................................................................................................................................42
Popup page...........................................................................................................................................................43
The different types of standard controls.............................................................................................................50
Repeating a group of controls: the loopers.........................................................................................................60
The two types of code...........................................................................................................................................61
WLanguage: a simple and powerful language....................................................................................................64
Sequence for running the code of buttons/links................................................................................................65
Upload: Sending files to the server......................................................................................................................67
Implementation page Control templates.................................................................................................................................................68
Thereports............................................................................................................................................................69
Report templates.................................................................................................................................................70
Different print modes........................................................................................................................................... 71
Displaying and sequencing pages.......................................................................................................................72
Performing a process on several successive pages........................................................................................... 76
Style sheets: to simplify the layout......................................................................................................................77
Site centered or anchored in width?....................................................................................................................78
Site SEO................................................................................................................................................................79

4 :  Introduction 5
:
 5
 Part 3 - Development environment The queries.........................................................................................................................................................178
The embedded queries......................................................................................................................................179
The WEBDEV editors............................................................................................................................................85 The Table/Looper control...................................................................................................................................180
Project dashboard................................................................................................................................................89 Retrieving data from a site.................................................................................................................................182
WEBDEV, WINDEV, WINDEV Mobile: 100% compatible.....................................................................................90 Universal replication..........................................................................................................................................187
Project configuration............................................................................................................................................91 3-tier architecture...............................................................................................................................................188
Multiple generation..............................................................................................................................................92
Source Code Manager (SCM)...............................................................................................................................93
Internal component............................................................................................................................................100 Part 6 - Running the test of a Web site
External component...........................................................................................................................................103
Generation modes.............................................................................................................................................111 Running a site test: The elements to test..........................................................................................................191
Project Monitoring Center..................................................................................................................................114 How to run a site test?........................................................................................................................................192
Managing requirements....................................................................................................................................115 The debugger......................................................................................................................................................194
Managing tasks..................................................................................................................................................116 When can I use the debugger?..........................................................................................................................195
Managing business rules...................................................................................................................................117

Part 7 - Deploying a Web site

Part 4 - Advanced concepts
Deploying a static site....................................................................................................................................... 205
RAD RID..............................................................................................................................................................121 Deploying a dynamic WEBDEV site....................................................................................................................207
UML model......................................................................................................................................................... 122 On-lining a dynamic WEBDEV site.....................................................................................................................211
User groupware................................................................................................................................................. 128
Multilingual sites................................................................................................................................................134
10 tips about ergonomics .................................................................................................................................138 Part 8 - Hosting WEBDEV sites
Overlaying the controls.......................................................................................................................................142
Customizing the aspect of a site: skin elements..............................................................................................143 What is the WEBDEV administrator used for....................................................................................................221
Choosing a type of button/link..........................................................................................................................145 Server configuration...........................................................................................................................................227
Preventing from going back to a page...............................................................................................................146 Dedicated server or shared server?................................................................................................................. 228
Security benefit: managing the "Back" button..................................................................................................147 Which type of server to choose?....................................................................................................................... 230
Cookies: information stored on the computer of Web user..............................................................................153 Hosting Control Center.......................................................................................................................................231
Protecting the access to the site: passwords....................................................................................................154 Dynamic site on specific configurations........................................................................................................... 232
TLS/SSL: Encrypting information on the Web...................................................................................................155 Traffic statistics of dynamic sites...................................................................................................................... 235
Secure payment with provider...........................................................................................................................156 Monitor your sites, servers, .............................................................................................................................. 236
Sending emails...................................................................................................................................................157

Part 9 - Appendices
Part 5 - Databases
WLanguage functions specific to WEBDEV 25................................................................................................ 239
Analysis: Database structure.............................................................................................................................161 Examples and components supplied with WEBDEV.........................................................................................249
The various types of accessible files.................................................................................................................170
HFSQL Classic....................................................................................................................................................172
HFSQL Client/Server..........................................................................................................................................173
HFSQL Client/Server clusters............................................................................................................................ 174
HFSQL: the physically created files....................................................................................................................175
Associate controls with data.............................................................................................................................. 176

6
6 :Introduction
 :
 7
 PART 1

Internet:
main concepts

8
8 :Summary

 What is a
Contenu
Web site?
A Web site is a set of HTML (HyperText Markup Language) pages stored on a Web server. These
HTML pages are organized for a specific purpose (present a company, sell products, ...).

A site is intended to be used by the Web users. The Web users are using a browser to access the
site.

WEBDEV allows you to easily create Web sites that manage (or not) the data.

Server

HTML page

Server at the
hosting company.
The Web user accesses The HTML pages
the site and displays the are stored on this
HTML pages via a browser. server.

10 Part 1: Internet: main concepts Part 1: Internet: main concepts 11

 Static or
Contenu
The different types of
Contenu
dynamic site? dynamic sites
Several types of sites can be created: A dynamic site is used to display pages whose content changes. In most cases, the content of
• static sites, these pages is linked to a database.
• dynamic sites. A dynamic site can be used to manage real-time travel bookings for example. These bookings are
saved in a data file and they can be displayed at any time.
The table below presents the differences between these types of sites: WEBDEV proposes two types of dynamic sites:
• dynamic WEBDEV site (in Session or AWP mode). This type of site requires a WEBDEV
Application Server on the server. It can be used to handle several databases.
Static site Dynamic site
• dynamic PHP site. This type of site requires a PHP engine on the server. This type of site is
The content of pages is fixed, it is defined once The data displayed in the pages changes. In recommended for the dynamic sites hosted by a public hosting company.
and for all. most cases, the pages are used to:
A static site cannot interact with the data. • perform processes and/or calculations by
programming.
• display the data stored in a database.
• display images and interactive text.
Dynamic site
WEBDEV offers several types of dynamic sites:
• WEBDEV site in Session mode.
• WEBDEV site in AWP mode.
• PHP site.
Static WEBDEV site: the WEBDEV Application Dynamic WEBDEV site: the WEBDEV
Server is not required. Application Server or the PHP language is Dynamic WEBDEV site PHP site
required.

Remark: A dynamic site can contain a static section (presentation of the company, etc.).

WEBDEV allows you to create:

• static pages,
• dynamic pages.

HFSQL ODBC OLE DB Native MySQL

connectors

Oracle Informix
SQL Server Progress
MySQL Sybase
DB2 Oracle Lite
XML AS/400...

12 Part 1: Internet: main concepts Part 1: Internet: main concepts 13

 The different types of
Contenu
pages
Principle of a static page

Development
Different types of pages can be used in the sites created with WEBDEV:
computer

DEVELOPMENT
• Static pages. This type of page is used to display fixed data.

• Dynamic WEBDEV pages in Session mode. These pages are used to dynamically display the
information found in a database. The content of the page depends on the displayed record.
When displaying a dynamic page in session mode, the associated page context is automatically
created on the server. This page context mainly contains the global variables and the variables
for positioning in the data files.

• Dynamic WEBDEV AWP pages (Active WEBDEV Page). These pages are used to dynamically
display the data found in a database. The content of the page depends on the displayed Create a static page in WEBDEV (“.WWH” file)
record.
An AWP page is a dynamic WEBDEV page without a context persisting on the server. The AWP
page context is temporary. It is created in a temporary session.
Server

DEPLOYMENT
• Dynamic PHP pages. These pages are used to dynamically display the data found in a
database. These pages can only be used in a PHP site.

The following pages present theses different types of pages.

HTML page

Computer of
the Web user

DISPLAY

Static page viewed in the browser

14 Part 1: Internet: main concepts Part 1: Internet: main concepts 15

 Principle of a dynamic page (Session or AWP) Principle of a PHP type page

Development Development
computer computer
DEVELOPMENT

DEVELOPMENT
Create a dynamic page Create a PHP page
in WEBDEV (“.WWH” file) in WEBDEV (“.WWH” file)

Server Server
DEPLOYMENT

DEPLOYMENT
HTML page WEBDEV engine Database PHP page MySQL database

Computer of Computer of
the Web user the Web user

DISPLAY
DISPLAY

Dynamic page in execution in the browser. PHP page in execution in the browser.
The data displayed in the pages depends on the The data displayed in the pages depends on the
operations performed by the Web user. operations performed by the Web user.

16 Part 1: Internet: main concepts Part 1: Internet: main concepts 17

 Principle for displaying a
Contenu
dynamic WEBDEV site Browser Time WEBDEV application
server

WEBDEV session

The WEBDEV session

The Web user connects to a
- Automatically create the WEBDEV session
dynamic WEBDEV site
The following operations are performed when displaying a WEBDEV page in Session mode: - Automatically create the context of Page 1

1. Request page display.

1

CONTEXT
2. Start WEBDEV engine. This engine will remain on the server until the end of application.
3. Create the application context. This context will remain on the server until the end of Display the Page 1 - Return Page 1

application.
4. The WEBDEV engine runs the server code and builds the HTML page (from the data found in
the database for example).
5. Once the HTML page is entirely built, the server transmits the result to the client (the browser).
The Web user clicks in Page 1
to display Page 2 - Automatically create the context of Page 2

The page contexts 1 2

CONTEXT

CONTEXT
A page context is automatically created on the server whenever a page displayed in the browser.
Display the Page 2 - Return Page 2
This page context contains all elements that have been required to build the page viewed by the
Web user:
• the global variables,
• the local variables,
• the server processes, The Web user clicks in Page N-1
to display Page N - Automatically create the context of Page N
• the connections to the databases,
1 2 N

CONTEXT

CONTEXT

CONTEXT
• the contexts of data files, ...

The page contexts remain in memory on the server until the end of the WEBDEV session. Display the Page N - Return Page N

If the same page is called several times:

• If PageDisplay is called to display the page, the page context is destroyed and re-created.
• If PageRefresh is called to display the page, the same page context is re-used.
Disconnect the Web user

Programming (close the browser)

The WEBDEV session and the page contexts are automatically managed by default. You don’t After the time-out (defined in the
WEBDEV administrator), the WEBDEV
need to program anything. session and the page contexts
are destroyed.

18 Part 1: Internet: main concepts Part 1: Internet: main concepts 19

 Principle for displaying
Contenu
an AWP site Browser WEBDEV application
server
Time
What is an AWP page?
The Web user connects to
- Create the temporary WEBDEV session
an AWP site
An AWP page (Active WEBDEV Page) is a dynamic WEBDEV page without persistent context on the
- Create the context of Page 1
server. The AWP page context is temporary. It is created in a temporary session.
1

CONTEXT
Reminder: In a WEBDEV site in Session mode, each displayed page owns a persistent page
context for the entire lifetime of the session on the server.
- Create the Web page
Display the Page 1 - Return the Web page to the Web user
- Free the context of Page 1
Operating mode of AWP sites - Delete the temporary session

The following elements are automatically created on the server when an AWP page is displayed in
the browser:
• a temporary session,
The Web user clicks in Page 1
- Create the temporary WEBDEV session
• a temporary AWP page context. to display Page 2
- Create the context of Page 2

The temporary session contains the temporary AWP page context. When the AWP page is sent
2

CONTEXT
to the Web user, the temporary page context and the temporary session are destroyed. There is
- Create the Web page
nothing left in memory on the server. Display the Page 2 - Return the Web page to the Web user
- Free the context of Page 2

The temporary AWP page context contains all elements that have been required to build the page - Delete the temporary session

viewed by the Web user:

• local variables,
• the server processes,
The Web user clicks in Page N-1
• database connections, to display Page N
- Create the temporary WEBDEV session

• contexts of data files, ... - Create the context of Page N

When the AWP page is sent to the Web user, these elements are destroyed.
N

CONTEXT
- Create the Web page
Display the Page N - Return the Web page to the Web user
- Free the context of Page N

- Delete the temporary session

Disconnect the Web user

(close the browser)

20 Part 1: Internet: main concepts Part 1: Internet: main concepts 21

 How to share information (values) between AWP pages?
Two methods are used to share information (values) between AWP pages: Browser WEBDEV application server
• Passing information in the URL. This method allows for a better referencing.
• Saving information in the AWP contexts (by programming). Time

The Web user connects to

- Create the temporary WEBDEV session Store the
an AWP site
Passing information (values) between two pages in the URL AWP context
- Create the context of Page 1 by programming
It is possible to pass information from one page to another via the URL. The URL has the following (global variables)

CONTEXT
format: "http:\\Web server\...\mypage.awp?NameParam1=Value1&NameParam2=Value2".
This method allows a better page referencing because the information passed in the URL is visible Display the Page 1
- Create the Web page
- Return the Web page to the Web user
and analyzed by the referencing robots. - Free the context of Page 1

- Delete the temporary session

Saving information (values) in the AWP contexts (by programming).

You have the ability to store on the server values common to several AWP pages, via the AWP
contexts. An AWP context is created on disk on the server. This context is available as long as AWP The Web user clicks in Page 1
- Create the temporary WEBDEV session
pages are displayed and as long as the timeout of AWP contexts is not exceeded. The timeout to display Page 2
- Create the context of Page 2
of AWP contexts is defined in the WEBDEV administrator ("Configuration" tab, "Timeout of AWP
contexts" option). 2

CONTEXT
To manage AWP contexts, you must use WLanguage functions such as DeclareAWPContext, - Create the Web page
Display the Page 2
FreeAWPContext, etc. - Return the Web page to the Web user
- Free the context of Page 2
See the online help for more details. - Delete the temporary session

The Web user clicks in Page N-1

- Create the temporary WEBDEV session
to display Page N
- Create the context of Page N

CONTEXT
- Create the Web page
Display the Page N - Return the Web page to the Web user
- Free the context of Page N

- Delete the temporary session

Disconnect the Web user

(close the browser)

After the time-out

of AWP contexts
(defined in the
WEBDEV
administrator),
the AWP context is
destroyed.

22 Part 1: Internet: main concepts Part 1: Internet: main concepts 23

 AJAX
Contenu
technology
Automatic and immediate AJAX
The diagram below presents the automatic and immediate use of AJAX in a WEBDEV site:

The AJAX technology is available in native mode in WEBDEV.

What is AJAX and what are its benefits ?

AJAX (Asynchronous Javascript and XML) is used to refresh the data modified in an HTML page
without having to redisplay the entire page. For example, if some elements found in the page
Browser 2 Web server
displayed (content of the cart, characteristics of a product, list of cities, map, etc.) are modified,
Send the request
only these elements will be refreshed. The server will not have to send the entire page to the
user’s computer.
1 Action

This technology presents several benefits: 3 Run the

request

5
• the server is less used. Therefore, it can support an important number of simultaneous AUTOMATIC update
connections. of modified elements
• the information that circulates is less bulky.
• the transmission time is shorted. 4
• the display is immediate and without visual effect for the Web user. Send the modified
elements only
AJAX can be used at two different levels in a WEBDEV site: For example, a site page is used to find out the different characteristics of a country (capital city,
• Automatic and immediate AJAX: a simple click allows you to access the AJAX features. The code currency, flag, location, etc.). The corresponding information is displayed according to the country
remains the same. selected by the Web user.
• Programmed AJAX: functions for AJAX management allow you to write complex processes.
Action performed by the Web user. In our example, the Web user selects the country
in the "Select a country" combo box.
Remark: Only sufficiently recent browsers support AJAX technology. AJAXAvailable is used to
determine if the AJAX technology is supported by the current browser. If a process that uses the Sending the query to the server.
AJAX technology is run on a browser that does not support this technology, the process is run "as
if" it did not use the AJAX technology (the entire page is refreshed for example).
Running the query: find the characteristics of selected country.

Sending the query result:

• without AJAX: the entire page is returned.
• with AJAX: the characteristics of selected country are returned.
Displaying the country characteristics:
• without AJAX: the entire page is redisplayed.
• with AJAX: the controls containing the country characteristics are
refreshed.

24 Part 1: Internet: main concepts Part 1: Internet: main concepts 25

 If you are already familiar
Contenu
with WINDEV
Programmed AJAX
The diagram below presents the use of "programmed AJAX" in a WEBDEV site:

Let’s see the main differences between WEBDEV and WINDEV:

• WEBDEV is used to create pages while WINDEV is used to create windows.

Browser Web server

• In WEBDEV, different types of code can be typed: a WLanguage code run on the server, a
WLanguage code run on the browser and a Javascript code run on the browser.
Ask to run When creating a PHP page, an additional code is displayed: a PHP code run on the server.
the procedure
• New WLanguage functions specific to the Web are available.

1 Action
2 3 Run the server
procedure
• Some WLanguage functions not relevant for the Web do not exist anymore.
• Some WLanguage functions can only be used in an executable process in server code.
• Some WLanguage functions can only be used in an executable process in browser code.
• New types of controls specifically designed for Web applications are available:
Send the • Formatted display control.
result only
• Java Applet control.

7 AUTOMATIC update
of modified elements 5 4 Generate the result:
XML document,
• Sliding Banner control.
• Navigation Bar control.

6
character string
• Captcha control.
• Cell control.
Analyze the result • Breadcrumb control.
• Web Component control.
• Flash control, Flex control.
Running a browser process (AJAXExecute or AJAXExecuteAsynchronous).
• Clickable Image control (Map Area).
• IFrame control.
Request for running a server procedure. • Link control.
• Line control.
Running the server procedure. • Internal Page control.
• Peeling Corner control.
• Site Map control.
Generating the result. The procedure result will be contained in a character string or • Popup control.
in an XML document.
• Pager control.
Sending the procedure result (RESULT). • Social Network control.
• SilverLight control.
• HTML Table control.
Examining the procedure result.
• Upload control.
• Thumbnail control.
Displaying the modified information. Only the necessary controls are refreshed. • Text Area control.
• Some types of controls without purpose on Internet are not available anymore: Scrollbar,
ActiveX, OLE Object, Spin, etc.

26 Part 1: Internet: main concepts Part 1: Internet: main concepts 27

 Hardware and software
Contenu PART 2
requirements
The Web user

• a computer: PC, Mac, Unix, Smartphone, ...

• a browser: Internet Explorer, Firefox, Chrome, ...
• an Internet (or Intranet) access
Developing
No module to download. This operating mode is fast and immediate.
a site
The server The development computer
• 1 server: PC • 1 computer: PC
• 1 server operating system • 1 operating system:
(Windows or Linux): Windows 2008 Windows Vista or later.
or later.
• 1 Web server software: • 1 Web server software:
IIS, Apache, ... IIS, Apache, ...

• 1 WEBDEV Application Server

or
• 1 PHP engine
(version 4.3.2 or later)
• 1 WEBDEV "Development"

• the site itself • the site currently developed

• the data * • the data (optional) *

(dynamic site only)

• at least one browser:

Internet Explorer, FireFox, Chrome, ...

* The data can be found on another computer linked via network.

28 Part 1: Internet: main concepts

 Project and
Contenu
analysis
The development of a Web site using WEBDEV is based on two main elements: the Project and
the Analysis.

A WEBDEV project is a set of elements: pages, reports, controls, classes, components, ... whose
combination allows you to build a Web site.

A WEBDEV analysis groups the description of the data files found in the site.

A site is built from a project.

In most cases, a project is associated with an analysis.
An analysis can be associated with one or more projects.

Project 1

Classes Style Pages and

sheet controls

Analysis

Project 2 Project n

Classes Style Pages and Classes Style Pages and

sheet controls sheet controls

30 Part 2: Developing a site Part 2: Developing a site 31

 The project in practice To display the dashboard of your project:
1. Display the popup menu of project in the bar of
"Project" pane, in the "Project" group, click "List of
elements".
opened documents. This option is used to:
2. Select "Display the dashboard". • add into your project elements belonging to
1  Overview See "Project dashboard", page 89 for more projects accessible from your computer. The
details. corresponding files will not be moved into the
directory of your project.
When describing a site, the first step consists in be asked in order for your project to match your
creating a project. expectations. All characteristics specified when 3.2 The project elements • delete elements from your project. The
creating the project can be modified later. corresponding files are not physically deleted.
When creating a project, several questions will The project includes pages, reports, queries, sets
of procedures, ... To quickly find an element in your project, press
"Ctrl + E" from any editor.
To find out the list of project elements, on the
2  Creating the project
To create a project: • the code style. This code style is used to 4  Operations performed on a project
1. Click on among the quick access buttons automatically prefix variables, names of
of WEBDEV. The window for creating a new controls, names of pages, etc. Let’s see the main operations that can be • Duplicate a project,
element is displayed: click "Project". The wizard for • the style book. performed on a project: • Copy or delete a project,
project creation starts. • the supported languages . These languages • Archive a project, • Rename a project.
2. Specify the different project options. The main will be proposed by default as soon as an • Restore a project, See the online help for more details.
options are as follows: option can be translated in a control, a
• the name and location. These options cannot window, a report, ...
be modified. The project corresponds to a 3. Specify whether the project is associated with 5  Project documentation
".WWP" file. All the objects associated with a database or not. If yes, it can be an existing
the project will be created in the specified database or a new one. WEBDEV allows you to print different displayed in the report viewer. You can:
directory. 4. Validate the wizard. The created project documentations that present all the elements of • start the print,
• the type of project generation. This option becomes the current project. the project (pages, reports, data files, items, etc.). • export the documentation in PDF format (via the
allows you to define the type of site generated To print these documentations: "Export" tab of the report viewer).
by the project: static site, dynamic WEBDEV Remarks: • on the "Home" pane, in the "General" group,
site (session mode or AWP), dynamic PHP See the online help for more details.
• If the creation of a database was requested, expand the icon and select "Print the
site, etc. project documentation". The documentation can 5.2 Print areas
the wizard for analysis creation is automatically
• the creation mode of the project. You can started. contain all project characteristics.
create a blank project or a project based on If graphical representations (LDM, UML diagrams,
• The specified information can be modified in the • on the "Home" pane, in the "General" group,
an existing example (Application RAD). etc.) must be printed, the print areas must be
project description. To display the description click . In this case, the documentation
configured before printing the documentation.
• whether the project will be used by several window of project, on the "Project" pane, in the contains the characteristics of the current
developers. You have the ability to use the element (page, report, query, ...). To specify the print areas of current graphic
"Project" group, click "Description". representation:
source code manager (SCM) to share the
project. 5.1 Type of documentation 1. On the "Display" pane, in the "Edit" group, check
Several types of documentation are proposed: "Print areas". Borders representing the areas that
can be printed in the documentation are displayed
3  Dashboard and project elements • Overall: Contains basic information about the in the current editor.
project elements.
2. Reduce the display of graphic representation
• Code: Contains all the processes of all the ("Zoom" option of "Display" pane or Ctrl + Mouse
3.1 Dashboard The dashboard gives an answer to all these wishes. project objects and procedures.
The dashboard proposes different indicators called wheel) to see the entire graph.
Any project manager would like to have a global • Full documentation: Contains all project 3. With the mouse:
"Widgets". These Widgets can be configured by the information. This type of documentation can be
and synthetic view of the status of his projects.
user: you have the ability to add or delete some, very large. • move these borders to the requested location
Any quality manager would like to know the number and to resize them. by keeping the mouse button down (the
of critical bugs and follow their status. • Custom: Corresponds to a selection of mouse cursor is black).
The product manager would like to know what new You can for example display the project statistics information to print.
(number of pages, ...), the result of different audits • choose the number of pages on which the
features are requested by the users. Edit mode of the documentation graphic representation must be printed (the
(static audit, dynamic audit, ...), ...
The developer wants to quickly start the most The documentation can be printed on the selected mouse cursor turns into a North-West/South-
common project elements, sections of code, ... printer. When printing, the documentation is East double arrow).

32 Part 2: Developing a site Part 2: Developing a site 33

 Development cycle of a
Contenu
site
WEBDEV covers the entire development cycle of a site:

Test and
Design Development generation Deployment

Deploy the site

Test and debug
on a WEBDEV
Specifications Create the project of the site Application Server

Site generation:
Final test
- WEBDEV site
UML modeling Create the analysis - AWP site
- PHP site
Open the site
- Webservice
to the users
Import of Development
existing files - Project RAD
- Page RAD
- Queries
- Reports
- Input of source code

Details of different steps: Test and generation step: WEBDEV offers several automated test tools to guarantee the reliability
of applications and make sure that no regression occurs during the development step.
Design step: A site can be designed from specific requirements, from UML modeling of processes
or even from existing data files. Deployment step: A dynamic WEBDEV site (in Session or AWP mode) is deployed on a WEBDEV
Application Server. When the site is deployed, it is possible to run the last tests before
Development step: The project and the analysis are created via specific wizards. The development making the site available to the users.
can be done in RAD mode (Rapid Development Application) with automatic generation of code
and UI or it can result from the manual creation of project elements.

34 Part 2: Developing a site Part 2: Developing a site 35

 I want to create a page in
Contenu
The following files are
Contenu
the editor... automatically created
The following steps are required to create a page with WEBDEV:
Available types of pages
Creating a page in the WEBDEV page editor.

Dynamic Semi-dynamic Static AWP PHP

WEBDEV WEBDEV WEBDEV page page
page page page

Source file of pages in WEBDEV format (.WWH)

Generic
HTML .HTM .HTM .AWP .PHP
WDL

Entering code (optional step). Generated files

Legend:

.WWP: Source format of pages .WDL: Project library

This file contains the full page description The library, which is generated when the
(control, browser code and server code). This WEBDEV site deployed (in Session or AWP
file is used by the editor and it remains on the mode), contains the server code of the project
development computer. pages. This file will be found on the server.
Browser code
.HTML Generic .AWP: AWP page
This file contains the full page description This file is generated from the WWH file and it
(control, browser code and server code). contains the description of controls, the server
Some parameters of this page are generic code, the browser code. This file will be found
parameters and they will be filled dynamically on the server.
when displaying the page.
.HTM: HTML page of site .PHP: PHP page
This file is generated from the WWH file and it This file is generated from the WWH file and it
Server code contains the description of controls in HTML contains the description of controls, the server
Saving the page. and the browser code (if the code was typed code, the browser code in PHP format. This file
in WLanguage, it is automatically translated will be found on the server.
into Javascript). This file will be found on the
server.

36 Part 2: Developing a site Part 2: Developing a site 37

 Editing a page: zoning
Contenu
"Mobile friendly" site:
Contenu
mode Dynamic serving
Editing a page in zoning mode is easy and powerful: all you have to do is split the page into "zones" "Dynamic serving" is a technique where the same address (URL) leads to 2 different pages: a page
via the "Pencil" tool. These areas are automatically configured and they allow you to define the for PC and a page for mobile.
page architecture: header, footer, ... The proper page will be displayed according to the device (PC or mobile) that accesses the page.
These areas can easily be handled in the editor: increasing the header height automatically moves It is an alternative (of even complementary) to "Responsive Web Design" to make a standard site
the page body. "mobile friendly". With "Dynamic serving", no need to modify the existing pages: all you have to do
is add some for the mobile devices.
This technique benefits from a great referencing by Google.

http://mysite.com/mypage

same URL
but different
pages

During the print, the relative position of controls found in each area is respected as well as their
anchor. Computer Mobile

Principle
The site includes 2 sets of pages: the pages for computer and the pages for mobile device. These
pages are associated 2 by 2.
When the page address is typed in the browser, the environment used is automatically detected
and the corresponding page (computer or mobile device) is displayed in the browser. The address
displayed in the browser does not change: only the content displayed is adapted to the system.
All the links and the pages opened in the code are automatically redirected to the corresponding
page in the current platform.
Remarks:
• The detection of the environment is performed according to the Google recommendations: the
A semantic HTML 5 information can be associated with each area: this improves the relevance of tablets are not considered as being mobile devices.
referencing by some search engines. • The pages are identified by Google as being in "Dynamic serving" mode. Therefore, the different
page versions are optimized. If the mobile pages are developed properly, the site is considered
as being "Mobile friendly".

38 Part 2: Developing a site Part 2: Developing a site 39

 "Mobile friendly" site:
Contenu
Internal
Contenu
Responsive Web Design page
The Web sites can be viewed on several platforms: mobiles, tablets, PCs, ... The browser size The Internal Page control is used to include a page (and its code) in another page. At run time, the
changes on each device as well as the space used to display data. internal page will be dynamically merged to the host page.
The "Responsive Web Design" method consists in creating a single page that automatically adapts
according to the platform used. 1. Creating an internal page
Method used An internal page is a specific page that includes no title bar and no menu.
All types of controls can be used in this page.
WEBDEV is using the "Desktop first" method: the developer must create the interface of his Web
site in "Desktop" mode. Then, he will create the version in "Tablet" mode and finally he will create
the version in "Mobile" mode.

Mobile
Tablet

Desktop In the example, an internal page is used to manage the basket.

During the design step, it means that a Web site is developed for a "desktop" use first. When
reducing the display resolutions (page size), the content and the features are moved, resized or 2. Using an internal page
hidden.
In the WEBDEV editor, the representation of different resolutions is performed via slices. A slice To use an internal page, you must:
represents a browser size for a specific device. WEBDEV includes 3 slices: create an Internal Page control.
• The Mobile slice corresponding to smartphone devices. in the control description, select the internal page to use and validate.
• The Tablet slice corresponding to tablet devices.
• The Desktop slice corresponding to devices such as PC, MAC, etc.

Example

Remarks:
• The internal page used in the "Internal page" control cannot be modified by programming.
Mobile Tablet Desktop
• The host area is rectangular and no overload is allowed. To perform overloads, we recommend
that you use the control templates.

40 Part 2: Developing a site Part 2: Developing a site 41

 Page
Contenu
Popup
Contenu
templates page
WEBDEV allows you to create page templates. A template is intended to contain the elements WEBDEV allows you to create Popup pages. The Popup pages are used to communicate with the
common to a set of site pages. user in a simplified way.
The modifications performed in a page template are automatically applied to all the pages that A Popup page is associated with a page. A page can have several Popup pages.
use this template. Using Popups allows you to handle the dialog window in the editor like a different element of the
A page template allows you to comply with the style book defined for a site. page, while being included in the page.
In the editor:

Definition of a page template.

The template is displayed in an
orange frame in the editor.

During runtime:

Using the template in several pages.

The elements belonging to the template are identified by a yellow square.

To create a page based on a template, select the template that will be used when creating the
page.
Remark: The programming associated with the template elements can be performed in the
template directly.
The characteristics of elements can be dissociated from the template. For example, dissociating
the position of a template control to position the control somewhere else while keeping the other
evolutions performed on the control (code, style, ...). We talk of inheritance. In this case, the
elements are identified by a blue square.

42 Part 2: Developing a site Part 2: Developing a site 43

 Pages in practice • the "RAD" tab is used to create RAD pages
that allow data display and input. This type of
1.3 Creating the project pages by automatic
site building (R.A.D.)
page can be based on a data file, on a query,
The purpose of a page is to display, consult and For more details on how to manipulate the controls etc. For dynamic sites (Session, AWP, or PHP), the
enter information. This information can come from on a page, see "The controls in practice", page project pages can be automatically created in a
• the "RID" tab is used to create RID pages single operation from the analysis description, by
the data files found in an analysis, external files, 54. that allow data input. Only the interface of
queries, etc. automatic site building (RAD).
This chapter presents the following topics: the page will be generated. The programming
WEBDEV proposes several solutions for creating must be done by the developer. See the online help for more details.
• "Creating a page", page 44.
the project pages: • "Simple operations performed on a page", page 3. Depending on the selected type of page, enter To create the dynamic site by R.A.D.:
• Create a blank page with the wizard. 45. the requested information in the different steps of 1. On the "Project" pane, in the "Generation"
• Build all the site pages from the analysis • "Main characteristics of a page", page 45. the wizard. group, click "Full Application RAD".
description. • "Internal page", page 46. 4. Validate the page creation. Caution: To use this option, the project must be
• Create a page from the analysis description (with 5. The window for saving an element appears associated with an analysis that was generated at
• "Page templates", page 46.
or without its code). automatically. Specify the page title and its name, least one.
• "Popup page", page 46.
• Create pages based on a template, etc. then validate. 2. Select the RAD pattern to use.
• "Refreshing a Session page", page 46.
Regardless of the method used, the page can be 3. Select the data files used for the generation.
modified after its creation: you have the ability to • "Opening a page in a WEBDEV site", page 47.
4. Select the main data files that will be the entry
add, modify or delete controls and to modify the • "Events associated with pages", page 48. points in the application (these data files will be
page characteristics. • "The menus", page 48. mainly used to implement the menu options).
5. Validate the creation of your site by RAD.
1  Creating a page
2  Simple operations performed on a page
WEBDEV proposes several methods for creating a Remarks:
page: • By default, the page created corresponds to The page editor allows you to perform the following • Save and copy a page.
• Creating blank pages. the active type of site (static, Session, AWP or operations on the pages: • Import and export a page.
• Creating preset pages. PHP). The type of page can be modified in the • Open a page in the editor: All you have to do • Modify the tab order.
• Creating pages via the project RAD. description window of the page. See "Main is double-click the page name displayed in the
characteristics of a page", page 45 for more See the online help for more details.
Remark: The main characteristics of pages are "Project explorer" pane.
details.
presented in the online help.
• The different types of controls are presented in
1.1 Creating blank pages "The different types of standard controls", page 3  Main characteristics of a page
50.
To create a blank page:
1. Click on among the quick access buttons 1.2 Creating preset pages A page can accept all types of controls. A page can: • include a status bar: this status bar will display
of WEBDEV. The window for creating a new • include a background image: this image is the help message associated with the different
To create a preset page: page controls. See the online help for more
element is displayed: click "Page" then "Page". The displayed in page background and the controls
wizard for page creation starts. 1. Click on among the quick access buttons are superimposed on this image. details.
of WEBDEV. The window for creating a new • be multilingual: all the languages defined for
2. Choose the "blank" type. • include a menu: this menu allows the Web
element is displayed: click "Page" then "Page". The the page will be available for all page controls.
3. Specify whether the blank page should be users to quickly access the main site features.
wizard for page creation starts. A page can be associated with more languages
created in Responsive Web Design mode. To create a drop-down menu in a page, all you
2. In the tabs, choose the type of page to create: have to do is use a "Menu" control. The first two than the project (pages shared between several
4. Validate the creation of the page. A blank page • the "Standard" tab allows you to create: projects for example). See "Multilingual
options are displayed in the page. The options
is created. sites", page 134 for more details.
• a blank page without any controls. can be handled via the popup menu of options.
5. The save window is automatically displayed. Then, the menu options can be handled by
• a blank page based on a page template, if Remark: Web pages intended to be viewed on
6. Specify the page title and its name. The page the project contains a page template. programming. the Apple iPhone phone may benefit from special
corresponds to a ".WWH" file. By default, this file
• a page based on a predefined template. enhancements: splash screen at launch, full
will be created in the main project directory. This
• the "Internal page" tab is used to create screen mode, ... These features make them look
name will be used to handle the page.
internal pages. like real applications. WEBDEV allows you to easily
7. Validate the save window. configure these specific features while keeping the
8. Create the controls in the page. • the "’ Error pages"’ tab allows you to create
compatibility with the other browsers (mobile or
pages to customize the errors displayed on
not) found on the market.
the site.

44 Part 2: Developing a site Part 2: Developing a site 45

 4  Internal page 8  The page contexts

The internal pages are used to dynamically share a This interface is used in the different pages of your
section of interface inside one or more sites. site via the "Internal page" control. 8.1 Overview 8.2 Automatic operating mode
The interface that must be used several times is Remark: The page to merge can come from a In a Windows application, the information relative By default, WEBDEV automatically manages the
created in an "Internal Page" page. component. to a window is stored with the window. contexts of pages in Session mode:
See the online help for more details. In a WEBDEV site in Session mode, a page context • A page context is opened when the Session
exists on the server for each page displayed on the page is displayed in the browser
browser of the Web user. • The context of a page is updated according to
5  Page templates The page context groups the information about the the information typed by the Web user in the
page: browser. This update is performed during the
WEBDEV allows you to create page templates. • simplify the layout of site pages. • content of controls, page validation (via a "Submit" button or with
These templates contain the graphic elements and • local variables, PageSubmit).
• simplify the update of style book defined for the
the code common to all the pages of your site. site. • global variables, • The existing page contexts are closed
The modifications performed in a page template when PageUse is used. The page context
The method for creating a page template is similar • WLanguage "server" code, etc. corresponding to the page to display with this
are automatically applied to all the pages that use to the method for creating a page. To create a page
this template. function is then opened.
via a template, all you have to do is choose the
A page template allows you to comply with the style "based on a template" option. Remark: WEBDEV allows you to perform an
book defined for a site. advanced management of contexts via the
By default, any modification performed in the ContextXXX functions. See the online help for more
Using page templates in your sites allows you to: template is applied to the pages that is using details.
• simplify the creation of site pages. it. However, special cases can be managed in a
specific page by overloading the template elements.
See the online help for more details. 9  Opening a page in a WEBDEV site

6  Popup page 9.1 Overview 9.3 Opening a page by programming

Several methods can be used to open a new page Several WLanguage functions can be used to open
WEBDEV allows you to create popup pages. These • ask to confirm a deletion, in a WEBDEV site: a page.
popup pages allow you to communicate with the • ... • from the description of the control that must • PageRefresh: Refreshes the page displayed
Web user. A Popup page can be used to: To open a popup page from another page, you can open the page (button, link, menu, etc.), according to its context.
• request the input of information (SMTP use the browser function PopupDisplay. • by programming in WLanguage. • PageDisplay: Opens and displays a new page in
parameters for sending emails, new address, See the online help for more details. the browser of the Web user.
etc), 9.2 Opening a page from a control • PageDisplayDialog: Opens and displays a new
description page modally in the user’s browser.
7  Refreshing a Session page When describing a button, a link or a clickable • PageUse: Closes all current pages (and their
image, you have the ability to define the action contexts) and opens a new page.
performed as well as the destination of this action. • PopupDisplay: Displays a popup in the page.
7.1 Overview 7.2 Implementation To open a page "xxx" from a button, a link, an
image, ...: When opening the page, you have the ability to
Refreshing a page consists in re-displaying a page To refresh a page, simply use PageRefresh. pass parameters to the page. See the online help
1. Display the element description ("Description"
that is already opened in the browser. This action When refreshing a page, the following operations for more details.
from the popup menu of element).
is identical to the use of the "Refresh" button in the are performed automatically:
browser. 2. In the "Action" area, select the type of action: Remark: By default, when opening a page by
1. Checking the existence of the page context on "Display the xxx page". programming, the selected target is:
When refreshing a page, the dynamic data found in the server.
the page is updated according to the page context 3. Select the destination of action: current page, • the target defined in the description of object
2. Re-displaying the page according to its context current browser, ... (specific frame for a frameset). that triggers the page opening (button, link, etc.).
found on the server. Only the modified data is re- found on the server.
displayed. The action that was previously selected will be • the target defined for the current page.
Using PageDisplay to refresh a page is not performed in this destination.
For example, when entering an order in a sales recommended because it takes longer to load the
application, the page that displays the summary of 4. Validate.
page.
the order (the basket) is refreshed whenever a new
item is ordered.
46 Part 2: Developing a site Part 2: Developing a site 47
 10  Events associated with pages 12  The menu options

10.1 Events managed by default 10.2 Optional events 12.1 Overview • Add a sub-menu,

WEBDEV manages the following events by default Several optional events can be managed. A menu includes one or more options and sub- • Delete a menu option.
(in order of appearance in the code editor): To manage an optional event, you must: options. Each option is used to run a WLanguage The options can also be handled in the window
• Global declarations (server code): code. editor and their characteristics can be modified via
1. Display the code window of the page.
Declaring the variables global to the page. This To handle the menu options, all you have to do is a description window.
2. Click "Add other events to the page", at the
is the first code run when the page is opened. edit the relevant menu. The description window of menu options allows you
bottom of the list of events. The optional events
• Initialization (server code): To edit (or display in the editor) the main menu of to:
window appears.
Run when opening the page. The initialization a page: • modify the option caption,
3. Select the optional event to add and validate.
event of the page controls is run before this 1. Open the relevant page in WEBDEV. • check or uncheck a menu option,
code. 4. The selected event is automatically added after
the default events. 2. Click the menu twice: a yellow border appears. • associate an image with a menu option,
• Load (onload) page (browser code): • associate a keyboard shortcut with a menu
Browser code run when the page is displayed in You can manage, for example: 12.2 Handling the menu options in the editor option.
the browser. • the control rollover with the mouse, The page editor allows you to easily perform the You also have the ability to associate a WLanguage
• Unload the page (browser code): • the left mouse button down, up, with double following operations: code with a menu option. Only the menu options
Browser code run when a new page is displayed click, without sub-menu can start a WLanguage process.
• Add a menu option,
in the browser. • the right mouse button down, up, with double • Add a separator, See the online help for more details.
• Page synchronization (server code): click,
Server code used to manage the page • the mouse wheel, etc.
synchronization when clicking the browser
"Back" button.
• Closing the page (server code):
Run when closing the page.
• Assigning the ..Value property (internal page
only)
Executed when using the ..Value property when
assigning values on the Internal Page control.
• Retrieving the ..Value property (internal page
only)
Executed when using the ..Value property in
read mode on the Internal Page control.

11  The menus

WEBDEV allows you to create a menu in your WEBDEV allows you to:
HTML pages. This menu can be oriented vertically • Create a main menu,
or horizontally. From the different options of this • Edit a main menu,
menu, you can:
• Delete a main menu.
• display pages,
See the online help for more details.
• run the code of buttons found in the page,
• ...

48 Part 2: Developing a site Part 2: Developing a site 49

 The different types of
Contenu
standard controls Display a graphic image (photo, ...).

Image control,
Clickable Image control
You want to... Use ...
Display a text, a title, ...

Static control Use a Java applet (clock, ...). Java control

Display the file content in a table (list of Browsing Table control or memory Table control,
customers, order details, ...).
Browsing Looper control or memory Looper
Propose a caption with a specific layout control
Rich Text Area control
(images, links, ...).
Display an image refreshed on a regular basis. Web Camera control
Define a color area. Cell control,
Repeat controls in a page (product catalog
HTML table with photo, ...).
Display a price, a quantity, an address, a date,
Formatted display control
a time, ...
Select a value from a list (country, city, color,
...).
Looper control

Radio Button control,

Combo Box control,
List Box control

Type information.

Select several values from a list (message Check Box control,

recipients, files to download, etc.).
List Box control
Display an animation (animated Gif). Image control Edit control
Display a page according to the area that was
Clickable Image control
clicked in an image.
Display a Flash animation. Flash control
Use existing HTML code. HTML control

Display information via a hierarchical order

TreeView control
(directory content, ...).
Align controls (HTML table). Cell control, HTML Table

50 Part 2: Developing a site Part 2: Developing a site 51

 Program an action in a page (display a page, Button control, Display an automatic menu (that is built while
Breadcrumb control
validate an input, ...). the site is browsed).
Link control
Allow the Web user to give or view a rate.
Display a video. Video control
Display a page from another site in one of your
IFrame control
pages.
Select and display a date on a calendar. Rating control

Calendar control
Display thumbnails. Thumbnail control
Display a set of images in gallery format. Gallery Looper control
Display Flex files. Flex control
Include SilverLight controls. SilverLight control
Display the appointments in scheduler or Expand/Collapse a display area Drawer control
organizer format.
Upload one or more files.

Upload control
Scheduler control,
Organizer control

Display several contents successively. Sliding Banner control

Display the dashboard displaying various
information in thumbnail format.

Display a Column chart, a Line chart, a Pie Dashboard control

chart.

Chart control
Display a list of objects as a scrolling horizontal
Linear Looper control
list.
Use external resources available on Internet
(Angular JS components, Bootstrap snippets, Web Component control
...).
Display a page from your site inside one of Create a visual effect in a page by presenting
Internal page Peeling Corner control
your pages. an image partially covered by another one.

52 Part 2: Developing a site Part 2: Developing a site 53

 The controls in practice 2  Characteristics of a control

WEBDEV proposes several types of controls the WEBDEV ribbon. The description window can be displayed for all • Drag and Drop, ...
that can be easily included in your pages. These All controls can be handled by programming. page controls. This window includes several tabs The content of this tab depends on the type of
controls can be created via the "Creation" pane of that group the configurable characteristics of one current control.
or more controls.
Remark: You also have the ability to see and/or Link tab
1  Creating a control modify the characteristics of one or more controls The "Link" tab is used to select the item (from a
in the modifier. See the online help for more details. data file or a view) to with the control is linked.
The following controls are available in the page • TreeView control, • Line control, Depending on the current record, the content of
2.1 Displaying the characteristics linked item will be displayed in the control.
editor of WEBDEV: • Dashboard control, • "Web component"
control. To display the description window of a control: The link can be single-file or multifile.
• Static control, • Scheduler control, • Organizer control,
• Layout control. • double-click the control. Content tab
• Text Area control, • Calendar control,
• select "Description" from the popup menu of The "Content" tab is available for page controls
• Formatted display • Chart control,
control (right mouse click).
control, • Bar Code control, 1.1 Creating a new control only.
• select the control and press Alt + Enter. The "Content" tab is used to define:
• Button control, • Progress Bar
To create a control: Remarks: • the initial content of control (for the edit controls
• Link control, control,
1. Select the type of control to create using the • The description window can be displayed for a only).
• Image control, • Cell control,
corresponding icon in the "Creation" pane of the set of selected controls. Only the characteristics • the data source used to fill the control (for List
• Clickable Image • Popup control, WEBDEV menu.
control, common to the selected controls will be box, Combo Box and Table controls only).
• Drawer control, 2. The shape of new control appears under the displayed.
• Thumbnail control, • Scrolling Banner mouse cursor. Note/Help tab
• Several description windows can be displayed
• Peeling Corner control, 3. Click the position where the control will be The "Note/Help" tab is used to:
at the same time. Each description window
control, • Tab control, created in the page. The control is automatically • describe the operating mode of control. This
displays the characteristics of one or more
• Video control, • Internal Page created. controls. information will be printed in the program
• Web Camera control, Remark: Other creation modes are available. See documentation (project documentation, page
control, • Control Template the online help for more details. 2.2 Characteristics by tab documentation, ...).
• Edit control, control, This paragraph presents the different categories of • configure all types of help associated with the
1.2 Creating a control associated with an control. A control can have:
• Combo Box control, • Supercontrol, characteristics displayed by each tab.
item
• List Box control, • HTML Table control, See the online help for more details. • A tooltip, displayed when the control is
Except for the following controls, all page controls hovered by the mouse cursor.
• Rating control, • Menu,
can be associated with an item found in a data file: General tab • A help message, displayed in the status bar
• Captcha control, • Pager control,
• Button control, • "Web component" The "General" tab is used to specify the control when the control takes focus.
• Radio Button • Site Map control, name and all display characteristics of control
control, • Tab control control
• Site Map Path (caption, input mask, ...). Advanced tab
• Check Box control, control, • Line control • Flash control
The "Advanced" tab is used to enter the HTML code
• Slider control, • HTML control, • HTML control • Pager control UI tab generated before and after the control.
• Looper control, • IFrame control, • Java Applet control • Cell control and The "UI" tab is used to define the parameters of
HTML Table control control interface: Style tab
• Linear Looper • Flash control,
• Site Map control • Initial status of control when opening the page, The "Style" tab is used to define the style of
control, • Flex control,
• Visibility of control, different control elements. This screen is used to:
• Image gallery • Silverlight control, Several methods can be used to create a control
• Size of control, • Modify the control aspect: all you have to do is
Looper control, • Java Applet control, associated with an item (or to retrieve an item):
select the control element to modify, then its
• Table control, • Drag and Drop from the "Analysis" pane. • Anchoring, ...
style characteristics. Only the aspect of current
• TreeView Table • Via the "File" tab in the description window of Details tab control is modified.
control, control. • Create or modify a style.
The "Details" tab is used to define the different
control parameters: • Choose a style.
• input parameters,

54 Part 2: Developing a site Part 2: Developing a site 55

 3  Handling controls in the editor 4.2 Snap-on grid When using the custom alignment, you have the
ability to define:
The snap-on grid is used to place vertical and
horizontal markers in the page. The created • the horizontal or vertical alignment: the controls
3.1 The handles of controls cannot be modified. controls are attracted to these markers, as if the that can be aligned to left according to the start
controls and the markers were magnetic. The snap- of control or to the start of input area. They can
When a control was just created or when it is • The gray handles indicate the first selected
on grid is used to align the controls according to also be aligned to right according to the end of
selected, it is displayed with handles. The handles control during a multiple selection. This control
the markers. control or to the end of input area.
are used to: will be the reference control.
• the regular spacing: the spacing between
• view the size of a control, 3.2 Available operations 4.3 Real-time interface checker controls is adapted in order to be the same
• modify the size of a control. between each control (horizontally or vertically).
The page editor is used to: When a control is moved in a page, guides are
The colors of handles are used to identify the automatically displayed by the real-time interface • the size: the size of selected controls is
actions that can be performed: • Select one or more controls (with the lasso for automatically adapted in order for the controls
example). checker. The objects snap to the guides, allowing
• The black handles are used to view and resize you to align the moved control with the other to have the same height and/or the same width.
a control. • Group selected controls. • the reference control: for the alignment and the
controls found in the page.
• The white handles can only be used to see a • Move a control. size of controls, the reference control can be:
control. For example, when selecting several • Modify the control caption. 4.4 Advanced interface checker • the first selected control,
controls, the white handles indicate that the • Display an advanced tooltip when hovering a The advanced interface checker is a tool used to • the last selected control,
selected controls cannot be resized. control. This tooltip contains: the control name, standardize the layout of controls in the different • the largest selected control,
This type of handles is also displayed when a its position, its size, its initial status (if the site pages.
page is read-only for the developer: the controls control is invisible). • the control found in the most top left position
The advanced interface checker proposes to apply, of selected controls.
to the current page or to the selected controls,
4  Aligning the controls the presentation rules issued from the Windows 4.6 The configurable zoom
standard: alignment of controls, standardization of
A zoom factor can be specified to reduce or enlarge
button sizes, ...
the display of the current page.
The alignment of controls allows you to create Displaying the rulers
"professional" and outstanding interfaces. Several To display the rulers, on the "Display" pane, in the
4.5 The alignment options To specify a precise zoom factor, you can:
WEBDEV tools can be used to create standard "Help for edit" group, check "Rulers". Two types of To align several controls, WEBDEV proposes: • on the "Display" pane, in the "Help for edit"
interfaces: guides can be used: group, specify the requested zoom factor.
• a preset alignment (available on the "Alignment"
• the rulers. • the guides, used to align and organize the pane or on the "Modification" pane, in the • enter the requested zoom factor in the status
• the grid. controls inside the pages. "Alignment" group). bar of the editor (bottom right).
• the real-time interface checker (automatically • the border guides, used to define a border of • a custom alignment (available on the • press the Ctrl key and change the zoom factor
proposed when positioning a control). identical size on each side of the page. "Alignment" pane, in the "Other alignments" with the mouse wheel while holding down the
group). The custom alignment allows you to use Ctrl key.
• the advanced interface checker. Remark: To see the page with or without its guides,
• the alignment options. specific alignment properties.
select "Show guides" from the popup menu of
• the customizable zoom. rulers. Visible or not, the guides are always enabled:
any control moved toward a marker is automatically
4.1 The rulers snapped by it.
The alignment rulers can be displayed in the page Handling markers
editor.
The markers can be easily handled with the mouse
These rulers have snap-on guides: any control that in the editor. When a marker is hovered by the
comes close to a guide is automatically "snapped" mouse, the cursor turns into a double arrow.
by it. This feature allows you to easily position, align
or resize the controls found in a page.

56 Part 2: Developing a site Part 2: Developing a site 57

 5  Options for editing the controls in a page Three types of anchoring can be defined: • anchor in height: allows you to define the
• position anchoring: allows you to define the height behavior of the control when resizing.
position of the control when resizing. The control can:
These display options are used to customize the • the options for control selection. • keep its height,
operations performed on the controls in the page These display options are used to customize • adapt to content,
editor. the operations performed on the controls in the
• change along with the browser.
The edit options are used to configure: window editor.
• the display options. To display these options, on the "Display" pane,
• the magnetism of controls. click the group icon of "Options" group.
• the click and double-click operations on the
controls.

6  Anchoring controls

The pages of a WEBDEV site can be resized at run • the management of width and/or height: this
time: the browser can be resized, the site can be parameter is used to manage the behavior of • anchor in width: allows you to define the width
displayed on different platforms (iPhone, PC, ...). the control when resized. The height or the width behavior of the control when resizing. The
The anchoring mechanism is used to automatically can be adapted to the control content or to the control can: 4. It is also possible to define the behavior of the
adapt the size and position of controls when browser. You also have the ability to define the • keep its width, control when its content is larger than it is. You
resizing the page. minimum control size.
• adapt to content, can:
These parameters can be configured in the page
• change along with the browser. • stretch the control and push the other
editor.
controls in the page,
6.1 Anchoring a control in the editor • truncate the content,
To anchor a control: • always enable a scrollbar,
1. Select one or more controls to anchor. • display a scrollbar only when the content is
larger than the control.
2. Define the anchoring of controls:
5. Validate. If the "Anchors" option is enabled (on
• in the "UI" tab of the control description the "Display" pane, in the "Show (all the controls)"
window ( "Description" from the popup menu). group), the anchoring signs are automatically
• via "Anchor" from the popup menu (right click) displayed in the control (red arrows).
of control. Remark: To manage the anchoring of controls, you
3. Choose the desired type of anchoring in the can also use the positioning tables. See the online
The anchoring of a control is managed via several
window that appears. help for more details.
parameters:
• the control anchoring: this parameter is used
to define the modification that will be applied
to the control according to the change of the
page size. The control can move to left and/or
to bottom, it can be enlarged in width and/or in
height.

58 Part 2: Developing a site Part 2: Developing a site 59

 Repeating a group of
Contenu
The two types
Contenu
controls: the loopers of code
Looper controls are used to repeat a set of controls in a Web page. Different information can be
displayed in each row of the looper. The records found in a database can be displayed on each Server code or browser code?
row.
Two types of actions can be programmed in a WEBDEV site:

Computer of Server
the Web user
1 2
Actions that can be
performed locally Actions that require a
(on the computer of return to the server
the Web user) (dynamic pages)
read information in the database
simple input check, ... calculations/processes by programming, ...

Creating the Looper control in the WEBDEV editor.

To manage these two types of actions, the WEBDEV code editor differentiates two types of code:
• Server code (yellow or pink code in the code editor): This code is written in WLanguage (yellow
code) or in PHP (pink code, only available in PHP pages). This code is run on the server.
This code is available in the dynamic pages only.
• Browser code (green or blue code): This code is written in WLanguage (green code) or in
Javascript (blue code).
When saving the page, this code is automatically translated into Javascript and included in the
WEBDEV HTML pages. This code is run locally (on the computer of Web user) and it requires no
server action.

Displaying the Looper control

in the browser.

For each looper control, several characteristics can be modified during the repetition: caption, text
color, ...
The repetitions can be performed:
• on a column,
• on several columns. In this case, we talk of "Horizontal Looper".
When creating a Looper control, you can link it directly to a data file or a query. The attributes of
the Looper control are automatically defined. No programming is required.

60 Part 2: Developing a site Part 2: Developing a site 61

 Browser code: WLanguage code or Javascript code? Dynamic site in PHP: Server code: WLanguage code or PHP code?
The code run on the computer of Web user (in the browser) is represented by a green bar or by a The codes run on the server are represented by a Yellow or Pink bar in the code editor.
blue bar in the code editor.

• Yellow bar = WLanguage: the WL symbol is displayed in front of the code.

• Green bar = WLanguage: the WL symbol is displayed in front of the code. • Pink bar = PHP: the PHP symbol is displayed in front of the code.
• Blue bar = Javascript: the JS symbol is displayed in front of the code.
To switch from yellow code (WLanguage) to pink code (PHP), all you have to do is click the WL
To switch from a green code (WLanguage) to a blue code (Javascript), all you have to do is click symbol found in front of the code (and conversely by clicking PHP). When saving the PHP page, the
the WL symbol found in front of the code caption (and conversely by clicking JS). When the page is WLanguage code is automatically converted into PHP code.
saved, the WLanguage code is automatically converted into Javascript.
We recommend that you develop in WLanguage.
We recommend that you develop in WLanguage.

Additional events
The link "Add other events" in the code window is used to manage events in addition to those
proposed by default. Simply click on "Add other events to xxx" at the bottom of the code window:
the list of additional events is displayed.
All you have to do is select the requested events to add them to the codes displayed by the code
editor.
Example of additional events: double-click, key down, key pressed, key up, button down, mouse
moved, ...

Reminder: Browser code is available in dynamic and static pages.

62 Part 2: Developing a site Part 2: Developing a site 63

 WLanguage: a simple and
Contenu
Sequence for running the
Contenu
powerful language code of buttons/links
WLanguage is the language of WEBDEV. This language is used to easily program all the requested Two click codes are associated with the buttons/links:
Web processes without even knowing HTML, JavaScript or PHP. • a browser click code, entered in WLanguage (or in Javascript) in the code editor. This code is
included in the HTML page and it will be run on the computer of Web user.
Available in English and in French, WLanguage is made of simple commands, close to everyday • a server click code, entered in WLanguage (only in dynamic pages). This code will be run on
language. It allows for intuitive programming. the server.

Let’s see an example illustrating the power of WLanguage: checking the address input
In WLanguage, a few lines are enough:
IF NoSpace(ADDRESS) = "" THEN Browser click
Error("Specify your address") code
ReturnToCapture(ADDRESS)
END

Here is the equivalent process in JavaScript: Server click

code
<SCRIPT LANGUAGE=Javascript>
function EXE_NoSpace(szString, nPart)
{
var nFirst = 0;
var nLast = szString.length-1;
if (nPart & 1) while (szString.charAt(nFirst)==" ") nFirst++;
if (nPart & 2) while (szString.charAt(nLast)==" ") nLast--;
return szString.substring(nFirst,nLast+1);
}
// Click (onclick) of BUTTON_OK The table below presents the different codes run (according to the type of button/link) and the
function _VALIDORD_BUTTON_OK_CLI() associated action.
{ The aspect of the button/link and its target do not affect the sequence in which the codes are run.
if((EXE_NoSpace(ADDRESS,3)==""))
{
alert("Specify your address"); Tip: To understand and memorize the order in which server and browser codes are executed, think
return; as the Web user would: the Web user clicks the button in the browser, therefore the browser click
}
}
must be run first.
</SCRIPT>

WLanguage code is easier to write, understand and maintain. It is much more reliable. Upgrading
is easier.

Use WLanguage in all your processes.

64 Part 2: Developing a site Part 2: Developing a site 65

 Upload: Sending files to
Contenu
Action
Send values
to the server
Sequence of codes run
Associated action:
Run browser codes only
Remarks
Page context
automatically
the server
(submit) Run server and browser codes updated on the
server (Session The upload consists in sending one or more files coming from the computer of Web user to the
Code run: or AWP dynamic server.
1. Browser click code of control. pages only).
2. Browser code of page submit (if it exists). A simple example: Creating a contact in a directory.
3. Sending the values found in the page controls to The Web user wants to associate a photo with the contact form. This photo is found on the hard
update the page context on the server. disk of his computer.
4. Server code of control. The UPLOAD control allows the Web user to select the image via a "Browse" button.
Associated action: Display a site page Page context When the form is validated, the selected image file is sent to the server and copied onto the hard
automatically disk of the server ( UploadCopyFile).
Code run: updated on the Then, the image will be displayed in the contact form.
1. Browser click code of control. server (Session
2. Browser code of page submit (if it exists). or AWP dynamic
3. Sending the values found in the page controls to pages only).
update the page context on the server. Automatic page
4. Server code of control. display. When validating the page, the
5. Page display. “uploaded” file is copied into
Reinitializing Associated action: Run browser codes only the hard disk of the server.
pages (reset)
Code run:
1. Browser click code of control.
2. Displaying the initial page (page with all controls
initialized to empty or to 0 and execution of initialization
Web server
code for each control then for the page).
Do not send Associated action: Run browser codes only Server at the hosting company
anything to the
server Code run:
Browser code of control only.
Associated action: Run server and browser codes
On the browser of the Web user
Code run:
1. Browser click code of control.
2. Server code of control.
Associated action: Display a site page Automatic page
Remark: The aspect of "Browse" button is defined by the browser and it cannot be customized.
display
Code run:
Remark: WEBDEV also offers an advanced Upload control that requires a Flash player on the Web
1. Browser click code of control. user’s computer. This control is used to manage a progress bar, to select several files, etc.
2. Server code of control.
3. Page display.

66 Part 2: Developing a site Part 2: Developing a site 67

 Control
Contenu
The
Contenu
templates reports
WEBDEV allows you to create control templates. A control template is a set of controls that can be A report provides a custom view of data: data entered in the database, data found in a text file,
re-used in several pages. data coming from a Table control, ...
The modifications performed in a control template are automatically applied to all the pages that
use this template. The principle for creating a report is as follows:
A control template is used to: • the data to print comes from a data source (data file described in an analysis, HFSQL view,
query, memory zone or text file).
• group a set of controls for a specific purpose.
• the report groups, sorts and formats the data.
• make the controls independent of the page that hosts them.
The created report can be:
• printed on the printer of the server (for an Intranet site).
• displayed in the browser of the Web user (HTML or PDF format, ...).
• emailed to the Web user (PDF format).

Development Server
Defining a control template: the template is bordered by a yellow line in the editor. computer Print modes
Report sources
Server
Table control
printer

Memory zone XSL files, PDF files,

...
Report
(Report
Query editor)
Text files
Using the template in a page: The elements that belong to the template are
bordered in blue and identified by a yellow square.
Text file PCL files
To use a control template in a page, create a "Control template" control.
Remark: The programming associated with the template elements can be performed in the
template directly. Data HTML files,
The characteristics of elements can be dissociated from the template. For example, dissociating XML files, ...
the position of a template control to position the control somewhere else while keeping the other
evolutions performed on the control (code, style, ...). We talk of control inheritance. In this case, WLanguage
the elements are identified by a blue square. variable
Browser

68 Part 2: Developing a site Part 2: Developing a site 69

 Report
Contenu
Different
Contenu
templates print modes
Most of the time, the prints are using a standardized appearance and layout: date in the top right The report editor allows you to create reports in order to print the documents generated by your
corner in a specific format, page footer with print time and file name, logo in the top left corner, ... site (invoices, quotes, ...).
The report templates are used to easily standardize the layout of your reports.
To print these reports regardless of the configuration on the computer of the Web user, we advise
you to propose at least two print modes:
• Print in HTML format: The report is displayed in a new page of the site. The report can be
printed via the browser "Print" button. No specific software is required.
• Print in PDF format: This print mode requires Acrobat Reader (or similar program) on the
computer of the Web user. The print is performed from this software.

Defining a report template

in the report editor.

Report in the report editor of WEBDEV

Using the template in different reports.

The elements belonging to the template are identified by a yellow square.
The overloaded template elements are identified by a blue square.

To create a report based on a template, select the template that will be used during the report
creation.
Print in HTML Print in PDF
Remark: The programming associated with the template elements can be performed in the
template directly.

The characteristics of elements can be dissociated from the template. For example, dissociating
the position of a template control to position the control somewhere else while keeping the other
evolutions performed on the control (code, style, ...). We talk of inheritance. In this case, the
elements are identified by a blue square.

70 Part 2: Developing a site Part 2: Developing a site 71

 Displaying and
Contenu
sequencing pages
Where should the page be displayed?
A page is displayed in a specific "target": current page, new browser, etc.
The target can be defined:
In most cases, a site includes a set of pages. These pages are linked together via buttons (or • in the page editor: no programming is required.
links). A click performed on a button is used to display a new page. • in the code editor, in a process of the button (or link).

Two questions must be asked before a new page is displayed: Several WLanguage functions allow you to open a new page (or frameset). The main functions are:
• which page should be displayed? • PageDisplay (for pages),
• where should the page be displayed (new browser, frame, etc)? • FramesetDisplay (for framesets),
• PopupDisplay (for popup pages),
Which page should be displayed? • PageDisplayDialog (for modal page display).

The page to display can be defined: Selecting the target in the page editor (most common method)
• in the page editor (no programming is required).
In a button, to define the target of the page to
• in the code editor, in a process of the button (or link or clickable image, etc.).
display:
• Display the description of button or link
Selecting the page to display in the page editor (most common method) ("Description" from the popup menu of
To define the page to display: control).
• Display the description window of control • In the list of targets, select a preset target
("Description" from the popup menu of or a frame (in the case of a frameset).
control).
• In the type of action, select "Display a page
of the site".
• Select the page to display.
Remark: The preset targets will be presented later in this manual.
Selecting the page to display by programming
Selecting the target in the code editor
The page to display must be selected by programming when:
• several pages can be displayed (an error page if the password is not entered or the next site
page for example). When the target depends on a choice made by the Web user, this target must be selected by
programming. For example, if the Web user does not enter his password, an error page is displayed
• a specific action must be performed on the server (calculation, read a record, etc.). in a new browser ; otherwise, the next page is displayed in the current browser.
ChangeTargetis used to modify the target of an action by programming. This function must be
used in browser code.

72 Part 2: Developing a site Part 2: Developing a site 73

 Choosing a target Parent frame (_parent)

When choosing the target for a button, a link, a clickable image, a menu option, ... you can select:
• a preset target: four preset targets are proposed:
• Current browser (_top).
• Current frame (_self).
Click the
• Parent frame (_parent). button
• New browser (_blank). In this case, the new browser can correspond to a new tab or a new
browser with specific characteristics (menu bar, message bar, etc.)..
• a frame in the current frameset.
Remark: in the diagrams below, the grayed area represents the area where the page is displayed Initial page New page displayed in the
(2 nested framesets) page containing the second
during the click on button. frameset
Current browser (_top)

New browser (_blank)

Click the
button

Click the
Initial page New page displayed in the button
entire browser

Initial page New page displayed in a new

browser window
Current frame (_self)

Click the
button

Initial page New page displayed in the

same frame

74 Part 2: Developing a site Part 2: Developing a site 75

 Performing a process on
Contenu
Style sheets: to simplify
Contenu
several successive pages the layout
In a business site, placing orders can be performed on several pages: The style sheets are templates used to standardize the layout of controls in the pages.
• page 1: Selecting the products to order. The style sheets are used to define:
• page 2: Showing the basket. • the size and layout of your texts, the font,
• page 3: Validating the order and entering the customer details. • the alignment of your paragraphs, the paragraph indents, ...
• the style of the text (bold or italic), its color, ...
And much more.

When a style characteristic is modified, all the controls associated with this style are updated. This
gives you the ability to modify the style book of a site by only making a few modifications to the
styles used.

Example for using style sheets: increasing the size from 9 to 16:

Page 1: Selecting products

Page 2: Showing the basket

Remark: "Custom CSS" tab enables you to enter CSS code directly. Then, this code will be added
into the style sheet.

Page 3: Typing the customer details

In this case, the write-to-file operation must ONLY be performed in the code of the button for
validating the order: all the order elements must be stored until the final validation. Don’t write
into the data files while they are being processed.
Remark: You also have the ability to use a transaction but we recommend that you store the order
details.

76 Part 2: Developing a site Part 2: Developing a site 77

 Site centered or anchored
Contenu
Site
Contenu
in width? SEO
The page layout is one of the most important elements when building a site. To visit your site, the Web users must be able to find it. To do so, your site must come up the Web
Two types of page layout can be used in a site: user types keywords corresponding to your site in a search engine.
• centered site:
The pages are centered in the browser. If the resolution of Web user is greater than the optimal To improve your site’s SEO, WEBDEV proposes:
resolution of site, white margins appear on both sides of the page. The content of the site is • an SEO wizard. This wizard lists all the optimizations that can be performed to improve your
centered. site’s SEO. To start the wizard, on the "Project" pane, in the "Web" group, expand "SEO" and
select "SEO wizard".

• site anchored in width:

Page content takes up all available space in the browser.

• the ability to enter a description and keywords on each page of your site.

You have the ability to include a home page in your site when developing the project, by creating
a new page.

Remark: SEO is a technique whose rules are dictated by search engines (Google, Bing, etc.). These
rules are not always explicit and evolve very quickly. Don’t hesitate to read books or to visit sites
dedicated to this topic.

Notes:
• The type of layout is defined by the options for anchoring the page ("Anchor" from the popup
menu of page).
• The type of layout (centered or anchored in width) configured in a page template will be
automatically used by the pages associated with this template.

78 Part 2: Developing a site Part 2: Developing a site 79

 SEO of a site in practice 3  Optimizing a page and entering its keywords

To optimize a static or AWP page of your site: 4. In the "Keyword" tab of the SEO window, enter
1. Display the description window of the page. the keywords associated with the page. These
1  SEO principles keywords (or expressions) will be the keywords
2. In the "Details" tab, a specific area is used to
manage the page SEO. In this area, click "Edit used to optimize the page: if a Web user types one
In order for your WEBDEV site to be visited, the 1.2 The available tools expressions and keywords". of these keywords, the search engine will propose
Web users must be able to find it. To do so, your the corresponding page. The keywords are typed
To help you, WEBDEV proposes: 3. In the "Description" tab of the SEO window, as follows: type the first keyword and press Enter
site must come up the Web user types keywords enter the description of the page. In most cases,
corresponding to your site in a search engine. • An SEO of each static and AWP page: for each to type the next one.
page, it is possible to define a description and a this description appears when displaying the Tips:
result of a search performed by a search engine.
1.1 Improving the SEO of a WEBDEV site set of keywords. These keywords will allow the
Tips: • The first three keywords are the most
Web users to access the page directly. You can important ones. Use common keywords and
To improve the SEO of your pages, we recommend also choose not to optimize a page. • Use short sentences, limit the number of
that you use AWP pages. pertinent keywords.
• A search engine optimization wizard, which words (up to 200 characters)
To optimize a site in Session mode, use: • The keywords must not be repeated.
indicates the improvements that can be made • This description must entice the Web users to
• a home page. display the page. • Use variations (singular/plural, noun/verb,
on each page for SEO purposes. etc).
• a section of the site in static mode. The static • The possibility to include or use a specific Remark: This description can be dynamically
site will be used to perform the SEO and to start modified using ..Description. Remark: These keywords can be dynamically
page as home page. This solution is used, for modified by ..Keywords.
the site in session mode. example, to optimize pages in Session mode, by
• a section of the site in AWP mode. The AWP site associating keywords to the home page,. This 5. Validate the page SEO and description
will be used to perform the SEO and to start the home page contains all the keywords that will windows.
site in Session mode. allow the Web users to find your site.
Remark: In AWP, to pass parameters between 4  Using the SEO wizard
your pages, we advise you to pass parameters via
the URL rather than using AWP contexts. Indeed,
the URL content can be optimized while the AWP To help you improve the SEO of your sites and To start the page SEO wizard:
contexts cannot. pages, WEBDEV proposes an SEO wizard. This 1. Display the requested page in the editor.
wizard can be used for a specific page or for all 2. On the "Page" pane, in the "SEO" group, click
the pages of your project. This wizard examines "Optimize".
2  Using (or not) a static or AWP page of a site for SEO the composition of site pages and indicates
3. The SEO wizard starts. Double-click a
the possible improvements for maximizing the
positioning of pages in the search engines. suggestion to perform the corresponding
To optimize a static or AWP page of your site: 3. You can: optimization. The "Refresh" button is used to
1. Display the description window of the page. • Do not use the current page for SEO. Some examples of optimizations detected by the update the list of suggestions.
2. In the "Details" tab, a specific area is used to • Optimize the current page by associating wizard:
To start the SEO wizard for all the pages of a site:
manage the page SEO. it with expressions and keywords ("Edit • The page title must be specified.
expressions and keywords"). 1. On the "Project" pane, in the "Web" group,
• At least three keywords must be specified for expand "SEO" and select "SEO wizard".
the page.
2. The SEO wizard starts. Double-click a
• The page description must be specified. suggestion to perform the corresponding
• The alternative text must be typed for all optimization. The "Refresh" button is used to
controls that propose it (by using the keywords update the list of suggestions. The results can be
defined for the page if possible)... sorted by page or by type of advice.

80 Part 2: Developing a site Part 2: Developing a site 81

 5  Registering your site in the search engines PART 3
The SEO of a site is made on the search engines • the "Phone book" search engines:
directly. These search engines optimize sites that have
Remark: Sometimes, the SEO of a site implies been previously checked by human beings.
certain fees. How can I get my site optimized?
Two types of search engines are available: An "Optimize your site" link is often available for
this type of search engine.
• the "Automatic" search engines: In most cases, the SEO procedure is as follows:
These search engines are based on automatic
programs for analyzing the content. 1. Choosing a category for the site (leisure,
How can I get my site optimized? culture, etc.).
An "Optimize your site" link is often available 2. Filling out a questionnaire about the site to
for this type of search engine. Simply specify optimize: Internet address of the site, email of
the address of the site and the email of the
Webmaster. The site will then be automatically
the WebMaster, description of the site, etc.
3. Once your questionnaire has been sent, Development
environment
analyzed (analysis based on the keywords and your site will be evaluated by a person from the
contents of your site) and optimized. company that manages the directory. This person
will list your site if its content appears to be
worthwhile.

82 Part 2: Developing a site

 The WEBDEV
Contenu
editors
To handle a project, WEBDEV proposes several integrated editors:
• project editor.
• data model editor.
• UML editor.
• query editor.
• page editor.
• report editor.
• ...
These editors are used to easily handle the different project elements.

Report editor

Data model editor Page editor

Project editor Query editor

84 Part 3: Development environment Part 3: Development environment 85

 User-friendly editors in practice The UML editor is mainly used to:
• describe one or more UML diagrams.
Let’s see some characteristics of the page editor:
• WYSIWYG editor ("What You See Is What You
• build a UML model by reverse engineering of Get"). You can view directly your page as it will
your project. appear to the user.
1  Introduction See "The UML model", page 123 for more details. • Creation and description of pages and controls.
• Drag and Drop is used to copy, paste or move
Let’s see some characteristics of UML editor: controls from a page to another one.
WEBDEV is designed around editors, adapted to • page editor.
the developer requirements, unified in a single • Creation and description of UML diagrams. • Page templates and preset control styles
• report editor.
environment: • Automatic formatting of links. • Presence of several icon catalogs used to
• code editor, debugger and compiler. associate images with controls.
• project editor. • image editor. • Automatic generation of a class (or set of
• data model editor. classes) from a class diagram. • Real-time interface checker to simplify the
These editors will be used to create the different positioning of controls.
• UML editor. elements (pages, reports, databases, programs, …) • Zoom in the UML editor.
• Ability to type the captions of controls in the
• query editor. handled by the site. • Insertion of comments into a UML model. work area of the editor.
• Interaction between the different panes and the • Management of context-sensitive help in the
elements of UML model.
2  The different editors pages.
2.4 Query editor • Zoom in the page editor.
• Interaction between the different panes and the
The query editor is used to automatically create
2.1 The project editor • Use of an analysis in WINDEV 5.5 format. queries on the data files. The programming is
editor elements.
The project editor allows you to manage the project • Automatic formatting of analysis links. simplified: pages, tables, combo boxes, reports, ... 2.6 Report editor
using a comprehensive dashboard. • Information about the links via tooltips. can be based on queries.
Various Widgets allow you to see: • Simplified retrieval of description of external A wizard helps you create queries: choose the The report editor is used to easily create printed
database (SQL Server, Oracle, AS/400, ...). items to include and type the selection conditions reports.
• the number of project elements,
• the registered incidents, • Description independent of data files. via the wizard. The query is automatically
• Encryption of data files. generated (in optimized SQL code) and the query Let’s see some characteristics of the report editor:
• the tasks to be performed,
test can be immediately run. • WYSIWYG editor ("What You See Is What You
• the checked out elements, • Automatic modification of data files when
modifying the structure of files. Get"). You have the ability to view the reports as
• ... they will be printed.
• Check of referential integrity. Let’s see some characteristics of the query editor:
2.2 Data model editor • WYSIWYG editor ("What You See Is What You • Simplified report creation without writing a
• Automatic analysis generation. single code line.
Get"). You can directly view the query and its
The data model editor is used to describe the • Zoom in the data model editor. result. • Drag and Drop to copy, paste or move controls
characteristics and the structure of data files. • Interaction between the different panes and the from a report to another one.
• Simplified query creation via a wizard.
The data model editor supports the Merise method analysis elements. • Skin templates of reports and preset control
(CDM and LDM). • Automatic generation of SQL code of each query.
styles.
The data model editor allows two types of 2.3 UML editor • Ability to immediately run the test of queries.
• Zoom in the query editor. • Real-time interface checker to simplify the
database descriptions: The UML language is a graphical language allowing positioning of controls.
• direct description of analysis linked to the you to:
2.5 Page editor • Use of a form in a report background.
project (also called Logical Data Model (LDM)) • represent the information system studied as
The page editor is used to describe the • Creation of multi-column labels.
• description of the Conceptual Data Model (CDM) objects.
then automatic generation of the analysis. characteristics of user interface of your project. • Ability to edit a report in HTML format (to publish
• generate the object structure of site (skeleton of
Several templates, skins and types of pages are it on Internet for example) or in RTF format
application as object classes) corresponding to
proposed. They help you make your pages more (to use it in a word processing software for
Let’s see some characteristics of the data model the information system examined.
ergonomic and make your sites more user friendly. example).
editor: • Zoom in the report editor.
• WYSIWYG editor ("What You See Is What You
Get"). You can directly view all the data files and
the links of your project.
• Creation and description of the data files and
their items.

86 Part 3: Development environment Part 3: Development environment 87

 Project
Contenu
dashboard
2.7 Code editor • Management of the code modification history
with ability to rollback.
The code editor allows you to type all processes in
WLanguage (the programming language included • Ability to open several code windows (to perform
in WEBDEV). It is used to type the source code: code comparisons for example).
• of controls, • Zoom in the code editor.
• Interaction between the different panes and the The project dashboard is an essential element for managing the WEBDEV projects. The project
• of pages, dashboard gives an overall view of the progress of a project.
editor elements.
• of reports,
The project dashboard includes several indicators about the project content:
• of local and global procedures, 2.8 Image editor
• statistics about the project,
• of classes and methods, ... The image editor is used to edit the images and • incidents,
icons of project (and elements).
Let’s see some characteristics of code editor: • tasks,
Let’s see some characteristics of image editor:
• Automatic formatting of information typed. • Centering. • status of automatic tests,
• Automatic completion. • Resizing. • result of different audits,
• Glossary of functions. • Symmetry, rotation. • list of elements checked out from the SCM (Source Code Manager),
• Immediate detection of typos and help for • Management of texts. • result of action planes (continuous integration), ...
correction. • Management of layers.
• Incremental compilation. • Access to images of image catalog.
• Preview of the different processes of a window, • Preserving transparency.
control or report found in the project.
• Insertion of processes specific to the mouse or
keyboard use.

The elements found in this dashboard are presented in Widget format. These Widgets can be
configured, moved, enabled, disabled, ... You have the ability to add new indicators.

The dashboard configuration is saved for each user. The dashboard configuration is the same for
all the projects belonging to the same user.

88 Part 3: Development environment Part 3: Development environment 89

 WEBDEV, WINDEV, WINDEV
Contenu
Project
Contenu
Mobile: 100% compatible configuration
The created projects are often multi-target projects. The project configurations are used to create several "targets" from the same project.
For example, for an ERP system intended to operate in Windows, it is very likely that beside the
main application, which will be the backbone of the solution, there will be sales people equipped From the same project, you have the ability to create:
with PDAs or Smartphones, stores that will use mobile devices to manage inventories and that • sites that do not contain the same elements, with different names,  …
Intranet and Internet sites will be implemented.
• different components,
• a Webservice.
All elements, excluding the UI (pages and windows), are 100% compatible and sharable between
WINDEV, WEBDEV and WINDEV Mobile projects.
You can work on a specific configuration at any time: the elements that do not belong to this
configuration will be grayed in the project editor.
Indeed, the sets of procedures or the classes can be shared between several projects for example.

Regardless of the product used to create a project, the project can be opened by the other
products. WEBDEV project
When a project is opened in a product other
than the one that was used to create it, a
wizard is displayed, allowing you to create a
project configuration specific to the product
used.
For example, if a WINDEV project is opened
by WEBDEV, you will have the ability to create
a project configuration named "Site", used
to group all the elements required by the Project configurations
WEBDEV site.
You now have the ability to view the elements
of each target from each environment. A
project in WEBDEV displays the thumbnails
Config 1. Config 2. Config 3. Config 4.
of WINDEV and WINDEV Mobile windows for Site Library Component PHP site
example. Clicking a WINDEV window from the
...
WEBDEV project editor opens the WINDEV
window (WINDEV must be installed on the
computer).
The multiple generation allows you to generate all project configurations (or some of them) in a
single operation.

90 Part 3: Development environment Part 3: Development environment 91

 Multiple
Contenu
Source Code Manager
Contenu
generation (SCM)
The project configurations are used to easily define the different "targets" of your project. Several
sites, several libraries or several components can be defined for the same project. Overview
To generate the result of each configuration, you can select each configuration one by one and To simplify teamwork, WEBDEV proposes a Source Code Manager. This Source Code Manager
generate the corresponding element. allows several developers to work together on the same project at the same time and to share
elements between several projects.
Another faster method is available: the multiple generation. The configurations to generate are
selected in a single operation and the result is immediate. Network
(intranet)

ADSL
(internet)

Cloud

SCM
Offline

It is possible to share the elements found in the SCM:

• via a network.
• via Internet.
• via the Cloud.
To start a multiple generation, on the "Project" pane, in the "Generation" group, expand "Generate • in offline mode. In this case, the elements that require specific attention will be checked out
the configuration" and click on "Multiple generation". from SCM when the laptop is connected to the main system for example.

92 Part 3: Development environment Part 3: Development environment 93

 Operating mode of Source Code Manager
Sharing a project in practice
The following example presents the Source Code Manager:
The development of a large IS system requires To share a project, you have the ability to use:
the participation of several developers. These • the source code manager.
developers must work on a single WEBDEV project • the developer groupware. It is kept for backward
while sharing the different resources (queries, compatibility with the earlier versions. See
classes, ...). the online help for more details (keyword:
Local Computer 1

2
"Developer groupware").

Project A
Check-out 9:57 Project A
Version 1 Version 1 1  The Source Code Manager
3 Modification

Check-in 10:41
Project A
Version 2
Project A 1.1 Overview 1.2 Principle
4
Version 2

WEBDEV innovates regarding the management

of teamwork with the Source Code Manager (also Setup
called SCM).
Local Computer 2 Project A

5
Version 3
Entirely integrated in the environment, the Source
Code Manager (SCM) is used to:
Project A Check-out 14:28 • make teamwork easier and faster,
Version 2 Repository
Mobile Computer • store the history of modifications and versions,
Check out Beta window from
Project A Version 1 at 9:13
• save the source code of the development team
in an automatic way.
Mobile Computer Local Computer 1

1
Check out Alpha window from
Project A Version 1 at 9:57 Sized for team between 1 and 100 developers, the All project elements are saved in the repository
Check in modified Alpha window
Project A Check-out 9:57 into Project A Version 2 at 10:41 SCM facilitates and standardizes the collaboration (on the server). This operation is performed when
Version 1 between developers (even when developing alone, creating the project or when importing an existing
6
Local Computer 2
Modification Check out Alpha window from the SCM is useful because it contains the history of project into the Source Code Manager.
for end users Project A Version 2 at 14:28 your applications).
Check-in 18:32
Each developer who is using the Source Code
Project A
Version 3
Mobile Computer Manager retrieves a local copy of project.
7
Check in modified Beta window
into Project A Version 3 at 18:32
The SCM is using a SCM repository: procedures,
classes, pages, reports, components, analyses, ...
Use
This repository can be installed on a server (in
To work on a project element (page, report, etc.),
HFSQL Classic or HFSQL Client/Server mode) or on
If a project element (window, report, ...) is checked out, this element cannot be checked out twice. the developer must check out the element from
a network computer in a shared directory.
the repository, modify it and check it back in.
Once the checked-out elements are modified, these elements must be checked back in so that The SCM can be run locally or remotely, via Internet
If the element is already checked out, the
these modifications can be taken into account by the source project. Indeed, the repository stores or via an HTTP or HTTPS connection. This feature
developer can ask the person who performed the
a history of all the project elements since their creation. gives you the ability to work on a project from an
check-out to check the element back in (via the
agency or from a remote site without losing the
integrated messaging).
modifications.
Whenever an element is checked back in, the version number of the source project is incremented The SCM can also be used in offline mode (train,
by 1. plane, etc.).

94 Part 3: Development environment Part 3: Development environment 95

 To benefit from the modifications performed, the Tips 3  Configuring the project in order to work with the SCM
other developers must synchronize their local The source code of your applications is essential.
project with the reference project (found in the This source code must be handled with great care!
repository). Some operations are required before an existing • the name and password of an HFSQL
Tips for configuring the server that will host your project can be used by the Source Code Manager. database administrator.
source code:
• an SCM Drive repository. Specify the
• Use a dedicated server with a comfortable size 3.1 Adding a project into SCM information for identifying to your SCM Drive:
disk (200 GB at least) To add a local project into the SCM: email, password and team.
• Use the Source Code Manager (SCM) in Client/ 1. Open your project in WEBDEV. • an SCM repository found in PCS Cloud.
Server mode. Specify the name of cloud platform used and
2. On the "SCM" pane, in the "Project" group, click
• The hard disks may encounter physical "Add the project". the project to open.
problems: use a RAID I system on your server Remark: If no SCM repository has been created
(several disks that store the same information) 3. In the wizard, select the repository to use.
Specify whether you want to use: yet, click "Create a repository".
• Use a UPS to protect the power supply of your 4. Validate the wizard. The project is added to
server. • a repository found on a network share (SCM
repository in HFSQL Classic format). Specify SCM.
• Make backup copies of the repository on a the directory of the SCM repository (network
regular basis (at least once a week) computer or shared directory).
3.2 Sharing resources
• Place the server in a "secure" area and use a • an SCM repository found on a HFSQL Client/ A first project was imported into the Source Code
firewall. Server server. The SCM repository will be in Manager. This project contains elements shared
HFSQL Client/Server format. In this case, you with other projects (classes, pages, procedures,
must specify: style sheets, ...).
2  Creating a repository for SCM The share is an important concept of SCM. Several
• the server,
• the database, methods can be used to perform the share. See the
online help for more details.
2.1 Overview 2.2 When should an SCM repository be • the port used,
To share a project via the Source Code Manager, a
created?
repository must be created. This repository must be The SCM repository must be created once only. 4  Working with SCM
created once only on a server. WEBDEV allows you to create this repository at
The operating system and the file system on which different times:
the SCM repository is installed must support the • when installing WEBDEV. 4.1 Project options affecting the SCM • Check out/Check in the project automatically:
files exceeding 4 GB. • when creating a project that is using the SCM. This option is used to automatically manage the
The repository can be created: Several options are used to configure a project
• when importing a project into the Source Code "project file". If this option is checked, the project
handled by the Source Code Manager. These
• in a shared directory on network: all the SCM Manager. file is checked out only if the action performed
options are grouped in the "SCM" tab of the project
users must have full rights on this directory. The requires it. Once the action was performed
• in the SCM administrator directly. description (on the "Project" pane, in the "Project"
repository will be in HFSQL Classic format. on the project, the project file is automatically
Once the repository is created, all shared WEBDEV group, click "Description").
To do so, specify the network directory where the checked back in.
SCM repository will be created. projects can be imported into it. • Propose to get the latest version of elements This option is used to disable the "Master/
when opening the project: Guest" management on the project. This option
• on a HFSQL Client/Server server: the repository 2.3 Backups When opening a project found in the SCM, this
will be in HFSQL Client/Server format. In this can also be enabled on the "SCM" pane, in the
We advise you to make backup copies of the option proposes to retrieve the latest version of "Project" group, by expanding "Master/Guest"
case, you must specify: project elements.
repository on a regular basis. These backups can and by selecting "Manage the project check-out
• the server, By default, the latest version of elements is
be performed via the SCM administrator. automatically".
• the database, automatically retrieved.
• the port used, • Propose to check in the elements when closing
• the name and password of an HFSQL the project
database administrator. When the project is closed, this option is used
to display the list of elements that are currently
checked out in order for some of them (or all of
them) to be checked back in.
By default, the checked-out elements are not
checked back in when the project is closed.

96 Part 3: Development environment Part 3: Development environment 97

 4.2 Checking out an element 4.3 Check an element back in Caution: Modifying the project options: Automatic mode
The elements checked out from the Source Code All project users (master or guests) can modify With the automatic mode, the project file is
The different check-out modes the project characteristics (first project page, checked out only if the action performed requires
Manager are bordered by a red line in the project
The SCM proposes two modes for checking out the editor. animation, programming charter, etc.). These it (regardless of the user). Once the action was
project elements: modifications will have to be checked back in into performed on the project, the project file is
To check in an element, all you have to do is select the Source Code Manager by the master of the automatically checked back in.
• the standard mode: if you display a SCM "Check in" from the popup menu of the element (in
element that is not checked out, a panel project. The automatic mode allows you not to manage the
the project graph or in the "Project explorer" pane).
indicates that the element must be checked The modifications made by a guest will be lost "Master/Guest" mode on the project.
out before it can be modified. The element can When checking an element back in, a screen when the project is updated from the SCM
be checked out immediately (check-out button allows you to perform the following actions before repository.
found in the dialog box). the element is checked back in:
• the automatic mode: if you try to modify a • find out the modifications performed.
SCM element that is not checked out, the • compare the element found in repository with 5  Working in offline mode with SCM
SCM automatically proposes to check out this the local (checked out) element.
element. Once the check-out is validated, the • access the element history in the repository. The Source Code Manager allows you to easily work the different elements that will be modified
element can be modified. You can check in the modifications made to the in offline mode. (therefore, these elements will be "already
Remark: this mode is not recommended when element while keeping the element checked out checked out" for the other users). You can work
using SCM with a slow Internet connection. This mode allows a developer who is using a laptop
("Keep the element checked out" option). to continue working on a project found in the SCM on your project locally. The different project
repository while being disconnected from the elements can be handled directly.
To change the check-out mode: 4.4 Management modes of project
repository. • during the reconnection, on the "SCM" pane,
1. On the "Home" pane, in the "Environment" Two management modes are available with the The principle is simple: in the "Other actions" group, expand "Remote
group, expand "Options" and select "General SCM: • before the disconnection, on the "SCM" pane, in work" and select "Reconnect and synchronize".
options of WEBDEV". • Managing the project in Master/Guest mode. the "Other actions" group, expand "Remote work" Then, all you have to do is check the modified
2. In the "General" tab, the option "Checking out • Management in automatic mode (by default). and select "Disconnect for a mobile use". Before elements back in.
the elements during the first modification" is used the disconnection, we advise you to check out See the online help for more details.
to switch all the next opened projects to automatic Master and guest
mode. The Source Code Manager distinguishes between
Opening a project element to modify
2 types of users: 6  SCM administrator
its characteristics • the master: the master is the user who initially
stored the project in the Source Code Manager.
To modify the characteristics of a project element The SCM administrator allows you to handle the • manage the different files of the repository
managed by the SCM: • the guests: the guests are the developers different projects included in the Source Code (check-in, check-out, share, etc.).
who handle the project from the Source Code Manager.
1. Check out the element from the Source Code Manager. • start some tools (options, maintenance, etc.).
Manager. It allows you to: • restore a project version.
There is no need to be connected in master mode
2. Select the check-out mode of element. The on a project. The "Master" mode is only required to: • manage the repositories (creation, connection to • see the history and the differences of versions.
check-out mode can be: a repository). • cancel the check-outs (in administrator mode).
• modify the project characteristics and check
• exclusive: nobody can check out this element these modifications back into the repository. • manage the branches. • clear a repository, save it, restore it.
until it is checked back in. The element can • manage files and directories present in a project
be checked out for test only. • check all elements back in to create the setup • add files of any type into the repository (.doc,
program of site. in the repository (add, delete, rename files and .xls, .pdf, etc.).
• for test: the element can be modified but the directories).
modifications will not be checked back in. To switch from master mode to guest mode, under
• multiple: the element can also be checked the "GDS" pane, in the "Project" group, scroll down
out by other users. In this case, the to "Master / Guest" and select "Become guest on
differences between the different element the project (and reintegrate everything)".
versions can be viewed when the element is In this case, the Source Code Manager proposes
checked back in. to check in all the project elements (including the
3. Validate. The element is opened. The title bar .WWP file).
indicates that the element is checked out. To switch from guest mode to master mode, under
the "GDS" pane, in the "Project" group, scroll down
"Master / Guest" and select "Become master on
the project".

98 Part 3: Development environment Part 3: Development environment 99

 Internal
Contenu
Internal component in practice
component
1  Overview
An internal component is a group of project elements. This group is used to:
• Organize a project: you have the ability to create internal components in order to group the
project elements, by feature for example. An internal component is a group of project internal component can be debugged from the
elements. This group is used to: project that is using it.
• Share the elements between several projects via the SCM (Source Code Manager). • Organize a project: the internal components Difference with a standard component: An
can be used to group the project elements, by internal component allows you to include all the
SCM feature for example.
• Share the elements among several projects:
component elements in the interface of the project
containing the internal component. All the "public"
The elements found in an internal component elements of internal component can be directly
can be shared between several projects via the handled in the editor.
SCM. See "Sharing the internal components (via When using a standard component, the "public"
SCM)", page 102 for more details. elements of component cannot be handled
Project 1 One of the benefits of internal component directly. To modify the standard component, the
compared to a standard component is that the corresponding project must be opened.

1
Project 2
Creating the
internal component 2  Creating an internal component

Windows

2
2.1 The different steps Remark: The accessible elements (or "public"
Sharing the elements) will be automatically proposed by the
internal component To create an internal component:
completion. They can be used by the elements
Classes via the SCM 1. On the "Project" pane, in the "Project found in the project or from another internal
configuration" group, expand "New configuration" component. The inaccessible elements (or
and select "Internal component". The wizard for "private" elements) can only be used by another
Queries
creating an internal component starts. element of internal component (the completion
2. Specify the characteristics of the internal will propose these "private" elements only from
component: the elements of an internal component).
• its name. The name of internal component 5. Specify the management mode of data and
will be used for the WCI file corresponding runtime contexts. Three modes are available to
to the description of internal component. manage data and runtime contexts:
This name will also be used to create a • Use the project analysis or no analysis (full
WCI file subdirectory in your project containing all the
Subdirectory of share): The internal component accesses
(List of elements) elements of internal component.
<MyComponent> the data files of the project. The internal
project • its caption. component and the project use the same
• its description. runtime contexts.
3. Indicate the elements that will be included in This mode corresponds to the default mode if
the internal component. An internal component the internal component is using no analysis.
The elements found in an internal component can be private or public: can contain all types of elements found in a • Use the project analysis with different
• The private elements can be handled by the other elements of the component. project: pages, reports, templates, ... runtime context (advanced mode): The
• The public elements can be handled by the elements of the project that is using the internal 4. Specify the elements of internal component internal component accesses the data files of
that will be directly accessible in the code and in the project. The internal component and the
component. project are using different runtime contexts.
the preset actions of project that is hosting the
internal component. This mode is reserved to specific cases.
• Use a specific analysis: The internal
component accesses its own data files. The
internal component and the project are using
different runtime contexts.

100 Part 3: Development environment Part 3: Development environment 101

 External
Contenu
component
This mode corresponds to the default mode if 2.2 Internal component and analysis: case
the component uses an analysis. of total autonomy
In this case, the analysis used by the internal
component must be specified. You also have An internal component can be linked to its own
the ability to create a new analysis directly. analysis. In this case, the project that is hosting the
This analysis will be associated with the internal component can have several analyses:
An external component is a set of WEBDEV elements: pages, reports, analysis, ... This set of
internal component. • the analysis of the project.
elements performs a specific feature. For example, an external component can correspond to one
6. Validate the creation of internal component. At • the analysis of internal components. This
of the following features:
any moment, it is possible to: analysis is defined when creating the internal
component. It can also be selected from the • Sending faxes,
• Modify the characteristics of the internal
component via the description window of description window of the internal component. • Sending emails,
internal component. The elements generated by RAD for the internal • ...
component will be generated in the directory of
• Handle the internal component and its An external WEBDEV component can be redistributed to other WEBDEV developers (free of charge
elements. internal component. If the analysis of the internal
component is modified, a new generation by RAD or not). These developers will be able to easily include the feature proposed by the external
Tip: An internal component contains no code for will automatically propose to generate the elements component in their site without having to access the corresponding source code (if this one was
declaring the global variables. A set of procedures corresponding to the modifications. not distributed). The external component will be included in the site and distributed along with it.
can be used to initialize the internal component.

3  Sharing the internal components (via SCM)

WEBDEV project
The internal components can be shared between
projects via the SCM.
found in SCM. The internal component will be
automatically found in the SCM. 1 Developing the
component

To share an internal component via the SCM, the • import a project containing one or more internal
project containing the internal component must be components into SCM. The internal components 2 Generating the
component
found in the SCM. You can: will be automatically included in the SCM.
• create the internal component from a project .WDK file

Created in the EXE directory

3 Importing the
component

WEBDEV project WEBDEV project WEBDEV project

4 Using the
component 4 Using the
component 4 Using the
component

102 Part 3: Development environment Part 3: Development environment 103

 External component in practice 1.3 What is an external component made
of?
• a help allowing this component to be re-used.
This help is generated from the code comments.
An external component contains: Remark: By default, if a component is using an
analysis, data files, ... the HFSQL functions will
• the different elements to distribute (pages, handle these elements in an independent context.
1  Overview reports, ...). These elements can be accessible These parameters can be modified in the advanced
(or not) when the component is imported into a component options. See the online help for more
WEBDEV project. details.
1.1 Definition 1.2 What is an external component made • a short component description.
An external component is a set of WEBDEV
of?
elements: pages, reports, analysis, ... This set of A component is defined and generated from an
elements performs a specific feature. For example, existing WEBDEV project. Then, it can be included 2  Creating and generating an external component
a component can correspond to one of the in other WEBDEV projects.
following features: All component elements are independent of the A component must be created from a project 1. Developing the component elements.
• Sending faxes, project in which the component is included. The containing all elements required for the component 2. Creating the component.
• Sending emails, ... component can have its own analysis, pages, to operate. Therefore, we recommend that you use 3. Defining the advanced component options.
Remarks: reports, data files, etc, ... When creating the a specific project to create each component.
component generation, all you have to do is specify 4. Generating the component.
• To optimize the organization of your projects, The component creation is performed in several
whether these elements can be handled (or not) in steps: Then, the component can be distributed and re-
you have the ability to use internal components. the WEBDEV project that includes this component. used.
See "Internal component", page 100 for more
details. The component includes three files:
• In this chapter, we will refer to "external <ComponentName>. Component file. 3  Distributing an external component
component" as "component". WDK Contains all component
elements.
An external component can be distributed to
This file is required to
other WEBDEV developers (free of charge or not). 3.1 Overview corresponding to the component. This file is found
include the component
These developers will be able to easily include the in the EXE directory of component project.
in a project. Once the component was created, checked
feature proposed by the component in their site. Caution: If the component is using specific files
This file must also be and generated, it can be made available to the
The component will be included in the site and (data files, text files, ...), a <ComponentName>.
supplied in the setup developers. Several methods are available:
distributed along with the site. WDO file must be created once the component is
procedure of the • direct use of the component
When creating the component, the author site that is using the generated. This file contains the list of external files
Example: the component is directly used on the
specifies: component. (data files, text files, ...) used by the component.
computer of the developer who created it.
• the origin of the component elements. The These files referenced in <ComponentName>.WDO
<ComponentName>. Description of the • simple distribution, by providing the necessary
developer can build a component from a will be automatically copied into the EXE directory
WDI component (when files.
WINDEV project linked to a WEBDEV project of the project that is using the WEBDEV component.
developing sites only). Example: the component is intended to be used
and/or to a WINDEV Mobile project. This file is required to within the same company, by several developers. 3.3 Simple distribution of external
• the component elements visible (or not) to include the component In this case, the necessary files can be copied component
the component user. Visible elements will be in a project. onto a network drive.
accessible in the "Project explorer" pane or by This file must not be • setup procedure of component (with a setup The simple distribution of a component consists in
programming. supplied in the setup procedure of component identical to the one providing via simple copy the files required for the
procedure of the used for the applications). component to operate. The files are copied into a
• the mode for using the component (how to
site that is using the Example: this distribution mode is specific directory. This directory can be found on a
use the component, the parameters used
component. recommended if the component is intended network server for example.
to access the component features, ...). A
short documentation (to be completed) is to be sold or distributed on a large scale, with When importing the component into a WEBDEV
<Component name>. Optional file project, all you have to do is select the WDI file
automatically generated and associated with the WDO (optional file) File in text format regular updates.
component. corresponding to the component in the distribution
containing the list of 3.2 Direct use of the external component directory.
Remark: Several examples of components are additional elements
supplied with WEBDEV. These components are supplied with the The component is created and used on the same To distribute a component, you must supply:
accessible from the home window. component (data files, computer. • The files automatically generated by
.INI files, ...). See "The When the component is imported into a WEBDEV WEBDEV (<ComponentName>.WDK file and
WDO file", page 109. project, all you have to do is select the WDI file <ComponentName>.WDI file).

104 Part 3: Development environment Part 3: Development environment 105

 • If necessary, the specific files handled by the To propose a setup procedure for a component: 5.2 Updating the components and the the following cases:
component (data files, initialization files, etc.) as 1. Create the setup procedure of component : deployed sites • New features have been added into the
well as <ComponentName>.WDO. on the "Project" pane, expand "Deploy site" and component and they must be taken into
The <ComponentName>.WDO file contains When updating a component and/or a deployed
select "Deploy via physical media". site, you have the ability to install on the account.
the list of files that must be supplied with the 2. In the wizard planes, specify: • The parameters of some procedures have been
component. See "The WDO file", page 109 for deployment computer of the site:
• the setup media of component. • the site, the component and the files required modified.
more details.
• the languages proposed in the setup for them to operate. • Incompatibility between the new version and the
3.4 Distribution via a setup procedure procedure. • the site and the files required for the site to earlier component versions.
• the default setup directory of component. operate. • ...
The distribution of components via a setup
procedure consists in supplying a setup program • the optional modules to install. You have the • the component and the files required for the 2. Distributing the .WDK file directly
to the users of WEBDEV component. This ability to modify the list of files that will be component to operate. Provide an upgraded version of component (.WDK
program installs all the files required for using the distributed with the component. The WDO file See the online help for more details. file) to the end users without recompiling the
component in the directory specified by the user. will be automatically created from this list. project.
• ... Two methods can be used to update a component
This setup mode is used to automatically manage: In most cases, this possibility applies when:
on the end-user computers:
• the WDO file and the setup of specific files (data By default, the files required for installing a • The new version is used to correct the problems
files, ...) used by the component. component are created in the INSTALL COMPO 1. Recompiling the host project of an earlier version.
• the setup of specific tools (MDAC, ODBC driver subdirectory of the project.
Recompile the project that uses the component • New features have been added to the
for HFSQL, ...). Reminder: When creating the setup program of an and redistribute the site with the component. In component but they are not required for the site
• the automatic update of data files used by the application, the necessary files are created in the this case, no version problem or compatibility to operate.
component (if necessary). INSTALL directory of the project. problem will occur. The recompilation is required in
• the uninstall program of component.
6  Modifying an external component
4  Using an external component in a site
6.1 Overview runtime problems if they are not synchronized with
An external component can be re-used at any time If the component was published and imported via this component.
in any WEBDEV site: all you have to do is identify the SCM, the updates are proposed when opening A component that was created and generated can
the directory of component files. the project that is using the component. be modified at any time. This modification can The management of compatibility is an important
When a new version of a component is available, all If the component was distributed with a correspond to: step in the modification of a component. Two types
you have to do is install the new files of this update WEBDEV site, the component must be updated. • the addition of elements into the component. of compatibility are available:
in the setup directory of component (according to See "Deploying a site containing an external • the deletion of elements from the component. • the backward compatibility: the component
the setup mode used). component", page 106 for more details. • the modification of rights on the component version (.WDK file) used to compile the sites
See "Distributing an external component", page elements. that use this component must always be greater
105 for more details. • the modification of one of the component than or equal to the version currently used in
elements. deployment.
This compatibility is automatically supported. If
5  Deploying a site containing an external component In any case, after this modification, the component
the version of the component installed with the
must be regenerated in order to take the
site is less than the version used by the site, the
modifications into account.
site will not operate.
5.1 Overview When deploying a site that uses a component, the 6.2 The different types of compatibility • the forward compatibility: using a new
following files are automatically installed on the component version with the projects compiled
The method for deploying a site that is using one or server: The management of compatibility is linked to the with an earlier version may not be allowed.
more components is the same as the method for component versions. Indeed, if modifications Therefore, the projects must be recompiled in
• <ComponentName>.WDK,
deploying a standard site: on the "Project" pane, in have been made to the component, the sites that order to use the new component version.
• the files required for the component and for the use the component in deployment may encounter
the "Generation" group, expand "Deploy site".
application to operate.

106 Part 3: Development environment Part 3: Development environment 107

 7  Advanced characteristics of external component 7.2 Visibility of component element 7.4 What is a WDO file?
When creating a component, you have the ability The <ComponentName>.WDO file is a file in TXT
to define the component elements that will be format that can be created and modified at any
7.1 Automatic documentation When is the documentation gene- accessible (or not) by the component user. time. This file can be created and modified with
rated? • If the element is accessible, the component Notepad, the standard text editor of Windows.
A component must be supplied with a
documentation in order to be re-used. The component documentation is generated during user will see this element in the list of project This file contains the list of external files (data files,
the first generation of component ("Generate the elements. The component user will be able to text files, ...) used by the component and that must
WEBDEV simplifies the creation of this configuration" option on the "Project" pane, in the
documentation by proposing: handle these elements by programming (like any be supplied and installed with the component.
"Generation" group). other project element). These files must be copied into the EXE directory of
• a general overview of component. This When generating the documentation: Remark: However, the code of this element is the projects that is using the component.
general overview is typed when generating the not visible.
component. • the comments found in the code are used to This ".WDO" file can contain:
create the documentation. • If the element is not accessible, the user will not • the full name of file.
• an automatic generation of technical even know that this element exists.
documentation from the comments inserted • if no comment is found, WEBDEV will For example: C:\Components\
into the code of component elements. automatically document the accessible Caution: Depending on the declaration mode of PickerComponent\InitialStatus.INI
elements of the component by specifying the project elements (class, set of procedures, ...), the • the name of file. This file will be sought in the
input/output parameters expected by each accessible elements may change. current directory of component.
Which code comments are taken into element. The corresponding comments are For example : InitialStatus.INI
account? automatically created in the different elements. 7.3 The WDO file
• a file name that is using a relative path.
The following comments are automatically taken When generating the external component, two files
Remark: Whenever re-generating the component, The possible syntaxes are:
into account for the component documentation: are automatically created in the EXE directory of
you have the ability to regenerate the • Directory\FileName.xxx to specify a
• The comments found at the beginning of the current project:
documentation associated with the component subdirectory of the current directory
WLanguage procedures
("Regenerate" button in the "History of component" <ComponentName>. Contains all the • .\FileName.xxx to specify the current directory
window). WDK elements that must be • ..FileName.xx to indicate the parent directory
Caution: The modifications performed in the redistributed (pages, For example : \PickerComponent\
generation wizard will be deleted if you click the reports, ...) with the InitialStatus.INI
"Regenerate" button. component This file will be used when the component is
<ComponentName>. Interface of component. included in the project. The paths specified in the
How to access the component docu- WDI This file contains: WDO file must correspond to the path where the
mentation? • a help for using the files are installed on the development computer of
The general component overview and the technical component when it is component.
• The comments found at the beginning of the component documentation are available: checked back in. When including the component, the tree structure
following processes: • when including a component in a project (on • the elements specified in the WDO file will be stored and
the "Project" pane, in the "Project" group, required for using reproduced in the EXE directory of project. See
• Initialization code of pages,
expand "Import" and select "Import an external the component in the "Using an external component in a site", page
• Initialization code of reports, component"). 106 for more details.
project (compilation
• Initialization code of classes, • when double-clicking the component icon information, ...). Example: The "Zip Code" component uses a
• Initialization code of sets of procedures. found in the "Project explorer" pane or when "Cedex" data file (Cedex.fic and Cedex.ndx files). In
These two files must be distributed along with the the project for component creation, this data file is
selecting "Description" from the popup menu of
component. found in the EXE directory of project.
component.
If the component uses additional elements (data In order for the component to be supplied and
To get the documentation specific to a component
files, etc.), the following elements must be added installed with the data file, the WDO file must
element, double click on it ("Project explorer" pane)
into the project EXE directory: be created in the EXE directory of project for
or press F2 from its code.
• a <ComponentName>.WDO file: this file contains component creation. This file must contain the
the list of external files (data files, text files, ...) following lines:
used by the component. These files must be
.\CEDEX.Fic
supplied and installed with the component. .\CEDEX.NDX
• the files that must be distributed with the
component. These files can be placed in
a specific tree structure. In this case, the
component code must manage the access to
these files in this tree structure.

108 Part 3: Development environment Part 3: Development environment 109

 Generation
Contenu
modes
Distributing a component with WDO • If you are using a setup procedure for the
To distribute a component that is using a WDO file: component, the WDO file will be automatically
• If no setup procedure is used for the component, created when creating the setup procedure of
you must supply: component.
• the WDK file, In the wizard, you must:
1. Ask to modify the files to install ("Modify the list In addition to Web sites, WEBDEV allows you to generate several types of projects.
• the WDI file,
of files to install" in the "Additional modules").
• the WDO file,
2. Select the additional files to install.
• all the necessary files referenced in the WDO Sites
file. The WDO file will be automatically created and
installed with the component. The sites are the most common generation mode. WEBDEV is used to
generate:
• static or dynamic sites (Session or AWP).
• PHP sites.

Libraries
A library is a single file that groups several elements of a WEBDEV project:
pages, reports, etc. You have the ability to generate stand-alone libraries
that can be used by other sites.

External components
The external components are application bricks allowing you to share one
or more specific features between several applications. A component
generated by WINDEV can also be used in a WEBDEV or WINDEV Mobile
project.

SOAP or REST Webservices

A Webservice (also called an XML Web service) can be generated from a
WEBDEV project. A Webservice exposes a set of functions (one or more
sets of procedures). It makes them accessible via the Web (or via a private
network) by using the standard HTTP, SOAP or REST protocols.
Remark: A Webservice must be deployed on a WEBDEV Application Server
in order to be used.

110 Part 3: Development environment Part 3: Development environment 111

 PHP generation in practice 2.3 Running the test of a PHP site in the
editor
2.4 Deploying a PHP site
The method for deploying a PHP site is identical
During the test of a PHP site, the site is compiled in to the method for deploying a static site. When
PHP and it is started in your browser. You see the creating the setup procedure, WDDeploy helps you
1  Overview PHP pages generated by WEBDEV. implement your PHP site.
Reminder: A PHP engine is required on the See the online help for more details.
development computer.
WEBDEV allows you to generate PHP sites without Internet. You must download one and install it.
even knowing the PHP language. The site can be For example, you can use EasyPHP (http://www. The compilation of a PHP site is used to:
entirely developed in WLanguage, like any standard easyphp.org/). This engine is used for example • find out the WLanguage programming errors.
WEBDEV site. However, you have the ability to enter only, you can use any other PHP engine. • see the controls, events, WLangage functions
your own PHP code (server code). Remark: PHP version 4.3.2 (or later) is required. not available in PHP generation. These errors
A MySQL database is required. The PHP sites appear in purple in the "Compilation errors"
1.1 What is a PHP site? generated by WEBDEV can also be used by PHP pane.
A PHP site is compiled in PHP. If this site is using servers version 5 or 7. See the online help for more details.
a database, this database will be accessed via an
ODBC driver (MyODBC, ODBC for Oracle, etc.) or via 1.2 Why develop a PHP site with WEBDEV?
the Native MySQL Connector (also called Native For some sites (especially small ones), it may be
Access). useful to develop these sites in PHP in order for
The ODBC driver is specific to each database (it can them to be hosted at no extra cost. You now have
be found on the site of the database publisher). the ability to do it with WEBDEV.
A PHP site includes ".php" pages and it requires a Remark: The number of WLanguage functions
PHP engine to be run. that can be used in a PHP project is limited in this
To compile (in PHP) a PHP project with WEBDEV, a version. This number of functions will increase in
PHP engine must be installed on the development the forthcoming versions.
computer. Several PHP engines are available on

2  Features of PHP project

2.1 Creating a PHP project • The compiler indicates the functions or

controls that cannot be used in PHP. A purple
The method for creating a PHP project is the same
message is displayed in the "Compilation
as the method for creating any WEBDEV project:
errors" pane.
1. Click on among the quick access buttons
• Deploying the PHP site is proposed via
of WEBDEV. The window for creating a new
WDDeploy.
element is displayed: click "Project".
Remark: We advise you create a new WEBDEV
2. The wizard for project creation starts.
project to develop a PHP site rather than transform
3. In one of the first screens of the wizard, you can a WEBDEV site into PHP.
choose how your project will be generated. To do
so, select "PHP" and follow the wizard. 2.2 PHP RAD
As soon as the project is configured as a PHP
project, all the tools available in WEBDEV are Like for any project associated with an analysis, the
automatically configured for the PHP project: RAD can be used to generate the pages of your site.
• The PHP RAD that generates the PHP code The RAD takes into account all the specific features
from a project for several WEBDEV features. of PHP generation (controls, events, functions
that can be used in a PHP site generated from
WEBDEV).

112 Part 3: Development environment Part 3: Development environment 113

 Project Monitoring
Contenu
Managing
Contenu
Center requirements
To manage the life cycle of your development projects, WEBDEV allows you to use the Project A requirement is a need regarding an action that should be performed by a product (or a service).
Monitoring Center. The Project Monitoring Center is used to:
• Manage the project requirements, The Project Monitoring Center allows the project manager to manage the requirements of a
• Manage the project monitoring (schedule of tasks to perform), development project.
• Manage the bugs and evolutions signaled by the users on a project.
The Project Monitoring Center is using a HFSQL Classic or Client/Server database: the database To do so, you must:
of Control Centers. This database is shared between the different tools available in WEBDEV: • define the different project contributors.
• define the requirements (with the different elements associated with them).
- Tasks Each developer performs the different tasks assigned to him.
- Requirements
- Quality
The project manager can follow the progress status of the project at any time.
Project
Monitoring Center Project Manager Developer

1 Creating requirements
made of: 2 Performing the
requirements:

Project Monitoring
Center
Tasks

Login window
of WEBDEV
Database of
Control Centers
Incidents

Pane of
Stand-alone Image catalog Business Rules
Business Rules Automatic tests Business Rules
messaging (WDBAL) (custom images)

3 Monitoring requirements (Project Monitoring Center):

Remark: When installing WEBDEV, the setup program proposes you to choose one of the following
options:
• create the database of Control Centers. This database will be automatically created in HFSQL
Classic format in the specified directory. Managing the
requirements
• share an existing database of Control Centers.

114 Part 3: Development environment Part 3: Development environment 115

 Managing
Contenu
Managing business
Contenu
tasks rules
The Project Monitoring Center allows the project contributors to manage their task schedule. WEBDEV allows you to manage the business rules. A business rule is used to define a specific
These tasks can be linked to requirements and they can correspond to several projects. operating mode or to specify a particular process. For example: the calculation of a specific VAT
rate, the rules for changing the status of a customer, the formula for calculating shipping costs, a
sales commission, a discount rate, a decay coefficient, ...
A business rule can be simple or complex.
Defining the requirements
The business rules can come from:
• the specifications (corresponding to
requirements).
• the suggestions made by the application
users.
Defining the
Business Rules

Applying the Business

Rules to the project
Once all the project tasks have been defined, the Project Monitoring Center takes care of
everything. Entering the time spent on a task is almost automatic, it requires no specific action
and it generates no particular constraint.

When the relevant project is opened, the Project Monitoring Center requests or indicates the
current task. As soon as a task is completed, all you have to do is indicate that this task is over Using the site
and specify the new task.

A task can be linked to a project element (window, report, ...). Whenever the relevant element is
opened, the time spent on this element is counted and stored in the Project Monitoring Center. During the development, the business rules defined for the project are directly displayed in the
Conversely, the element corresponding to the task that you want to perform can be automatically "Business rules" pane of development environment. This pane presents the number of project
opened from the task list. elements to which business rules apply and the percentage of rules currently implemented.
Each developer can also see his own task list in the "Project Monitoring Center" pane found in the
editor.

116 Part 3: Development environment Part 3: Development environment 117

 PART 4

Advanced
concepts

118 Part 3: Development environment

 RAD
Contenu
RID
RAD (Rapid Application Development) and RID (Rapid Interface Design) are used to create pages
from:
• the analysis linked to the project,
• standard or custom RAD patterns,
• skin templates.

In RAD generation the generated pages contain all the code necessary for their operation. The
test of these pages can be run immediately with the data found on the development computer.
In RID generation, the generated pages contain only the controls linked to items in the analysis.
The entire code required for these pages to operate must be written by the developer. Your custom
code can be typed directly.

Project RAD Skin

analysis pattern template

Full Application RAD

Page RAD or RID

Example of page generated

by RAD or RID

120 Part 4: Advanced concepts Part 4: Advanced concepts 121

 UML
Contenu
UML model in practice
model
1  Overview
WEBDEV allows you to create nine types of UML models:
• Class diagram: describes the overall structure of a system.
The main objective of a development team is to WEBDEV allows you to create nine types of UML
• Use case diagram: represents the system features from the user’s point of view. create optimized applications, capable of satisfying models:
• Object diagram: represents a set of objects and their relationships at a given time. the constantly evolving needs of their users. • Class diagram.
• Component diagram: describes the physical and static architecture of a computer application. The modeling of an application is used to specify • Use case diagram.
• Activity diagram: represents the behavior of a method or the progress of a use case. the structure and the expected behavior of a • Object diagram.
system. It helps understand its organization and
• Sequence diagram: represents the chronological order of messages sent and received by a set detect simplification and re-use opportunities as • Component diagram.
of objects. well as manage potential risks. • Activity diagram.
• Collaboration diagram: represents the structural organization of objects that send and receive A model is a simplification of reality. It allows you to • Sequence diagram.
messages. better understand the system to develop. • Collaboration diagram.
• State-transition diagram: represents a sequence of states. A diagram is the graphical representation of a set • State-transition diagram.
• Deployment diagram: shows the distribution of devices (nodes) used in a system as well as the of elements that constitute the system. To view • Deployment diagram.
association between the executable programs and these devices. the system under different perspectives, the UML This chapter only provides an overview of UML. See
language (Unified Modeling Language) proposes a specific documentation about the UML language
nine diagrams, each one representing a system for more details.
state.

2  The different UML diagrams

2.1 Class diagram A class diagram includes the following elements:

A class diagram is used for modeling the structure • Class: represents the application structures.
of a system via classes and via relationships Each class is divided into three compartments:
between these classes. • the class name indicates what the class is
The class diagrams are the most common and not what is does.
diagrams in the modeling of object-oriented • the class attributes give the class
systems. characteristics.
For example, the diagram below presents the • the class operations represent the possible
management of stocks: actions on the class.
For example, the Stocks class contains the
ListProducts attribute. This class also groups
the AddProduct and RemoveProduct operations.
These operations can be applied to the class
instances.
Remark: The UML language defines three
visibility levels for the attributes and the
operations:
• Public: the element is visible to all other
classes.
• Protected: the element is visible to the class
itself and to its sub-classes.

122 Part 4: Advanced concepts Part 4: Advanced concepts 123

 • Private: the element is visible to the class • the developer can implement these elements. For example: • composite object: visually represents an object
only. For example, the behavior of a cell phone can be • two types of Customer actor are available: made of other objects. For example: a window
• Relationship: describes the behavior of described via a use case diagram. Individual Customer or Enterprise that contains scrollbars, buttons, ...
classes between themselves. Three types of Customer. • link: presents the relationships between the
relationships are available: • the identity check can be performed different objects.
• Association: Structural relationship between according to two methods: typing a
classes. For example, the Orders class is password or checking a fingerprint. 2.4 Component diagram
linked to the Product and Customer classes. A A component diagram describes the physical and
Customer can place several Orders. An order static architecture of a computer application. For
contains several products. An order must example: source files, libraries, executables, ...
necessarily contain at least one product. For example, the diagram below presents the
• Dependency: Use relationship that operating mode of a program allowing you to log in
establishes that the instances of a class are text mode in Unix.
linked to the instances of another element.
For example, the Orders class uses the Stocks
class: before adding a product into an order, A use case diagram includes the following
you must check whether this product is elements:
available in stock. • Actor: represents the role of application users.
• Generalization: Relationship between a For example, a person who works in a bank
general class (parent) and a specific class will be the loan manager. If this person has an
(child) that derives from it. For example, the account in this bank, he will also play the role of • Package: divides and organizes the diagram
Sail Boat class and Speed Boat class are Customer. representation (like the directories organize the
derived from the Boat class. • Use case: describes a sequence of actions run files). Each package can contain actors and use
by the application. For example, Place an order, cases.
Enter an invoice, Create a new Customer entry,
... 2.3 Object diagram A component diagram includes the following
A use case describes the actions performed by elements:
An object diagram presents a set of objects and
an application but it does not specify how the • module: represents the different physical
their relationships at a given time.
application performs these actions. elements that constitute a computer application.
An object diagram is used to show a context For example: a file, a library, ...
• Relationship: describes the behavior of actors (before or after an interaction between objects for
in relation to the use cases. Three types of A module can be represented:
example).
relationships are available: • by a specification that shows the module
For example, the diagram below presents a section interface. This specification can be generic for
• Association: Structural relationship between of the general structure of motorcycles:
two linked elements. the customizable classes.
• Dependency: Relationship establishing that • by its body that presents the module
an element uses another one. For example, a implementation.
bank customer may get cash from an ATM. In • task: represents a component that includes its
• Package: used to divide and organize the own control flow (thread).
this case, the Get Cash action depends on the
diagram representation (how the directories • main programs of application.
Customer.
organizes the files). Each package can contain
In order to get cash, the Customer must enter • sub-programs: groups the procedures and the
classes and relationships.
his PIN number. In this case, the Get Cash functions that do not belong to classes.
Via the generation of a class diagram, you have action depends on the Password Input.
the ability to create the structure of the WEBDEV
classes used in your application.

2.2 Use case diagram

An activity diagram includes the following elements:
A use case diagram is used to view the behavior of
a system in such way that: • object: represents a class instance.
• Generalization: relationship used to organize Remark: If a class diagram is opened, you have
• the user can understand how to use each
the elements according to a hierarchy. the ability create an object from a class found
element.
in this diagram (Drag and Drop from the "UML
analysis" pane).

124 Part 4: Advanced concepts Part 4: Advanced concepts 125

 2.5 Activity diagram • activation period of an object: Activation periods 2.8 State-transition diagram 2.9 Deployment diagram
can be inserted into the line representing the
An activity diagram represents the behavior of a object lifespan. These periods represent the A state-transition diagram presents a sequence A deployment diagram presents the physical layout
method or the flow of a use case. times when the object is active. of states that an object goes through during its of hardware devices (nodes) used in a system as
For example, the following diagram presents the lifecycle. It is used to describe the changes of well as the association between the executable
• message: represents, via horizontal arrows, states for an object or for a component. programs and these devices.
flow of a dam: the message exchanged between the different
objects. These arrows are oriented from the A state is defined by its duration and by its stability. For example, the diagram below presents the
message issuer to the recipient. The order in A transition represents the instantaneous change different hardware devices used in a company:
which the messages are sent is given by the from one state to another one.
position of the arrows on the vertical axis. A transition is triggered:
For example: "Hang up", "Ring", ... • by an event.
For example, the following diagram represents the • automatically when no triggering event is
beginning of a phone call: specified.
For example, the diagram below presents the
An activity diagram includes the following elements: different steps of a car wash:
• activity: presents a specific step in a the
execution of a mechanism. For example:
""Create an estimate", "Opening a window",
"check knowledge", etc", ...
• synchronization bar: used to synchronize the
different activities:
A deployment diagram includes the following
• by indicating the activities that must be elements:
performed before a given activity. For
example: "Press clutch" and "Change gear" • node class: represents a class of hardware
before "Release clutch". resource. For example: a server, a PC, a printer,
...
• by indicating the activities that will be
performed in parallel. 2.7 Collaboration diagram • node instance: represents a hardware resource.
For example: the server #3, the printer #7, ...
• object: used to attach activities to the object A collaboration diagram presents the structural
that performs these activities. For example, • connection: describes the communication
organization of objects that send and receive support between two nodes. For example: RNIS
the "Order" and "Pay" activities are attached to messages.
the "Customer" object; the "Teach" and "Check or TCP/IP link.
For example, the diagram below presents the use
knowledge" activities are attached to the A state-transition diagram includes the following
of an elevator by a person:
"Teacher" object. elements:
• sending signal: represents the sending of a • state: represents the value of object attributes
signal toward an object. at a given time.
• waiting for signal: represents the wait for a • initial state: represents the state when the
signal coming from an object. system is started.
• transition: represents the move from an activity • final state: represents the status of system at
that is ended to another one. For example: "Too the end of operation.
much water", "Enough money", ... • super-state: used to structure the diagram by
specifying several distinction levels between the
2.6 Sequence diagram states.
A sequence diagram represents the chronological • history: represent the last active state of a
order of messages sent and received by a set of super-state.
objects. A collaboration diagram includes the following • stump: used to symbolize the states found in a
A sequence diagram includes the following elements: super-state. This allows you to link these states
elements: • object: represents the different objects used. to other states that do not belong to the super-
• object: represents the different objects used. • actor: presents an element external to the state.
Each object is represented by a square at the system. A person for example. • transition: represents the switch from one state
top of a dotted line. This line represents the • message: represents the messages exchanged to another one.
object lifespan. For example: "Caller", "Callee", ... between different objects.

126 Part 4: Advanced concepts Part 4: Advanced concepts 127

 User
Contenu
User groupware in practice
groupware
1  Overview
The User Groupware is used to easily include a management of users and rights in a WEBDEV site.
Two types of users are taken into account:
An Intranet or Internet site requires to define the list and create orders.
• simple user, who directly uses the site. role of different contributors. It is often necessary • the sales people can see the price list, place
• supervisor, who can configure the users and their rights. to define several access levels according to the orders and create new customers.
user. • the sales directors have access to all options.
Indeed, all users do not have the same To manage these access levels in your WEBDEV
responsibilities or the same requirements. Their sites, all you have to do is include the user
User

1
ability to use some of the application features can groupware in your site. In just a few mouse clicks,
Start the site be customized. a standard application can be changed into an
Let’s take a simple example: an application application that manages several access levels.
for sales management proposes the following This feature can be easily implemented.

3
features:
2
Use When running the site, the manager will be able to
Identification the site • Price list view, create users (identified by their login and password)
• Price list modification, and to give them access to some of the site
• Order entry, features.
Use Check • Customer entry. Remark: The user groupware is available in
the rights the rights The accesses differ according to the user. Some dynamic WEBDEV sites running on Windows or
examples: Linux. The user groupware is not available in static,
PHP, AWP or Ajax sites.
Supervisor • the administrative assistants can see the price
HFSQL Classic,
Client/Server,
Native Access,
LDAP 2  How does the user groupware operate?
Database
of User Groupware A site that is using the user groupware has two use The advanced menu allows the supervisor to:
levels: • start the site.
Configuration of • the user level. • configure the groupware.
rights and users • the supervisor level.
4 Supervisor Configuring the groupware consists in creating
menu users and groups, associating the users with the
2.1 The user level groups and managing the rights granted to each
The user connects to the application via a login user (or group) on each site page. The rights can
page and he accesses the authorized features. be defined for the menu options, for the groups of
Remark: The user groupware can allow you to controls and for the controls. The supervisor can
connect by using an LDAP directory. gray these elements, or make them inactive or
invisible. These configurations have priority over
2.2 The supervisor level any configuration defined in the program.
History See "Configuring the site that is using the user
of connections The supervisor connects to the application via a groupware", page 132 for more details.
login page and he can access an advanced menu
Remark: All user information and rights are stored
allowing him to configure the users and their rights,
in HFSQL format data files..
or to start the application.

128 Part 4: Advanced concepts Part 4: Advanced concepts 129

 3  Implementing the user groupware The password of data files Two modes are available:
By default, the data files found in the user • Without management of rights: No groupware
groupware have a specific password. This data files will be created. If the application is
3.1 Adding the user groupware into a site Starting the user groupware password is: "PCSGPW2001". started in automatic mode, the login page will
Two modes can be used to start the user To change this password, type the new password ask the user to identify himself. If the user is
To implement the user groupware in a WEBDEV in the "Files" tab of the description window of user saved in the LDAP directory, the site will start ;
site, a single option is required: on the "Project" groupware:
groupware. The characters typed are displayed as otherwise, it will be closed. A supervisor cannot
pane, in the "Project" group, click "User groupware". stars. configure rights on the pages.
The window for configuring the user groupware is • With management of rights: Only the users
used to define: found in the LDAP directory can connect. The
• The management mode of user groupware. rights can be configured on the windows.
• The mode for starting the user groupware. See the online help for more details.
• The location of the data files of user groupware. Remark: The user groupware operates with Active
Directory. It does not operate with openLDAP.
Integration mode of user groupware • Auto run: The login page of the user groupware
Several modes can be used to integrate the user is launched before any other page of the
groupware: application. The initialization code of project is
run once the login page is opened and validated.
• Manual start: The login page will open only if
gpwOpen is used. This option is used to run the
initialization code of the project for example,
before opening the login page. This allows you to Remark: This password is used when re-indexing or
display a page asking for the runtime language opening data files with WDMAP for example.
of site for example.
See the online help for more details.
Automatic login in test mode 3.2 Running the site test
You can specify the login and password that will Identification
be used in "Automatic test" mode. This information When running the test of a site that supports the
The user groupware proposes several modes for user groupware, the first page displayed is the login
• Automatic user groupware: all user groupware will be used if an automatic test is run on the identifying users:
programming is automatically integrated into application. page (regardless of the first page defined in your
• Identification managed by the user groupware of application).
your site.
WEBDEV. A single user exists by default: the supervisor. To
No customization can be done. The skin
Data files of user groupware • Identification from an LDAP directory. connect as the supervisor, all you have to do is
template of project is automatically applied to all
the pages used by the user groupware. The user groupware is using several specific data enter the following information in the login page:
files. These data files are mainly used to manage Identification managed by the user groupware
This integration mode is used to automatically • Name: SUPERVISOR
the users, the groups, the rights and the elements The login and password are saved in the data files
follow the possible evolutions of user groupware. • Password: SUPERVISOR
of the site. of user groupware.
• Custom user groupware: the entire You can now run the test of your site or configure
programming of user groupware is automatically The user groupware can be used: Identification from an LDAP directory the user groupware.
included in your application via an internal • with HFSQL Classic data files. In this case, the If the company of your customer is using an LDAP
component. All the pages required to "Files" tab is used to specify (if necessary) the directory, you have the ability to branch the user Remarks:
manage the user groupware (login and user location of data files. groupware onto this directory. To do so, specify • In order for the first page of your site not to
management) are automatically added to your • with HFSQL Client/Server data files. In this case, the characteristics of LDAP directory (server, port, be the login page, check "Manual run" in
project. This allows you to customize all the the "Files" tab is used to define the parameters database, ...) in the "Identification" tab. Therefore, the "Execution" tab of the options of User
pages used by the user groupware. for accessing the HFSQL Client/Server database the account and the password found in the LDAP Groupware. Simply use the WLanguage
as well as the file directory. directory will be automatically asked to the user. gpwOpen function to open the login page.
The different pages found in the user groupware
are presented in details in the online help. • The pages for managing the user groupware are
run before the initialization code of the project.

130 Part 4: Advanced concepts Part 4: Advanced concepts 131

 • The first page of your site defined in the project A screen specific to the user groupware is used to 4.2 Managing rights The following states are available for each element:
will be started after the login page (when the configure the location of data files specific to the • Default: the element behavior corresponds to
user is not the supervisor). user groupware. The supervisor can manage the rights granted
to each user (or group of users) on the elements the default behavior, defined in the application.
• To avoid starting the user groupware when Remarks: found in the project pages. • Inactive: the element is displayed but no input
running the application tests, select "No user • If the data files of user groupware have been can be performed.
groupware" in the "Integration" tab of user For each association between a user and a page,
configured for your client, they must be selected a specific status can be defined for all the page • Grayed: the element is grayed. No input can be
groupware options. when preparing the setup. Therefore, the list of performed.
If the user groupware is re-enabled later, the elements.
setup files must be customized. • Invisible: the element is not displayed.
data files previously used by the user groupware The elements managed in the pages, internal
• If the groupware files have not been configured, pages and page templates are as follows:
will not be erased. only the Supervisor user will exist during the first 4.3 Displaying statistics
start of the application. • the controls, the groups of controls,
3.3 Installing a site that is using the user • the menu options. For each site, you have the ability to get use
groupware Tip: if you do not configure the different use levels statistics according to the user, for a specific
of user groupware for your clients, we recommend period.
The method for installing a site that is using the that you provide them with a document listing all
user groupware is identical to the method for the controls found in your pages in order to get an
installing any other site: on the "Project" pane, in
the "Generation" group, click "Deploy the site".
optimized configuration. 5  Tips for a site that is managing the user groupware

4  Configuring the site that is using the user groupware 5.1 Using groups of controls When configuring the user groupware, the
supervisor can define different visibility
To simplify the configuration of groupware
characteristics. The characteristics defined by the
When the site is deployed, the user groupware is 4.1 Managing users management according to users, we recommend
supervisor have priority.
configured by the application supervisor. that you use groups of controls.
The user management consists in: For example, a button is used to make a control
This setting consists in creating the users and In your pages, you have the ability to create groups
• creating users, active. This control was grayed by the supervisor.
groups of users, and in granting them specific of controls according to the controls that will be
Your code will be ignored and the control will not
rights for each control found in each site page. • creating groups, displayed for a specific type of user.
be active.
These rights are used to gray controls, groups of • associating users with groups. The ability to associate a control with several
controls or menu options, and to make them visible To create a new user, you must specify: groups of controls increases the number of 5.3 Defining rights
or invisible. • the user’s last name (mandatory). possible combinations.
To get a definition of rights corresponding to the
• the user’s first name. These groups of controls can be created in your features of your site, we advise you to:
site only for managing the groupware, no specific
To configure the user groupware, you must simply: • the user login. This login corresponds to the • configure the rights for your application before
programming is required.
1. Start the site and connect as supervisor: user’s identifier when he connects to the creating the setup procedure. Then, all you have
• Name: SUPERVISOR application. 5.2 Visibility of controls to do is add the groupware files when creating
• the user’s password. This password is optional the site setup.
• Password: SUPERVISOR When developing your application, you can define
and it can be entered by the user during his first • supply a programming documentation that
2. Select "Configuring the groupware". the visibility options for the elements found in your
connection (check the corresponding option). provides the names of controls, groups of
3. The page for managing the user groupware is pages:
The user can be defined as being a supervisor of controls and options that must be configured
displayed. This page is used to: • when describing the element (7-tab window), according to the level of use defined for the site.
the site.
• manage the users and the groups. • by programming (..State or ..Visible).
You also have the ability to modify or delete a user.
• manage the rights. When deleting a user, you have the ability to delete
• display the statistics. the entire user or to delete his rights only.
• migrate the data coming from a user The users can be grouped.
groupware version 18 and earlier. A user can be associated with several groups.

Remarks:
• The supervisor password should be changed
during the first use.
• If you are using an LDAP directory, you have the
ability to import the users found in the directory
in order to manage the rights of these users.

132 Part 4: Advanced concepts Part 4: Advanced concepts 133

 Multilingual
Contenu
Multilingual sites in practice
sites
1  Overview
WEBDEV allows you to easily create multilingual sites from the same project.
A multilingual site can be distributed in several Remarks:

1
languages. The different languages of the site • If the operating system supports several
Choosing languages
will be taken into account during the different languages (Hebrew, Arabic, Greek, ...),
- Project development steps. the corresponding character set will be
- Analysis The main steps for developing a multilingual site automatically used when typing translations in
are as follows: these languages.
1. Choosing the languages supported by the • If your site is a multilingual site, this feature
project and the analysis. must also be managed in the pages of user
2 Translating project
elements
2. Entering the different project elements (pages,
code, ...) in the different project languages.
groupware and in the pages for automatic
management of HFSQL errors. See the online
- Direct translation 3. Defining the project language by programming. help for more details.
- Translation via WDMSG, WDINT, • The management of Unicode is available in the
WDTRAD, ... 4. Managing specific character sets in the data
files. HFSQL data files and in the controls of pages.
5. Creating the library and the setup program.

3 Programming Data files

2  Choosing the languages supported by the project and the analysis
- Choosing the site language - Choosing the character set
(Nation function) (ChangeCharset function)
- Choosing the character set - Taking the character set into account when
2.1 Languages supported by the project Linguistic options
(ChangeCharset function) creating the file (HCreation* function)
- Taking the character set into account The different languages supported by the project The "Languages" tab of project description is also
when reindexing (HIndex function) are defined in the project description: used to define the options specific to a language:
number, currency, date, ...
1. On the "Project" pane, in the "Project" group,
click "Description". The description window of the The parameters used by default are the ones
project is displayed. defined in the linguistic options of Windows

4 Library
Choosing the library
2. In the "Languages" tab, you have the ability
to add or delete the languages supported by the
(accessible from the Windows control panel).
When creating an edit control or a table column
languages project. that displays numeric data (number, currency, date,
time, duration, ...), the input mask used will be the
The selected languages will be proposed for all
mask defined in the language options of project.
multilingual resources that can be translated
This option is available in the pages.
(captions of controls, menu options, help message
5 Setup program associated with a control, ...). At run time, when an edit control or a table column
has a mask "Defined by the project", the input mask
When modifying the project languages, the
- Available languages and/or the display mask will automatically adapt
- Translating the setup modifications will be automatically taken into
according to the options selected in the project for
program account:
the language displayed at run time.
• for each new element or object created in the
Remark: The linguistic options are also used to
WEBDEV editor,
define the writing direction and the character set
• all each element or object opened in the used ("various" option).
WEBDEV editor.
The main language corresponds to the language 2.2 Languages supported by the analysis
used by default at run time. If your project is using an analysis, the choice of
languages supported by the analysis is performed
in the data model editor. Indeed, the same analysis
can be shared among different projects that do

134 Part 4: Advanced concepts Part 4: Advanced concepts 135

 not propose the same languages. Therefore, the When generating a "full application RAD" or these specific character sets. pane, in the "Project" group, click "User groupware".
number of languages defined for the analysis can a page RAD, this information is automatically WEBDEV allows you to automatically manage the The different pages of user groupware will be
be greater than the one defined for the project. taken into account by all the languages common use of specific character sets in the editor. included in your project.
To configure the languages supported by the to the analysis and to the project. Indeed, as soon as the edit cursor of the mouse is Then, all you have to do is translate these pages.
analysis: • for the information printed in the program located in an input area of a language that uses Remark: Uncheck "AutoRun" if necessary: this
1. Display the analysis of your project in the editor. documentation (Remarks of data file or item). a specific character set, the corresponding input allows you to display a page for language selection
2. Display the description window of the analysis: language (character set used by the keyboard) is before starting the login page.
2.3 Languages supported by the different automatically displayed.
on the "Analysis" pane, in the "Current element" project elements
group, click "Description". Therefore, if a caption is entered in the Russian 3.4 Translating messages found in the
3. Select the "International" tab. By default, the different project elements (pages, section of the caption description, the keyboard WLanguage code
reports, code, classes, ...) support the same will automatically switch to the Russian character In your code, several WLanguage functions allow
The different languages configured in the analysis
languages as the project where they have been set. you to communicate with users via character
will be proposed:
were created. Reminder: To use specific character sets, the strings. These messages must also be translated
• when configuring the shared information of
In some cases, an element may support more files corresponding to the requested character into the different languages of your site.
items. The description of the controls linked to
languages than the project (when the element sets must be installed in the regional options of To translate a character string typed in the code
items (options, captions, ...) can be typed in the
is shared between several projects that support Windows (control panel). editor:
different languages supported by the analysis.
different languages for example).
3.3 Translating specific pages 1. Select the character string to translate.
2. Select "Translate" from the popup menu of the
Management of HFSQL errors
3  Translating the interface into several languages selection. The window for translating messages is
By default, the pages for managing the HFSQL displayed.
errors are supplied in English and in French. To 3. Type the translation and validate. The code line
When the languages supported by the project the "Home" pane, in the "Environment" group, translate them into another language, you must: is displayed in the code editor:
have been selected, the information displayed by expand "Options" and select "General options of 1. Include the default error pages in your project.
the site must be translated into these different WEBDEV". These pages are supplied as example in \
languages. 2. In the "Translation" tab, choose: Programs\Data\Preset pages\HFSQL - Automatic
To translate the interface into several languages, • the default translation tool (as well as the help pages.
several elements must be taken into account: transmission mode for the text to translate 2. Customize the management of errors to use the
• The selected translation mode. and for the translated text). HFSQL pages for error management (HOnError). • The flag indicates that translations exist for
• The supported languages. • the source and destination languages for the 3. Translate the different messages (see previous this character string. Click this flag to display
translation. paragraph). the translation window.
• The use of specific pages (user groupware,
automatic management of HFSQL errors). 3. If a translation tool is specified, a "Translate" • The number (2 in our example) indicates
button will be displayed in each element the number of translations typed for this
• The messages displayed by programming. User groupware
containing information to translate. This button character string.
By default, the user groupware is supplied in
3.1 Selected translation mode is used to translate the selected text via the
English and in French.
Remark: To transform all the messages found in
specified translation tool. your code into multilingual messages, on the "Code"
WEBDEV proposes several translation modes: To translate a site that uses the user groupware, pane, in the "Languages" group, expand "Translate
4. To perform the translation, all you have to
• Automatic translation of interfaces via a specific you must choose the "Custom" mode when the the strings" and select "Convert the simple strings
do is select the text to translate and click the
translation tool, found on the development user groupware is included in your site. Reminder: into multilingual messages".
"Translate" button.
computer. This translation is performed in the To configure the user groupware, on the "Project"
WEBDEV editor. Checking out and checking in the
• Check out all the messages to translate information to translate
via WDMSG and check them back in after WDMSG is used to check out all the project 4  Choosing the language by programming
translation. messages (captions of controls, ...) and check them
back in after translation. A multilingual site is an application that can be • implement an option (menu option or button for
Translating interfaces
Contact PC SOFT Sales Department for more distributed in several languages. The user will be example) allowing the user to change the current
For each object, several multilingual areas are details about the conditions for using this product. able to choose the runtime language of application. language of the application.
displayed in the description window. These You can for example:
multilingual areas allow you to enter information in 3.2 Languages that use a specific character • ask for the runtime language during the first
the different languages supported by the project. set application start.
To translate this information from WEBDEV: If your site supports languages that use specific
1. Display the WEBDEV options for configuring character sets (Greek, Russian, ...), you must enter
the translation options of software used: on the translation of the different messages by using

136 Part 4: Advanced concepts Part 4: Advanced concepts 137

 10 tips about
Contenu
ergonomics ... 3 Are your pages very long? Give the Web user ways to go back to the top.
If your pages are very long (more than 2 screens), use buttons or links to go back to the top of the
page (to avoid using the scrollbar).

1 Enhance the style of your home page.

The home page is a major element of your site. In some sites, it is just a connection page but in
most Internet sites, this is truly the main page for attracting visitors (and future customer of the
site). Its content and its presentation must be studied closely. Don’t hesitate to read books about
user-friendliness of sites to help you.

2 Get in touch
When Web users visit a site, they must be able to identify the person or the company in charge
of the site: simply provide a name, a mailing address and an Internet address, ... allowing the
Internet user to contact you.
Top of page End of page with a button
used to go back to the top of page

4 Harmonize the style and alignment of your buttons.

Make sure your buttons are using the same style, and check their alignment. The page editor
includes a snap-on and alignment mechanism to simplify this task.

This page can show a map specifying a store’s location, opening times, etc.
5 Avoid using of framesets.
The framesets, even though they seem to be more efficient at first, have specific problems:
they include several pages. Referencing them beside search engines is more complicated. The
navigation (especially the use of browser "Back" key) is hard to understand for the users. Today, it
is not recommended to use framesets when developing sites.

138 Part 4: Advanced concepts Part 4: Advanced concepts 139

 6
elements.
Are there lists containing more than 20 elements? Use several pages to list the 8 Are you using images? Make sure they are displayed properly in your pages.

The pager control will allow you to go from a page to another one without having to write a single
code line and the overall interface of your site will be lighter. The site will be more pleasing and
faster to view.

Image in the editor Image in the browser

problem while
displaying the images
If a display problem occurs, check whether:
• the image exists,
• the image is saved in a format recognized by the browser (GIF or JPG for example),
• the image is found in the sub-directory of the <ProjectName>_WEB project.

9 The Web user must type a quantity? Use a combo box to simplify the input of quantities.

7 Use images displayed at 100% or Homothetic centered.

To keep the proportions of your images, we recommend that you choose:
• images displayed at 100% (for the static and dynamic images or if the image size is identical to
the control size).
• homothetic centered images (for the generated images or for the images of different sizes
coming from a database): the image size will be adapted by homothety to the area defined for
the image. The proportions will be respected.

10 Are you proposing a product catalog with the possibility to order?

Specify all the details about the product (name, reference, price, ...), including the button or the
link used to order the product, to add it to the selection, to add it to the basket, ...

Image at 100 % if the Stretched image Selecting the display mode in the
control dimensions (not recommended) editor (Image control description,
correspond to those of "General" tab)
the image, otherwise,
Homothetic image

140 Part 4: Advanced concepts Part 4: Advanced concepts 141

 Overlaying the
Contenu
Customizing the aspect of
Contenu
controls a site: skin elements
To get special effects (transparency or depth), your controls can be overlaid. The graphic aspect of a Web site is a major element. With WEBDEV, it is very easy to get a good
Each control has an "Overlay and move" option ("UI" tab in the control description window). looking site with a professional style at first try. To do so, several tools are available: the skins, the
If the "Overlayable" option is selected, the control will no longer be linked to the page positioning palettes and the preset page templates.
tables.. The control can be moved and placed "over" every other control found in your page.
Caution: The control where "Overlayable" is checked will move over the other controls . If this Skin
option has been enabled for several controls, the order in which they are overlaid can be defined
via the "Up", "Down", "Foreground" and "Background" options of the "Modifications" tab. The skin of a site can be selected in the description window of project (on the "Project" pane, in
For example, in order for a static to be displayed on an image, the static must be made overlayable. the "Project" group, click "Description"). The skins are configured in the "Skin, Styles" tab. Several
skins are supplied with WEBDEV.

In the editor Overlay option

A skin includes:
• a style sheet containing WEBDEV styles.
• an image directory.
• a default color palette.
• a set of reports used as base to build the new project reports.
In the browser
The skins can be swapped at any time to modify the graphic aspect of a site. When changing skin,
WEBDEV automatically adapts the visual aspect of the site controls.

142 Part 4: Advanced concepts Part 4: Advanced concepts 143

 Choosing a type of
Contenu
button/link
The skin of a page can be defined at three different levels (in descending order of priority):
• In the project.
• In the page template from which the page inherits the properties.
• In the page itself.
The general skin must be defined at project level. If a set of pages must use a specific skin You can choose among several button/link
(the "Promotion" pages of a site for example), you have the ability to replace the project skin by actions, depending on the operation to be
redefining it for a page template. If a particular page must have a different skin, this skin can be performed on the page controls.
chosen for the page itself.
The action can be chosen in the control
description ("General" tab).
The color palettes
Let’s see some examples of "standard" uses of
The color palettes define a set of colors that are proposed in all color pickers of project. The color buttons/links in a page:
palettes are an easy way to customize the visual aspect of a site.
These colors are also applied to the styles defined in the project skin in order to easily change the
visual aspect of a project.
• Send the data found in the current page to the server for processing
Example: Registration form: the link is used to check the validity of information entered and to
The color palette of a page can be defined at three different levels (in descending order of display a confirmation page.
priority): To perform this type of process, use a link with the action "Send the values to the server". The
• In the project. page data is sent to the server in order to be processed.
• In the page template from which the page inherits the properties.
• In the page itself. • Perform a process on the server, without retrieving the data of the current page
Example: Menu page made of buttons: each button is used to start a page of the site.
The general palette must be defined at project level. If a set of pages must use a specific palette To perform this type of process, use a button with the action "Do not send anything to the
(the "Management" pages of a site for example), you have the ability to replace the project palette server".
by redefining it for a page template. Finally, if a specific page must have a different palette, this
palette can be defined for the page itself. • Perform a process in browser code
Example: Performing a simple calculation locally, an input check, ...
The preset page templates To perform this type of process, use a button with the action "Do not send anything to the
server".
The preset page templates provide structures of pages corresponding to a large range of sites
and they simplify the re-usability as well as the graphic harmony between the projects. • Display a page external to the WEBDEV site
Several templates are supplied with WEBDEV. Example: Launch a search engine site via a button.
The same preset template can be added several times into a project so that it can be used with To perform this type of process, use a button with the action "Do not send anything to the
different skins or different color palettes for example. server".

Once it is added to the project, the preset template can be opened in the editor and modified like • Reinitialize the page controls
any other page template. Example: Link used to clear the controls found in the current page.
To perform this type of process, use a link with the action "Delete content of the controls in the
browser".
A preset page template can also be used as base template for creating another page template.

144 Part 4: Advanced concepts Part 4: Advanced concepts 145

 Preventing from going
Contenu
Security benefit: managing
Contenu
back to a page the "Back" button
The browser "Back" button allows the Web user to go back to a page that was already visited. A browser allows you to navigate through the different pages of a site using the "Next" and "Back"
However, it may not be a good idea to go back to a page. buttons.
For example, in a business site, if the Web user goes back to the order validation page, he may
validate his order twice and therefore place 2 orders. A specific page context is created on the server whenever a new Session page is displayed in the
browser.

When the same Session page is used to display different data (page with browsing table, loopers
or "Form with browse" page, etc.), the page context on the server changes according to the data
displayed.

When the Web user clicks on the "Back" button, the browser does not inform the site or the
server. The browser goes back to the previous page without the corresponding context.

No specific management is required when using a "Back" operation to go from one page to
another.
A specific management is required when the same Session page displays different data.

Why manage the "Back" button? A simple example...

To understand why the "Back" button must be managed, let’s take a look at a simple example: a
Session page that displays the list of suppliers.
Step 1: Displaying the list of suppliers

To prevent from using the browser "Back" button to go back to a page:

1. Display the page in the WEBDEV page editor.
2. On the "Page" pane, click on the group icon of "Edit" group ( ). The page description window
is displayed.
3. Display the "UI" tab.
4. In the option "Using the browser "Back" button", select "Forbidden".
5. Validate.

The context contains the list of suppliers displayed in the Table control.

146 Part 4: Advanced concepts Part 4: Advanced concepts 147

 Step 2: Clicking the "Customers" link. This is why the Back button must be managed.

How to manage the "Back" button?

To manage the "Back" button, you can use:
• the page synchronization code in Session mode . This code is called in case of
desynchronization.
• a hidden Edit control (invisible Edit control) to identify the record displayed in the browser.
• the option "Call the page synchronization process if the user has used the browser "Back"
button" on your buttons and/or links ("Advanced" tab of the button description).
You can choose and combine either of these options according to the type of action that can be
performed in the page in Session mode.

Detailed example of how to manage the "Back" button

A dynamic page is used to browse the different products of a site. The buttons found in the page
are as follows:
• Back to main menu
The customers are displayed. The page context is updated on the server: the context contains the
This action requires no specific management of the "Back" button. This button does not handle
list of elements displayed in this Table control (list of customers).
data files: a desynchronization between the context and the page displayed has no effect.
Step 3: Clicking the browser "Back" button. • Delete the current product
The "Delete the current product" action handles a data file. It is important that the deleted
record corresponds to the record viewed by the Web user.
To manage the "Back" button, we recommend that you use:
• a hidden (invisible) control in the dynamic page: this control will contain the identifier of the
record actually displayed in the browser.
• the synchronization code: this code is used to update the context (search for the record
viewed by the Web user).

The actions performed in the synchronization code will be:

1. Re-read the record corresponding to the identifier stored in the hidden control.
2. If the record is not found: an error page is displayed and the code of "Delete" button is not run.
3. If the record is found, the page context is automatically modified on the server: the code of
"Delete" button is run.

Total security!

The Session page displayed on the browser corresponds to the page displayed in step 1. However,
the browser did not inform the server that the "Back" button was used by the Web user. The page
context on the server is still the one corresponding to the customers.
If the Web user selects an element (a supplier) in the Table control, the selected element will be
the corresponding element in the context: a customer. A desynchronization occurs between the
dynamic page viewed and the page context found on the server. The WEBDEV engine detects this
desynchronization.

148 Part 4: Advanced concepts Part 4: Advanced concepts 149

 Managing the "Back" button in practice 2  Preventing from using the "Back" button

If the browser "Back" button is used to display the 2.2 Implementation

previous page, this action will have no effect.
1  Overview To disable the browser "Back" button for a specific
2.1 Operating mode page:
1. Display the description window of the page: on
The browser "Back" button allows the Web users to 1.2 Example of desynchronization Disabling the "Previous page" feature of the the "Page" pane, in the "Description" group, click
display the pages that have already been visited. browser inserts the following Javascript code into "Description".
Let’s see a site example: the generated HTML page:
In a WEBDEV site in Session mode, each HTML 2. In the "UI" tab, for "Using the browser "Back"
• A browser page contains a browsing Table
page displayed on the browser is associated with button", select "Forbidden".
control linked to the ITEM file and a "Next" link. <SCRIPT LANGUAGE="JavaScript">
a page context, found on the server. Each action history.forward()
• The ITEM file contains a single item, each record 3. Validate.
performed in a page displayed by the browser must </SCRIPT>
trigger an identical action on the corresponding includes a letter of the alphabet. To disable the browser "Back" button for all the
page context found on the server. • The page is used to display 6 rows of the Table When running the page in a browser, it will not be project pages:
However, the browser "Back" button is used to control, the "Next" link is used to display the next possible to go back to this page by using the "Back" 1. Display the project description: on the "Project"
perform an action on the browser only: the page 6 rows. button. pane, in the "Project" group, click "Description".
displayed in the browser and its context found on 2. Click on the "Advanced" tab.
When opening the page, the Table control displays Remarks:
the server can be desynchronized when using the
the 6 first records of the file (from ’A’ to ’F’). Let’s • Clicking the browser "Back" button can make the 3. Check "Prevent from using the browser "Back"
browser "Back" button.
see the sequence of actions performed by the user: page blink. key to go back to the page".
1.1 Two methods can be used to manage the 1. Click on the "Next" link • This mechanism can fail if a click of the "STOP" 4. Validate. This option will be automatically taken
browser "Back" button Result: the server is positioned on the next 6 button is run before the forward() statement is into account for all new site pages.
records of the ITEM file and returns their contents run by the browser.
To avoid any out-of-sync problems between to the browser. The browser displays the next page
the pages displayed on the browser and the of the Table control with the 6 new contents (’G’
corresponding contexts found on the server, to ’L’). 3  Managing the synchronization
WEBDEV proposes two methods for managing the
browser "Back" key: 2. Click on the browser "Back" button
Result: the browser displays the page preceding
• Solution 1: Prevent from using the browser the first action. The Table control displayed 3.1 Overview 3.2 Default synchronization
"Back" button to go back to this page. contains the letters ’A’ to ’F’. The server was not
If the browser "Back" button is used to display For each action performed in a page, the The synchronization mechanism is triggered only if
contacted, therefore it is still positioned on the
the previous page, this action will have no effect. mechanism for page synchronization automatically the option "Use the mechanism for synchronizing
records ’G’ to L’.
• Solution 2: Managing the synchronization checks the synchronization. This check consists in pages" is selected for the page.
3. Click on the "Next" link verifying whether the page displayed in the browser
(default solution) If a desynchronization occurs, a warning message
Result: the server is positioned on the next corresponds to the page context found on the
For each action performed in a page from the informs the Web user that the requested action
6 records of ITEM (’M’ to ’R’). The browser is server.
browser, a synchronization test is automatically has not been performed. The page corresponding
synchronized with the server and it displays the
run between the HTML page and its context. Two modes can be used to manage the to the context on the server is re-displayed. The site
same elements: the Web user has the feeling that
Two modes can be used to manage the synchronization: can continue to operate.
some information is missing.
synchronization: 1. Default management of synchronization. To implement the management of the
This behavior can have unexpected consequences
• default synchronization (mode used by default 2. Management of synchronization by synchronization in a page:
when modifying a file record (modification of a
when creating a new page). record other than the one viewed by the Web user programming, in the synchronization code of the 1. Display the description window of the page: on
• programmed synchronization. for example). page. the "Page" pane, in the "Description" group, click
"Description".
Reminder: each action on the browser must trigger
a server action: the server sends a response 2. In the "UI" tab, for "Using the browser "Back"
to the browser. The click on the browser "Back" button", select "Allowed".
button being a browser action independent of your 3. Validate. This page will be automatically
WEBDEV site, the second condition may not be included in the history of browser pages: to go
performed. back to this page, click the browser "Back" button.

150 Part 4: Advanced concepts Part 4: Advanced concepts 151

 Cookies: information
Contenu
stored on the computer of
To implement the management of synchronization Remarks:
in all the project pages: • This management mode requires no specific
1. Display the project description: on the "Project" WLanguage code.

Web user
pane, in the "Project" group, click "Description". • The synchronization mechanism can be disabled
2. In the "Advanced" tab, check "Use the for the page controls that do not require a
mechanism for synchronizing pages (runs the management of synchronization ("Close"
synchronization code)". button for example): simply uncheck "Call page
3. Validate. The project pages will be automatically synchronization process if the user has used the
included in the history of browser pages: to go browser "Previous" button" in the "Advanced" tab A cookie is a file saved by the WEBDEV site on the computer of Web user. This file can be read at
back to these pages, click the browser "Back" of the control description. any time from the server or by the browser. The cookies are used to store persistent information
button. • The warning message can be customized (see on the computer of Web user.
next paragraph). For example, various information is requested when a Web user connects to a site for the first
time: user name, login, ... and it is stored on his computer. During the next connections, the
WEBDEV site will read this information in the cookie created during the first visit and it will be
4  Synchronization by programming able to greet the Web user personally on the first page.
1st connection
To manage the synchronization by programming: Remarks:
The WEBDEV site saves the
1. Display the description window of the page: on • ChangeAction is initialized with "No action" if information given by the
the "Page" pane, in the "Description" group, click a WLanguage function that allows displaying Web user on his computer.
"Description" or re-displaying a page is used in the page
2. In the "UI" tab, for "Using the browser "Back" synchronization code.
button", select "Allowed". • To customize the desynchronization message,
3. Configure (if necessary) the page controls for all you have to do is enter in the synchronization
which the synchronization must not be managed. code of the page:
For each control that triggers an action on 1. the custom message.
the server, you can specify whether the page 2. the re-display of the current page on the server
synchronization must be managed (default (with PageRefresh, for example). The new Web user must enter
option) or ignored during this action. To ignore the • To perform a synchronization from the his name and password here
synchronization management, simply uncheck information found on the computer of the Web
"Call page synchronization process if the user user, we recommend that you:
has used the browser "Previous" button" in the
"Advanced" tab of the control description. 1. Use a hidden control containing the identifier
of the displayed and selected record.
4. Enter the code required for custom Next connections
management of synchronization in the page 2. In the synchronization code, find the current
synchronization code. Use ChangeAction in the record on the browser. This search is performed The WEBDEV site reads the
page synchronization code. This function is used from its identifier found in the hidden control. data previously saved on the
3. Refresh the page. computer of the Web user.
to define the action that will be performed if the
page is desynchronized.

The WEBDEV site displays by

default the information read in the cookie

To create cookies in a WEBDEV site, use CookieWrite.

To read the cookies in a WEBDEV site, use CookieRead.

152 Part 4: Advanced concepts Part 4: Advanced concepts 153

 Protecting the access to
Contenu
TLS/SSL: Encrypting
Contenu
the site: passwords information on the Web
Managing the access to a site by password is required in two cases: By default, the data exchanged between the computer of Web user and the Web server is not
1. Protecting personal details. encrypted. The authenticity of the server identity, the confidentiality and the integrity of exchanged
2. Restricting the access to a site. data are not guaranteed.
To insure confidentiality, the most used method is the TLS/SSL protocol (Transport Layer Security,
formerly Secure Socket Layer). This protocol guarantees the identity of accessed server and it
Protecting personal information encrypts the data exchanged between the server and the browser.
To access personal details, the Web user can specify a password. In a business site, a password
defined by the Web user allows him to access the details of his previous orders. Implementing secure transactions via the TLS/SSL protocol
In this case, the management of site access requires:
To implement secure transactions via the TLS/SSL protocol, you must comply with all the
• an identification:
requirements linked to this protocol (purchase of a certified SSL key from a specific organization
When he first connects, the Web user identifies himself and enters his password.
or generation of a self-signed key for private use or for test). See the WEBDEV online help for
During the connections, the user identifies himself and he accesses the features reserved to
more details.
him (and to his history, ...).
• the ability for a Web user to retrieve a forgotten password.
Transactions secured by TLS\SSL in a WEBDEV site
WEBDEV is supplied with all the resources required to manage personal passwords.
In most cases, only the transfer of sensitive data must be secured: transferring a credit card
number for example. Indeed, the secure mode is slower. However, an increasing number of
Limiting the access to the site sites entirely operate in TLS/SSL mode via the more powerful computers, insuring a better
By default, an Internet site can be accessed by any Web user. But a site is not always intended for confidentiality for the user operations.
the general public: some features can be reserved to some types of Web users (site administrator, The secured mode is implemented
...). when opening a new page via a button
Computer of Server (or a link). All you have to do is call
In this case, the site manager assigns a password to each Web user. This password cannot be the Web user SSLActive in the browser code of the
modified. This password gives access to specific features. Click on a button button (or link). As soon as the secure
For example, in a business site:
SSLActive(True)
Open the page page is opened, all the actions will
be performed in secure mode (which
• a specific password will be assigned to salespeople: they will be able to access the sales means encrypted).
statistics, ... Secure page

• a specific password will be assigned to the members of marketing team: they will be able to on- Operations in

line new products.

secure mode
To go back to non-secure mode, all you
Click on a button
SSLActive(False)
have to do is use SSLActive(False) in
WEBDEV allows you to easily manage these different types of access to a site. Open the page
the browser code of a button (or link)
used to open a new page.
Non-secure page

154 Part 4: Advanced concepts Part 4: Advanced concepts 155

 Secure payment with
Contenu
Sending
Contenu
provider emails
Several providers allow you to implement systems for secure payment. The provider validates all In a Web site, emails make it possible to:
payments by credit card beside the card center. • simplify communication between Web users: sending emails to the site manager, mailshot, etc.
The payment steps are as follows: • validate an order: in a business site, an email is sent to the Web users in order to validate their
orders.
3 • transfer data from a computer to another one: the new orders entered in a business site are
1 2 transferred by email to the company headquarters, etc.

4 Two methods can be used to send emails from a site.

Client 9c Vendor 1 Sending the email from the Web user’s computer
computer 9d server
Use this method when the Web user must send an email to a specific address: author of site,
technical support, sales department, ...
5 9b The EmailOpenMail browser function is used to open the email software of the Web user. Some
parameters can be filled by default: email address of recipient, ...
SSL 9a SSL Web user 3 Web user n

4 6

7 Web
Payment server
8 Bank
operator

1 View the site

Fill the basket 5 Display the payment
page 9a
Response for the vendor
site Web user 2 Web user 1
Sending emails
between Web users

2 Identification
(input of personal details) 6 Enter the credit
card number 9b
Response for the
customer This method allows you to use the messaging software of Web user: no specific process must be
performed in the WEBDEV site.
3 Check the
order 7 Bank authorization 9c Redirection of the page
for order confirmation
9d
4 Redirection to the
secure payment 8 Response of the bank

156 Part 4: Advanced concepts Part 4: Advanced concepts 157

 2 Sending the email from the server (Session pages only) PART 5
In this case, the server manages the emails.
The emails can be sent:
• in the WEBDEV site directly (for an email data transfer, or for an order confirmation email, for
example);
• by the email spooler (supplied with WEBDEV).
Web user N

Web user 3 Web Databases

server
Email server
(WEBDEV administrator)

Web user 2 or

Direct sending of emails

Web user 1

Use this method for a custom management of emails:

• checking the content of the emails sent by the web users ("mailing-list" site),
• checking the validity of recipient address,
• encrypting the information sent by email,
• validating a process, etc.

158 Part 4: Advanced concepts

 Analysis: Database
Contenu
structure
When a WINDEV, WEBDEV or WINDEV Mobile project is using data files, this project must be
associated with an analysis. An analysis allows you to describe the data structures (data files,
items, etc.) used in your project.

The data model editor allows you to easily create an analysis.

Supplier Product Order Customer

Full name, ... Description, Price, ... Date, ... Full name, ...

System studied

Corresponding analysis

The analysis of a WINDEV, WEBDEV or WINDEV Mobile project corresponds to the LDM (Logical
Data Model). The entire structure and data organization are described: the data is grouped by file
(called data file). Each data file contains several data called items.
In the analysis, the description of a data file can be linked to a type of file (HFSQL, HFSQL Client/
Server, SQLite, ...).

160 Part 5: Databases Part 5: Databases 161

 The analysis in practice • the type of database associated with the
data file. Depending on the selected type, this
Solution 2: From the Windows explorer
Drop the file description from the Windows explorer
data file will be handled by the HFSQL engine, to the data model editor. For example:
by an OLE DB driver or by one of the native
accesses (also called native connectors) of
1  Overview WEBDEV (SQL Server, Oracle, ...).
4. The created data file becomes the current
When a project is using data files, this project must • 2nd method: Creating the Conceptual Data data file. The description window of file items is
be associated with an analysis. An analysis allows Model (CDM), then automatically creating the automatically opened. It allows you to describe
you to describe the structures of data (data files, analysis from the CDM. See the online help for the file items.
items, etc.) used in your project. more details.
Two methods can be used to describe an analysis: This chapter presents the first method. To import a preset description of a data file:
• 1st method: Creating the analysis directly (which 1. On the "Analysis" pane, in the "Creation" group,
means a Logical Data Model (LDM)). click "New file". The wizard for creating a data file
starts.
2. Select the option "Select a description among
2  Creating an LDM (Logical Data Model) the preset data files". Here : an Oracle database on the server. All you
3. Choose the preset data file to create (you have have to do is drag the database name...
In WEBDEV, the terms "LDM" and "Analysis" are 2.2 Adding a data file into an analysis the ability to select several ones). This data file
interchangeably used to define the structure of the will be imported into the current analysis. This
The analysis is used to define the structure of data
database associated with a project. data file can be modified later.
files used by the project. A data file found in the
analysis can be: 4. Select the items to store. These items can be
2.1 Creating an analysis (or LDM) modified later.
• A new data file.
To create a LDM: • A preset data file, supplied with WEBDEV. 5. Specify whether the links must be automatically
1. Click among the quick access buttons. The sought. If this option is checked, the items with
• A data file imported from an existing database the same name will be linked.
window for creating a new element is displayed: (using a specific format for example).
click "Data" then "Analysis". The wizard for 6. The imported data file is automatically inserted
The following paragraphs explain how to create a into the current analysis.
analysis creation starts. data file.
2. Specify: Remark: To modify a data file or the items found in
• the analysis name and directory. The analysis a data file:
To create a new data file:
corresponds to a ".WDA" file. By default, 1. Select the data file.
this file will be created in the directory of 1. On the "Analysis" pane, in the "Creation" group, ... to transfer its description into the data model
click "New file". The wizard for creating a data file 2. Select "Description of data files" or "Description editor.
the project analysis (<Project name>.ANA of items" from the popup menu.
directory). This directory must be accessible starts.
2. Select "Create a new description of data file". 2.3 Creating an item
in read/write.
• the analysis caption that briefly describes the 3. Specify: To import the existing description of a data file, To create an item:
analysis subject. two solutions are available: 1. Double-click the data file where the item will
• the name of data file. This name is the logical
• whether the analysis must be associated with name of the data file. It will be used to handle Solution 1: From the data model editor be created. The description window of file items
the current project. the data file. 1. On the "Analysis" pane, in the "Creation" group, is opened.
• the type of database used by the project. • the caption of data file that briefly describes click "New file". The wizard for creating a data file 2. Click the first empty row in the table of items.
the file subject. starts. 3. Specify the name, the caption and the type of
3. The creation of first data file is automatically
proposed. • the representation of a record in the data file. 2. Select "Use the data files from an existing item in the table.
This representation improves the legibility of database" and select the type of database. 4. In the right section of the screen, specify the
4. Create all elements (data files, items and links)
of your analysis. questions asked when describing links. This 3. Specify the source database containing details about the new item (type, size, default
option must be preceded by an indefinite the descriptions to import and the type of this value, search direction, ...).
article (A or AN). database. Depending on the selected type, specify 5. In the bottom section of the screen, specify the
• whether the data file includes an "Automatic the requested information. details about the shared information.
identifier" item. The value of this item is 4. Select the tables or the data files whose 6. Validate the item description.
unique for each record and it is automatically description must be imported and validate.
calculated by WEBDEV. 5. The imported data file is automatically inserted
into the current analysis.

162 Part 5: Databases Part 5: Databases 163

 Remark: You can create an item using the 3. To define the cardinalities: To be clearer, these two questions can be broken Example of advanced cardinalities:
metatypes offered by WEBDEV. To do so, click the • select the cardinalities among the proposed down into four questions. For example, to describe This example presents two different cardinalities:
"+M" button on the right of the table. The list of ones (0, 1; 1, 1; 0, N; 1, N). a link between the Customer and the Orders data
available meta-types is displayed. • answer the questions asked. The cardinalities files:

2.4 Creating a link will be automatically updated.

4. To describe the advanced cardinalities, check
Different types of links can be created between "Display the advanced cardinalities" and answer
data files. See ""Characteristics of links defined in the questions asked. • Cardinality 0,1: A person can be a member of a
an analysis", page 164" for more details. single sport club. This person does not have to
5. Type the link caption by briefly describing the
To create a link: link purpose. belong to a sport club.
1. On the "Analysis" pane, in the "Creation" group, 6. Specify the keys to link. • Cardinality 0,10: A club can have no member or
click "New link". The mouse cursor turns into a up to 10 members.
7. Define the integrity rules. These rules are used
pen.
to ensure the data integrity when one of the 3.4 The referential integrity
2. Select the two data files to link. The window for relation keys is modified or deleted.
link description is automatically opened. The referential integrity of a database corresponds
8. Validate. The link is automatically created.
to the respect of constraints implied by the links
• each "customer" has at least one "order": Yes/ between the data files.
3  Characteristics of links defined in an analysis No? The referential integrity consists in checking that:
• each "customer" can have several "orders": Yes/ • if a record is deleted from the owner file, the
No? corresponding records are also deleted from the
3.1 Owner file and member file 3.2 The cardinalities • each "order" has at least one "customer": Yes/ member files,
No? • if a record is added into a member file, a
When a link is defined between two data files, there The cardinalities are used to count the links
• each "order" can have several "customers": Yes/ corresponding record exists in the owner file,
is an owner data file and a member data file: between the data files.
No? • if a record is modified in the owner file, the
• the owner data file is the owner of the key. The cardinality is defined according to the answers
Example of cardinalities: unique key is not modified, ...
• the member data file is a member of the to the two following questions:
This example presents two different cardinalities: The check of referential integrity depends on the
analysis data files containing a copy of the key. 1. For each file record, to how many records of the
nature of the link between data files.
To manage the link between two data files, the key other file minimum is this record linked?
The answer provides the first part of cardinality See the online help for more details.
of owner data file is copied into the member data
file. (minimum cardinality):
3.5 The different types of links
For example, the key of the Supplier data file is • if the answer is "none", the cardinality is 0,X.
copied into each record of the Product data file. • if the answer is "a single one", the cardinality Several types of links can exist between the data
Several records of the Product data file can have is 1,X. • Cardinality 0,1: A person can be a member of a files:
the same key of the Supplier data file: 2. For each file record, what is the maximum single sport club. This person does not have to • parallel
• Supplier is the owner data file, number of records in the other data file to which belong to a sport club. • optional
• Product is the member data file. this record is linked to? • Cardinality 0,N: A club can have no member or • complement
The answer provides the second part of cardinality several members. • shared
This type of link is represented as follows:
(maximum cardinality): 3.3 The advanced cardinalities • complex
• if the answer is "a single one", the cardinality is
X,1. The cardinalities can be defined more precisely. We
talk of advanced cardinalities.
• if the answer is "several", the cardinality is X, N.
These cardinalities are used to exactly specify the
The answer to these two questions defines the minimum cardinality and the maximum cardinality.
cardinality that can be: 0,1 ; 0,N ; 1,1 ; 1,N
To define the advanced cardinalities, check "Display
The description of cardinalities is fundamental: it is the advanced cardinalities" in the link description.
the basis for respecting the referential integrity of
database.

164 Part 5: Databases Part 5: Databases 165

 Parallel link Complement link Shared link with a 0,n - 0,1 cardinality Shared link with a 1,N - 1,1 cardinality
In a parallel link, each record in a data file (Product) For a complement link: With this type of link:
is linked to a record in another data file (Info), and • Each record found in a data file (Product) has no • each owner has at least one member (each
conversely. associated record or a single associated record supplier has at least one product).
in another data file (Details). • each member has a single owner (each product
• Each record of the other data file (Details) has a single supplier).
necessarily has an associated record in the first With this type of link:
data file (Product). • an owner may have no member (a supplier does
not necessarily have a product).
To manage a parallel link, the identifier of the • a member may have no owner (a product does
Product data file is copied into the Info data file. not necessarily have a supplier).
This identifier is also a unique key in the Info data
file. Complex link
The complement links are quite common. They are Shared link with a 0,n - 1,1 cardinality
The owner data file is Product and the member used when a record can have additional optional For a "complex" link, you must manage a link file,
data file is Info. information. called relation file.
Remark: This type of link is rare because the two To manage a complement link, the key of the The relation file will be automatically created. It will
data files can be grouped into a single file. Product data file is copied into the Detail data contain a unique key that includes the two keys of
The parallelism of records in the data file is file. To ensure the maximum cardinality of 1, it linked data files.
respected if the following operations are run remains a unique key. Since this key is unique, it is The relation file can also contain information
simultaneously on the two data files: not possible to insert more than one record in the specific to the link.
With this type of link:
• creating a record Detail data file for a record in the Product data file. A complex link includes two shared links.
• an owner may have no member (a supplier may
• deleting a record The owner data file is Product, the member data file have no product). Example of complex link
• reindexing with compression. is Details.
• each member has a single owner (each product An order ("Orders" data file) can contain one or
has a single supplier). more products. A product (Product data file) can be
Optional link Shared link used in several orders.
Remark: This type of link is quite common.
For an optional link: For a shared link, the same record in a data file WEBDEV allows you to automatically create the In this case, a link file is required (OrderLine data
• Each record of a data file (Category) is (Supplier) can be shared by several records in pages used to manage the data files linked by a file).
associated with no record or with a single another data file (Product). 0,N - 1,1 link. The OrderLine data file contains:
record in another data file (Group). To manage a shared link, the key of the Supplier • a unique key containing the keys of the Product
• Each record of the other data file (Group) is data file is copied into the Product data file. It and Orders data files.
Shared link with a 1,n - 0,1 cardinality
associated with no record or with a single becomes a multiple key to increase the speed of
integrity check. With this type of link: • the number of products ordered.
record in the first data file (Category).
An optional link is performed by copying the The owner data file is Supplier, the member data • each owner has at least one member (a supplier
identifier of each data file into the other data file. file is Product. has at least one product).
Depending on the cardinality, we can distinguish • a member may have no owner (a product may
between four types of shared links: have no supplier).
• Shared link with a 0,n - 0,1 cardinality
• Shared link with a 0,n - 1,1 cardinality
• Shared link with a 1,n - 0,1 cardinality
• Shared link with a 1,N - 1,1 cardinality

166 Part 5: Databases Part 5: Databases 167

 4  Operations that can be performed on an analysis 6.1 Restoring an analysis 6.2 Canceling the last generation
To restore an analysis from the version manager: Canceling the last generation of analysis is used
WEBDEV allows you to perform the following WEBDEV allows you to perform the following 1. Select the version to restore. to restore the analysis to its status before the last
operations on an analysis: operations on a data file found in the data model 2. You can: generation. The modifications performed since
editor: then are not applied.
• Duplicating/Copying an LDM: Duplicating an • restore the version into the specified directory.
LDM allows you to have two identical LDMs with • Duplicate/Copy a data file. An independent analysis corresponding to 6.3 Resetting the version number to 1
different names. • Delete a data file. the selected version is created. This option is
• Delete an LDM. selected by default. The generation number of analysis can be reset to
• Rename a data file. "1": on the "Analysis" pane, in the "Analysis" group,
• Rename an LDM. WEBDEV allows you to perform the following • overwrite the current analysis.
expand "Generation" and select "Reset the analysis
• Associate an LDM with a project. operations on an item of a data file found in the 3. Validate. The restore operation is performed. version to 1".
• Enlarge or reduce the display of LDM in the data model editor: Caution: The data files corresponding to an In this case, the version number of analysis is reset
editor. • Duplicate/Copy an item. analysis whose version number is greater than the to one. No specific action is performed on the data
• Move the display of LDM in the editor. • Delete an item. restored version cannot be opened anymore. In files.
this case, you must also restore the physical files
• Rename an item.
corresponding to the restored analysis version, or
See the online help for more details. delete the existing files in order to re-create them.

5  Generating the analysis (LDM)

The analysis generation is performed before the To start generating the analysis, on the "Analysis"
programming step and after the description of data pane, in the "Analysis" group, click "Generation".
files. This generation is used to: The generation is performed in three steps:
• validate the modifications performed on the • verification of modifications and generation of
analysis (LDM). data files of the analysis description.
• create the modules required for programming. • automatic modification of accessible data files
• automatically update the data files if necessary. (files found in the "EXE" directory of project).
As long as the analysis (the LDM) is not generated, • Synchronizing the project.
the analysis description (the data files) cannot be
used in the project.

6  Managing the analysis versions

WEBDEV allows you to manage the different The "small rectangles" displayed between two
analysis versions: versions indicate:
1. On the "Analysis" pane, in the "Analysis" group, • one rectangle: few modifications have been
expand "Generation" and select "Manage the made between the two versions.
versions". • several rectangles: several modifications have
2. In the wizard, specify whether you want to work been made between the two versions.
on the current analysis or on a specific analysis. To see the details of modifications performed
Remark: when an analysis is damaged, you have between two versions: Double-click the line
the ability to select the damaged analysis to restore containing the "small rectangles" or click on
one of the earlier versions for example. [Modifications].
All the analysis versions are viewed in a graph. The options available in the version manager are:
The yellow rectangle indicates the version number • Restoring an analysis.
of analysis; the caption on the right indicates the • Canceling the last generation.
generation date.
• Resetting the version number to 1.

168 Part 5: Databases Part 5: Databases 169

 The various types of
Contenu
accessible files
WEBDEV, WINDEV and WINDEV Mobile propose a simple access to most of the databases
available on the market.

170 Part 5: Databases Part 5: Databases 171

 HFSQL
Contenu
HFSQL Client/
Contenu
Classic Server
A WEBDEV HFSQL application can operate in Classic mode (called HFSQL Classic) or in Client/ HFSQL Client/Server is a powerful system for managing relational databases (RDBMS) in Client/
Server mode. Server mode.
The characteristics of the Classic mode are as follows: The characteristics of the Client/Server mode are as follows:
• A site that is using HFSQL Classic is run on different browsers. A session is started on the • A HFSQL Client/Server site is run on different user computers. A session is started on the Web
server for each site run. server for each site run.
• The data files are found in a directory that can be accessed by the sessions of the WEBDEV • The data files are found on a server (HFSQL server). Only the server physically accesses the
sites (on the Web server or on another computer). Each session physically accesses the data data files.
files. • All the processes (query, read/write operation in a data file, etc.) are performed on the server.
• The processes (query, read/add in a data file, ...) are performed by each session.

Web
server Web
WEBDEV site
server
WEBDEV site
Session 1
Session 1
Windows or Linux
Client 1 HFSQL server
Client 1

Session 2 Manta server

HFSQL Classic Session 2
databases

Client 2
Client 2

Session n HFSQL
Session n Client/Server
databases

Client n Client n

172 Part 5: Databases Part 5: Databases 173

 HFSQL Client/Server
Contenu
HFSQL: the physically
Contenu
clusters created files
HFSQL Cluster is an extension of the database model of HFSQL Client/Server. In a database The data model editor is used to describe the structure of data files.
cluster, all HFSQL servers contain a copy of the databases and they are synchronized in real time. Different files are physically created depending on the information typed in the data model editor.
• The read load can be balanced among the different servers.
• The physical configuration can evolve without any interruption for the client computers. Characteristics Files physically
of the file (Analysis) created
• If one of the servers crashes, the client is automatically redirected to an operating server.
HFSQL Classic or Client/Server file ".fic" file
Data file

One or more search keys (unique ".ndx" file

Web server or with duplicates) Index file

".ftx" file
One or more full-text indexes
Session of client 1 Full-text index file

".mmo" file
Session of client N One or more "Memo" items
Memo file

Access to data Remark: This diagram only presents the main created files. Other specific files can be created if
the data file uses logs, transactions or replication.

Cluster

HFSQL Client/Server HFSQL Client/Server

server server

Applying modifications

HFSQL Client/Server HFSQL Client/Server

server server

174 Part 5: Databases Part 5: Databases 175

 Associate controls with
Contenu
data
Link between control and variable

A page can display information coming from:

• a database: the controls are directly linked to the items found in the files or queries available in
the database.
• variables found in the application code (variables global to the page or to the project or
parameters passed to the page).
To display this information in a page, the controls of this page must be linked to:
• the different database items.
• the available WLanguage variables.

The method for displaying and retrieving the information is straightforward: PageToFile FileToPage
• The link between a control and an item or variable is defined in the page editor during the Linked variable
control description ("Link" tab).
• PageToFile is used to update the record or the variable with the data found in the page. Simple control
• FileToPage is used to update the data displayed in the page with either the information saved Link with:
- Simple variable
in the data file or the information saved in the variable. - Instance of class or structure
member
- Property of dynamic object
Link between control and item List box, Table, Combo box, ...
Link with:
- Array of classes or structures
- Advanced types (for example
xlsRow, xlsColumn)

PageToFile FileToPage

Database

176 Part 5: Databases Part 5: Databases 177

 The
Contenu
The embedded
Contenu
queries queries
A query is used to interrogate a database in order to view, insert, modify or delete data. The query The controls found in a page can be linked to a data file or to an existing query, ... These controls
structure defines the data used. can also be linked to a query created when building the control.

A query can interrogate one or more data files.

The query editor allows you to easily create queries without programming.

Sources Possible uses

Windows and controls
of a window
Data coming from
one or more files
Looper control linked to an embedded query.
(HFSQL, Oracle, ...) Reports
The result of a
query can be used
Programming
like a file
(use in the WLanguage
functions)

Queries

Remark: In programing, a query can be handled like a data file. Especially, it can be associated
with a display control (a Table control for example) that will present the data returned by the query.
Embedded query : MyPage_1$Query.

In this case, the query is included in the page. It is found in the WWH file corresponding to the
page. If the WWH file is copied (into another project for example), the embedded queries used by
this page will also be copied.

178 Part 5: Databases Part 5: Databases 179

 The Table/
Contenu
Looper control
Memory Table control
A memory Table control is used to directly display the data loaded in memory. The data is added
into the Table control by programming (by TableAddLine for example).
The Table/Looper controls can be used to display a set of information (the content of a data file for
example). The content of these controls can come from three different sources:
• Browsing Table/Looper controls with direct access.
• Memory Table/Looper controls.
• Browsing Table/Looper controls loaded in memory.
Data in
Remark: These three fill modes will be presented in details for the Table control. The same memory
concepts apply to the Looper control.
The data being found in memory, the Table control allows you to perform all operations on the
data (sort on any column, search in the columns, ...)
Browsing Table control with direct access
A browsing Table control with direct access is used to directly display the data coming from a data Browsing Table control loaded in memory
file or from a query. The data file structure was described in the data model editor and the data
was typed in the site. The browsing Table controls loaded in memory combine the benefits of browsing Table controls
with direct access with the benefits of memory Table controls.
Browsing the data file allows you to display data in the Table control. The data file is read for each
row displayed: the record read is displayed in a row of Table control. The Table control is linked to the data file but the content of data file is entirely loaded in
memory. The sort and the search are available for all columns.
The data not linked to the data file is kept when handling the scrollbar (Check Box column for
example).
The file records being loaded in memory, this type of control is recommended for the data files
containing less than 100 000 records (to avoid memory overflow).

Customer
file

The number of records displayed in the control can be limited by a filter (HFilter used in the
initialization code of control). Customer
Several WLanguage functions can be used to handle the browsing Table controls. These functions file
start with "Table".
File loaded
To add a record into the Table control, add the record into the corresponding HFSQL data file in memory
(HAdd), and redisplay the Table control with TableDisplay.

To delete a record from the Table control, delete the record from the corresponding HFSQL data
file (HDelete) and redisplay the Table control with TableDisplay.

Remark: The different fill modes (memory, browsing, browsing loaded in memory) are available for
the List Box controls, Combo Box controls, Table controls, Looper controls, ...

180 Part 5: Databases Part 5: Databases 181

 Retrieving data from a
Contenu
site
2 Retrieving the data from a site>

2.1 Via an interrogation AWP page

A commercial site allows the Web users to place orders, to make reservations, ... WEBDEV allows you to create AWP pages. The AWP pages are independent pages that can run
processes from the parameters passed in command line to the page. The AWP pages can be used
Several methods can be used to retrieve this information.
to retrieve the data entered on the site.

Tip: Process the retrieved data in a "Back Office" application developed with WINDEV. Run the AWP pages
by HTTP requests

1 Sharing the data

Company
The data of a WEBDEV site can be directly shared with the data found in the Back Office application Web server headquarters
used to process the operations performed on the site. All you have to do is use a HFSQL Client/
Data transmission
Server database. - WEBDEV site in string format - WINDEV application
The principle is as follows: - Database (Back Office)
- AWP pages

The AWP pages found on the Web server are interrogated on a regular basis by the HTTP requests
run by the Back Office application. The data is returned in string format and processed by the
Access to data Access to data WINDEV application.
Web Company
Server headquarters Benefits:
• Solution that can be easily implemented.
WEBDEV site Back Office
application
• Equivalent to a custom Web service.
• No additional executable is required on the server. No additional session is run on the server.

Drawback: Unidirectional data retrieval: no data update toward the server.

Data server This solution can be used on a shared server.

- HFSQL Client/Server database

- 3 access accounts:
o Internet Guest
o Administrator
o Back Office

Benefit: The site data is accessible in real time.

Drawback: Need to manage security in an optimal way: using a secured connection to access
data, opening a specific port to access data (port 4900 by default), configuring the firewall, ...

This solution is recommended for a site installed on a dedicated server.

182 Part 5: Databases Part 5: Databases 183

 2.2 Via a Webservice 2.4 By emails:
WEBDEV allows you to create Webservices. The Webservice is installed on the Web server and the The principle:
WEBDEV application server allows you to use it. The Webservice can be used to retrieve the data

4
entered in the site. Confirmation
email

Run the Webservice by HTTP requests

Web Company Web user

server headquarters
- WEBDEV site
- Database
Transmit the data (strings, XML, ...) - WINDEV application
(Back Office)
2 1
- WEBDEV Webservice Validation Order placed
email on the site

The Webservice found on the Web server is interrogated on a regular basis by the HTTP requests
run by the Back Office application. The data is returned in XML format, as strings (or other) and
processed by the WINDEV application. Company
headquarters
Benefits:
• Solution that can be easily implemented.

Web server
• No additional executable is required on the server. No additional session is run on the server.

Drawback: Unidirectional data retrieval: no data update toward the server. - Dynamic WEBDEV site
- WEBDEV application

3
server
This solution can be used on a shared server. Email containing
the order
2.3 By FTP:
WEBDEV allows you to regularly save the data files of WEBDEV site. This backup can be transferred
by FTP to the company headquarters. Then, all you have to do is: 1. The Web user places an order on the site.
• retrieve the compressed backup of data files. 2. The WEBDEV site informs the Web user that his order was successfully saved. The Web user is
• decompress the files (via a WINDEV application). informed that a confirmation email will be sent to him.
• process the data found in the files. 3. The WEBDEV site sends an email to the company headquarters. This email contains the order
placed by the Web user.
Benefits: 4. An email is sent by the company to the Web user to inform him that his order will be
• Solution that can be easily implemented. processed.
• No additional executable is required at the hosting company.
Benefits:
Drawback: All data files found in the application are retrieved. • Solution that can be easily implemented.
• No additional executable is required on the server.
This solution can be used on a shared server.
Drawback: Unidirectional data retrieval: no data update toward the server.

This solution can be used on a shared server.

184 Part 5: Databases Part 5: Databases 185

 Universal
Contenu
replication
3 Performing a replication
The replication is used to keep the remote databases of identical structure updated. A replication
can be performed between the database of a WEBDEV site and the database of WINDEV
application at the company headquarters.
The universal replication is used to update databases of identical format or databases of different
formats (HFSQL Classic, Oracle, SQL Server, ...). You can for example perform a synchronization
For example, a database used to enter orders and to manage stocks is used both on a WEBDEV between a HFSQL Classic database and an Oracle database.
site (online orders) and at the company headquarters (orders by phone or by mail).
The replication is used to: The universal replication is using a centralized model: all databases are synchronized with a
• transmit the online orders to the company headquarters (unidirectional replication) master database. Then, the master database applies the modifications to the other databases.
• transmit the online orders to the company headquarters and transmit the stock update to the
Internet site (bi-directional replication).
Caution: The replication constraints must be taken into account during the project creation.
Indeed, several rules must be followed when describing the analysis and the file items.

The replication can be performed by email or via the assisted universal replication. See the online
help for more details.

Universal
replication

The synchronization can be adapted to special cases. For example, you have the ability to retrieve
the records regarding a specified product or the records created on a specific date, manage the
conflicts, ...
These adaptations must be done by programming with HRplFilterProcedure.

186 Part 5: Databases Part 5: Databases 187

 3-tier
Contenu PART 6
architecture
The 3-tier architecture is a model for application architecture.
Its basic principle consists in dividing an application into 3 layers:
• the presentation layer: corresponding to the display.
• the process or application layer: corresponding to the business processes of application.
• the layer for accessing persistent data.
The reason for separating the layers is to simplify the maintenance and the future evolutions of
application. This provides better security because the access to the database is allowed via the

Running the
Processes layer only. It also optimizes the teamwork and the multi-target development.

test of a
Web site

188 Part 5: Databases

 Running a site test:
Contenu
The elements to test
Running the test of a site is an essential step of its development. The test is used to check the
operating mode and the usability of the site.

The main points to check in a WEBDEV site are as follows:

• how the site works:
sequence of pages, execution of code typed, etc.
• appearance of the site:
use different browsers (Internet Explorer, Chrome, FireFox, Edge, etc.), use different screen
resolutions, resize the browser, etc.
• Web-specific features:
print, cookies, browser "Back" key, etc.
• access to the site by different Internet users:
management of logins and passwords, management of concurrent accesses to the data files,
etc.
• non-regression of a site during an update:
validate the modifications performed in a site and check whether the non-modified features
are still accessible.
• a stress test (for a site installed on the server):
validate the maximum number of Web users who can access the site.

Remark: To find out the coverage of tests run, WEBDEV proposes to use "Code Coverage". Code
coverage is used to measure the coverage of tests run on a site. Each code line run is considered
as being "checked".
Caution: The code coverage does not allow you to find out whether tests are successful: it only
allows you to find out whether the code line was run.
The code coverage is used to detect the code lines that have never been run.

190 Part 6: Running the test of a Web site Part 6: Running the test of a Web site 191
 How to run a
Contenu
site test? WEBDEV administrator
(dynamic WEBDEV site only)
Running the test from the
administrator allows you to
test:
Start the WEBDEV
administrator ("Start" menu)
and click the "Test page"
• the site features, button ("Advanced" tab).
Several tools can be used to run the test of a WEBDEV site: • the features specific to the This test allows you to use the
• the main editor of WEBDEV. Web (cookies, ...), WEBDEV site in conditions
• the use of the site in real similar to the ones of a Web
• the WEBDEV administrator.
conditions. user.
This module is required to run a dynamic WEBDEV site (in Session mode or in AWP mode). On
the development computer, the test of dynamic sites can be run from a test page created by The rights granted to the
the administrator. Web user (access, write and
read) correspond to the rights
• WDTestSite, tool for running stress tests.
granted to the default Web
The table below presents how and when these test modes must be used. user defined in the Web server
used.
Test mode Type of test Running the test
Editor Running the test from the • On the "Project" pane, in the WDTestSite WDTestSite is used to run 1. Create a test scenario (with
editor allows you to test: "Test mode" group, expand stress tests. WDTestSite).
• the site features, "Test mode" and select (dynamic WEBDEV site only)
WDTestSite is used to 2. Install WDTestSite and
• the code used in the "Trace the project". start several simultaneous the scenario on the different
different events and • On the "Project" pane, in the connections to a WEBDEV site. computers to simulate
processes. A powerful "Test mode" group, expand Each connection performs a an important number of
debugger allows you to "Test mode" and select set of actions in the WEBDEV accesses.
monitor the execution "Debug the project from the site (preset scenario). 3. Specify the number of
of different events and home page". connections to establish.
This test must be run on a
processes. The rights granted to the Web WEBDEV site installed on a 4. Run the test scenario on
• the use of the site with user (access rights, write rights deployment computer that is each computer.
different browsers (installed and read rights) correspond ready to operate.
to the rights granted to the Remarks:
on the development
computer). developer. • Each computer establishes
a defined number of
connections.
This type of test: • Each connection performs
• allows you to use the the selected scenario.
debugger.
• is taken into account by the Automatic tests The automatic tests are used 1. Display the procedure
"Code Coverage". to run the test of procedures or the class in the "Project
and classes found in a site at explorer" pane.
different development levels. 2. Display the popup menu
The test scenarios are of the element (right mouse
generated in WLanguage from click) and select "Create a
the procedure test or from the unit test".
class test. The scenarios can
be modified in the code editor.
This type of test is taken
into account by the "Code
Coverage".

192 Part 6: Running the test of a Web site Part 6: Running the test of a Web site 193
 The
Contenu
When can I use the
Contenu
debugger debugger?
To help you optimize your code, a debugger is supplied with WEBDEV. The debugger can always be used when running a test from the editor. To do so, breakpoints must
be placed at the requested locations in order to debug the site step by step.
The debugger allows you to run your dynamic sites step by step, by viewing the WLanguage code
run, the content of variables, etc.
The different types of tests available from the editor are as follows:
• "Go" on page:
The test of the current page in the editor can be run via among the quick access buttons of
WEBDEV.
• "Go" on project:
The project test on the development computer can be run via:
• found among the quick access buttons of WEBDEV,
• on the "Project" pane, in the "Test mode" group, expand "Test mode" and select "Debug the
project".
• The deployed project:
The deployed project can be debugged. This feature is very useful to reproduce a problem that
occurs under specific conditions.
To start the deployed project, on the "Project" pane, in the "Test mode" group, expand "Test
mode" and select "Connect to a site and debug the connection".
Remark: This option can be used with a development server or with a deployment server. The
server must be configured to allow the remote debugging.
• The deployed project being used:
The deployed project can be debugged while it is used. This feature is very useful to reproduce
To start the debugger, use: a problem that occurs under specific conditions. The most common case: a problem occurs
• a breakpoint positioned in the code editor: the debugger will be automatically started when while you are using the site: you can start the debugger immediately by setting a breakpoint in
the line preceded by a breakpoint is run. your the code of your project.
To insert a breakpoint, all you have to do is click in front of the code line: a red bullet appears. To use a session of deployed project, on the "Project" pane, in the "Test mode" group, expand
"Test mode" and select "Debug an existing connection".
Remark: This option can be used with a development server or with a deployment server. The
server must be configured to allow the remote debugging.

• the STOP server keyword of WLanguage in your WLanguage code: the debugger will be
automatically started when this code line is run.
• the "Trace the project" option: the debugger is started when running the test of dynamic site.
on the "Project" pane, expand "Test mode" and select "Trace the project".

194 Part 6: Running the test of a Web site Part 6: Running the test of a Web site 195
 Test of a site in practice To run the test of a dynamic site (Session or AWP)
from the editor, several methods are available:
2.2 Running the project test from the
WEBDEV administrator
• On the "Project" pane, in the "Test mode" group, Running the test from the WEBDEV administrator
expand "Test mode" and select "Debug the (WD250Admin) allows you to test:
1  Overview project" (or Ctrl + F9).
• the features of the site.
• Click among the quick access buttons.
• the features specific to the Web (use of cookies,
The editor is automatically minimized, the browser ...).
WEBDEV proposes several methods for running the The test of a single query is used to run the specified in the WEBDEV options is opened and
test of your sites: current query only. This allows you to check the first site page is displayed. Remark: The WEBDEV administrator can only be
• test of entire project, the operating mode of a query as soon as its used to test dynamic sites (Session or AWP) or the
• test of a single page, development is ended. To test a static + dynamic site (Session or AWP) dynamic part of static + dynamic sites.
The test of a single report is used to run the from the editor:
• test of single query (see the "Reports and
Queries" guide for more details), current report only. This allows you to check • to test the static part of the site: perform the Running the test from the WEBDEV administrator
the implementation of a report as soon as it is operations corresponding to the test of a static is equivalent to starting the dynamic site from a
• test of single report (see the "Reports and developed. Like for the project test, the debugger site.
Queries" guide for more details), remote computer.
can be started as soon as a problem occurs. • to test the dynamic part of the site (Session or Before deploying a WEBDEV site, we recommend
• step-by-step project execution, Running the project step by step is used to launch AWP): perform the operations corresponding to that you run the test of this site at least once from
• test of performance of your site, the debugger when starting the site. This solution the test of a dynamic site. the WEBDEV administrator.
• regression test/automatic test, allows you to closely monitor how the site runs.
Dynamic site (Session or AWP mode):
• stress test. The performance test of your site allows you to To run the test from the WEBDEV administrator:
Start
The test of the entire project is used to simulate check and optimize its execution time.
The following modules are automatically started 1. Start the WEBDEV administrator: on the
the startup of the site. This allows you to run test of The non-regression test (or automatic test) is "Tools" pane, in the "Web utilities" group, click
during the test of a dynamic WEBDEV site (Session
entire site, even if its development is not finished based on the execution of scripts. It allows you to "WDAdmin".
or AWP mode):
yet. As soon as a problem occurs, you have the check that, during the execution of your site, ... the
ability to start the debugger to identify and fix the existing features are still supported. • The Web server installed on the computer and 2. In the "Advanced" tab of WEBDEV administrator,
problem. configured for WEBDEV when installing WEBDEV. click the "Test page" button.
The stress test is used to start several
The test cannot be run if the Web server is not To stop the test, display the WEBDEV administrator
The test of a single page is used to run the current simultaneous connections to the same dynamic
started. (click the icon 25 in the taskbar) and click
page only. This allows you to run the test of your WEBDEV site.
project from a given page or to check the operating • The WEBDEV administrator (WD250ADMIN.EXE). "Disconnect" ("Connections" tab).
mode of a page as soon as its development has In addition to these methods, WEBDEV also The administrator is used to manage the Remark: The WEBDEV administrator also allows
ended. Like for the project test, the debugger can proposes to find out the "Code coverage" of site, connections to the Web server and to configure you to run a project test equivalent to the project
be started as soon as a problem occurs. which means the coverage measurement for the the WEBDEV sites. test run from the editor:
tests run on a site. See the online help for more Remark: a project test can be run from the test 1. Start the WEBDEV administrator: on the
details. page of the administrator ("Advanced" tab of "Tools" pane, in the "Web utilities" group, click
WD250ADMIN, "Test page" button). "WDAdmin".
• The WEBDEV engine (WD250AWP.EXE). 2. In the "Connection" tab, select the site and click
2  Running the test of WEBDEV project The WEBDEV engine is used to manage the the "Test" button.
requests made by the Web users from their
browser and to return the corresponding 2.3 Stress test/Regression test
2.1 Running the project test from the editor • in the options of test mode: on the "Project" dynamic HTML page.
pane, in the "Test mode" group, expand "Test Remark: The WEBDEV engine is started only if WDTestSite is used to run stress tests: WDTestSite
Running the test from the editor allows you to test: is used to start several simultaneous connections
mode" and select "Test browser". the project contains dynamic pages.
• the site features, to a dynamic WEBDEV site (Session or AWP).
Different types of tests • The Internet browser.
• the use of the site with different browsers. Each connection performs a set of actions in the
To run the test of a static site from the editor: The Internet browser is used to display the HTML
The test of a project can be run regardless of the pages of the WEBDEV site. WEBDEV site (preset scenario).
current element in the editor. 1. On the "Project" pane, in the "Test mode" group, See the online help for more details.
Remark: The test browser used to run the project expand "Test mode" and select "Debug the project
test can be chosen: from the home page".
• in the WEBDEV options: on the "Home" pane, 2. The editor is automatically minimized.
in the "Environment" group, expand "Options" 3. The browser specified in the WEBDEV options is
and select "General options of WEBDEV". The opened and the site home page is displayed.
browser can be selected in the "Web" tab.

196 Part 6: Running the test of a Web site Part 6: Running the test of a Web site 197
 3  Running the test of a remote WEBDEV site • use conditional breakpoints In this code, depending on the result of InTestMode,
• modify the code while continuing the execution, the trace window appears during the application
• ... test only.
Several methods can be used to run a test and Two features are available: Such procedure allows you to leave the call to the
to debug a site on the development computer. • Starting and debugging the site on a remote 5.4 Debugging without debugger trace windows in the application code without any
However, in some cases, you may have to debug application server. risk of displaying it on the end-user computers.
the site directly on the user computers. In some cases, running a program with or without
• Debugging a site currently used on a remote debugger may be different. The call to this trace procedure is identical to the
From your office in London, you have the ability to application server. use of Trace:
debug a site running on a Web server in Taiwan. Indeed, the debugger introduces pauses in the
For these two features, a specific configuration is execution of the process during which several tasks MyTrace("Customer: "+...
The debug operation is done without having to go required for the remote computer. are performed by WINDEV. Customer.CustomerNum)
anywhere, on the final configuration directly.
Therefore, the debugger cannot be used in a Creating a trace file
procedure called by a timer or in the code of a During long processes (batch processes, ...), to
4  Running the test of a page scrollbar. check the operating mode of program, you must
Remark: See the online help for more details about keep a physical trace of processes run (a text file
the debugger limits. for example).
4.1 Running the page test from the editor 4.2 Stopping the page test To debug these applications, you may want to follow The following procedure is used to manage the
Several methods can be used to stop the test: the evolution of a value, how different procedures trace display:
To run the test of a page from the editor: are called, ...
1. Open the page whose test must be run. • 1st method: • on the screen (/DEBUG parameter in command
Close the page whose test is currently run. This information can be: line).
2. Click among the quick access buttons of WEBDEV displays the editor that was used at the • displayed on the screen
WEBDEV menu. You can also use the F9 key. • in a text file (default mode).
beginning of test. • stored in a trace file.
3. The editor is automatically minimized and the PROCEDURE MyTrace(StringToTrace)
• 2nd method: FilePath is int
page is run. Caution: If the information is displayed on the
• Go back to the editor with the taskbar or screen, it must be displayed during the application FilePath = fDataDirUser() +
During the test, all page features can be run. press Alt + Tab. ProjectInfo(piProjectName)+ ".txt"
You will have the ability to open other pages for tests only.
• Confirm that the test must be stopped. FileNum is int
example. DebugMode is boolean = False
WEBDEV displays the editor that was used at
the beginning of test. Displaying information IF Position(CommandLine(), "/DEBUG")
Two tools can be used to display information: > 0 THEN
DebugMode = True
• information boxes: Info WLanguage function.
END
5  Tracing a project Caution: Displaying an information box is a
IF DebugMode THEN
locking operation. Trace(StringToTrace)
• the trace window: Trace WLanguage function. ELSE
5.1 Principles for debugging 5.2 Overview of debugger The trace window is displayed in the top left FileNum = fOpen(FilePath, foCrea
corner of screen, without interrupting the teIfNotExist + ...
Debugging an application consists in: The debugger is used to trace the WLanguage
program execution. foWrite + foAdd)
• checking the operating mode of a process, programs in order to help you improve these
If FileNum <> -1 THEN
• understanding the operating mode of an existing programs.
DateTimeTrace is DateTime
The source code run is viewed on the screen. The Managing the display of the debug
program, information DateTimeTrace = SysDateTime()
• checking the value of variables, processes run are sorted in hierarchical order in DateTrace is Date
the "Debugger" pane. Displaying the debug information on the screen is DateTrace = MyDate..Date
• checking the operating mode of special cases in useful in test mode only.
The value of variables can be viewed: TimeTrace is Time
an application or in a site. Any unsuitable display must be removed before TimeTrace = MyDate..Time
The debugger is used to perform these operations. • individually in the rollover tooltip of each
distributing an application. fWriteLine(FileNum,
variable.
Remark: WEBDEV also includes several trace To avoid any oversight, we advise you to manage DateToString(DateTrace) + ...
tools (trace window, information box, etc.). See • in the "Debugger" pane. " -
the display of debug information via a global
"Debugging without debugger", page 199 for "+TimeToString(TimeTrace))
5.3 Features of debugger procedure.
more details. fWriteLine(FileNum, StringTo
For example: Trace)
The debugger is used to: fWriteLine(FileNum, " ")
PROCEDURE MyTrace(StringToTrace)
• find out the call stack IF InTestMode() THEN fClose(FileNum)
• view the content of variables or expressions Trace(StringToTrace) END
• run the code step by step with ability to skip END END
blocks.

198 Part 6: Running the test of a Web site Part 6: Running the test of a Web site 199
 Remarks: • Example of content of trace file: 6.4 Choosing a process to optimize • the percentage of time spent in the process
• The trace file is created by default in the data 01/12/2015 - 10:53:25:20 of function or procedure. The higher this
The process to optimize is chosen according to percentage is, the greater the number of
directory of user. This file is named like the Customer name: Montgomery several criteria:
project. This file contains the information processes that can be optimized in the code.
to trace during the program execution. The • the execution time of process. The longest Remark: If the process corresponds to a
information is completed by the date and time processes must necessarily be optimized. WLanguage function, it is fairly hard to optimize it.
of each "Trace". This allows you to detect a
potential problem during the process.
7  Regression tests
6  Performance test
7.1 Overview 7.3 WDTestSite
Several test tools are available to guarantee the WDTestSite is used to run different tests on a
6.1 Overview 6.3 Reading the result of performance quality of your applications: WEBDEV site.
The performance profiler allows you to check and
profiler
• The test mode (project Go or page Go) is used to The following tests can be run by WDTestSite:
optimize the execution time of your site. The performance profiler presents the result of the immediately check a modification performed in • Stress test:
Its principle is straightforward: analysis in several tabs: your site. The stress test consists in simulating the
• You run the test of your site. • the "Summary" tab presents the ten longest • WDTestSite that is used to run different tests on connection of several Web users to a WEBDEV
• During this test, the performance profiler keeps processes. a WEBDEV site. site. Each Web user runs a set of operations
track of all the actions performed and the • the "Mapping" tab presents a graphical view of To automate these tests and to increase the (scenario) simultaneously.
corresponding processes run. main processes. quality of your applications, you have the ability • Regression test:
At the end of test, the performance profiler displays: • the "Details" tab presents all processes run to run automatic unit tests. These tests are used The regression test consists in checking the
• the 10 most time consuming operations. during the application test (from the slowest one to easily check all the features proposed by your operating mode of a WEBDEV site between
to the fastest one). applications. two updates. The regression test consists in
• all the actions performed in the site whose test checking whether a scenario performed with an
was run, sorted by duration (from the longest • the "Calls" tab is used to see the details of
operations performed in a process. 7.2 Automatic tests earlier site version still operates properly once
one to the shortest one). the site was updated.
The following information is displayed for each Each test contains a scenario that can be directly
You can select a process in order to analyze the • Test of a site in multi-user mode:
process: edited in the product interface. This scenario is
reasons for its processing time in order to optimize The test of a site in multi-user mode is used to
written in WLanguage and it can be modified at any
it. Function Function, process or procedure check whether concurrent accesses to the data
time.
run. files are managed properly. This test consists
6.2 Starting the performance profiler These tests can be run before each deployment in
Total Time Execution time of function. order to check the operating mode of a site after in simulating the simultaneous connection
To start the performance analyzer, on the "Project" several modifications. of several Web users to a WEBDEV site. Each
pane, in the "Audit and performance" group, expand Nb of calls Number of calls made to the Web user runs a set of operations (scenario)
"Analyze the performance" and select "Analyze the function (procedure or process). The following elements can be checked:
simultaneously.
performance". Time 1 call Execution time of a call to the • the sets of procedures
• Comparison of different servers:
The project is automatically run in test mode. The function (procedure or process). • the classes WDTestSite is used to compare the speed
process to optimize can be run in your site. Each test is associated with a WLanguage code: the of different servers. To do so, run the same
code % Percentage of code run outside
To go back to the editor, all you have to do is close test scenario. This scenario can be viewed in the scenario on different servers and compare the
the call to a WLanguage function
your application or your site. code editor. The code of the tests can be modified. execution time of this scenario.
or outside the call to a custom
Then, the performance profiler displays the result function or procedure. The tests and the associated code are not • Optimization of processes developed in
of the analysis. distributed to the end users. Therefore, the number WLanguage:
Parent Process that called the function. of tests for a site has no incidence on the size of WDTestSite is used to compare the execution
Remark: The performance profiler should be used
to optimize your site (before it is distributed for Remark: site supplied to the end users. time of a scenario before and after the
example). See the online help for more details (keyword: WLanguage code was optimized.
• The "Full execution" caption represents the total
amount of time for running the site test with the "Automatic test"). See the online help for more details (keyword:
performance profiler. "WDTestSite").
• The "Total Page XXX" caption represents the total
amount of time for running the page XXX (from
its opening to its closing).

200 Part 6: Running the test of a Web site Part 6: Running the test of a Web site 201
 PART 7

Deploying a
Web site

202 Part 6: Running the test of a Web site

 Deploying a
Contenu
static site
Principle
The deployment of a static site is performed by FTP:

Development Hosting
computer company

2 Setup by FTP
(WDDeploy) 1 Configuration of
the FTP server

3 Implement the site

(start link)

Information required for the deployment

No setup can be run without this information. Contact your hosting company to get this information.

Before performing a deployment by FTP, the hosting company must communicate the following
information to the developer:
• Name of Web server where the setup will be performed (or its IP address).
• User name and password defined in the FTP server.

When deploying by FTP, the developer must specify in WDDeploy:

• the information provided by the hosting company.
• the files to install.

204 Part 7: Deploying a Web site Part 7: Deploying a Web site 205
 Deploying a dynamic
Deploying a static or PHP site in practice Contenu
WEBDEV site
1  Overview

When developing a static site or a PHP site, one of • deployment by network: recommended when
The different types of deployment
the important phases consists in deploying this site the server is directly accessible.
on a Web server (at a hosting company or on an
WEBDEV offers three methods for deploying a dynamic site (Session site or AWP):
WDDeploy is used to simplify the deployment of
Intranet). your static sites. • deployment by physical media (CD-ROM, etc.) of the WEBDEV site, with creation of a setup
Two deployment methods are available: Remark: To deploy a dynamic site, see "Deploying a
version supplied on CD-ROM to the hosting company.
• remote deployment (by FTP): recommended dynamic site in practice", page 212.
when the server is not directly accessible. Development Hosting
computer company
2  Creating the setup
1 2
Create a setup Install the WEBDEV
program on a physical site and configure
To deploy your static site: • Characteristics of FTP server used to update media (CD ROM, ...) the administrator
1. On the "Project" pane, in the "Generation" the site. These characteristics are supplied by
group, click "Deploy the site". WDDeploy starts. the hosting company, ...
2. Create the profile corresponding to your site.
This profile contains the following information:
3. Click the "Prepare" button. WDDeploy prepares
the list of files to install. For an update, WDDeploy
compares the files found on the development
3 Implement the site
(start link)

• Location of local files ("<ProjectName>_WEB"

sub-directory of your site). computer and the files already installed.
Remark: a WEBDEV application server can be included in the setup supplied by physical media.
• Address of WEBDEV site. 4. Click the "Synchronize" button. The files of your
site are copied to the location specified in the
• Location of files of deployed site (network or profile. • remote deployment directly from the development computer (by file transfer via Internet in
FTP server).
See the online help for more details. HTTP mode).

Development Hosting
computer company

2 Install the site by FTP

1 Configuration of
the FTP server and
account manager

3 Implement the site

(start link)

Remark: It is also possible to perform a deployment by file transmission in FTP mode. In this
case, the hosting company must configure an FTP server.

206 Part 7: Deploying a Web site Part 7: Deploying a Web site 207
 • remote deployment from a management computer (file transfer through Internet, FTP) The remote setup (by HTTP) from a management computer is recommended if the characteristics
of the server are not known by the developer when creating the setup program. In this case, the
Send the Install
package the site
setup program is called a "Package".
If a site is intended for several clients, you have the ability to create a single package and to
distribute it to all the relevant clients.
The server settings (address, etc.) are specified only when the package is run on the management
Development Web server computer.
computer
2 Deployment via physical media: necessary information
1 Create the
setup package
Configure the
FTP server and
When deploying by physical media, the information regarding the setup and the site setting is
supplied both in the wizard for setup creation and in the setup wizard.

4
the account
Online the
manager
site (run link) When preparing the setup, you must supply:
• the setup directory,
• the files to install,
• the directory for generating the setup.

During the setup, you must supply:

• the directory of data files,
Management computer
• the directory of site files.

3 After setup, the characteristics of the site (connection time-out, number of connections, etc.) must
be configured in the WEBDEV administrator (deployment version).
Run the package:
Install the site on the server by FTP
Deployment by FTP from the development computer: necessary
information
Remark: It is also possible to perform this deployment by file transmission in FTP mode. In this
case, an FTP server must be configured on the Web server. No setup can be run without this information. Ask the provider to get this information.

Choosing a deployment method Before performing an HTTP deployment directly from the development computer, the host
company must communicate the following information to the developer:
The choice of deployment method mainly depends on the constraints imposed by the hosting • Name of Web server where the setup will be performed (or its IP address).
company and on the location of deployment server (remote or local).
• User name and associated password defined in the WEBDEV account manager.
• The OS account used to run WEBDEV sites (it is associated with the WEBDEV account in the
The setup via physical media is recommended if the Web server can be easily accessed (the Web account manager).
server and the development team are located in the same premises, for example).

The remote setup (by HTTP) from the development computer is recommended if the deployment
computer cannot be easily accessed.
Before performing a remote setup, the hosting company must configure the WEBDEV account
manager.

208 Part 7: Deploying a Web site Part 7: Deploying a Web site 209
 On-lining a dynamic
Contenu
WEBDEV site
When deploying by HTTP, the developer must specify in the wizard:
• the information provided by the hosting company,
• the files to install,
• the name of sub-directory of data files,
• the different parameters for connecting to the site. Your dynamic WEBDEV site (in Session or AWP mode) can be accessed as soon as it is on-lined.
On-lining a WEBDEV site consists in activating the site.
Remarks:
• A delayed setup can be performed at the specified date and time. Several methods can be used to activate a WEBDEV site:
• The setup and the update by HTTP are secured by password and data encryption. • when performing the setup by HTTP: a check box is used to automatically activate the site after
setup.
Deployment by FTP from a management computer: necessary
information
When creating the setup program, no specific information is required.

When running the setup program of the site (from a management computer), the hosting company
will have to specify:
• Name of Web server where the setup will be performed (or its IP address).
• User name and associated password defined in the WEBDEV account manager.
• The OS account used to run WEBDEV sites (it is associated with the WEBDEV account in the
account manager).

Remarks:
• A delayed setup can be performed at the specified date and time. • with the remote administrator.
• The setup and the update by HTTP are secured by password and data encryption. • with the WEBDEV administrator found on the deployment computer ("Locked" option in the
"Sites" tab).

210 Part 7: Deploying a Web site Part 7: Deploying a Web site 211
 Deploying a dynamic site in practice • a setup by physical media:
The wizard allows you to create a setup program
Web server (if not already done).
2. Install your WEBDEV site by running the Install.
for your site. Then, this program will be supplied exe executable of your setup.
When developing a dynamic site (in Session or • deployment by package: recommended method to the hosting company and it will be used to Remark: It is also possible to create a setup by
AWP), one of the important phases consists of when the server is not directly accessible and install your WEBDEV site on the Web server. To stand-alone physical media, containing the setup
deploying this site on a Web server (at a hosting when its characteristics are unknown. install your WEBDEV site, the hosting company of a WEBDEV application server limited to 10
company or in Intranet) must: connections. This solution is ideal for proof-of-
Several deployment methods are available: Remarks: 1. Install the WEBDEV application server on the concepts presented on a laptop.
• remote deployment (by HTTP): recommended • For each Web server that hosts WEBDEV sites,
method when the server is not directly the hosting company must own a license for the
accessible. WEBDEV application server. 2  Remote deployment (by FTP)
Remark: for backward compatibility, it is also • To create the setup of a site, go to the "Project"
possible to perform a remote deployment by FTP. pane, "Generation" group and click "Deploy site".
• deployment by physical media: DVD, ...: To deploy a static site, see "Deploying a static, 2.1 The steps • Characteristics of the FTP account if
recommended method when the server is easily semi-dynamic or PHP site in practice", page 206. necessary (user name and password).
The deployment steps are as follows:
accessible. To easily identify the characteristics of the server
1. Installing the WEBDEV application server at
for a forthcoming update, give a name to this
the hosting company (optional step). See the
server. This name will be displayed (followed by
1  Implementing a library documentation about the WEBDEV application
the server address) in the window for choosing
server for more details.
the type of setup.
2. Creation of the following elements by the
Before performing a setup, all the objects found • deployment in the PC SOFT Cloud: 2. The files to install. By default, the wizard
hosting company:
in your dynamic site (in Session or AWP mode) PC SOFT offers a hosting platform based on the selects the library, the data files, the images and
must be included in a library.. A library is a file Cloud Computing model: you deploy without • a WEBDEV account (in the administrator). the HTML pages.
that groups all the elements created during the worrying about hardware constraints and you • an FTP account (in the FTP server) only if the 3. Configuring the setup: Chose the type of
development (description of database and pages, are billed based on your applications’ real deployment is performed by FTP. remote setup to perform:
compiled source codes, ...). The HTML pages and usage. 3. The hosting company supplies the names and • Immediate update:
the images are not included in the library. The A PC SOFT Cloud account is required to perform associated passwords as well as the name (IP The site files are compressed and
library is automatically implemented when creating this type of setup. The wizard proposes to create address) of the server. immediately transferred onto the Web server
the setup procedure. this account if necessary. 4. Creating the remote setup from the editor: on (the Web server must be accessible from the
Once the library is created, the wizard for setup • an installation by FTP via the test hosting the "Project" pane, in the "Generation" group, setup computer). Then, the WEBDEV site is
creation starts. You can choose to perform: service of PC SOFT : expand "Deploy site" and select "Deploy the site automatically installed on the Web server.
• a remote setup (by HTTP or FTP) PC SOFT proposes to host your test sites. The remotely". The necessary files are copied into the • Delayed update:
In order to perform a remote setup, the hosting setup is easily performed, directly from the transfer directory. The site files are compressed and
company must have: environment. Once your site is developed, you 5. On-lining the WEBDEV site. immediately transferred onto the Web server
1. Created and configured your FTP account on have the ability to run its test directly. Caution: By default, a WEBDEV site is deployed (the Web server must be accessible from the
the server (for setups by FTP). A PC SOFT developer account is required to remotely by HTTP. setup computer). The WEBDEV site will be
perform this type of setup. The wizard proposes installed on the server at the specified date
2. Created and configured your WEBDEV account to create this account if necessary.
on the server. 2.2 Creating the setup and time. This allows you to update your site
• a deployment package: during the night (between midnight and 3 AM
The hosting company must provide you with You must define in the wizard:
A deployment package is an executable for example), when the number of Web users
your logins and passwords for these different containing all the elements required to deploy a 1. The information regarding the remote is reduced.
accounts, as well as the name of the account WEBDEV site. This package can be run from any computer. This information must be supplied by Caution: the specified date and time are the
that runs the sites associated with the WEBDEV computer to install the Web site on the server by the hosting company: ones of the server. Make sure that they are
account. HTTP or FTP. • Server address (name of a computer valid.
To create this type of setup, there is no need accessible by network, IP address or Internet • Activating the site immediately after setup:
to know the characteristics of FTP account and address). The site will be available once it has been
WEBDEV account found on the Web server. • Characteristics of the WEBDEV account (user installed: you will be able to connect to it
name, password and account of the OS that either by using the proper address, or via a
runs the WEBDEV sites associated with the static page containing a link pointing to the
account). site. If this option is not checked, the site can
be activated via the remote administrator.

212 Part 7: Deploying a Web site Part 7: Deploying a Web site 213
 4. Configuring the site. These options are used Remark: if this option is selected, the 3.2 Creating the setup 5. The default profile of the Web server to use.
to configure the options for connecting to the site update will be proposed during the setup. These parameters can be entered or modified by
after its setup. Special case: If the data files found on the server You must define in the wizard: the person who installs the deployment package.
These parameters can be modified if necessary: are in Hyper File 5.5 format, they must be migrated 1. The files to install. By default, the wizard 6. Configuring the setup: Chose the type of
• by the deployment administrator found on the to HFSQL Classic format. This migration must be selects the library, the data files, the images and remote setup to perform:
server. performed during the first site update. the HTML pages.
• Delayed update:
• by the remote administrator, that can be used 6. Specify whether your site is using the Native 2. If an analysis update was performed, select the The site files are compressed and
by the site manager. AS/400 Access. automatic modification of data files during the immediately transferred onto the Web server
Reminder: if your site is using the Native AS/400 setup. (the Web server must be accessible from
5. If an analysis update was performed, select the Remark: if this option is selected, the update will
automatic modification of data files during the Access, the AS/400 DLLs must be installed on the the computer that installs the package). The
Web server. be proposed during the setup. WEBDEV site will be installed on the server at
setup. Special case: If the data files found on the
If you are using a license for a limited number of the specified date and time. This allows you
computers, the number of current connections server are in Hyper File 5.5 format, they must be to update your site during the night (between
must be managed in the WEBDEV site (INI file or migrated to HFSQL Classic format. This migration midnight and 3 AM for example), when the
registry, ...). must be performed during the first site update. number of Web users is reduced.
3. Configuring the site. These options are used Caution: the specified date and time are the
Summary of elements installed as well as their location: to configure the options for connecting to the site ones of the server. Make sure that they are
after its setup. valid.
These parameters can be modified if necessary: • Activating the site immediately after setup:
Site server Data server • by the deployment administrator found on the The site will be available once it has been
Directory of WEBDEV sites Data directory server. installed : you will be able to connect to it
for user N for user N • by the remote administrator, that can be used either by using the proper address, or via a
by the site manager. static page containing a link pointing to the
Directory defined by the hosting company. Directory defined by the hosting company. 4. Specify whether your site is using the Native site. If this option is not checked, the site can
In this directory, a sub-directory will be created for In this directory, a sub-directory will be created for AS/400 Access. be activated via the remote administrator.
each site of user N. the data files of each site of user N. Reminder: if your site is using the Native AS/400
Access, the AS/400 DLLs must be installed on the 3.3 Installing a dynamic site
Web server. To install a site, you must:
The following elements are installed in this site The following elements are installed in this data If you are using a license for a limited number of
sub-directory: HTML pages, the library (".WDL"), sub-directory: the ".FIC" files, the ".NDX" files, the 1. Run the deployment package.
computers, the number of current connections
the image directory. ".MMO" files. 2. Specify the characteristics of the Web server
must be managed in the WEBDEV site (INI file or
on which the WEBDEV site must be installed
Example: The directory of sites for user N is "C:\ Example: The data directory of user N is "D:\ registry, ...).
(characteristics of the server FTP account if
UserN\WEBDEV sites". UserN\WEBDEV data". necessary and characteristics of the server
User N installs his site named "Boat". This site will User N installs his site named "Boat". By default, WEBDEV account).
be installed in the "C:\UserN\WEBDEV sites\Boat" the data files will be installed in the "D:\UserN\ 3. Validate the site setup.
directory. WEBDEV data\Boat" directory.

4  Deployment by physical media

3  Deployment by deployment package
This deployment is performed in three steps: 4.1 Creating the setup
1. Creating the setup version from the editor: You must define in the wizard:
3.1 The steps administrator (hosting company for example) go to the "Project" pane, "Generation" group,
1. A title and a version caption for your setup. A
The deployment steps are as follows: 3. Installing the WEBDEV application server at expand "Deploy site" and select "Create a setup by
title can be typed in each language that can be
the hosting company (optional step). See the physical media".
1. Creating the deployment package from the selected during the setup.
documentation about the WEBDEV application 2. Installing (if necessary) the WEBDEV application
editor: on the "Project" pane, in the "Generation" 2. A default directory.
server for more details. server on the Web server. See the documentation
group, expand "Deploy site" and select "Deploy 3. A layout for the setup window. The layout can
the site remotely". In the wizard, select "Create 4. Creation by the hosting company of a WEBDEV about the WEBDEV application server for more
account (in the administrator) and creation of an details. be customized with the "Customize" button.
a remote deployment package". A setup file is
FTP account (in the FTP server) if necessary. 3. Installing the site at the hosting company. 4. The files of your site.
created.
5. Running the deployment package on a Remark: the library, HTML, Java, JavaScript and
2. Transmitting the deployment package image files are selected by default.
(by Internet, DVD, etc.) to the Web server computer and installing the WEBDEV site.
6. On-lining the WEBDEV site.

214 Part 7: Deploying a Web site Part 7: Deploying a Web site 215
 5. The appendix files: 10. Modify (if necessary) the directory for 2. To install the WEBDEV site, INSTALL.EXE Contact the provider of the site if you don’t know
• The license (file in txt format) will be displayed generating the setup. (supplied with the setup of WEBDEV site) must be whether you must perform this update or not.
when starting the setup. By default, the setup is generated in the "INST" run on the Web server. Caution: The data files must not be currently
Remark: the setup will be canceled if the sub-directory of your project. Important: To update an existing site, you must used. Use the WEBDEV administrator to check
license is not validated by the person in 11. Generate the setup. lock the access to the site via the WEBDEV that no current connection is in progress and to
charge of setup. An information window flags the possible administrator (check "WEBDEV site locked" in the stop the sites (check "Site locked" in the "Sites"
• The "Read me" file: this file can correspond to presence of files with long names. If the setup is "Sites" tab). tab).
different formats (txt, htm, doc, hlp, pdf,  …). performed on a network drive, make sure that: 3. Choose the setup language: a setup wizard 7. Install an ODBC driver for HFSQL if programs
Regardless of the selected format, the user • the network drive supports the long names, starts. Go to the next plane. not developed with WEBDEV must access the
must have a software allowing him to view • the network drive does not modify the case 4. The setup automatically detects whether one or HFSQL files of the site that will be installed
this file. (uppercase/lowercase characters) in the more of the following Internet servers are installed (optional step).
• An executable that must be run at the end of names of files. on the computer: 8. The setup summary is displayed. Confirm your
the setup. 12. When the setup is created, WEBDEV proposes • IIS Version 2 to 7 (Microsoft Internet choices.
Caution: Don’t forget to include the files to: Information Server): Microsoft server. 9. The setup is completed:
linked to this executable (DLLs, parameter • run the test of created setup. • Apache Version 1.3.x and 2.x: free Web • Click the proposed address to run the test
files, other executables, etc.). server supplied by the Apache Group. of your site locally. This option can be used
Remark: a license file and a "Readme" file • open the Windows explorer in the directory for
setup generation. Three cases may occur: only if the Web server was automatically
can be selected for each setup language. configured.
13. Perform a backup of your site. • Case 1 : your Web server is not displayed
6. If an analysis update was performed, select the in this list: select "Other server". See the • Click "Copy" to retrieve the proposed address.
automatic modification of data files during the We advise you to keep a backup of source code
corresponding to an installed version of your site. online help for more details about the server See "On-lining the dynamic site", page 220 for
setup. configuration. more details.
Remark: if this option is selected, the update will 4.2 Installing the dynamic site on a Web • Click "Done" to end the setup.
be proposed during the setup. • Case 2: your Web server is displayed in the
server (physical media) list but it is grayed: your Web server was not 10. Configuring the Web server:
7. If programs not developed with WEBDEV must detected. To select it, all you have to do is If the configuration of the Web server was not
access the HFSQL files of your site, choose to If you are installing your site via a hosting company,
this one can propose two possibilities: check "Display all the servers". performed automatically, two cases may occur:
install an ODBC driver. Then, you must ask to generate a
Remark: if this option is selected, installing the • Install your site on a "shared" server. This server • Case 1: your server was detected and a
configuration file in order to run the configuration file was generated: this file can
driver will be proposed during the setup. manages the sites for several customers. This
configuration later (to install your server later be viewed, modified (if necessary) and run.
8. Specify whether your site is using the Native server is configured when installing the WEBDEV
for example). • Case 2: your server was not detected: see the
AS/400 Access. application server. The WEBDEV administrator
(WD250ADMIN.EXE) is used to individually • Case 3: your Web sever can be selected online help for more details.
Reminder : if your site is using the Native AS/400 directly: select your server.
Access, the AS/400 DLLs must be installed on the configure each WEBDEV site installed on this 11. Via the WEBDEV administrator, unlock the
server. You can ask to generate a configuration file in sites that may be locked and configure the
Web server. order to run the configuration later.
If you are using a license for a limited number of Caution: The memory resources of server are parameters of your dynamic site.
shared by all sites. The configuration file can be modified before These parameters correspond to:
computers, the number of current connections it is run.
must be managed in the WEBDEV site (INI file or • Install your site on a "shared" server • the total number of authorized connections
Depending on the selected server, the
registry, ...). (recommended solution). You own this server. to the site,
extension of configuration file will be ".reg",
9. Print the deployment documentation: In this case you must: • the number of authorized connections for a
".conf" or something else.
The deployment documentation indicates the • configure the Web server, user,
5. Select the setup directory:
WEBDEV license as well as all the modules • manage the memory resources for your site. <webroot> indicates the root directory the • the authorized idle time.
installed during the deployment. It also specifies computer’s Web server. Depending on the 12. Run the test of the WEBDEV site from
the registry keys generated for the WEBDEV site. selected Web server, the root directory is detected the administrator via the [test page] option
To install the WEBDEV site on a Web server (at a
When the site is installed on the server, these and displayed. If the root directory of Web server ("Advanced" tab).
hosting company or in Intranet):
keys can be updated in the registry or saved in a is not displayed, it can be typed in the gray area or
file for further examination. 1. Install (if necessary) the WEBDEV application Remarks:
server on the Web server. it can be found via the "…" button.
The deployment documentation must be Caution: if the area is filled, we advise you not to • The WEBDEV administrator (WD250ADMIN.EXE)
supplied to the person in charge of installing Caution: if the WEBDEV application server is not
modify it. must be started and run in background task. It
your WEBDEV site (hosting company or Intranet installed on the Web server, the dynamic WEBDEV
6. Updating the data files (optional step, only for can be installed as service in Windows NT.
manager). site will not operate properly.
Remark: For each Web server that is hosting a site update). • See "The WEBDEV administrator in practice",
WEBDEV sites, the hosting company must own a To update the data files associated with the page 222 for more details about the WEBDEV
license for the WEBDEV application server. WEBDEV site, choose to run the automatic administrator.
modification of the data files.

216 Part 7: Deploying a Web site Part 7: Deploying a Web site 217
 5  On-lining the dynamic site PART 8
To allow the Web users to access your site installed Example of META tag that must be included in the
at a hosting company, create a link in your home <HEAD> section of an HTML page:
page allowing your WEBDEV site to be started. <meta http-equiv="refresh"
If the setup was perform by physical media, the content="0;URL=http://205.51.231.57/
address to use was supplied at the end of setup. WD250AWP/WD250AWP.EXE.EXE/CONNECT/
Replace <localhost> by the address of your site. prettyeyes">
Example used to start a "OURAPP" site from the Special case: If a home page was defined in your
PC SOFT site: dynamic site, the address for starting this home
http://www.windev.com/WD250AWP/ page is as follows:
WD250AWP.EXE/ CONNECT/OURAPP
http://<ServerAddress>/

Hosting
To start the site by using its address (prettyeyes. <ProjectName>_WEB/
com for example), you must:

WEBDEV sites
1. Create an "Index.html" home page.
2. In the header of this page, use the html
commands (META REFRESH) to perform a
redirection toward the WEBDEV site, which means
toward the following address for example:
"http://205.51.231.57/WD250AWP/
WD250AWP.EXE/CONNECT/prettyeyes"

218 Part 7: Deploying a Web site

 What is the WEBDEV
Contenu
administrator used for?
In development (for test) and in deployment, the WEBDEV administrator is required to run the
dynamic WEBDEV sites.

When developing a dynamic WEBDEV site, the administrator is mainly used to:
• run the test of dynamic sites via the test page ("Advanced" tab, "Test page" button).
• manage the webservices ("Webservices" tab).
• define the parameters for connecting to the dynamic sites for test: disconnection time, ...
("Configuration" tab).
• delete the current test connections ("Connections" tab).
• change the Web server used for tests ("Advanced" tab, "Server" option).
• perform a diagnostic if a problem occurs when starting a dynamic WEBDEV site ("Advanced"
tab, "Diagnostic" button).
• allow the remote debugging ("Configuration" tab).
• ...

In deployment, the WEBDEV administrator is used to:

• manage the configuration of the different dynamic sites installed on the server: number of
authorized connections, ... ("Sites" tab).
• customize error messages displayed in the different dynamic sites installed on the server
("Advanced" tab).
• ...

220 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 221
 The WEBDEV administrator in practice 2.2 Sites installed
The "Sites" tab gives information about the dynamic
2.3 Webservices installed
The "Webservices" tab gives information about the
WEBDEV sites installed on the computer. dynamic WEBDEV Webservices installed on the
computer.
1  Overview The "Sites" tab returns the list of dynamic WEBDEV
sites installed on the computer and managed The "Webservices" tab lists the dynamic WEBDEV
by the WEBDEV administrator. For each site, the Webservices installed on the computer and
The WEBDEV administrator is a module to manage This chapter presents the WEBDEV Development following information is displayed in a table: managed by the WEBDEV administrator. For each
dynamic WEBDEV sites (Session or AWP). administrator only. • the site name. Webservice, the following information is displayed
When developing a dynamic WEBDEV site, the For more details about the deployment tools, see • the full setup directory of site on the computer. in a table:
administrator is mainly used to: their help. • the name of corresponding "project" file. • the name of the Webservice.
• run the site test via the test page. • the site status (locked or not). You have the • the complete Webservice installation directory
• define the parameters for connecting to the site Starting the WEBDEV administrator ability to check the box in order to directly lock on the workstation.
for tests: disconnection time, ... To start the WEBDEV Development administrator: the access to the site during the update. • the name of corresponding "project" file.
• delete the current test connections. • from WEBDEV Development version: on the • the number of scheduled tasks used by the site. • the Webservice status (locked or not). You
• change the Web server used for tests. "Tools" pane, in the "Web utilities" group, click can check the box to lock the access to the
"WDAdmin". The "Sites" tab can also be used to: Webservice during its update.
• perform a diagnostic if a problem occurs when
starting a WEBDEV site. • select "Programs .. WEBDEV 25 .. WEBDEV • Delete the site selected in the table. • the number of scheduled tasks used by the
administrator" from the "Start" menu. It is used to remove the site from the Webservice.
• ... administrator: the WEBDEV site will still be
In deployment, two types of WEBDEV administrators The WEBDEV administrator is automatically started found on disk. The "Webservices" tab also allows you to:
are available: during the first test of the site. • Delete the selected Webservice from the table.
• Refresh the list of sites found in the table.
• the WEBDEV Deployment administrator that Then, the administrator can be run in background This refresh operation is used to check the The Webservice is deleted from the
allows the hosting company to manage the task. presence of a site in the administrator after its administrator: the WEBDEV Webservice will still
dynamic WEBDEV sites installed on a Web By default, the WEBDEV administrator allows ten setup. be found on disk.
server. simultaneous connections to the same dynamic • Add a site into the table. • Refresh the display of the Webservices found in
• the remote WEBDEV administrator that allows WEBDEV site (GO icon). the table.
• Configure each site found on the computer.
the site manager to manage his dynamic The configuration used by default is the one This refresh operation is used to check the
WEBDEV sites remotely from any computer. defined in the "Configuration" tab. presence of a Webservice in the administrator
You can also create a specific configuration for after its setup.
the selected site ("Parameters" button). • Add a Webservice into the table.
2  Interface of WEBDEV administrator This configuration affects the number of • Configure individually the Webservices on the
authorized connections, the authorized idle time computer.
The WEBDEV administrator includes a window • The table of current connections indicates for and whether the site must be locked during an The configuration used by default is the one
containing several tabs: each connection: update. See the "General configuration, page defined in the "Configuration" tab.
• "Connections" tab. • the connection identifier, 224" tab for more details. You can also create a specific configuration for
To validate the new setting immediately, click the selected Webservice ("Parameters" button).
• "Sites" tab and "Webservices" tab. • the site affected by the connection,
the "Apply" button. This configuration affects the number of
• "Configuration" tab. • the identity of connected client. At run time, You can also manage scheduled tasks authorized connections, the authorized idle time
• "Advanced" tab. the client is identified by its IP address or by associated with the selected site (Scheduled and whether the Webservice must be locked
• "Setups/Accounts" tab. its Internet address, tasks" button). This setting is available when the during an update. See "General configuration,
• "Logs" tab. • the current connection time, site is deployed. page 224" for more details.
• the idle time of connection. • Run the test of the sites installed on the To validate the new setting immediately, click
2.1 Characteristics of current connections • Automatic refresh: this option is used to computer (in development version only): the "Apply" button.
automatically refresh the displayed data. Select the site and click on "Run the test". You can also manage scheduled tasks
The "Connections" tab gives various information associated with the selected Webservice
about the current connections. This information The "Connections" tab can also be used to:
(Scheduled tasks" button). This setting is
can be consulted at any time on the server: • Stop a current connection: available when the Webservice is deployed.
• The number of current connections indicates Select one of the connections and click
the total number of connections to the dynamic "Disconnect".
WEBDEV sites managed by the administrator. • Stop all current connections and close the
administrator: click "Disconnect all".

222 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 223
 2.4 General configuration • Duration of AWP contexts: • Range of ports for sessions (between 27 282 Name or IP address of the current computer
Validity period of AWP contexts. As soon as and 27 289 by default). The WEBDEV administrator allows you to specify
The general configuration corresponds to the the specified duration is over and if no new
default connection options for the WEBDEV The "Default" button is used to restore the default a name or an IP address to identify a specific
request was performed, the context file is values. computer. You also have the ability to specify the
sites found on the server and managed by the deleted.
administrator. port number. For example: localhost:8080.
• Duration of Webservices contexts: 2.5 Advanced options This computer will be used:
The "Configuration" tab is used to: Validity duration of contexts corresponding to The "Advanced" tab is used to: • when clicking the "Diagnostic" button.
• Configure the connections. Webservices.
• Choose one of the Web servers installed on the • when clicking the "Test page" button.
• Configure the sessions and the requests. • Maximum request duration: current computer to run the WEBDEV sites.
Maximum time-out allowed between the • when running the test of a site, page, report, ...
• Manage the log file to get the traffic statistics. • Perform a diagnostic regarding the configuration from the WEBDEV editor ("GO" icon).
beginning of an action performed by the Web
• Managing remote debugging.. of current computer.
user (via a button or a link) and the display of Test
a response. When this time is exceeded, an • Specify the name or IP address of current
The connections can be configured via the The "Test page" button is used to display in the
error page is displayed but the Web user is computer.
following options: browser a page allowing you to start each one of
not disconnected. • Display in the browser a page used to start all
• Maximum number of connections on the the dynamic WEBDEV sites and dynamic WEBDEV
• Maximum task duration: WEBDEV sites installed on the current computer.
server: Webservices installed on this computer.
Maximum number of simultaneous Used to limit the runtime duration of a • Manage the search for expired pages.
For more details on testing a WEBDEV site, see
connections allowed for all the sites managed WEBDEV scheduled task or delayed task. The • Manage the prints. "Test of a site in practice", page 196.
by the administrator (a connection = a Web task will be automatically stopped when this • Manage the error messages.
user). duration is exceeded. Searching for expired pages
• Manage the emails in asynchronous mode.
• Maximum number of connections on a site: • Allow the pre-launched sessions: This option is used to enable and configure the
• Manage the server sockets.
Maximum number of simultaneous Makes it possible to manage the pre-launched search for expired pages on the WEBDEV sites
sessions on the WEBDEV application server. • Allow (or not) some specific functions. managed by WEBDEV application server.
connections allowed for each site managed
by the administrator. This number can be This option is used to optimize the connection • Forbid the change of IP while navigating.
time to the WEBDEV sites and Webservices Printer used by default (Intranet sites only)
modified for each site in the "Sites" tab. • Forbid the access to AWP context identifiers
found on the server. See the online help for from Javascript. The "Prints" button is used to select the default
• Maximum number of user connections on a printer that will be used when printing on a local
site: more details.
Server used printer or on a network printer of Web server.
Maximum number of simultaneous The WEBDEV administrator is used to manage a The "Server" button is used to choose one of the
connections allowed for a given Web user to specific log file allowing you to follow the traffic Error messages
Web servers installed on the current computer to
each site managed by the administrator. statistics. The "Errors" button displays the different error
run the WEBDEV sites. Caution: This server will be
If this parameter is set to zero, a Web user • Generate a log file to manage the traffic messages that can be displayed in the browser
used for all the dynamic WEBDEV sites installed on
trying to simultaneously connect to the same statistics (.log): of Web user. You have the ability to customize the
this computer.
site will be automatically disconnected then Allows you to generate a log file (".LOG" error message and the HTML page where the error
reconnected. If the server used is not found in this list, choose
extension) used to see the traffic statistics of message is displayed.
If this parameter is greater than zero, an error "Other". You will have to manually configure the
WEBDEV sites via WDStatistic. See the help Web server used. See the online help for more Email spooler
message will be automatically displayed after about WDStatistic for more details.
the x simultaneous connections. details. If "Disable the email spooler" is unchecked, your
This number can be modified for each site • Save in the global file and in the file of each sites will be able to send emails without locking the
application: Diagnostic
("Sites" tab). execution of other processes (asynchronous mode).
This option is used to save the statistics both The "Diagnostic" button is used to check the
The option "A single connection automatically The asynchronous mode must be enabled
in the log file of application and in the log file of configuration of current computer. This diagnostic
recycled" is used to limit the connection of when starting the email session (with
server. Indeed, if the log file is defined both at is used to check:
a user to a single connection. The same EmailStartSMTPSession or EmailStartSession).
connection will be re-used. server level and at application level ("Sites" tab), • whether the FTP/IP protocol is installed
information may be "lost". If the asynchronous mode is enabled, all outgoing
• whether a Web server (HTTP server) is started
The sessions and requests can be configured via Remark: If the log file is enabled, the log of errors emails will be redirected to a "Spooler". The emails
• whether the AWP protocol manager is configured are queued up before they are sent. The execution
the following options: can be viewed in the "Logs" tab of administrator. properly of Email functions do not lock the rest of your
• Disconnect the idle users since:
Managing the remote debugging • whether the necessary WEBDEV executables are program anymore. EmailStatus is used to find out
This is the maximum connection time allowed
The WEBDEV administrator can allow (or not) the found. the email status.
without any action performed by the Web
user. When this time is exceeded, the Web remote debugging of dynamic WEBDEV sites. The dynamic WEBDEV sites will not operate if one
user is automatically disconnected and an If the remote debugging is allowed, the following of these conditions is not fulfilled.
error message is displayed. parameters must be specified: See the online help for more details.
This number can be modified for each site in • Main port (27 271 by default).
the "Sites" tab.

224 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 225
 Server
Contenu
configuration
Remark: If the WEBDEV administrator is closed, 2.6 Setups/Accounts
the email spooler is cleared: the pending emails
are not sent and they are removed form the spooler. The "Setups/Accounts" tab is used to:
If "Disable the email spooler" is checked while • Configure the server for the site setups and
emails are still found in the spooler, these emails updates.
will not be lost: the administrator keeps sending • Manage the log of setups.
them but no new email is accepted by the spooler. • Manage the WEBDEV accounts.
For a dynamic WEBDEV site
Caution: The asynchronous mode can only be Setup/Update
used when starting a session on an SMTP server
(EmailStartSMTPSession to send emails or These options are available in deployment version.
EmailStartSession). This mode is ignored in the They allow the hosting company to authorize and
other cases. configure the site setups and updates remotely.
The option "Lock the server (for an update)"
Computer of Server
Sockets is used to easily update a site by blocking any
If "Allow the server sockets" is checked, your sites connection from a new user. Whenever attempting
will be able to handle the server sockets (via the
Socketxxx functions of WLanguage).
to connect to one of the sites found on the server,
the Web user receives a message signaling that the Web user Connection to the WEBDEV site
the site is temporarily unavailable and asking
Forbid the change of IP while navigating Web server
him to retry later. The Web users who are already Only a browser is required
(IIS, Apache, ...)
If this option is checked, the IP address associated connected can continue to use the current
with the session cannot change while navigating. WEBDEV site.
This is used to protect against "session hijack"
attacks (attack that consists in pretending to be a 2.7 Logs WEBDEV engine
legitimate user connected to the server). The "Logs" tab is used to see the details of logs
Forbid the access to AWP context identifiers from over a specific period.
JavaScript Caution: To use this feature, the logs must have WEBDEV site
In an AWP site, the site context is stored on the been enabled for the site. The logs can be enabled:
server. The identifier of this context is sent and • in the "Configuration" tab to manage a general
stored in the browser via a cookie. log,
Database
If the option "Forbid the access to the AWP context • in the "Sites" tab ("Parameters" button) and in
identifiers from JavaScript" is checked, the cookies the "Webservices" tab ("Parameters" button") to
used will be "HTTPOnly" cookies, that cannot be manage a specific log.
read from Javascript code. This mode protects The log of errors is automatically created when the
against XSS attacks (Cross-Site scripting). log of statistics is enabled.
For a static site:
By default, the access to the AWP context
identifiers is not allowed from Javascript.
Managing fCopyFileWebFolder and
fDeleteFichierWebFolder
The option "Allow fCopyFileWebFolder and
fDeleteFileWebFolder" must be checked if these Computer of Server
the Web user
functions are used in the Web site.
These functions are mainly used to include images
found in the data directory in the directory of site
images (images uploaded then made available to
Connection to the WEBDEV site
the Web users of the site for example).
Only a browser Web server
Caution: The copy is taken into account by (IIS, Apache, ...)
is required
the WEBDEV administrator on the server
(WD250ADMIN.EXE). The Windows account that
runs it must have sufficient rights on the target
location of copy. WEBDEV site

226 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 227
 Dedicated server or
Contenu
shared server?
• dedicated server: the server is reserved for the client. The hosting company provides the
access to Internet (IP address, wire, etc.).
The computer is either rented by the hosting company, or provided by the client.

The hosting companies propose two types of servers for installing your WEBDEV sites:
• shared server:
server whose resources are shared by several clients (client = hosted company).
Web server
Computer dedicated to client
- Web server and FTP server if necessary
- WEBDEV application server
Web server - Operating system
- WEBDEV sites
Common part
- WEBDEV application server
Characteristics:
- Operating system The hosting company provides the access to Internet (IP address, wire, etc.). The client must:
- Registry • provide the server (or rent it),
- Web and FTP server • configure the computer (system, etc.),
• install the Web server,
Disk space Disk space
Client 1 Client 3
• install and configure WEBDEV sites (via HTTP, FTP or DVD-ROM).

Disk space Disk space

Client 2 Client 4

Characteristics:
The hosting company provides a server to several clients.
The hosting company:
• configures the FTP server (required only for FTP deployments).
• defines the maximum number of connections for all the dynamic sites belonging to the same
client (via the WEBDEV account manager).

The setup and updates of a dynamic or static site can be performed by FTP.

228 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 229
 Which type of server to
Contenu
Hosting Control
Contenu
choose? Center
The table below presents the benefits and drawbacks of different types of servers. The Hosting Control Center, which is mainly intended for hosting companies and Webmasters,
Regardless of the server type, a deployment license is required for each server. helps you host WEBDEV sites.
Each server is hosting one or more dynamic WEBDEV sites (in Session mode or in AWP mode).
The Control Center manages the WEBDEV accounts as well as the account for the Web server and
Server Benefits/Drawbacks When should the rights for the operating system.
this server be used?
Shared Main benefits: A shared server is recommended for: A default choice is proposed: it allows you to easily install a server, without specific knowledge.
• Lower cost. sites with few hits (up to 20 or 30
• Server managed by the hosting simultaneous connections) The setting of the following elements is centralized:
company. • sites requiring little memory (no • Windows accounts,
large calculations performed on • Groups of FTP users,
Main drawbacks: the server), • Groups of WEBDEV clients,
• Memory resources shared by all the • Sites in startup phase.
sites found on the server. • Home Directory,
• If a site is locked, all the sites found • FTP alias,
on the server are locked. • WEBDEV accounts,
• Stand-alone executables can rarely • Data directories,
be used. • Virtual Web sites, ...
Non-secured access to data:
Unauthorized people can access The WEBDEV Hosting Control Center operates in the Windows environment with the IIS Web server
the data: the hosting company and (Internet Information Server, all versions from version 5).
possibly other clients if the server is
not configured properly.
Tip: encrypt the data files to avoid
any unauthorized use.
Dedicated Main benefits: A dedicated server is recommended
• The server resources are available for for:
the sites installed on this computer. • sites with many hits,
• Custom management of data • sites requiring a lot of disk space
download: and memory,
• replication by emails, • sites managing sensitive data,
• WDREPLIC, • dynamic sites.
• copy of files by FTP.
Main drawbacks:
• High cost.
• Server entirely managed by the client
in most cases.

230 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 231
 Dynamic site on specific
Contenu
configurations
2. Setup on a Windows server, with an access to Internet via UNIX

The configuration is as follows:

INTERNET
1. Setup on a Web server in Windows (2000 or later) or a Linux
server Unix
The configuration is as follows: 1 server
Are installed on the server:
INTERNET - Unix server Web
- the static pages

Windows
server
Are installed on the server:
Windows
2
- the WEBDEV application server

3
- the dynamic WEBDEV site
- the Web server in Windows server
Are installed on the server:
- the WEBDEV application server
- the dynamic WEBDEV site
- the Web server in Windows

INTERNET
1. Opening a static page. The static page is found on the UNIX server.
2. Starting the dynamic WEBDEV site (found on the Windows server) via a link found in the static
Linux HTML page.
server 3. Standard operating mode of the WEBDEV site.
Are installed on the server:
- the WEBDEV application server Remark: the same configuration can be performed on a Linux server.
- the dynamic WEBDEV site
- the Web server in Linux

232 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 233
 Traffic statistics of
Contenu
dynamic sites
3. Setup on a Windows or Linux server with Load Balancer

The Load Balancer system is used to spread the number of connections to a dynamic WEBDEV
site over several computers.
It is often important to get accurate statistics about the site visits.
INTERNET How do you find out who visited your site, which pages have been view, which applications have
been use and from which site were they coming from?

WEBDEV is supplied with a statistical tool for the dynamic pages: WDStatistic. This tool can be
installed on any computer.

Examples of statistics calculated by WDStatistic: number of connections per day, visited pages,
Load operating systems and browsers of Web users, ...

balancer Examples of statistics for the dynamic sites:

Server Server Server

Data server
Solution 1: Installing the dynamic WEBDEV site on the data server only.
This solution consists in installing:
• the WEBDEV application server on each Web server,
• the dynamic WEBDEV sites and the data files on the data server.
Solution 2: Installing the dynamic WEBDEV site on all Web servers.
This solution consists in installing:
• the WEBDEV application server and the dynamic WEBDEV sites on each Web server.
• the data files of the dynamic WEBDEV sites on the data server.

234 Part 8: Hosting WEBDEV sites Part 8: Hosting WEBDEV sites 235
 Monitor your sites,
Contenu PART 9
servers, ...
A site depends on several external parameters: Web site, HFSQL server, network, ... To optimize
the management of incidents, WEBDEV allows you to use a monitoring robot.
Made of three executables started on different computers, the monitoring robot is used to run
different tests: Internet tests, network tests, ...
If problems occur when running a test, different methods can be used by the monitoring robot to
inform you:
• Message sent into PC SOFT messaging (WDBAL).
• Email.
• Running another program.
Furthermore, a sound alert can be implemented on the monitor.
Appendices

Configures
User computer: Computer 1:
Monitor Monitoring robot

- Manages the tests - Runs the tests on a regular basis

- Configures the robots - Sends a message if a problem
- Can directly run the tests occurs

Monitoring
Configures
test
Computer 2:
Counter-Robot

- Tests the monitoring robot on a regular basis

- Sends a message if a problem occurs

Available types of tests

Internet test Test of HFSQL Network test

(test of a Web site) Client/Server servers (SNMP)

Test of FTP Test of news Test of WINDEV

server server application

Custom test ...

(in WLanguage)

236 Part 8: Hosting WEBDEV sites

 WLanguage functions
Contenu
specific to WEBDEV 25
AddFavorite Adds an Internet address into the list of favorites for the
Web user.
AJAXAsynchronousCallPending Used to find out whether a server procedure called by
AJAXExecuteAsynchronous is currently run.
AJAXAvailable Used to find out whether the AJAX technology is
supported by the current browser.
AJAXCancelAsynchronousCall Cancels the automatic execution of the browser
procedure called by AJAXExecuteAsynchronous.
AJAXExecute Runs a server procedure without refreshing the page.
AJAXExecuteAsynchronous Runs a server procedure without refreshing the page.
AppServerAddScheduledTask Adds a new scheduled task to the application (site or
webservice).
AppServerDeleteScheduledTask Deletes a scheduled task associated with the
application (site or Webservice).
AppServerInfoScheduledTask Reads the description of a scheduled task.
AppServerListScheduledTask Returns the list of scheduled tasks for the application
(site or Webservice).
AppServerModifyScheduledTask Modifies an existing scheduled task.
AppServerRunScheduledTask Immediately starts the execution of a scheduled task on
a WEBDEV Application Server.

ASPDisplay Calls an external ASP script and returns the result page
in the current browser window.

ASPExecute Calls an external .asp script and returns the result in a

string.
AssistedInputConfigure Used to configure the filter and the opening of assisted
input.
BannerFirst Displays the first plane of a Sliding Banner control.
BannerNext Displays the next plane of a Sliding Banner control.
BannerPrevious Displays the previous plane of a Sliding Banner control.
BannerStopSliding Stops the automatic slide on a Sliding Banner control.

238 Part 9: Appendices Part 9: Appendices 239

 BreadcrumbAddLink Adds a link into a Breadcrumb control. CellCloseDialog Hides a Cell control previously displayed in the page via
CellDisplayDialog.
BreadcrumbDeleteAll Deletes all links from a Breadcrumb control.
CellDisplayDialog Displays a Cell control in a page with a DDW effect
BreadcrumbDeleteLink Deletes a link from a Breadcrumb control. (Dim Disabled Windows). This function is used to easily
BreadcrumbInsertLink Inserts a link into a Breadcrumb control. simulate a dialog box in browser code, by using a Cell
control in a page.
BreadcrumbModifyLink Modifies a link in a Breadcrumb control.
CertificateClientInfo Returns information about the certificate used by the
BrowserSlice Returns the number of the slice displayed in a page in client computer.
Responsive Web Design mode.
ChangeAction Used to specify the action to perform when the HTML
BrowserClose Closes the current browser window and stops the
page displayed in the browser is no longer synchronized
execution of the current code.
with the page context on server.
BrowserHeight Returns the height (in pixels) of the client area where ChangeTarget Changes the target of a button action.
the page is displayed.
ColorPalette Returns a color found in the current palette.
BrowserIPAddress Returns the IP address of the computer of the Web user
connected to the WEBDEV site. ConfigureAWPContext Configures the operating mode of AWP context.
BrowserIsConnected Indicates whether the browser is connected to the ConnectionCount Returns the number of instances of the WEBDEV site
network. currently run on the server.
BrowserMobile Allows you to find out whether the browser used by the ContextClose Closes a page context.
Web user is started on a mobile device.
ContextExist Allows you to find out whether a page context exists on
BrowserName Returns the name of the browser of the Web user ("user the server (which means whether the page was opened).
agent").
ContextOpen Opens a new page context without returning the
BrowserOpen Opens a new browser window. information to the browser.
BrowserOS Indicates the operating system announced by the CookieRead Retrieves the value of a cookie saved on the computer
browser of the Web user. of Web user.
BrowserPlatform Returns the platform of the browser used by the Web CookieWrite Writes a cookie onto the computer of the Web user.
user.
CurrentPage Returns the name of the page containing the
BrowserRunApp Opens the default Web browser of the current device. WLanguage code currently run.
BrowserType Returns the type of browser used by the Web user.
DeclareAWPContext Used to declare a list of variables whose value will be
BrowserWidth Returns the width (in pixels) of the client area where the persistent between the successive displays of AWP
page is displayed. pages.
CancelAWPContext Deletes from the AWP context a variable that was added DynamicServingConfigure Indicates the environment that will be used by the
by DeclareAWPContext. "Dynamic Serving" to choose the set of pages to display.
CapsLockVerify Checks whether the CapsLock key is pressed. DynamicSiteDisplay Starts a dynamic WEBDEV site from a static page or or
from a dynamic WEBDEV page.
CaptchaDisplay Displays a new Captcha in a Captcha control.
CaptchaVerify Checks whether the value typed by the user corresponds
to the string displayed in a Captcha control.

240 Part 9: Appendices Part 9: Appendices 241

 EmailOpenMail Opens the default messaging software: FullScreenEnable Switches the browser to "Full screen" mode. The browser
• of Web user on the browser computer. occupies the entire screen.
• of the user on the current Windows computer. fWebDir Returns the physical name of the directory containing
• on the phone. the images, the Javascript files and the Java files of the
WEBDEV site.
EmailStatus Returns the status of an email sent via an SMTP session
started in asynchronous mode. ProgressBarEnable Enables the refresh of a Progress Bar via Ajax.
ExecuteDelayedProcedure Runs a delayed procedure (in the WEBDEV application ProgressBarDisable Stops the periodic refresh of a Progress Bar via Ajax.
server).
ProgressBarExecute Starts a long browser process and fill a Progress Bar via
fCopyFileWebFolder Copies an image file from the data directory of Ajax according to the progress of this process.
application (or from one of its sub-directories) to
the "_WEB" directory of application (or to one of its GglAnalyticsAddEvent Adds an event beside Google Analytics
subdirectories).
GglAnalyticsAddException Adds an exception beside Google Analytics.
fDeleteFileWebFolder Deletes an image file from the "_WEB" directory of the GglAnalyticsAddPage Adds a page beside Google Analytics.
application (or from one of its subdirectories).
GglAnalyticsAddSocialNetworkAction Adds a social network action beside Google Analytics.
FileDisplay Displays a file in the browser of Web user.
GglAnalyticsAddTiming Adds a duration beside Google Analytics.
FileToPage Automatically initializes the controls of a page with:
• the values of the associated items in the current gpwOpenConfiguration Opens the window or page for configuring the user
record (loaded in memory) of the data file described groupware.
in the data model editor. This operation is performed grImageSize Defines the size of the image containing the chart.
regardless of the status of the controls (grayed,
inactive or invisible). HTMLClassAdd Adds a class into the HTML classes of a control.
• the values of the associated WLanguage variables.
This operation is performed regardless of the status HTMLClassDelete Deletes a class from the HTML classes of a control.
of the controls (grayed, inactive or invisible).
HTMLClassToggle Toggles a class in the HTML classes of a control: if the
FolderData FolderData is kept for backward compatibility. class does not exist, it is added ; if the class already
exists, it is deleted.
FolderWeb Returns the path of the directory containing:
IdentifierAWPContext Returns the identifier of AWP context.
• the images,
• the Javascript files, iDirImageHTML Used to select the directory in which the images must be
generated during a print in HTML format.
• the Java applet files,
• the other files accessible from the browser. ImageArea Returns the number of the image area clicked by the
Web user.
FramesetDisplay Displays a WEBDEV frameset in the browser of Web
user. ImageFirst Displays the first image for the scroll.
FramesetUse Displays a WEBDEV frameset in the browser of Web user ImageLast Displays the last image for the scroll.
and closes all the current page and frameset contexts.
ImageNext Displays the next image for the scroll.
FreeAWPContext Frees the AWP context in advance (on disk) to allow the
other call on the same AWP context to be processed in ImageOccurrence Returns the total number of images taken into account
parallel. by the scroll.
ImagePrevious Displays the previous image for the scroll.
FullScreenDisable Disables the "Full screen" mode of browser.

242 Part 9: Appendices Part 9: Appendices 243

 ImageScrollingPosition Returns the displayed image. MenuAddPopup Transforms a menu option of a page in order for this
ImageStartScrolling Starts the automatic scroll of images. option to open a popup.
MenuAddURLOption Adds a new menu option at the end of a page
ImageStopScrolling Stops the automatic scroll of images. menu. This menu option is used to display the page
ImageXPos Returns the horizontal position (X) of the mouse cursor corresponding to the specified URL.
in relation to the specified Image control. PageActivateDDW Enables or disables the DDW (Dim Disabled Window)
ImageYPos Returns the vertical position (Y) of the mouse cursor in when displaying a modal page (the pages used to
relation to the specified Clickable Image control. communicate with the user for example).

jQuery Runs a Javascript method (or several chained methods) PageAddress Used to find out the Internet address of a page.
of the jQuery library on a page element. PageCloseDialog Closes the current page. This page was opened by
jQueryExecute Runs a Javascript method of the jQuery library on a page PageDisplayDialog. A return value can be returned to
element. the calling page.

JSEndEvent Deletes the association between a WLanguage browser PageDisplay Displays a site page in the browser of Web user.
function and an event (implemented by JSEvent).
PageDisplayDialog Displays a page in modal mode. This function is used to
JSEvent Associates a browser procedure with an event on an establish a dialog with the user. The page is displayed
object in browser code. in the foreground while the opening page is displayed in
the background, grayed by the DDW mechanism.
JSInfoEvent Used to handle the JavaScript properties of the browser
event that triggered the code execution. PageExist Checks whether the specified page is currently displayed
in the browser of the Web user. Used to find out whether
JSInterruptEvent Interrupts the process of current event. a page is displayed in a frame other than the current
JSMethod Used to run a Javascript method on an element found in one.
the current page.
PageInitialization Resets to zero (or not) the controls found in the current
JSONExecute Calls a server URL that returns data in JSON format page and starts the events for initializing the controls
(JavaScript Object Notation). and the page.
PageParameter Returns the value of a parameter passed to the current
JSONExecuteExternal Calls an external server URL that returns data in JSON
page.
format (JavaScript Object Notation).
JSProperty Used to handle specific features on the objects found in PagePosition Scrolls a page up to position a control in the visible
the current page. section of the page (top) in the browser.

LocalStorageAdd Adds a value to the local storage. PageRateDDW Allows you to find out and modify the rate of gray for the
pages that use DDW (Dim disabled pages).
LocalStorageAvailable Indicates whether the local storage is available or not for
the current browser. PageReadHeaderHTTP Reads and returns one or more HTTP headers received
by the current page (these headers are sent by the client
LocalStorageDelete Deletes a value from the local storage. to the server in the current request).

LocalStorageDeleteAll Deletes all the values from the local storage. PageRefresh Refreshes a page displayed in the browser of Web user
from the context found on the server.
LocalStorageGet Retrieves a value from the local storage.
PageSubmit Validates the specified page and starts the execution of
LocalStorageOccurrence Returns the number of values for the local storage. a button.
LocalStorageValueName Returns the name of a value for the local storage.

244 Part 9: Appendices Part 9: Appendices 245

 PageToASP Sends the data found in a page currently displayed in PopupDisplay Displays a popup in a page with a DDW effect (Dim
the browser to an ASP server. Disabled Windows).

PageToEmail Emails the data found in a page currently displayed in PreviousPage Returns the name of the previous page.
the browser.
rssDisplay Builds a RSS stream and returns the content of RSS
PageToFile Automatically initializes: stream to the client.
• the memory value of the items of a data file with the SaaSCheckService Checks the access rights of the user to a service of the
value of the controls found in the page. The items SaaS site.
of the base data file linked to the window controls
are automatically assigned with the values of the SaaSClientConnexion Returns the characteristics of the connection to the
corresponding controls (even if these controls are client database.
grayed, inactive or invisible).
• the value of the WLanguage variables with the value SaaSConnect Authenticates a user of a SaaS site beside the SaaS
of the window controls. The WLanguage variables webservice that manages the site.
linked to the page controls are automatically assigned SaaSConnectedUser Returns the user currently connected via SaaSConnect.
with the values of the corresponding controls (event if
these controls are grayed, inactive or invisible). SaaSDisconnect Disconnect the user of a SaaS site beside the SaaS
webservice that manages the site.
PageToJSP Sends the data found in a page currently displayed in
the browser to a JSP server. SaaSIsConnected Defines whether the connection to the SaaS webservice
PageToPHP Sends the data found in a page currently displayed in is still established.
the browser to a PHP server. SaaSReadSiteParameter Reads an information specific to the client for the
current SaaS site.
PageToSource Automatically initializes:
• the memory value of the items of a data file with the SaaSWriteSiteParameter Saves a specific information for a SaaS site in the
value of the controls found in the page. configuration of a client account.
• the value of the WLanguage variables with the value
ScriptDisplay Calls an external script or page (.php, .asp, .mhtml
of the controls found in the page.
or.mht) and returns the result page in the current
PageUse Displays a WEBDEV page in the browser of the Web user browser window.
and closes all the current page contexts. ScriptExecute Calls an external script (.asp or .php) and returns the
PageVisible Indicates whether the page is visible to the user. result in a string.

PageWriteHeaderHTTP Adds an additional HTTP header that will be returned to SiteAddress Returns the Internet address for connecting to a
the browser: dynamic WEBDEV site (in Session mode) found on the
same server.
• during the next function for page
display (PageDisplay, PageRefresh, ...), SourceToPage Automatically initializes the controls of a page with:
• during the automatic return of the current page at the • the values of the associated items in the current
end of the current action. record (loaded in memory) of the HFSQL data file
PHPDisplay Calls an external PHP script and returns the result page described in the data model editor.
in the current browser window. • the values of the associated WLanguage variables.
PHPExecute Calls an external .php script and returns the result in a SSLActive Used to enable or disable the secure SSL mode.
string.
StringDisplay Returns a specific string (or a buffer) to the client
PopupClose Hides a popup displayed in the page via PopupDisplay. browser in response to a request.

246 Part 9: Appendices Part 9: Appendices 247

 SysVersion Returns information about the PHP version used on the
current server. Examples and components
Contenu

ToastDisplayPopup Displays a popup page during a given duration in order

to display a "Toast" message. supplied with WEBDEV
UploadCopyFile Saves on the server a file "uploaded" by the Web user.
This upload may have been performed:
The examples supplied with WEBDEV are intended to help you learn the features of WEBDEV.
• via an "Upload" edit control.
Their source code is presented in details.
• via a single-file or multi-file Upload control.
UploadCurrentFile Indicates the file currently uploaded via the Upload Different types of examples are supplied with WEBDEV:
control. • complete examples: these examples correspond to full sites that can be used without any
adaptation.
UploadCurrentFileSize Returns the total size (in bytes) of the file currently
• training examples: these examples illustrate a specific feature.
uploaded via an Upload control.
• unit examples: these examples include a page whose test can be run in the current project.
UploadCurrentFileSizeSent Returns the size (in bytes) already sent for the file This page presents the use of a function, group of functions, control, ...
currently uploaded via an Upload control. • components: -these examples include an internal component, an external component and a
use example.
UploadDelete Deletes a file from the list of files to upload: the file will
not be uploaded on the server.
These examples and components can be opened from the home window of WEBDEV.
UploadDeleteAll Clears the list of files to upload: no file will be uploaded • The complete examples, training examples and unit examples are found in the "Examples" sub-
on the server. directories of setup directory of WEBDEV.
• The components are found in the "Components" sub-directory of the setup directory of
UploadFileName Returns the name of a file "uploaded" by the Web user. WEBDEV.
This upload may have been performed:
• via an "Upload" edit control.
Additional examples can be downloaded from our site (www.windevcom).
• via a single-file or multi-file Upload control.

UploadFileSize Returns the total size (in bytes) of a file found in an

Upload control.
UploadSize Returns the total size (in bytes) of the file currently
uploaded via an Upload control.
UploadSizeSent Returns the total size (in bytes) of files already sent by
the current upload via an Upload control.
UploadStart Starts sending the selected files into an Upload control.

248 Part 9: Appendices Part 9: Appendices 249

 Full examples WW_FAQ This Responsive Web Design example proposes the main
features of a FAQ site.
Example name Description WW_Forum_AWP This example proposes the main features of a user forum
eBusiness Full eCommerce site that can be customized via a Web (creation of forums, topics and messages, moderation by an
management interface. administrator, ...).
• The showroom/payment section of the site is developed WW_Forum_PHP This example proposes the main features of a user forum
in AWP in order to get the best possible referencing of (creation of forums, topics and messages, moderation by an
products. administrator, ...).
• The administration section of the site is developed in
WW_Loan This example is used to simulate loans and to calculate:
standard WEBDEV session to guarantee the maximum
security. • the amount of monthly payments for a given loan.
• the amount that can be borrowed for a given monthly
Honolulu Free Intranet portal: messaging, forum, blogs, ... payment.
• the income of an investment for a given monthly payment.
Photo_Gallery This example is a site of photo gallery. The amortization table is displayed for each case.
WAds Management of classified ads. WW_MotorEquipment This example represents an online store.
Multi-criteria search, addition, modification and deletion of It contains the “front-office” section (overview of products), the
classifieds, as well user management. basket section, the secure payment.
webmillion Uses a data file containing more than 1 million records. WW_Newsletter Used to create a site for managing newsletters. It allows you to
create, write, and manage the sending of mass newsletters to
WW_Association_AWP Association site made of 2 main sections: subscribers.
• the “visitor” section, built in AWP mode therefore can be
referenced. WW_Overview_Mobile_ Responsive Web site presenting a Mobile application that
• the “member space” section, built with WEBDEV in standard Application includes a static page that is entirely responsive.
mode and therefore secured.
WW_Precilia_Sport This example is a Web site with a store section.
This site presents news, a photo gallery, the association
overview, ... The site occupies the full browser width with a background
image.
WW_Association_PHP Association site in PHP WEBDEV made of 2 main sections:
WW_Precilia_Winter This example is an online site for skiing equipment.
• the visitor section, accessible to all.
• the management section, reserved to the members of WW_PreciliaTShirts This example is an online site for selling tee-shirts.
association. This site proposes a home page (with all products), a page for
This site presents news, a photo gallery, the association product description (with addition to basket) as well as several
overview, ... other pages (faq, contact form, gsc, etc.).
WW_Blog_AWP This example is a site for blog management, based on an AWP WW_Rewali Online travel booking.
generation, allowing the site to be referenced by all search
engines. Furthermore, each blog can be exported in RSS. WW_Schedule This example is used to dynamically display the tasks assigned
to the different contributors. You have the ability to add, modify
WW_Blogs_php This example is a PHP site for blog management. or delete tasks by clicking the elements found in the schedule.
All the operations are performed in AJAX.
WW_CMS This example is a CMS (Content Management System),
typically a site for displaying articles.

250 Part 9: Appendices Part 9: Appendices 251

 WW_SchedulingActivities_ This example presents a site for a structure proposing Training examples
Club activities according to a specific schedule; a sport club for
example.
Example name Description
WW_Static_Company This example is a static site for presenting companies, a
WebApp This example shows how to use planes in WEBDEV.
“showroom” site.
WW_Auto_Error_Management This example explains how to use the automatic management
WW_Static_Crafts This example is a static site for presenting a crafts workshop of WEBDEV errors.
or a company working in the crafts field
WW_Auto_Zoom This example displays an image miniature and when it is
WW_Static_Restaurant This example is a static site for presenting a restaurant, a
clicked, the image is enlarged without disrupting the page
“showroom” site.
layout.
WW_TamesShop This example provides an online store that can be immediately
WW_Dashboard This example presents the use of the Dashboard control.
used. The site manages the categories of products, the
detailed characteristics, the photos, and it proposes several WW_Drawing_HTML5 Drawing functions in browser code for the browsers that
internal components for managing the customer section, the support the HTML5 standard.
basket, the payment.
WW_Edit_Period This example shows the integration of javascript code in a
WW_TicketTracker This example can be used in all areas where it is necessary to WEBDEV site.
follow interventions between several people.
WW_Organizer Example for using the Organizer control in WEBDEV.
WW_WebDoc This example is an Electronic Document Management (EDM)
WebDoc is using the full-text search to perform searches in the WW_PayPal_PHP Explains how to propose a secure payment via the PayPal
content of documents. solution in your WEBDEV PHP sites.
The documents are classified by category. WW_RSS_Stream This example explains how to read and display a RSS stream in
This example also explains how to retrieve the content of a a WEBDEV page via the RSS type.
PDF document.
WW_SAASClientSite This example presents the functions for SaaS management
WW_WebEstate This site is Responsive. Its layout fits any browser size found in WEBDEV.
automatically.
WW_Signature WW_Signature is an example explaining how to draw in HTML5
WWDLoad This site is used to propose files that can be downloaded by and how to save the image in browser code.
the users according to the group to which they belong.
WW_Wizard This example includes a class and a page template that can be
re-used to create and manage a Web wizard.
WWBrowserDialog This example presents a dialog between two distinct browsers.
WWPocket This example is a site that can be viewed on a Pocket PC. The
site detects the resolution of the user and displays the pages
consequently.

252 Part 9: Appendices Part 9: Appendices 253

 Components
WEBDEV is supplied with projects corresponding to components. These projects contain:
• a project configuration corresponding to the component.
• a project configuration corresponding to the use of component.
• an internal component.

Let’s see the main components supplied with WEBDEV:

WW_CloudTags Used display a cloud of tags in a dynamic WEBDEV application.

WW_Extraction Used to extract and store the content of several documents

(Open Office, Word 2007, ...) in order for them to be found by
the full-text search.

WW_PayBox Used to install a system for secure payment via PayBox.

WW_PayPal Used to include PayPal payment buttons in your WEBDEV
pages.
WW_SecurePayment Used to manage a secure online payment.
The component manages several solutions for secure
payment: Paybox, Ogone E-Commerce, PayPal, Cybermut,
SogenActif, E-Transaction, Scellius, Mercanet, Sherlocks,
CyberP@iement, SPPlus.
Additional components are also available on our site (www.windev.com).

254 Part 9: Appendices