I’m fairly new to haxe development and came upon this GUI tool, haxeUI, and was wondering if it’s possible to add an array to the scrollview and how to add it? So far I’ve been following an example where it used a finite number of haxe components to add to the scrollview.
I’m trying to create a chat feature that accepts 20 messages and follows the ‘first in first out’ rule and thought that an array would be able to do this easily.
class Main {
public static function main() {
var app = new HaxeUIApp();
app.ready(function() {
var main:Component = ComponentMacros.buildComponent("assets/main.xml");
app.addComponent(main);
var scrollView:ScrollView = main.findComponent("scrollview");
var newMsgLabel = function(i: Int) {
var msgLabel = new Label();
msgLabel.text = "Item " + i;
msgLabel.color = 255;
return msgLabel;
}
for (i in 0...20) {
scrollView.addComponent(newMsgLabel(i));
}
app.start();
});
}
}
Thank you for the reply. What do you mean by backend? Are you referring to the engine?
As for the code snippet, it also works on my end but is there a way to update the values in newMsgLabel? My aim is something like: a user enters a text as many as they want and it is displayed on the scrollview but the scrollview only accepts 20 text labels so it will remove the older entries and replace them with the newly entered ones.
well, you would have to maintain the logic to only allow 20 items in the scrollview yourself - threre is nothing inbuild in haxeui for that type of thing.
Alternatively, you could probably also use a ListView with a datasource, eg:
var listview:ListView = main.findComponent("listview");
var ds = listview.dataSource;
function addMessage(i:Int) {
var message = "Item " + (i + 1);
ds.add( { value: message } );
while (ds.size > 20) {
ds.remove(ds.get(0));
}
}
for (i in 0...40) {
addMessage(i);
}
The listview comes with a basic itemrenderer if you dont supply one, but you could also add your own with something like:
Yes I’m creating a new label component to display on the scroll view after removing the old labels. Unfortunately scrollView.removeComponent(scrollView.childComponent[0]) removes all the label entries on the scrollView and I can’t add new labels from newMsgLabel(). It still was not able to remove a single label from the scroll view. Can I edit the value of the label inside scroll view? Like instead of me removing a label, I’ll just edit its values. Would that be possible?
class Main {
private static var ui:Component;
public static function main() {
var app = new HaxeUIApp();
app.ready(function() {
ui = ComponentMacros.buildComponent("assets/main.xml");
app.addComponent(ui);
ui.findComponent("addMessage", Button).onClick = function(e) {
addMessage(ui.findComponent("message", TextField).text);
}
// lets just fill it up for simplicity
for (i in 0...40) {
addMessage("Message " + (i + 1));
}
app.start();
});
}
private static function addMessage(msg:String) {
var messages:ScrollView = ui.findComponent("messages");
if (messages.contents.childComponents.length < 20) {
var label = new Label();
label.text = msg;
label.color = Std.random(0x888888) + 0x222222;
messages.addComponent(label); // could also use messages.contents.addComponent
} else {
var i = 0;
while (i < 19) { // shift them all up by one
messages.contents.childComponents[i].text = messages.contents.childComponents[i + 1].text;
i++;
}
messages.contents.childComponents[19].text = msg; // add the new item
}
messages.vscrollPos = 1000; // <--- found a subtle bug here, vscrollMax _should_ have worked
ui.findComponent("message", TextField).text = "";
}
}
Personally, i would probably opt for a custom component with a ListView inside it - it gets rid of the ugly “ui.findComponent” stuff and means you have a nice reusable component - but thats probably out out scope / just me.
