Class: cWebFloatingPanel

cObject
---cWebObject
------cWebBaseUIObject
---------cWebBaseDEOServer
------------cWebBaseContainer
---------------cWebFloatingPanel
------------------cWebContextMenu

The floating panel is a versatile control that can be used to position controls in virtually any position.

The floating panel is a container, which means that it contains controls (or panels) as its children. It floats on top of the web application and has several different ways to position itself. The pePosition property determines the mode in which the panel determines its position. Usage of this control is considered to be slightly advanced and the designer has no support for this control.

Float by Other Control

If pePosition is set to fpFloatByControl, then the floating panel will position itself relative to another control. It will float below or above the control (depending on the screen space) and can display an arrow pointing to the control.

Sample

The example below shows a button control and a floating panel configured to float by that button. The panel will be invisible by default and the OnClick of the button will show it. Because pbHideOnBlur is set to True, the panel will hide itself as soon as the focus moves away (from the floatby control and the panel itself).

Object oFloatByBtn is a cWebButton
    Set piColumnSpan to 2
    Set psCaption to "Show Panel"
    Set piColumnIndex to 3

    Procedure OnClick
        Send Show of oFloatByPanel
    End_Procedure
End_Object

Object oFloatByPanel is a cWebFloatingPanel
    Set pePosition to fpFloatByControl
    Set phoFloatByControl to oFloatByBtn
    Set psCSSClass to "Shadow WithArrow"
    Set pbHideOnBlur to True

    Object oLabel is a cWebLabel
        Set piColumnSpan to 0
        Set psCaption to "This panel is floating by the button. It is positioned dynamically based on the button its position on the screen."
    End_Object
End_Object

The image shows the end result. Note that the panel has the same width as the button, if no piWidth is set, it will take the width of the control it is floating by. The height is determined by its content, because piHeight is not set as well.

Position Fixed

The pePosition property should be set to fpFloatFixed to position a panel with fixed coordinates. The position can be determined by setting piTop, piLeft, piRight and piBottom. Setting them all will stretch the panel depending on the screen size, but usually a combination of piLeft or piRight with piBottom and piTop is made.

Sample

The code below will render a panel like in the image below. Note that in this example no piWidth is set, which makes it size to its content, that will only work when it contains cWebLabel or cWebHtmlBox controls.

Object oFixedPanel is a cWebFloatingPanel
    Set pePosition to fpFloatFixed
    Set psBackgroundColor to "#EEEEEE"
    Set psCSSClass to "Shadow"
    Set piRight to 30
    Set piTop to 120
        
    Object oLabel is a cWebLabel
        Set piColumnSpan to 0
        Set psCaption to "This panel is positioned with coordinates somewhere on the screen."
    End_Object
End_Object

Sample

The example below shows a button that toggles the visibility of this panel. The pbVisible property determines if the panel is visible and is the advised property to use for this, it has precedence over pbRender.

Object oFixedBtn is a cWebButton
    Set piColumnSpan to 3
    Set psCaption to "Toggle Fixed Panel"

    Procedure OnClick
        Boolean bVisible
        
        WebGet pbVisible of oFixedPanel to bVisible
        If bVisible Begin
            Send Hide of oFixedPanel
        End
        Else Begin
            Send Show of oFixedPanel
        End
    End_Procedure
End_Object

Float Left

The ftFloatLeftPushWebApp and ftFloatLeftSqueezeWebApp modes can be used to display the panel on the left side of the screen, spanning the full height of the webapp. It will either squeeze the webapp (so it will remain usable but has less space), or push the webapp off screen (in this case it will be disabled / shaded). This mode is intended for building menu systems.

Sample

The example below will show a floating panel on the left. The pePosition is set to fpFloatLeftPushWebApp but on mobile devices it will switch to fpFloatLeftPushWebApp because of the WebSetResponsive. Note that piContentWidth is used here which will fixate the width of the content during the animation when the panel is shown or hidden.

Object oFloatLeftPanel is a cWebFloatingPanel
    Set pePosition to fpFloatLeftSqueezeWebApp
    Set psCSSClass to "Dark"
    Set piWidth to 300
    Set piContentWidth to 300
    Set piColumnCount to 12
    WebSetResponsive pePosition rmMobile to fpFloatLeftPushWebApp

    Object oCloseBtn is a cWebButton
        Set piColumnSpan to 0
        Set piColumnIndex to 10
        Set psCaption to "X"
        Set psCSSClass to "Transparent"
    
        Procedure OnClick
            Send Hide
        End_Procedure
    End_Object

    Object oLabel is a cWebLabel
        Set piColumnSpan to 0
        Set psCaption to "This panel is positioned to span the full height of the screen on the left side of the webapp. Showing and hiding will show an animation."
        Set psTextColor to "#FFFFFF"
    End_Object
End_Object

CSS Class Names

Constant	Meaning
"WithArrow"	Displays a little arrow pointing towards the control floating by. Should be combined with fpFloatByControl.
"Shadow"	Displays a shadow arround the panel.
"NoWhitespace"	Removes the padding of the floating panel. When used with a single control it will look it is just the control floating there.
"Dark"	Will change the panel its color into a dark shade fitting the theme.

Drag and Drop Support

This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.

The supported actions for this control are:
- C_WebDropOnControl

This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.