AboutProjects

VID Extension Kit - Menu Face

Introduction

The menu face is a window face that can be created and shown using the SHOW-MENU-FACE function and be situated near the face that opens the menu face. The menu-face is borderless and has no title.

The purpose is to display a floating face for popup menus. When its purpose is completed, the contents are removed and the face is hidden using HIDE-MENU-FACE.

At this time, the menu face can be used only for one menu per window at a time, ruling out sub-menus.

Functions to manage the menu face are located inside the CTX-MENU-FACE context.

Naming

menu-faceThe menu face itself. The menu face is a face object for as long as the menu face is shown on screen. When it closes, the menu-face becomes NONE.
opener-faceThe face that opens the menu face. The opener face is a face object for as long as the menu face is shown on screen. When it closes, the opener face becomes NONE.

Usage

SHOW-MENU-FACE

The menu face is created opened using SHOW-MENU-FACE. The menu face is then displayed using INFORM, so that it does not produce any extra task bar buttons, but deactivates the window in which the opener face exists.

When the window is shown, it goes through the same INIT-WINDOW process as regular windows, so default faces will be focused on open.

Also, if clicking on the background of another REBOL window in the same process, the popup is closed.

SHOW-MENU-FACE has the following arguments:

faceThe face that opens the menu face. This is used as a reference for where to open the menu face.
contentThis is a layout block that is used to describe the content of the menu face.

It has the following refinements:

/hingeThe face can be hinged to a particular corner of the opener face, specified as two blocks of two words. If you want to hinge the bottom right corner of the opener face to the top left corner of the menu face, use the blocks in sequence: [bottom right] [top left]. When not using this refinement, the menu face will appear with its top left corner at the lower left hand corner of the opening face.
/offsetThis is the offset as a pair! from the lower left hand corner of the opening face or from the hinge point, if the /hinge refinement is used.

HIDE-MENU-FACE

To close the menu, use the HIDE-MENU-FACE function.

HIDE-MENU-FACE does not use any arguments.

GET-MENU-FACE

This retrieves the menu face. This is useful when referencing the menu face from another face.

GET-OPENER-FACE

This retrieves the face that opened the menu face, i.e. the opener face. This is useful when referencing the opener face from a face inside the menu face or elsewhere.

Examples

Basic Example

In this example, clicking the button will display a data list just below the lower left hand corner of the button:

button on-click [show-menu-face face [data-list 200x200 on-click [hide-menu-face face]]]

Clicking an entry in the list will close the face again, using the hide-menu-face function.

Calendar

Any layout can be created and opened with SHOW-MENU-FACE. In this example, we are using a basic POP-FACE to open a month calendar, with the DATE-NAV-MONTH style, just underneath the face and deliver a date to the POP-FACE, when clicking a date in the calendar.

pop-face on-click [
    show-menu-face face [
        date-nav-month on-click [
            set-face get-opener-face face value
            hide-menu-face face
        ]
    ]
]

The example will display the calendar hinged to the left side of the opener face. When clicking an item, the opener face (the pop-face), will be set with the selected date value and the menu face closes.

However, since the popup button is in the right hand side of the face, it's more appropriate to open the menu face, hinged to the right hand side at the bottom of the opener face. For this we can use the /hinge refinement to specify an offset or two blocks of words to describe the desired hinge point of the menu face as well as for the opener face.

See the vid-extension-kit-extra-functions.txt for details on the HINGE function, which is used inside SHOW-MENU-FACE.

pop-face on-click [
    show-menu-face/hinge face [
        date-nav-month on-click [
            set-face get-opener-face face value
            hide-menu-face face
        ]
    ] [bottom right] [top right]
]