ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
New WEBDEV 28 feature!
Help / WEBDEV Tutorial / Part 01 - WEBDEV overview
  • In this lesson you will learn the following concepts
  • Overview
  • Starting WEBDEV
  • Development environment
  • Editor
  • The ribbon in detail
  • Options of the environment
  • WLanguage
  • Conclusion
Lesson 1.1. Discover WEBDEV
In this lesson you will learn the following concepts
  • Starting WEBDEV.
Lesson duration

Estimated time: 5 mn
Table of contentsNext Lesson
Overview
WEBDEV is a complete DevOps Integrated Development Environment aimed at developing sophisticated Internet and Intranet sites in diverse fields: e-commerce, multimedia, etc.
The developed sites can give access to information stored in the databases.
WEBDEV allows you to create:
  • static Internet/Intranet sites. These sites manage data that does not change (company showroom site, etc.).
  • dynamic Internet/Intranet sites, that manage data. The WEBDEV sites access all databases, relational or not, available on the market.
Throughout this tutorial, you will learn how to create your sites (with or without a database) and how to enrich them using all the features available in WEBDEV.
Starting WEBDEV
  • Start WEBDEV 28.
    • If you haven't started WEBDEV 28 before, a welcome wizard will appear:
      • If you have worked with an earlier WEBDEV version, this wizard allows you to retrieve the existing configurations.
      • If you are a new user, this wizard allows you to configure your environment. You will be able to choose the screen configuration and set up the Control Centers.
    • If you have already started WEBDEV 28, log in if necessary. The development environment opens up. The WEBDEV home page is displayed.
      Home page
      This home page allows you to:
      • view news about PC SOFT products,
      • create a project,
      • open an existing project,
      • open an example,
      • open one of the projects from the tutorial.
  • Let's take a look at the WEBDEV development environment:
    • In the home page, click "Tutorial".
    • In "Part 1 - Lesson 1.1 - Discover WEBDEV", double click "Full WEBDEV Site - Answers".
      Tutorial examples
    • 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
Development environment

Editor

The WEBDEV development environment includes a specific UI and multiple editors that allow you to create the different elements of your applications.
For example, the page editor is used to create pages, the report editor is used to create reports, etc.
  • To discover WEBDEV, we will open the page used to list the products:
    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 editors use the same environment:
Environment of editors
  1. Menu of editors, displayed as a ribbon (we'll see how to use it in the next paragraph).
  2. Current editor (here, the page editor). The editor shows the element being created or modified in WYSIWYG mode (What You See Is What You Get).
  3. Panes. The WEBDEV interface includes several horizontal and vertical panes allowing you to quickly access 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.
  4. Open document tabs. 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 options in WEBDEV are accessible via a ribbon. This ribbon contains tabs in which the different options of the editors are grouped.
Ribbon elements
The ribbon includes three areas:
Ribbon of editors
  • the Buttons area, on the left (1).
  • the Tabs area, at the top (2).
  • the Options area (3).
Let's take a closer look at these areas.
The Buttons area (1)
Buttons area
The Buttons area groups 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: The tab name appears in bold and a blue line is displayed below the tab name
  • the context tabs, specific to the current element: The tab name is displayed in blue.
  • available tabs: The tab name appears in white (or in black in the light theme).
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 is used to perform a specific action according to the current group: open the description of the current element, open the help, etc.
In this tutorial, to indicate a menu option, we will refer to tabs and groups.. For example: "To display the help, go to the "Home" tab, "Online help" group and click "Help"."

Options of the environment

You can change many options of the environment:
  • Theme: By default, the environment uses a dark theme. However, several themes are available:
    • Light theme, grey ribbon. In this mode, the menu bar has no colors: it is grayed out.
    • Gray theme. In this mode, the environment and windows of the interface are displayed on a light gray background.
    • Dark theme. In this mode, the environment and windows of the interface are displayed on a black or dark gray background.
  • Language: By default, the environment is displayed in the language chosen during setup. The environment can be displayed in English, French or Spanish.
  • Pane: Some panes are displayed by default in the environment ("Project explorer", etc.). You can choose which panes are displayed and set their position.
All these options can be found in the options of the environment. To change these options, go to the "Home" tab, "Environment" group, expand "Options" and select "General options of WEBDEV". You can change many options of the environment in the different tabs of the window that appears.
Bear in mind that changing certain options may require restarting WEBDEV.
WLanguage
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 that cover the programming concepts. These lessons present the different types of variables, the main WLanguage statements, the procedures, etc.
Conclusion
We have covered the essentials of the WEBDEV environment. In the next lesson, you will be able to create your first website.
  • To continue this tutorial, close the current project:
    1. On the "Home" tab, in the "General" group, expand "Close" and select "Close project".
    2. Save the changes if necessary.
    3. The WEBDEV home page is displayed.
Table of contentsNext Lesson
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment

Last update: 05/31/2023

Send a report | Local help