PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WEBDEV 26 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Starting WEBDEV
  • Development environment
  • The editor
  • The menu bar (ribbon) in details
  • Environment colors
  • The language of the environment
  • WLanguage
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, ...
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 the many features offered by WEBDEV.
Starting WEBDEV
  • Start WEBDEV 26.
  • If you haven't started WEBDEV 26 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. This allows you to choose the screen configuration and set up the Control Centers.
  • If you have already started WEBDEV 26, log in if necessary. The development environment opens up. The WEBDEV home page is displayed.
    Home page
    This home page allows you to:
    • check the news,
    • 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 development environment of WEBDEV. To do so, on the WEBDEV home page:
    • Click "Tutorial".
    • In "Part 1 - Lesson 1.1 - Discover WEBDEV", double click "Full WEBDEV Site (Answers)".
      Tutorial example
    • The corresponding project is opened 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

The editor

The development environment of WEBDEV includes a specific interface and several editors allowing 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, ...
  • 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 (displayed on the right) lists all the elements of the project 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. A simple click on the button corresponding to the element displays it in its own editor.

The menu bar (ribbon) in details

The menu bar of WEBDEV is presented in ribbon format. This ribbon is composed of panes in which the different options of the editors are grouped.
We will take a closer look at the most important elements of the ribbon and analyze how we will use them in this tutorial.
Ribbon of editors
The different ribbon elements
The ribbon includes 3 areas:
  • the button area, on the left (1).
  • the pane area, at the top (2).
  • the option area (3).
Let's take a closer look at these areas.
The button area (1)
Button area
The button area groups the quick access buttons. These buttons are used to perform the most usual operations, common to all editors: save, open, create, etc.
The product logo is used to display the "About" window as well as the custom and drop-down menus of the old editor interface.
The arrow at the top right of the button area allows you to find the toolbars and drop-down menus of the old editor interface.
The pane area (2)
Pane area
The various sections of the ribbon give access to the options of the editors for the current project. Several types of panes are available:
  • the current pane: The name of the pane appears in bold and is underlined by a blue line.
  • the popup panes, specific to the current element: The pane name is displayed in blue.
  • the available panes: The name of the pane appears in white (or black in the light theme).
The option area (3)
Option area
The options displayed in the ribbon differ according to the selected pane. Several 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 group. 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, ...
In this tutorial, to refer to a menu option, we will talk about panes and groups.. For example: "To display the help, go to the "Home" pane, "Online help" group and click "Help"."

Environment colors

By default, the environment uses a dark theme.
Several other themes are also available:
  • Light theme, grey ribbon. In this mode, the menu bar is not colored anymore: it is grayed.
  • 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.
  • To change the theme used by the environment:
    1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General options of WEBDEV".
    2. In the "Editor" tab, in the "Themes" area, select the theme to use.
    3. Validate. The theme will be taken into account during the next WEBDEV start.
  • The images in this tutorial have been created with the dark theme, which is the environment's default theme.

The language of the environment

WEBDEV's development environment is available in 3 different languages: English, Spanish and French.
  • To change the language of the environment:
    1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General options of WEBDEV".
    2. In the "General" tab, in the "Language" area, select the desired language.
    3. Validate. The selected language will be taken into account next time WEBDEV is started. You can thus adapt your environment to your preferred language.
  • To continue this tutorial, we will close the current project:
    1. On the "Home" pane, in the "General" group, expand "Close" and select "Close project".
    2. Save the modified elements if necessary.
    3. The WEBDEV home page is displayed.
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 presenting the programming concepts. These lessons present the different types of variables, the main WLanguage statements, the procedures, ...
Table of contentsNext Lesson
Minimum version required
  • Version 26
Comments
Click [Add] to post a comment