|
|
|
|
|
|
|
|
|
|
- Overview
- Creating a layout in WEBDEV
- Create a new layout for a WEBDEV page (Mobile-friendly website)
- Creating a new layout to print a page
- Create a new layout to integrate a WEBDEV page into a WINDEV window
- Creating a new layout to integrate a WEBDEV page into a WINDEV Mobile window
- Using layouts in the editor
- View two layouts simultaneously in the editor
- Managing controls in the layouts
- Context menu of controls specific to layouts
- Context menu of layouts
- Specific controls (Mobile-friendly websites)
- Comparing pages with layouts
- Managing layouts at runtime
- Default operating mode
- Special case: Layout for printing
- Programming
A layout allows you to define several views of a page without duplicating it. By using layouts in a WEBDEV project, you can use many features: - create "mobile friendly" sites. In this case, you can define two layouts:
- a specific view for Desktop mode,
- a specific view for Mobile mode, etc.
- print a "clean" version of the page. In this case, you can create a specific layout for printing the page content.
- Integrate a page into a WINDEV or WINDEV Mobile application. In this case, you can create a specific layout to integrate the page into a window.
Important: Layouts in a WEBDEV project are another way of making a site mobile-friendly. Unlike Responsive Web Design (RWD) mode, layouts have no constraints on the order of controls.
Thus, layouts allow you to: - make designs that cannot be easily made in RWD.
- effortlessly create elements in one layout and hide them in another layout.
For more details on the advantages of layouts for mobile-friendly websites, see Mobile-friendly website: available methods. This help page presents: Creating a layout in WEBDEV Create a new layout for a WEBDEV page (Mobile-friendly website) To create a new layout for a page: - Open the relevant page in the editor.
- In the "Page" pane, in the "Layouts" group, pull down "Layouts" and select the "Add layout" option.
- The layout creation window appears:
- Specify the type of screen for which the layout must be created. You can also specify the minimum width of the screen.
- Validate.
- On the right, the editor displays the different layouts available for the page. Double-clicking the badge of the desired layout allows you to open it in the editor and modify it.
Caution: Fixtures not available: - on pages in Responsive Web Design mode.
- on internal pages.
- on static pages.
Layouts are available on the page templates. Note: There are several WEBDEV tutorials for discovering and manipulating layouts: Creating a new layout to print a page To create a new layout for printing the content of a page: - Open the relevant page in the editor.
- Under the "Page" pane, in the "Layouts" group, pull down "Layouts" and select the "Add layout for printing" option.
- A "Print" layout is automatically created. On the right, the editor displays the different layouts available for the page. You can double-click the "Print" layout to open it and modify it in the editor.
This makes it possible to keep only the controls needed for printing in this layout.
Remarks - Layouts are not available:
- on pages in Responsive Web Design mode.
- on internal pages.
- on static pages.
- Layouts are available on the page templates.
- The print layout will be automatically used when the user prints the corresponding page. For example, unnecessary controls (buttons, links, etc.) can be hidden in the print layout.
Create a new layout to integrate a WEBDEV page into a WINDEV window To create a new layout to integrate a WEBDEV page into a WINDEV window: - Open the relevant page in the editor.
- On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add layout to integrate page into WINDEV".
- A "For WINDEV" layout is automatically created. On the right, the editor displays the different layouts available for the page. To edit the "For WINDEV" layout, double-click its thumbnail. This layout makes it possible to keep only the controls needed to display the page in the WINDEV application.
Remarks - Layouts are not available:
- on pages in Responsive Web Design mode.
- on internal pages.
- on static pages.
- Layouts are available on the page templates.
- The layout for WINDEV applications will be automatically used when the page is integrated into a "WEBDEV Page" control in the WINDEV project.
Creating a new layout to integrate a WEBDEV page into a WINDEV Mobile window To create a new layout to integrate a WEBDEV page into a WINDEV Mobile window: - Open the relevant page in the editor.
- On the "Page" tab, in the "Layouts" group, expand "Layouts" and select:
- "Add layout to integrate page into WINDEV Mobile (Phone)".
- "Add layout to integrate page into WINDEV Mobile (Tablet)".
- A "WINDEV Mobile (Tablet)" or "WINDEV Mobile (Phone)" layout is automatically created. On the right, the editor displays the different layouts available for the page. You can double-click the thumbnail of the WINDEV Mobile layout to open and edit it. This layout makes it possible to keep only the controls needed to display the page in the WINDEV Mobile application.
Remarks - Layouts are not available:
- on pages in Responsive Web Design mode.
- on internal pages.
- on static pages.
- Layouts are available on the page templates.
- The layout for WINDEV applications will be automatically used when the page is integrated into a "WEBDEV Page" control in the WINDEV project.
Using layouts in the editor View two layouts simultaneously in the editor By default, only the layout currently being edited can be viewed in the page editor. To view (and edit) two layouts simultaneously: - Right-click the thumbnail of the layout you want to open.
- Select "Edit (split view)".
- Both layouts are displayed in the editor.
Managing controls in the layouts Layouts are dissociated by default (  ): - A control created in one layout is created in all layouts, with the same characteristics (size, position, etc.).
- A control moved or resized in a layout is moved or resized only in that layout.
- The automatic dissociation is enabled by default for all the controls. With this mode, when a control is moved or resized in one of the pages in the layout, the changes will not be applied in the other pages.
So that a field modification (position or size) is carried over to all layouts, it is possible to remove the automatic dissociation (  ): the next modification of size or position will be carried out on all layouts.. A red triangle may appear when a control is selected. It indicates that the control has been dissociated, and that any changes made to it will be applied only in the current layout. Conseil: Toasts appear regularly to inform you of the influence of field modifications in other layouts, depending on whether or not automatic disassociation and/or field disassociation options have been activated.. Context menu of controls specific to layouts The "Layouts" context menu also allows you to dissociate specific characteristics of controls. . These options are as follows: - Dissociate position: If this option is selected, the field position will only be modified on the current layout.. If this option is not selected, the control will be moved in all the layouts.
- Dissociate size: If this option is selected, the field size will be modified only on the current layout.. If this option is not selected, the control will be resized in all the layouts.
- Dissociate anchor: If this option is selected, the field anchor will be modified only on the current layout.. If this option is not selected, the anchors of the control will be changed in all the layouts.
- Disassociate style: If this option is selected, field style changes will be made only on the current layout.. If this option is not selected, the changes made to the style of the control will be applied in all the layouts.
- Dissociate rich content: If this option is selected, the field's rich content (label, for example) will be modified only on the current layout.. If this option is not selected, the rich content of the control will be modified in all the layouts.
Note: If the automatic disassociation mode is not activated, when a disassociation is deactivated via the context menu, the disassociated characteristic for the current layout is automatically applied to all layouts.. For example, if the "Dissociate position" option was enabled and then disabled for a given control, the next change made to the position of the control will be applied in all layouts. The "Layouts" context menu includes other options: - Edit disassociated properties: displays a list of disassociated properties for the selected field, with corresponding values for the current layout.. You can change some values for the current layout.
- Visible by layout: Makes the selected field visible or invisible in certain layouts..
- Make invisible in this layout: Makes the selected field invisible in the current layout..
- Make visible in all layouts: Makes the current field visible in all layouts.
- Show invisible fields: Displays fields currently invisible in the current layout. These controls appear grayed out. They disappear next time the layout is displayed.
Note: This context menu is available for a selection of fields.. Limitation: For Chart control fields, it is not possible to dissociate title and Legend properties between several layouts.. Context menu of layouts You can manage layouts via the context menu of the thumbnails. It is possible to: - View and edit the layout description. For more details, see Layout settings.
- View the list of dissociated controls.
- Open a layout to edit it.
- Edit layout in dual-view mode: both layouts can be displayed and modified in parallel.
- Create a new layout from the current layout.
- Deactivate this layout. A red "X" appears in the layout icon and the layout cannot be used at runtime. However, it will still be available in the editor.
Note: This option can be useful when a page inherits one or more page templates with different layouts.. This allows you to keep only the desired layouts. - Delete the selected layout.
- Display proportional thumbnails.
- Automatic refresh: Refreshes the layout as soon as a change is made in the window..
- Refresh this layout: Immediately refreshes the layout.
- Refresh all: Allows you to immediately refresh all layouts.
Specific controls (Mobile-friendly websites) Some advanced controls (Looper, Table control, Horizontal Menu, etc.) require more specific actions than simply dissociating the size or anchors. In this case, you can click  to manage the options that can be dissociated. This allows you to set a specific value for each layout, if necessary. For the Table control, you can group columns vertically to adapt the table to mobile devices. For the Looper control, you can set a specific number of columns by layout.
To managemenus, WEBDEV provides you with a specific field for layouts: the Navigation Bar control field.. 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. The characteristics of this control can also be defined from the description window. Note: There are several WEBDEV tutorials for discovering and manipulating layouts: Comparing pages with layouts WINDEV Mobile allows you to compare two projects, two project elements, etc. For more details, see Project comparator. When two pages containing layouts are compared, the differences on each layout are clearly indicated.
Managing layouts at runtime Default operating mode The initial layout is automatically selected according to: - the size of the browser,
- the size of the page (in the editor).
The layout is automatically modified according to the size of the browser. The layout settings can be defined according to the size of the browser ("Description" in the context menu of the layout title bar).
These parameters are taken into account to choose the layout at runtime. Note: If the selected layout is not suitable, it is possible to force the use of a layout by programming.. Special case: Layout for printing If a "Print" layout has been created on a page, this layout will automatically be used when the user selects the "Print" option in the context menu of the browser (or presses Ctrl + P). In this case, only the controls shown in the layout will be printed. Programming You can: - force the layout to be used (PageChangeLayout). Simply indicate the number of the layout to use as parameter. This number is specified in the layout title bar.
- get the current layout (PageCurrentLayout).
Related Examples:
|
Training (WEBDEV): WW_Layouts
[ + ] This example contains a website that can be displayed on mobile devices. The website uses WEBDEV layouts to adapt its UI.
|
|
Complete examples (WEBDEV): WW_Rewali
[ + ] This example is a site for travel booking. It proposes travels at very attractive prices. You have the ability to choose the travel duration, the start dates, then validate the purchase until the payment via Paypal. It is using the "scrolling banner" control and the planes.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|