ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - Anchors, zoning and layouts
  • Different page layout methods
  • Overview
  • A practical example
  • Creating an example project
  • Creating a page
  • Creating areas
  • Page test
  • Implementing anchors
  • Page anchors
  • Area anchors
  • Control anchors
  • Test page
  • Implementing layouts
  • Creating a Mobile layout
  • Editing the mobile layout
  • Page test
  • To sum up

Tutorial - Anchors, zoning and layouts

Different page layout methods
We will cover the following topics:
  • What is an anchor?
  • Implementing anchors.
  • Implementing layouts.
Durée de la leçon 30 min
Overview
In this tutorial, we will take a quick look at the different possibilities offered by WEBDEV to easily create a page layout that adapts to the size of the browser.
First of all, you can simply use anchors. Anchors define how a control or an area reacts when the browser is resized. For example, they define if a control should be enlarged or repositioned.
This type of anchor defines how pages behave when displayed on specific resolutions (tablets, smartphones, etc.).
An additional step to make a website more mobile-friendly is to use layouts. When combined with anchors, layouts create adaptive websites.
In this tutorial, we will create a project and a page to anchor controls to the browser and understand the advantages of this method.
Later, we will edit this project to make it mobile-friendly using layouts.
A practical example

Creating an example project

To create a project in WEBDEV:
  1. Open WEBDEV.
  2. Go to the WEBDEV home page if necessary (Ctrl + <).
  3. On the home page, click "Create a project" and select "Site". The project creation wizard starts.
  4. Keep the default options of the different steps of the project creation wizard, until you reach "Description - General information".
  5. Enter the name of the project "Anchors" and click "Finish".

Creating a page

To create a page to implement anchors:
  1. Create a new blank page.
    • In the "New" window, click "Page" then "Page".
      Remark: To open the element creation window, click Create an element in the quick access buttons.
    • The page creation wizard starts.
    • Click "Blank" and finish the wizard.
  2. The page save window appears.
  3. Enter "Anchors" as title. The name is automatically filled in: "PAGE_Anchors".
  4. Validate.

Creating areas

We will divide the page into 3 areas:
  • A header (at the top, using all horizontal space available).
  • A menu on the left (using all vertical space available).
  • A content area in the center.
Each area will have a specific behavior when resizing the page.
To create the areas, we will use the zoning feature.
To create a first title area at the top of the page:
  1. On the "Page" tab, in the "Edit" group, expand "Zoning" and select "Divide horizontally".
  2. The mouse cursor turns into a pen.
  3. Click on the upper half of the page and draw a horizontal line. The area is created when the mouse button is released.
To view this area, we will apply a background color:
  1. Open the area description window: select "Area description" in the context menu.
  2. In the "Style" tab, select the "Border/Bckgrd" element, go to "Background" and select a background color (pastel yellow, for example).
  3. Confirm changes and close the area description window.
We will follow the same steps to split the bottom area of the page:
  1. On the "Page" tab, in the "Edit" group, expand "Zoning" and select "Divide vertically".
  2. The mouse cursor turns into a pen.
  3. Click the center of the bottom area and draw a vertical line.
To better view the areas, apply a green color to the area on the left and orange to the center area.
We will create Static controls in each area:
  1. On the "Creation" tab, in the "Usual controls" group, expand "Text" and select "Simple static".
  2. Click inside the yellow area. The Static control is automatically created.
  3. Change the text (press the Spacebar): enter "Header".
  4. Repeat the steps above to create:
    • a Static control displaying "Menu" in the green area.
    • a Static control displaying "Content" in the orange area.
  5. Save the page (Ctrl + S)

Page test

  1. Test the page (click Test page in the quick access buttons). The page is displayed in the browser.
  2. Resize the browser: the page remains centered but the areas are not resized.
    We will change this behavior so that the page and the areas adapt to the size of the browser. To do so, we will use anchors.
Close the browser.
Implementing anchors
We will set the anchors of the page, the anchors of the areas, and then the anchors of the controls.
When the browser is enlarged:
  • The page should be enlarged vertically and horizontally.
  • The header area (yellow) should be enlarged horizontally.
  • The menu area (green) should be enlarged vertically.
  • The content area (orange) should be enlarged horizontally and vertically.
  • The controls must remain centered in relation to their area.
Now, we will perform all the necessary operations.

Page anchors

To set the page's anchoring options:
  1. Click the area of the editor outside the page.
  2. Open the context menu and select "Anchor". The anchoring options window appears.
  3. The page should be enlarged horizontally and vertically. Select:
    • Position: Keep the default option ().
    • Horizontal anchors: Enlarge or reduce like the browser (or its container).
    • Vertical anchors: Enlarge or reduce like the browser (or its container).
  4. Validate.

