PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Creating the page and the header bar
  • Creating a page
  • Creating the header bar
  • Creating the bar elements
  • Creating the title and logo
  • Implementing the logo
  • Implementing the title
  • Running the test of the page
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
This help page explains how to create a page containing a header bar in Responsive Web Design mode.
The main steps are:
Note: The same method can be used to create a footer bar.
Creating the page and the header bar

Creating a page

To create a new page in "Responsive Web Design" mode:
  1. Click among the quick access buttons.
    • The window for creating a new element is displayed: click "Page" then "Page".
    • The wizard for page creation starts.
  2. Select the type of page to create: "Blank page" of "Responsive Web Design" type.
  3. Versions 22 and later
    Select the creation mode of the page: "Desktop First" or "Mobile First". In this example, we consider that the page is in "Desktop First" mode.
    New in version 22
    Select the creation mode of the page: "Desktop First" or "Mobile First". In this example, we consider that the page is in "Desktop First" mode.
    Select the creation mode of the page: "Desktop First" or "Mobile First". In this example, we consider that the page is in "Desktop First" mode.
  4. Validate the wizard. The page is automatically created and displayed in the editor.
  5. Display the popup menu of the page (right mouse click) and select "Description".
  6. Enter the name of the page: "PAGE_usingcell".
  7. Validate the description window.
  8. Save the window (CTRL S).

Creating the header bar

The bar for presentating blades is displayed in the editor:
We are going to create a page header with cells.
The following operations must be performed:
  1. Click in the Desktop blade.
    Reminder: Always start to work in the Desktop blade.
    Click in the Desktop blade.
    Reminder: Always start to work in the reference blade:
    • Desktop blade in Desktop First mode.
    • Mobile blade in Mobile First mode.
  2. On the "Creation" pane, in the "Containers" group, select "Cell".
  3. Click in the page: the control appears in creation mode.
  4. Position the control in the top left corner (after the left gutter) then enlarge it in width on the entire page width (on the entire grid, before the right gutter). There is no need to modify its height in our example.
    Tip: Don't hesitate to define a background color for the cell in order to better see it.
    In this example, the cell has an orange background color and a rounded border.
  5. The result is as follows:
    • "Desktop" blade:
    • "Tablet" blade:
    • "Mobile" blade:
To simulate the change of width in the editor:
  1. Display the "Desktop" blade: click the "Desktop" header.
  2. Click the double arrow in the "Browser width" tooltip. Keep the left mouse button down and move to the left.
  3. Move the mouse to the left or to the right: the browser width is modified in the editor.
  4. The cell follows the browser width.
    Indeed, the anchor defined for the cell allows the cell to follow the width of the grid, therefore to adapt to the page width
We are going to study the anchoring options available for the cell:
  1. Select the Cell control.
  2. Display the popup menu (right mouse click) and select "Anchoring". The anchoring window is displayed:
    Display the popup menu (right mouse click) and select "Anchoring". The anchoring window is displayed:
  3. In this window, in the "Manage the size" area, for the "Width" parameter, the selected option is "Adapt to the grid". Therefore, the width of the selected element (the cell in our case) is adapted to the grid, which means to the width of our page. In this case, the cell follows the page width (as already seen).In this window, in the "Manage the width" area, for the "Width" parameter, the selected option is "Adapt to the grid". Therefore, the width of the selected element (the cell in our case) is adapted to the grid, which means to the width of our page. In this case, the cell follows the page width (as already seen).
  4. To run the test, modify the "Width" parameter and select "Use the edit size".
  5. Validate.
  6. Enable the GUI errors if necessary:
    • on the "Project" pane, in the "Project" group, click "Description": in the "Compilation" tab of the project description, check "Enable the GUI compilation".
    • display the "Compilation errors" pane and click .
  7. Save the page (CTRL S).
  8. We are going to check the difference of behavior:
    • Display the "Desktop" blade: nothing changes.
    • Display the "Tablet" or "Mobile" blade: the cell is not resized in width anymore.
    • The cell is wider than the limit resolution: Two GUI errors occur:
      The cell is wider than the limit resolution: 3 GUI errors occur:
Two solutions can be used to correct these GUI errors:
  • Solution 1: Go back to the previous parameter regarding the anchor in width: "Adapt to the grid".
  • Solution 2: Change the width of the cell in each blade where the error occurs. Therefore, the width of the cell will be fixed in each blade.
    For example, in the illustration below, the cell width was modified in the "Mobile" blade.
The solution 2 is straightforward but it is valid only if the dimension of "Desktop", "Tablet" and "Mobile" blades is fixed and known: the Web site operates on the same type of device/browser.
The solution 1 will operate regardless of the resolution of your browser. Therefore, you don't have to worry about your target.
In this page, we will be using the solution 1: we are going to modify the parameter regarding the anchor in width in order to use the "Adapt to the grid" option.
  1. Display the "Desktop" blade.
  2. Select the Cell control and display the popup menu (right mouse click). Select "Anchor".
  3. In the "Manage the size" area, for the "Width" parameter, select "Adapt to the grid".In the "Manage the width" area, for the "Width" parameter, select "Adapt to the grid".
  4. Validate
