View Full Version : Dynamically populating floating list
Hi,
So I have a floating list that I'd like to populate dynamically.
This is actually goign to be a class and multiple instances will be created.
How can I dynamically add new textlistitem into a floating list??
Thanks,
james
TripleToe
07-17-2004, 01:58 PM
I threw together a little demo that might help you out. You can play around with it and figure out how to use the logic for your own application. This shows a form on the left that lets you enter name/value pairs which are dynamically added to the floating list on the right. I created a custom addItemToListDataSet() method because the addItem() method that comes with the List class does not appear to update the dataset behind the list; it just adds an item to the list itself
Hope this helps:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE canvas SYSTEM "http://www.laszlosystems.com/lps/tools/lzx.dtd">
<canvas debug="true" height="400" width="600">
<!-- debugger -->
<debug y="300"/>
<!-- dataset for floating list with 4 default options -->
<dataset name="test_dataset">
<items>
<item value="1">option 1</item>
<item value="2">option 2</item>
<item value="3">option 3</item>
<item value="4">option 4</item>
</items>
</dataset>
<!-- here is the extended floating list class with a method to dynamically add items -->
<class name="dynamic_floatinglist" extends="floatinglist" datapath="{this.floatinglist_datapath}">
<!-- class attribute to hold the reference to the datapointer -->
<attribute name="floatinglist_datapath" type="string"/>
<!-- items in the floatinglist which are mapped to the datapath that is set when the class
instance is created -->
<textlistitem datapath="${parent.floatinglist_datapath}" text='$path{"text()"}' value='$path{"@value"}'>
<!-- onclick event to show the value of the list item that was clicked -->
<method event="onclick">
debug.write("Selected item value is " + parent.value);
parent.setVisible(false);
</method>
</textlistitem>
<!-- method to add text/value pair to the datapointer for this floatinglist -->
<method name="addItemToListDataSet" args="item_text, item_value">
debug.write('adding item to dataset (' + item_text + ', ' + item_value + ')');
datapath.setXPath( "test_dataset:/items");
datapath.addNode("item",item_text, {value:item_value});
</method>
</class>
<!-- view which shows the dynamic floating list in action -->
<view name="main_view" width="${parent.width}" height="${parent.height}">
<simplelayout axis="x" spacing="10"/>
<!-- view to hold the form for adding new items -->
<view name="form_view" width="${parent.width/2}" height="${parent.height}" bgcolor="gray">
<simplelayout axis="y" spacing="10"/>
<view width="${parent.width}">
<simplelayout axis="x" spacing="10"/>
<text text="Text:" width="100"/>
<edittext id="new_item_text" name="new_item_text" width="100"/>
</view>
<view width="${parent.width}">
<simplelayout axis="x" spacing="10"/>
<text text="Value:" width="100"/>
<edittext id="new_item_value" name="new_item_value" width="100"/>
</view>
<button name="add_item_button" id="add_item_button">Add Text to Floating List
<method event="onclick">
// get the text from the fields
var text = new_item_text.getValue();
var value = new_item_value.getValue();
//myFloatingList.addItem(text, value); <!-- doesn't update the dataset, just the list -->
myFloatingList.addItemToListDataSet(text, value);
</method>
</button>
</view>
<!-- view to show the floating list in action -->
<view name="floatinglist_view" width="${parent.width/2}" height="${parent.height}" bgcolor="blue">
<simplelayout axis="y" spacing="10"/>
<button name="floatinglist_button" text="Click here to see the list" >
<dynamic_floatinglist id="myFloatingList" width="80" attach="right" visible="false"
floatinglist_datapath="test_dataset:/items/item"/>
<method event="onclick">
myFloatingList.setVisible(true);
</method>
</button>
</view>
</view>
</canvas>
:)
turgayz
12-06-2004, 09:16 AM
TripleToe, that's a very useful bit of code, thank you :)
err108
06-26-2006, 06:24 AM
If you aren't worried about a dataset behind the list, you can use one of the following two methods.
I personally like the second method if I am changing other attributes like fontsize or fontstyle.
Method 1
myFloatingList.addItem(myText, myValue);
Method 2
new textlistitem(myFloatingList, {text:myText, value:myValue, fontsize:myFontSize, fontstyle:myFontStyle});
vBulletin® v3.8.4, Copyright ©2000-2012, Jelsoft Enterprises Ltd.