Area anchors

To anchor the areas:
  1. Select the yellow area.
  2. Open the context menu and select "Anchor". The anchoring options window appears.
  3. The area must be enlarged horizontally. Select:
    • Position: The control keeps its position.
    • Horizontal anchors: Enlarge or reduce like the browser (or its container).
    • Vertical anchors: Fixed height.
  4. Validate.
  5. Select the green area, open the context menu and select "Anchor".
  6. The area must be enlarged vertically. Select:
    • Position: The control keeps its position ().
    • Horizontal anchors: Fixed width.
    • Vertical anchors: Enlarge or reduce like the browser (or its container).
  7. Validate.
  8. Select the orange area and open the anchoring options window. The area must be enlarged horizontally and vertically. Select:
    • Position: The control keeps its position ().
    • Horizontal anchors: Enlarge or reduce like the browser (or its container).
    • Vertical anchors: Enlarge or reduce like the browser (or its container).
  9. Validate.

Control anchors

To set anchors of the controls:
  1. Select "Header".
  2. Open the context menu and select "Anchor".
  3. The control must be centered horizontally:
    • Position: Horizontally centered.
    • Horizontal anchors: Fixed width.
    • Vertical anchors: Fixed height.
  4. Validate.
  5. Repeat the same operations for the "Menu" and "Content" controls:
    • "Menu" must be vertically centered (select "Vertically centered").
    • "Content" must be centered (select "Centered").
Save the page (Ctrl + S).

Test page

Test the page (click Test page in the quick access buttons).
  1. The page is displayed in the browser.
  2. Resize the browser: the areas adapt to the available space in the browser.
Close the browser.
Implementing layouts
Areas and anchors allow you to handle "small" changes in size. As explained previously, websites must be designed to be mobile-friendly.
To correctly display websites on mobile devices, you need more than simple anchors. In some cases, some controls or entire areas must disappear to obtain a clean interface on these devices.
This can be achieved using layouts.
Layouts allow you to define multiple views of a single page in a project. This allows you to define:
  • a specific view for mobile devices,
  • a specific view for printing,
  • a specific view to use the page in a WINDEV application.
  • a specific view to use the page in a WINDEV Mobile application.
  • etc.
We will edit the page to obtain a specific layout for mobile devices. This layout will hide the green area. We will then test the website directly on a mobile device.
This lesson presents a quick overview of layouts in WEBDEV websites. The implementation and management of layouts in WEBDEV websites are explained in detail in the different lessons of WEBDEV layouts.

Creating a Mobile layout

To create a mobile layout:
  1. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a layout".
  2. In the window that appears, a layout adapted to phones and tablets is shown.
    Confirm.
  3. Two layouts have been created in our example. These layouts appear as thumbnails, to the right of the "PAGE_Anchors" page.

Editing the mobile layout

Open the "Mobile" layout:
  1. Double-click the Mobile layout thumbnail: the page corresponding to this layout is displayed in the center of the editor.
  2. The option (upper-right corner of the main window, in the title bar) indicates if the "Automatic dissociation" mode is enabled. If this mode is enabled, the changes made in one of the pages in the layout will not be applied to the others. Keep the "Automatic disassociation" mode enabled.
We will change the visibility of the controls in the Mobile layout. In mobile mode, the menu area on the left and its text can be removed to use a drop-down menu instead, for example (we will see how to implement this menu in a future lesson). For an easier experience, we will make these changes in the "Desktop" layout.
  1. Double-click the "Desktop" thumbnail.
  2. Select the green area.
  3. In the context menu of the control, select "Layouts", go to "Visibility by layout" and deselect "Mobile (Smartphone)".
  4. The thumbnail of the mobile layout is automatically updated.
    If you open the mobile layout, the green area and its text are no longer shown.
Save the page (Ctrl + S).

Page test

Test the page (click Test page in the quick access buttons).
  1. The page is displayed in the browser.
  2. Resize the browser: the mobile layout is displayed.
Close the browser.
Now, we can test the website on a phone or a tablet:
  1. Expand the option in the quick access area and select "Test from a phone (access via a QR Code)".
  2. A window appears and shows a QR code that you can scan with your mobile device.
  3. Once you scan the QR code, the website is displayed on the device.
  4. The "Mobile" layout is automatically displayed.
To sum up
In this lesson, we created an example to illustrate how anchors work, both on controls and areas.
We also combined the use of anchors with layouts. To learn more advanced applications of layouts, we recommend you follow the WEBDEV layouts tutorial.
Completed project:
If you want to check the end result of the steps described here, you can open a completed version of the project. In this project, all the actions described in this lesson have already been completed. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - Anchors, zoning and layouts", double-click "Anchors - Answers".
Table of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/14/2023

Send a report | Local help