|
|
|
|
|
- Lesson 1 - Creating pages
- An example to create pages
- Opening the example project
- First page: Data input form
- How to create a page
- Form input controls
- First control: Edit control for the user's 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 websiteLesson 1 - Creating pages We will cover the following topics: - Creating a form page.
- Creating controls.
- Making the page more user-friendly.
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. Opening the example project In WEBDEV, open the "My_First_Pages" project: - Go to the WEBDEV home page (Ctrl + <).
- Click "Tutorial", then in "Tutorial - My first website", click "Open exercise project".
Warning
This project will be used in the different lessons of this tutorial.
First page: Data input form For the first page, we will create a registration form. This form will contain several controls used to identify the person. How to create a page You can create a page directly from the quick access buttons: - Click in the quick access buttons. The new element window appears. This window allows you to create all the elements of the project.
- Click "Page" then "Page". The page creation wizard starts.
- Select "Blank".
- 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. - Enter the page title: "Form".
- Confirm ("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: Edit control for the user's last name Let's start by creating the Edit control where the user will enter their last name: - On the "Creation" tab, in the "Usual controls" group, click . The new control follows the mouse cursor.
- 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: You can create any control in WEBDEV from the "Creation" pane. By default, the caption of new Edit controls is "Edit control". Let's change this caption to "Last name": - Click the control (simple click): the caption becomes editable.
If you prefer to use the keyboard, press Space or Enter to edit the text. - Type "Last name" and press Enter to validate.
- The caption changes immediately.
- The name of the control is also modified. It appears in the tooltip when hovering over the control (EDT_Last_name).
Take a close look at the name suggested by WEBDEV. It starts with "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. - Double-click the control.
A control description window is displayed:
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).
- In "Input size (characters)", enter "30".
- 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. | Your turn: Follow the same steps to create these Edit controls below "Last name":
| | | Caption | Type | Size |
---|
First name | Text | 30 | Address | Multiline text | | Email | Text | 255 | Username | Text | 10 | Password | Password | 10 |
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: - Click the "Address" control. Sizing handles appear around the control, indicating that it has been selected.
- 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: - Select the "Last name" control, and then all the Edit controls in the page (hold the Ctrl key down and click the different controls).
- Go to the "Alignment" tab of the WEBDEV menu. This tab contains all alignment options available for the controls.
- 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, which will serve as a reference for the size of the other controls.
- The position of the first selected control, which will serve as a reference to align the other controls.
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: - Select the Username control.
- Open the control description window (double-click the control, for example).
- On the "Style" tab, select the "Caption (CSS)" element.
- Expand the "Color" combo box and select the red color.
- Validate the description window of the "Username" control.
Now, let's apply the same style to the "Password" control. You don't 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: - Click in the quick access buttons.
- The page appears in the browser. You can enter data but it is not processed or saved.
- 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 - My first website", click "Open completed project".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|