PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Creating a page in zoning mode
  • Implementing the anchoring
Lesson 7.4. Anchoring and zoning
This lesson will teach you the following concepts
  • What is an anchor?
  • Creating a page in Zoning mode.
  • Implementing the anchors.

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
WEBDEV allows you to manage two types of anchors:
  • The anchor to content: An anchor to content is used to define the behavior of control or area when modifying its content. Will the control keep the same size? Will it adapt to its content?
  • The browser anchor: A browser anchor is used to define the behavior of a control or area when resizing the browser. Will the control be enlarged? Will it move?
    The browser anchor is used to define the behavior of pages during the display on specific resolutions (tablets, phones, ...).
The anchors can be easily implemented via an option found in the popup menu of controls.
Let's play with anchors right now via an example. The browser anchors will be used in this lesson.
We are going to create a project containing a page used to implement the browser anchors and to present their benefits.
  • To create a project in WEBDEV:
    1. Start WEBDEV (if not already done). Close the current project if necessary.
    2. In the home window, click the "Create a project" button and select "Site". The wizard for project creation starts.
    3. Type the project name ("Anchors") and validate the different wizard screens with the default options.

      Note

      A corrected example can be accessed at any time to check the validity of operations performed.
      To open this corrected project, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "Anchors (Answer)".
Creating a page in zoning mode
  • To create a page used to implement the management of anchors:
    1. Create a new blank page.
      • In the window for creating a new element, click "Page" then "Page".
        Note: To display the window for creating a new element, click among the quick access buttons.
      • The wizard for page creation starts.
      • Click "Blank - Simple layout" and validate the wizard.
    2. The backup window of page is displayed.
    3. Type the title: "Anchor". The name ("PAGE_Anchor") is automatically proposed.
    4. Validate.
We are now going to divide our page into 3 areas:
  • A header (at the top on the entire width).
  • A menu on the left (on the entire height).
  • A content area in the middle.
Each area will have a specific behavior when resizing the page.
To create the areas, we will be using the zoning feature.
  • To create a first title area at the top of the page:
    1. On the "Page" pane, in the "Edit" area, expand "Zoning" and select "Split the layout".
    2. The mouse cursor turns into a pen.
    3. Click at the top of the page and draw an horizontal line. The area is created when releasing the mouse button.
  • To view this area, we are going to associate it with a background color:
    1. Display the description window of area: select "Area description" from the popup menu.
    2. In the "Style" tab, select the "Border/Bckgrd" element if necessary and select a background color (tooltip yellow for example).
    3. Validate the description window of area.
  • We are going to perform the same operations to split the bottom area of our page:
    1. On the "Page" tab, in the "Edit" area, expand "Zoning" and select "Split the layout".
    2. The mouse cursor turns into a pen.
    3. Click in the middle of bottom area and draw a vertical line.
  • To see these areas, associate the green color with the bottom area on the left and the orange color with the bottom area on the right.
  • We are now going to create Static controls in each area:
    1. Exit from the "Zoning" edit mode by clicking the "Page" tab at the top of the page (below the ribbon).
    2. On the "Creation" pane, in the "Usual controls" group, expand "Text" and select "Simple static".
    3. Click inside the yellow area. The Static control is automatically created.
    4. Modify the caption (Space key on the keyboard): the control caption is "Header".
    5. Repeat the operations 2 to 4 to create:
      • a Static control displaying "Menu" in the green area.
      • a Static control displaying "Content" in the orange area.
  • Save the page (Ctrl + S) and run the page test ( among the quick access buttons).
    1. The page is displayed in the browser.
    2. Resize the browser: the page remains centered but the areas are not resized.
      We are going to change this operating mode in order for the areas to adapt to the browser size. We will be using the anchors.
  • Close the browser.
Implementing the anchoring
First of all, we are going to implement the anchoring of areas then the anchoring of controls in the areas.
We want to get the following behavior when enlarging the browser:
  • The header area (yellow) must be enlarged in width.
  • The menu area (green) must be enlarged in height.
  • The content area (orange) must be enlarged in width and in height.
  • For the controls, we want them to remain centered in relation to their area.
We are now going to perform all necessary operations.
  • To implement the anchoring of areas:
    1. Display the page in zoning mode: click the "Zoning" tab at the top of the page.
    2. Select the yellow area.
    3. Display the popup menu and select "Anchor". The window for anchor management is displayed.
    4. The area must be enlarged in width: select "Width" ( ) and validate.
    5. Select the green area, display the popup menu and select "Anchor".
    6. The area must be enlarged in height: select "Height" ( ) and validate.
    7. Select the orange area and display the window for anchor management. The area must be enlarged in width and height: select "Width and height" ( ) and validate.
  • To implement the anchoring of controls:
    1. Display the page in Page mode: click the "Page" tab at the top of the page.
    2. Select "Header".
    3. Display the popup menu and select "Anchor".
    4. The control must be centered in width: select "Horizontally centered" ( ) and validate.
    5. Repeat the same operations for the "Menu" control and for the "Content" control:
      • The "Menu" caption must centered in height ( ).
      • The "Content" caption must be centered in width and in height ( ).
  • Save the page (Ctrl + S) and run the page test ( among 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.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment