Combobox Plugin combobox.xml Version 1.22

Select Version:

• 1.22
• 1.21
• 1.20.11
• 1.20.10
• 1.20.9
• 1.20.8
• 1.20.7
• 1.20.6
• 1.20.5
• 1.20.4
• 1.20.2
• 1.20.1
• 1.20
• 1.19-pr16
• 1.19-pr15
• 1.19-pr14
• 1.19-pr13
• 1.16
• 1.0.8.15
• 1.0.8.14
• 1.0.7

• A combobox / dropdown-list / selectbox plugin.
• This plugin converts <combobox> elements in the current xml into several internal <layer> container, scrollarea and textfield elements.
• Additionally it's also possible to add and remove combobox elements also dynamically.
• The xml-only implementation allows many ways of customizing (design and functionality).

Topics

• Syntax
• Size / Alignment / Position
• Plugin Attributes / Events
• Plugin Actions
• Combobox Custom Designs

Syntax

First include the combobox.xml file once anywhere in the xml:

<include url="%VIEWER%/plugins/combobox.xml" />

Then either define the combobox element using a <combobox> element:

<combobox name="cb1" design="default" ...any layer settings...>
    <item name="item1" caption="Item 1" onclick="..." oninit="..." />
    <item name="item2" caption="Item 2" onclick="..." />
    <item name="item3" caption="Item 3" onclick="..." />
</combobox>

That <combobox> element will get converted to a <layer> element on startup. For dynamic access to the combobox use layer[name] as addressing.

Or directly by using a <layer> element and the style "combobox":

<layer style="combobox" name="cb1" design="default" ...any layer settings...>
    <item name="item1" caption="Item 1" onclick="..." oninit="..." />
    <item name="item2" caption="Item 2" onclick="..." />
    <item name="item3" caption="Item 3" onclick="..." />
</layer>

By directly using a layer element, it is easier to define the combobox within other layers.

Or create the combobox element by dynamic action code:

<action name="test">       
    addComboboxLayer(cb1, default);
    set(layer[cb1].align, 'lefttop');
    set(layer[cb1].x, 20);
    set(layer[cb1].y, 20);
    layer[cb1].addItem('Item 1', trace(Item 1 clicked) );
    layer[cb1].addItem('Item 2', trace(Item 2 clicked) );
    layer[cb1].addItem('Item 3', trace(Item 3 clicked) );
</action>

Size / Alignment / Position

• The combobox can be placed on the screen or within other layers like a normal layer element - e.g. by using the align, edge, x, y and parent settings.
• If no width is set, the width will be determined automatically by the design settings and the largest item caption.
• Setting the height is not possible, the height will be always set automatically.

Plugin Attributes / Events

Plugin Actions

Combobox Custom Designs

• Custom designs can be defined by <combobox_design> elements.
• They can be defined anywhere in the xml and need an unique name.
• For using that design, its name need to be used as design parameter.
• The <combobox_design> element itself has these attributes:
  • margin - layout / item margins (2 by default)
  • open_close_speed - the opening / closing speed in seconds (0.25 by default)
  and needs these three <style> elements within it:
  1. combobox_container_style
     • The style for the basic layer of the combobox (a container layer).
     • It can contain any container layer settings.
  2. combobox_marker_style
     • The style for drop-down / current-item marker (a textfield).
     • It can contain any textfield settings.
  3. combobox_item_style
     • The style for the item elements (textfields).
     • It can contain any textfield settings.

Here as example the <combobox_design> element of the default design:

<combobox_design name="default" margin="2" open_close_speed="0.25">
    <style name="combobox_container_style"
           bgalpha="1.0"
           bgcolor="0xFFFFFF"
           bgborder="1 0xFFFFFF 0.5"
           bgroundedge="1"
           bgshadow="0 1 3 0x000000 1.0"
           />
    <style name="combobox_marker_style"
           css="color:#FFFFFF;"
           bg="false"
           txtshadow="0 0 2 0x000000 1"
           />
    <style name="combobox_item_style"
           css="color:#222222;"
           padding="4 4"
           bg="false"
           bgcolor="0xC7E4FC"
           bgalpha="1.0"
           bgroundedge="1"
           txtshadow="0 0 1 0xFFFFFF 1.0"
           />
</combobox_design>