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>
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>
<<< GUI-Reference