New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - My first WEBDEV website
  • Lesson 1 - Creating pages
  • An example to create pages
  • Opening the example project
  • First page: entering data in a form
  • How to create a page
  • Form input controls
  • First control: an edit control for the last name
  • Making the page more user-friendly
  • Editing the Address control
  • Aligning controls
  • Setting the style of the "Username" and "Password" controls
  • Testing the page in a browser
  • Conclusion

Tutorial - My first WEBDEV website

Lesson 1 - Creating pages
We will cover the following topics:
  • Creating a form page.
  • Creating controls.
  • Making the page more user-friendly.
Durée de la leçon 10 min
An example to create pages
To start developing with WEBDEV, we are going to create some pages. These examples will allow you to understand how Internet/Intranet sites work and will allow you to handle your first database.
Reminder: Pages display information and allow users to enter data. Users can directly interact with pages via controls, buttons, etc.
In this lesson, we will focus on how to create simple pages. Therefore, we will work with a ready-to-use project that contains no elements.
We will see how to create a project in Creating a project and its analysis.

Opening the example project

In WEBDEV, open the "My_First_Pages" project:
  1. Go to the WEBDEV home page (Ctrl + <).
  2. Click "Tutorial", then in "Tutorial - First website", double-click "My first pages - Exercise".
This project will be used in the different lessons of this tutorial.
First page: entering data in a form
For the first page, we will create a registration form. This form will contain different controls to enter personal information.

How to create a page

You can create a page directly from the quick access buttons:
  1. Click Creation button in the quick access buttons.
    Creation button (quick access buttons)
    The new element window appears. This window allows you to create all the elements of the project.
  2. Click "Page" then "Page". The page creation wizard starts.
  3. Select "Blank".
    Creating a page
  4. Confirm ("OK" button).
The page is automatically created in the editor. The page save window appears. This window displays:
  • The page title. This title will be displayed in the browser title bar.
  • The page name. This name corresponds to the logical page name. It will be used to programmatically handle the page.
  • The location. This location corresponds to the directory in which the page file will be saved.
In our example, this page is a form. Let's name the page accordingly.
  1. Enter the page title: "Form".
    Saving the page
  2. Validate ("OK" button).
Key information:
The page name (which will be used in the code) is automatically built from the page title. If you want, you can simply write a name different from the page title.

Form input controls

The first page has been created. Now, let's add the different form controls. These controls will allow the user to specify the data required for registration.
The form will contain the following controls:
  • Last name.
  • First name.
  • Address.
  • Email.
  • Username.
  • Password.
All these controls are Edit controls that will allow users to enter data.

First control: an edit control for the last name

Let's start by creating the Edit control where the user will enter their last name:
  1. On the "Creation" tab, in the "Usual controls" group, click Creating an Edit control.
    Creating an Edit control
    The new control follows the mouse cursor.
  2. Click inside the blank page to create the control. The control appears with a box and sizing handles to indicate that it is selected.
Key information:
To create a control, go to the WEBDEV "Creation" tab: this tab contains all the available controls.
By default, the caption of new Edit controls is "Edit control". Let's change this caption to "Last name":
  1. Click the control once: the text becomes editable.
    If you prefer to use the keyboard, press Space or Enter to edit the text.
    Caption of an Edit control in edit mode
  2. Type "Last name" and press Enter to validate.
    • The caption changes immediately.
    • The control name also changes: it appears in the tooltip when hovering over the control: EDT_Last_name.
      Tooltip of an Edit control
Let's analyze the name suggested by WEBDEV: it starts with the letters "EDT_". This prefix is automatically added because the project uses a code style. For more details, see Code style.

For our example, let's limit the length of the text to 30 characters (more than enough in most cases). To do this, we'll use the control description window.
  1. Double-click the control.
    The control description window appears:
    Edit control description

    In this window, we can see that:
    • The control is of type Text (1). It allows users to enter strings.
    • The control has an unlimited input size (2).
  2. In "Input size (characters)", enter "30".
  3. Click "OK" to confirm changes.
Key information:
For each element of the project, the description window lists all possible configuration options. These options are grouped by theme, in different tabs. You can open this window by selecting "Description" in the context menu, or by pressing Alt + Enter.

It's your turn:
Follow the same steps to create these Edit controls below "Last name":
First nameText30
AddressMultiline text

You may have noticed that these controls are not the same type. To change the type of Edit control, open the description window and select the desired type.

We have created the main controls of the form. Now, let's make some improvements.
Making the page more user-friendly
We have created a simple page just by dragging and dropping the controls.
Now, we need to improve the page in terms of appearance and usability.
This is what we want to achieve:
  • Multiline text input in the Address control.
  • Align the different Edit controls
  • Use red text in the Username and Password controls.

Editing the Address control

Let's start with the Address control. This control must display multiple lines. We are going to enlarge it.
To enlarge the "Address" control vertically:
  1. Click the "Address" control. Sizing handles appear around the control, indicating that it has been selected.
  2. Click and drag down the handle at the bottom of the input area.
Likewise, you can enlarge controls horizontally.

Aligning controls

After being dropped onto the page, controls may not be perfectly aligned. For a professional interface, we need to check and adjust the alignment of the various controls, if necessary.
To align the controls in the page:
  1. Select the "Last name" control, and then all the Edit controls in the page (hold the Ctrl key down and click the different controls).
  2. Go to the "Alignment" tab of the WEBDEV menu. This tab contains all alignment options available for the controls.
    Alignment options
  3. We will align the left and right sides of the controls. Click "Justify (Ins and Out)".
Key information:
Choose the first control carefully. The alignment options are based on:
  • The size of the first selected control: it will be used as a reference for the size of the other controls.
  • The position of the first selected control: all selected controls will be aligned in relation to the first selected control.

Setting the style of the "Username" and "Password" controls

To show the text of the "Username" and "Password" controls in red, we will change the default style of these controls.

"Style" refers to all the display options of the different parts of a control. All these options can be found in the "Style" tab of the control description window.
To edit the default style of the Username control:
  1. Select the Username control.
  2. Open the control description window (double-click the control, for example).
  3. In the "Style" tab, select the "Caption (CSS)" element.
  4. Expand the "Color" combo box and select the red color.
    Control style
  5. Validate the description window of the "Username" control.
Now, let's apply the same style to the "Password" control. No need to follow all these steps again: simply select the "Password" control and press F4.
F4 applies the last action to the selected controls. In our case, the new color is automatically applied to the "Password" control.
You get the following UI:
Testing the page in a browser
We have just created a first page. We improved the page in the WYSIWYG editor, which shows the page as it will look in the browser.
However, a real test is always required. Let's test this page:
  1. Click Test page in the quick access buttons.
  2. The page appears in the browser. You can enter data but it is not processed or saved.
  3. Close the browser.
The creation of this first page gave us an overview of the main functionalities in WEBDEV:
  • creation of pages.
  • creation of Edit controls,
  • options for aligning and organizing controls in the page,
  • etc.
In the next lesson, we will quickly create a database from this first page in order to save and check the information entered.
Completed project
If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the different pages created in the lessons of this part. This project illustrates the expected end result.
To open the completed project, go to the WEBDEV home page and click "Tutorial", then in "Tutorial - First website", double-click "My first pages - Answers".
Table of contentsNext Lesson
Minimum version required
  • Version 2024
Click [Add] to post a comment

Last update: 03/29/2024

Send a report | Local help