GUI examples

Example 1 - Hello World dialog

The dialog manager creates a <mainwindow> with only one <label> widget which prints "HELLO WORLD". 
<mmsdialog>
    <description author="disko-team" email="info@berlinux-solutions.de" desc="example"/>
    <mainwindow w="600" h="450" alignment="center">
        <label text="HELLO WORLD"/>
    </mainwindow>
</mmsdialog>

Example 2 - Simple Listbox

The dialog manager creates a <mainwindow> with one <menu> widget named listbox. The item template of this menu consists of only one <label> widget as top-level widget. 
<mmsdialog>
    <mainwindow w="320" h="320">
        <menu name="listbox" item_height="32px">
            <label margin="1" font.size="22px"/>
        </menu>
    </mainwindow>
</mmsdialog>

Example 3 - Listbox with image

The dialog manager creates a <mainwindow> with one <menu> widget with the name listbox. The item template of this menu consists of a <button> widget as top-level widget. This <button> has a <hbox> as a child. And the <hbox> includes an <image> and a <label>.

In your plugin you can access the <image> of each item through the name listbox_image and the <label> through the name listbox_label. 
<mmsdialog>
    <mainwindow w="320" h="320">
        <menu name="listbox" item_height="32px">
            <button margin="1">
                <hbox>
                    <image name="listbox_image" size="30px"/>
                    <label name="listbox_label" font.size="22px"/>
                </hbox>
            </button>
        </menu>
    </mainwindow>
</mmsdialog>

Example 4 - Image Menu

The dialog manager creates a <mainwindow> with one <menu> widget with the name images. The item template of this menu consists of a <button> widget as top-level widget. This <button> has a <vbox> as a child. And so on...
This menu has two columns and two visible rows (50% each item). Each item displays an image and a text below it.
In your plugin you can access the <image> of each item through the name item_image and the <textbox> through the name <item_textbox. 
<mmsdialog>
    <mainwindow w="320" h="320">
        <menu name="images" item_height="50%" item_height="50%">
            <button margin="10"/>
                <vbox>
                    <hbox>
                        <hbox size="20%"/>
                        <image name="item_image"/>
                        <hbox size="20%"/>
                    </hbox>
                    <textbox name="item_textbox" size="44px" font.size="22px"/>
                </vbox>
            </button>
        </menu>
    </mainwindow>
</mmsdialog>

Example 5 - Set defaults for <mainwindow>

This example demonstrates how you can set/change default values for <mainwindow> with the usage of <mmstheme>. The window size is set to 90% of the whole screen width and height. The background is light red. The window is a little bit transparent (opacity="200"). If the window will be shown or hidden the fade effect is used. There are four images at the corners of the window. Each of this images should have a size of 8x8 pixels (see border.thickness). 
<mmstheme>
    <description author="disko-team" email="info@berlinux-solutions.de" desc="example"/>
    <mainwindow
                alignment="center"
                w="90%"
                h="90%"
                bgcolor="#ffa0a0ff"
                bgimage=""
                opacity="200"
                fadein="true"
                fadeout="true"
                border.image.path="./themes/default"
                border.image.top-left="corner1.png"
                border.image.top-right="corner2.png"
                border.image.bottom-right="corner3.png"
                border.image.bottom-left="corner4.png"
                border.color.a="0"
                border.selcolor.a="0"
                border.thickness="8"
                border.margin="0"
                border.rcorners="false"
    />
</mmstheme>

Example 6 - A <progressbar> theme class

This example demonstrates how you can create a theme class named myprogressbar. It is very important to set the type to "progressbar". Thus the mapping between class and element can be done. After the type attribute some progressbar-specific attributes will be set. For example the two pixels wide white border. 
<mmstheme>
    <description author="disko-team" email="info@berlinux-solutions.de" desc="example"/>
    <class
           name="myprogressbar"
           type="progressbar"
           color="#ff0000ff"
           bgcolor="#800000ff"
           margin="1"
           border.color="#ffffffff"
           border.thickness="2"
           border.margin="1"
           percent="100"
    />
</mmstheme>

Example 7 - Use a template class right_textbox

This example demonstrates how you can create a template class. It is very important to set the type to "template". Thus the mapping between class and element can be done. The name of the class is right_textbox. 
<mmstheme>
    <class name="right_textbox" type="template">
        <hbox>
            <vbox size="14px">
                <image size="4px" image.name="./themes/default/textbox-top-left.png"/>
                <image image.name="./themes/default/textbox-left.png"/>
                <image size="4px" image.name="./themes/default/textbox-bottom-left.png"/>
            </vbox>
            <textbox name="mytextbox" 
			            text="" focusable="false"
			            alignment="justify" 
						border.thickness="10" 
						border.color="#ffffffff"/>
        </hbox>
    </class>
</mmstheme>
Now let's create a dialog that uses this template.
This dialog displays the text 'left text' on the left side. On the right it displays the right_textbox. The right_textbox displays the text 'What a wonderful textbox.'. You see that you can access the <textbox> element mytextbox from the template with the attribute widget.mytextbox. All named elements in the template can be accessed with the attribute syntax: widget.<name>. 
<mmsdialog>
    <mainwindow w="600px" h="340px" alignment="center">
        <hbox>
            <label text="left text"/>
            <template name="infotext" 
			             class="right_textbox" 
						 widget.mytextbox.text="What a wonderful textbox."/>
        </hbox>
    </mainwindow>
</mmsdialog>

Example 8 - Image menu using <mmstheme>

This example demonstrates how to define a complete menu layout within <mmstheme> and using it within a dialog.

The dialog manager creates a <mainwindow> with one <menu> widget with the name images and the theme class image_menu. Each item displays an image and a text below. In your plugin you can access the <image> of each item over the name item_image and the <textbox> over the name item_textbox. 
<mmsdialog>
    <mainwindow w="320" h="320">
        <menu name="images" class="image_menu"/>
    </mainwindow>
</mmsdialog>
The item template of this menu consists of a <button> widget as top-level widget. This <button> has a <vbox> as child. And so on...
This menu has two columns and two visible rows (50% each item). 
<mmstheme>
    <class name="image_menu" type="menu" item_height="50%" item_height="50%">
        <button margin="10"/>
            <vbox>
                <hbox>
                    <hbox size="20%"/>
                    <image name="item_image"/>
                    <hbox size="20%"/>
                </hbox>
                <textbox name="item_textbox" size="44px" font.size="22px"/>
            </vbox>
        </button>
    </class>
</mmstheme>

Example 9 - Create and fill a simple listbox

The dialog manager creates a <mainwindow> with one <menu> widget with the name listbox. The item template of this menu consists of only one <label> widget as top-level widget (named mylabel). After creation three items will be added to the listbox by the dialogmanager. 
<mmsdialog>
    <mainwindow w="320" h="320">
        <menu name="listbox" item_height="32px">
            <label name="mylabel" margin="1" font.size="22px"/>
            <menuitem widget.mylabel.text="First item"/>
            <menuitem widget.mylabel.text="Second item"/>
            <menuitem widget.mylabel.text="Third item"/>
        </menu>
    </mainwindow>
</mmsdialog>