H-SMILE core. Popup and context menus (HTMLayout and Sciter engines)

For references in this article use std-menus.css file.

Popup menus

Popup menus are designed as set of behaviors menu-bar, menu and popup-menu. As always in the engine behaviors are applied to the DOM elements by CSS attribute behavior.

Menus in the engine are ordinary DOM elements thus can be styled in full by using CSS declarations. The behaviors handle mouse and keyboard events allowing to do navigation through menu items. Content of menus is not limited by only menu items – you can use any reasonable markup inside including input elements. By using input elements it is possible to implement lightweight property sheets by using engine. See Context Menus section.

As I said there are three behaviors implementing various types of menus:

  • behavior:menu-bar – implements menu bar – top level menu container seen in typical desktop application. Layout of the menu bar is defined by flow style attribute in the document above. This behavior handles mouse, keyboard and focus events.

  • behavior:menu – implements popup menu window – container of menu items. It handles mouse and keyboard UI events. Menu items by themselves have no special behavior assigned to them. Such "behaviorless" menu items allow you to assign any behavior of your choice to them. As an example std-menus.css has definitions for menu items with behavior:checkbox and behavior:radio applied. See screen shot on the right.

  • behavior:popup-menu – is an auxiliary behavior used together with behavior:button for implementation of < button type="menu" > – button with popup menu – selector. Use it when you need simple selectors with [hierarchical] commands or controls. See button[type="menu"] declaration in std-menus.css.

Menu items

Any child DOM element of some parent controlled by behavior:menu/menu-bar can play a role of menu item if:

  • it is a LI element or;

  • it has role="menu-item" defined.

Second option for example allows to position elements in the rows/columns of a table. See /html-samples/menus/ folder in HTMLayout SDK distribution.

Menu items having child < menu > element are treated as popup menu items. Engine will mark such items by popup attribute so you can use selector li[popup] to style such items accordingly.

Menu element can have no menu items at all – in this case it will serve role of popup panel. See screen shot on the left side.

If menu item has focusable elements inside like input elements then behavior:menu will set focus on first such element when menu item will be activated by keyboard.

Context menus

Context menus are also known as right-click-menus. Engine allows to assign single contextual popup menu to multiple DOM elements by using context-menu style attribute with the following notation:

context-menu:selector( css-selector );

where css-selector is any DOM element ( < menu > usually ) matching that selector.

Engine activates such menus while handling context menu request from system.

Menu events

There are three types of events directly related to menus:

  • MENU_ITEM_CLICK – click on menu item by mouse or keyboard. BEHAVIOR_EVENT_PARAMS::heTarget is a refernce to the DOM element – menu item. And BEHAVIOR_EVENT_PARAMS::he is a reference to anchor (menu owner) element invoked this menu.

  • POPUP_REQUEST – generated when menu is about to be visible. You can modify content of the menu at this point. BEHAVIOR_EVENT_PARAMS::heTarget is a reference to the menu (popup) DOM element. And BEHAVIOR_EVENT_PARAMS::he is a reference to anchor (menu owner) element invoked this menu.

  • POPUP_DISMISSAL – generated when menu was closed. Parameters as above.

Menus are available in version of the engines.