Dropdowns In a Nutshell

**Zonx** · #1 04-08-2005, 07:47 PM

I wont bother with all the usual properties, only what's needed to make dropdowns function.

Dropdowns are essentialy a mechanism for sellecting a row of data properties (aka fields or cells) from a database table.

The database for a dropdown is the DataSource object (not a DataSourceContainer).

Nested within the DataSource are Data Items. Data Items are essentially the rows of your database. They have only 1 default property "Name", which is used for internal referencing.

Data Items can be given any additional properties you desire. Each property used is esentially a field (or cell) in the database table. The name you give each property doesn't really mater. What matters is that you use the same property names on each Data Item. Corisponding property names form a column in your database table. The values assigned to those properties are the cells of the table.

Dropdowns also require a RowTemplate that includes at least 1 property used in the DataSource. The RowTemplate defines what's displayed in each row of the dropdown menu. The typical RowTemplate is /Templates.dropdowntemplate which uses a "text" property for display.

You'll also need to give the dropdown a style that defines its normal background and highlight background. The standard style is /dropdownlist.dropdown_default

So at a minimum, you have a dropdown object:

Code:

<Dropdownbox DataSource="MiscMapsDS" Name="MiscDropdown" RowTemplate="/Templates.dropdowntemplate" Size="51,16" Style="/dropdownlist.dropdown_default"/>

Which pulls data from the "MiscMapsDS" DataSource.

Example:

Code:

<DataSource Name="MiscMapsDS">
<Data Name="Misc" text="Misc"/>
<Data Name="World" text="World"/>
<Data Name="The Isle of Refuge" text="The Isle of Refuge"/>
</DataSource>

Each of the "text" values will be used in the menu.

Ok so we've got a menu, but it doesn't actually make anything happen. Here's where the magic happens!

Dropdowns have an OnSelect event handler that can be used to drive scripts when a selection is made. You can also pull the value of any property for the selected row using SelectedItem.propertyname. Combineing these 2 functions allows data to be pulled from the DataSource and passed to other objects.

Example:

Code:

Onselect="parent.TextWidget.text=SelectedItem.text"

This passes the value of the selected item's text property to TextWidget.

Ok maybe that's not so exciting. Lets try something more advanced. First lets add a property to each Data Item for associated commands.

Code:

<DataSource Name="MiscMapsDS">
<Data command="parent.size='10,10' parent.location='1,1'" Name="Misc" text="Misc"/>
<Data command="parent.size='20,20' parent.location='2,2'" Name="World" text="World"/>
<Data command="parent.size='30,30' parent.location='3,3'" Name="The Isle of Refuge" text="The Isle of Refuge"/>
</DataSource>

Now we'll add a simple button to recieve the command and exicute it when pressed.

Code:

<Button Name="RunCommands" Size="2,2" Visible="false"></Button>

Fianally we'll give the dropdown an OnSelect script to pass the command to the button, and press the button, thus exicuting the command.

Code:

<Dropdownbox DataSource="MiscMapsDS" Name="MiscDropdown" OnSelect="parent.RunCommands.OnPress=SelectedItem.command
parent.RunCommands.Press=true"
RowTemplate="/Templates.dropdowntemplate" Size="51,16" Style="/dropdownlist.dropdown_default"/>

Result: We now have a menu that runs any script associated with the selected text