New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - WEBDEV overview
  • Lesson 1 - WEBDEV environment
  • What is WEBDEV?
  • Launching WEBDEV for the first time: the home page
  • Development environment
  • The editor
  • The ribbon in detail
  • WLanguage
  • To sum up

Tutorial - WEBDEV overview

Lesson 1 - WEBDEV environment
We will cover the following topics:
  • What is WEBDEV?
  • Launching WEBDEV for the first time: the home page
  • Development environment
  • WLanguage
Durée de la leçon 5 min
What is WEBDEV?
WEBDEV is a complete DevOps Integrated Development Environment that facilitates the development of sophisticated Internet and Intranet sites in diverse fields: e-commerce, multimedia, etc.
Websites developed with WEBDEV can be used to access information stored in databases.
WEBDEV allows you to create:
  • static Internet/Intranet sites. These websites handle data that does not change (company showroom site, etc.).
  • dynamic Internet/Intranet sites that handle data. WEBDEV websites access all available relational and non-relational databases.
The different tutorials will show you how to create and improve your own websites (with or without a database) using the many features available in WEBDEV.
Launching WEBDEV for the first time: the home page
To get started, simply launch WEBDEV 2024.
Log in if necessary.
The development environment opens. The WEBDEV home page appears.
Home page
This home page allows you to:
  • view news about PC SOFT products,
  • create a project,
  • open an existing project,
  • open an example,
  • access the different tutorials available in WEBDEV.
If you haven't started WEBDEV 2024 before, a welcome wizard will appear:
  • If you have used an earlier version of WEBDEV, this wizard will help you retrieve your previous configurations.
  • If you are a new user, this wizard will help you configure your environment. You will be able to choose the screen configuration and set up the Control Centers.
Development environment
Let's open a project to discover the main features of the WEBDEV environment:
  1. On the home page, click "Tutorial".
  2. In "Tutorial - Discover WEBDEV (Lesson 1 and 2)", double-click "Full WEBDEV Site - Answers".
    Tutorial examples
  3. The corresponding project opens in the editor. The project dashboard is displayed. The project dashboard allows you to monitor the progress of a project via several widgets.
    Project dashboard

The editor

The WEBDEV development environment includes a specific UI and multiple editors that allow you to create the different elements of your websites: a page editor to create pages, a report editor to create reports, etc.
Let's open a page in the page editor:
  1. Press Ctrl + E.
  2. In the window that is displayed, type the name of the page to open: PAGE_List_of_products.
  3. Validate. The page is displayed in the editor.
All the editors have the same environment:
Editor environment
  • Editor menu (1), displayed as a ribbon (we'll see how to use it in the next paragraph).
  • Current editor (2) (here, the page editor). The editor shows the element being created or modified in WYSIWYG mode (What You See Is What You Get).
  • Panes (3). The WEBDEV UI includes several horizontal and vertical panes that provide quick access to different types of information.
    For example:
    • The "Project explorer" pane (left) lists all project elements by category.
    • The "Find - Replace" pane (displayed at the bottom) is used to quickly perform searches in your project.
    These panes can be hidden by pressing Ctrl + W if necessary.
  • Open document tabs (4). These tabs allow you to quickly see all open elements. Simply click a tab to open an element in its corresponding editor.

The ribbon in detail

The ribbon is a key element of the editor interface. You can access all WEBDEV options via this ribbon.
The ribbon includes three areas:
Ribbon of editors
Let's take a closer look at these areas.
The Buttons area (1)
Buttons area

The Buttons area contains the quick access buttons. These buttons are used to perform the most usual operations, common to all editors: save, open, create, etc.
You can open the "About" window from the logo of the IDE.
The Tabs area (2)
Tabs area
The different ribbon tabs allow you to access the options of the editors for the current project. Multiple types of tabs are available:
  • the current tab, bold and underlined.
  • colored context tabs. These tabs are specific to the current element.
  • the other tabs.
The Options area (3)
Options area
The options in the ribbon change depending on the selected tab. Multiple types of options are available:
  • Options to check,
  • Buttons to click,
  • Drop-down buttons used to expand options. Two types of drop-down buttons are available:
    • drop-down buttons used to expand a menu,
    • split buttons used to expand a menu (click on the arrow), or to perform a default action (click on the button icon).
The options are organized by groups. Each group of options has a name and can have a dialog box launcher Dialog box launcher. This button allows you to perform a specific action according to the current group: open the description of the current element, open the help, etc.
In the different WEBDEV tutorials, we will refer to tabs and groups to indicate a menu option. For example: To display the help, go to the "Home" tab, "Online help" group and click "Help".
WLanguage is the programming language common to WINDEV, WEBDEV and WINDEV Mobile.
If you are not familiar with this language, we advise you to follow the lessons on the programming concepts. These lessons present the different types of variables, the main WLanguage statements, the procedures, etc.
To sum up
We have covered the essentials of the WEBDEV environment. We opened a project and a page in the editor. In the next lesson, you'll discover how a standard website works, and how it compares to a WEBDEV website.
We have completed the first lesson. Don't forget to close the current project:
  1. On the "Home" tab, in the "General" group, expand "Close" and select "Close project".
  2. Save changes if necessary.
The WEBDEV home page appears.
Table of contentsNext Lesson
Minimum version required
  • Version 2024
Click [Add] to post a comment

Last update: 12/05/2023

Send a report | Local help