Creating the bar elements

Creating the title and logo

We are going to add a title and a logo into the cell.
To create the title:
  1. Display the "Desktop" blade.
  2. On the "Creation" pane, in the "Usual controls" group, click then click in the top left corner of the page in the cell: the control appears in creation mode.
To create the logo:
  1. Display the "Desktop" blade.
  2. On the "Creation" pane, in the "Usual controls" group, expand "Image" and select "Image".
  3. Click in the page at the top right in the cell: the control appears in creation mode.

Implementing the logo

First, we are going to handle the image:
  1. Select an image in the WEBDEV catalog:
    • Display the description window of the Image control ("Description" from the popup menu).
    • In the "General" tab, click the "Catalog" button.
    • In the image catalog, type "car" for example and select an image in the list.
    • Select a width set to 80 and validate.
    • Validate the next screen to save the image in the site directory.
  2. The description window of the image is upated. Validate.
If the image is not entirely displayed, resize the image in width and/or in height WHILE keeping the SHIFT key down.
Note: Keeping the SHIFT key down allows you to perform these operations while ignoring the grid: the move and the resize operation are performed pixel by pixel.
After these operations, you get:
No other operation will be performed on the "Desktop" blade. Let's now see what happens in the 2 other blades ("Tablet" and "Mobile"):
  1. Select the "Tablet" blade then the "Mobile" blade.
    • "Tablet" blade:
    • "Mobile" blade:
  2. The image is truncated in the two presentation modes. This display problem comes from an anchoring problem.
  3. Stay in the "Mobile" blade. The other blades will be fixed thereafter.
  4. Check the parameters regarding the anchor of Image control ("Anchor" from the popup menu of control).
    The image has a size in width adapted to the grid: the width of the image is proportional to the width of the grid.
  5. In order for the image to keep its width properties, the anchor in width must correspond to "Use the edit size".
    In this case, the image keeps the creation width in the WEBDEV editor. The width does not depend on the page width.
  6. Select "Use the edit size" and validate.
  7. The image has its initial proportions, it overflows (a GUI error occurs).
    The image must be moved to the left in order to be displayed inside the page.
  8. Select the "Tablet" blade. The same display problem occurs.
  9. Perform the same operations to correct the display.
No other operation will be performed on the "Desktop" blade. Let's now see what happens in the 2 other blades ("Tablet" and "Mobile"):
  1. Select the "Tablet" blade then the "Mobile" blade.
    • "Tablet" blade:
    • "Mobile" blade:
  2. The image overflows the area in the two presentation modes. This display problem comes from an anchoring problem.
  3. Stay in the "Mobile" blade. The other blades will be fixed thereafter.
  4. Check the parameters regarding the anchor of Image control ("Anchor" from the popup menu of control).
    The image keeps the creation width in the WEBDEV editor. The width does not depend on the page width.
  5. The image must be moved to the left in order to be displayed inside the page.
  6. Select the "Tablet" blade. The same display problem occurs.
  7. Perform the same operations to correct the display.

Implementing the title

Let's now work on the title:
  1. Display the "Desktop" blade.
  2. Type the title and choose a style for the text:
    • Display the popup menu of the Static control (right mouse click) and select "Description".
    • In the description window:
      • Give a name to the control: "RTA_TITLE".
      • Click the "Edit the rich text" button and type "Page with cells" for example.
      • Choose the "Times New Roman" font with a size set to 20 pixels.
  3. Press the ESC key to exit from the edit mode of the control.
  4. Display the "Tablet" then "Mobile" blades:
    • "Tablet" blade:
    • "Mobile" blade:
  5. The caption is reduced in width, the text is no longer visible in the "Mobile" blade. The caption is just visible in the "Tablet" blade.
To correct this display problem of the Static control, the anchoring parameters of the Static control must be modified.
  1. Select the "Mobile" blade if necessary.
  2. Select the Static control.
  3. In the popup menu of control (right mouse click), select "Anchor".
  4. Modify the anchor in width. Select "Use the edit size" and validate.
  5. The control stretches in order for the content to be entirely visible.
Running the test of the page
Let's now check the behavior of the header bar at run time.
  1. Run the page test ( among the quick access buttons).
  2. You get these 3 representations (reduce the width of your browser to simulate an execution on a tablet or on a mobile device).
    • Browser ("Desktop" blade):
    • Browser ("Tablet" blade):
    • Browser ("Mobile" blade):
The image moves and it is not properly aligned with the right border of the browser. Furthermore, it changes line below the title.
Once again, it is an anchoring problem.
The problem comes from the anchor in X. In fact, the image is anchored in X to the left while it should follow the right border of the browser, regardless of the browser width.
We are going to change the anchoring parameter and to anchor the image to the right in X:
  1. Select the "Desktop" blade.
  2. Select the Image control.
  3. In the popup menu of control (right mouse click), select "Anchor".
  4. Modify the anchor in X. Select "Right" and validate.
  5. Run the page test ( among the quick access buttons).
  6. The image is properly aligned even in a small resolution.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment