ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - WEBDEV layouts
  • Lesson 2 - Layouts: Managing menus
  • Overview
  • Practical example
  • Creating the layout
  • Configuring the Navigation Bar control
  • Page test
  • To sum up

Tutorial - WEBDEV layouts

Lesson 2 - Layouts: Managing menus
We will cover the following topics:
  • Navigation Bar control with "Hamburger" menu.
  • Dissociating the menu and the menu options.
Durée de la leçon 30 min
Overview
WEBDEV provides you with a specific control for layouts: the Navigation Bar control.
The Navigation Bar control is used to create a menu area that can easily adapt to the browser size. This area can contain all types of controls.
In this lesson, we will integrate a layout into a page containing a Navigation Bar control. We will take a look at the configuration required to make this navigation bar adapt to the size of the browser.
Opening the example project
  1. Go to the WEBDEV home page (Ctrl + <).
  2. On the home page, click "Tutorial", then in "Tutorial - WEBDEV layouts", double-click "Layouts - Exercise".
  3. Open the PAGE_NavigationBar page.
Practical example
The Navigation Bar control is the control at the top PAGE_NavigationBar, which contains the menu.
Navigation Bar control
This Navigation Bar control is divided into 3 sections:
  • On the left, a burger menu button.
  • In the middle, the site menu.
  • On the right, a search box with a search icon.

Creating the layout

We will create a mobile layout a mobile layout in PAGE_NavigationBar:
  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. Validate the window.
  3. Two layouts have been created in our example. These layouts are displayed as thumbnails, to the right of the "PAGE_NavigationBar" page. The mobile layout is automatically selected and displayed in the editor.
    Navigation Bar control
The Navigation Bar control has advanced features. The automatic disassociation is not available for this control. There are specific options that need to be set to complete the dissociation.

Configuring the Navigation Bar control

First, let's configure the Navigation Bar control to be displayed on mobile devices.
  1. If necessary, select the Navigation Bar control in the mobile layout.
  2. Open the Navigation Bar control description window (Alt + Enter).
  3. In the "UI" tab, for "Display mode", click Dissociate to dissociate the display mode for each layout.
    Navigation Bar control
  4. In the window that appears, check "Dissociate value per layout", then in "Mobile", select "Compact".
    Dissociation by layout
    Confirm these changes.
  5. Validate the control description window.
  6. The Navigation Bar control appears in compact mode in the mobile layout.
Now, let's see how the Navigation Bar control looks like in the different layouts in the editor.
  • Open the "Desktop" layout: the entire navigation bar is displayed.
  • Open the "Mobile" layout: the navigation bar is displayed in "Compact" mode.
Let's take a closer look at the Mobile layout to understand this compact mode.
In the Mobile layout, the center area of the Navigation Bar control is hidden. The "hamburger" menu expands a popup with the controls usually displayed the center area. To customize this popup, simply click the center pane. Then you can modify this popup as you wish.
Let's analyze the content of the center area:
  1. Click the Navigation Bar control to select it: the center area is hatched.
    Navigation Bar control
  2. Click inside the hatched centered area. The popup is displayed in edit mode.
    Center area of the Navigation Bar control
    The yellow outline indicates that the control is in edit mode.
  3. You can see the site menu. The menu is laid out horizontally. To display it vertically, it is necessary to dissociate the orientation of the menu:
    • Open the menu description window (Alt + Enter).
    • In the "General" tab, click Dissociate to dissociate the orientation of the menu.
      Center area of the Navigation Bar control
    • In the window that appears:
      • Check "Dissociate value per layout".
      • For the mobile layout, select "Vertical for mobile".
      • Validate.
  4. Confirm changes and close the description window.
  5. To exit the popup edit mode, press "Esc".
One last change is to resize the different areas of the navigation bar so that all the elements are displayed.
  1. Select the navigation bar.
    Use the red squares to resize the areas of the Navigation Bar control.
  2. Resize the menu area and enlarge the search area. You will get the following result:
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.
  3. 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 tutorial, we discovered certain aspects of layouts, and saw how to use them. Layouts are a relatively simple solution to adapt WEBDEV websites to mobile devices.
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 - WEBDEV layouts", double-click "Layouts - Answers".
Previous LessonTable of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/13/2023

Send a report | Local help