ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Dockable Panel control
  • Overview of the Dockable Panel control
  • Creating a Dockable Panel control
  • Creation by refactoring
  • Characteristics of the Dockable Panel control
  • Control description window
  • Control style
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview of the Dockable Panel control
The Dockable Panel control allows you to easily organize the software interface into zones that the end user can freely move. This makes it possible to create sophisticated interfaces with ease.
End users will be amazed by the customization possibilities available to them. And for your teams: no code required!
Creating a Dockable Panel control
To create a Dockable Panel control:
  1. On the "Creation" tab, in the "Containers" group, click "Dockable Panel".
  2. Click at the desired location to create the control. Arrows placed on the borders of the window allow you to dock the panel as soon as it is created.
To view the characteristics of the control, select "Description" in the context menu.

Creation by refactoring

To create a Dockable Panel control from a selection:
  1. Select the controls to display in a Dockable Panel control.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a dockable panel from the selection".
    Remark: You can also use the context menu of the selection ("Refactoring .. Create a dockable panel from the selection").
  3. The Dockable Panel control is automatically created.
Tip: How to transform sibling windows into Dockable Panel controls?
Your application uses windows displayed by OpenSister to show the details of the main window. To transform these windows into Dockable Panel controls:
  1. Select the content of the sibling window.
  2. Create an internal window with the content of the selection ("Refactoring .. Create an internal window from the selection" in the selection context menu).
  3. Save the internal window.
  4. Creating a Dockable Panel control.
  5. In the Dockable Panel control, create an Internal Window control that is linked to previously created the internal window.
Characteristics of the Dockable Panel control

Control description window

The main options of the Dockable Panel control available in the control description window are:
  • Icon ("General" tab): Makes it possible to associate an icon to the Dockable Panel control. This icon will appear in the tab panes, etc.
  • Allowed docking positions ("Details" tab): Makes it possible to define the allowed docking positions on the current window. The Dockable Panel control can be docked at the top of the window, at the bottom, on the left and / or on the right.
  • With title bar ("Details" tab): If this option is checked, the Dockable Panel control will have a title bar that contains the title defined in the "General" tab). It is possible to specify the height of the title bar and to determine if there will be buttons to close and collapse the Dockable Panel (With button and With button.
  • Allow docking to another panel (tab) ("Details" tab): If this option is checked, the current Dockable Panel control can be docked with another Dockable Panel control. In this case, it is possible to define the position of the pane that represents the Dockable Panel.
  • Resizable: Allows the end user to resize the Dockable Panel control.

Control style

The "Style" tab of the control description window allows you to customize:
  • the border of the separator,
  • the image of the panes,
  • the images of the arrows and the action buttons (i.e. the images of the dock arrows and the icons for the <Close> and <Collapse> buttons). This image is a 5 x 2 image set. The first row contains the 5 arrows for the "Normal" state and the second row contains the 5 arrows for the "Hover" state..
Related Examples:
The Dockable Panel control Unit examples (WINDEV): The Dockable Panel control
[ + ] This example shows how to manage the Dockable Panel control. You will be able to manage it in the editor and at runtime.
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment

Last update: 06/23/2023

Send a report | Local help