I’m very new to both programing and Haxe ui, so for my first project i decided to make a simple todo list webpage based off the one in the component explorer. I tried to add a date area to the list using a date dropdown, but for some reason the Array data source doesent seem to want to pass on the Dynamic type for the dropdown??? what am i doing wrong. my code is down below:
mainVeiw.hx
package;
import haxe.ui.containers.VBox;
import haxe.ui.core.Platform;
import haxe.ui.data.ArrayDataSource;
import haxe.ui.events.ItemEvent;
import haxe.ui.events.KeyboardEvent;
import haxe.ui.events.MouseEvent;
import haxe.ui.events.UIEvent;
import haxe.ui.data.IDataItem;
@:build(haxe.ui.ComponentBuilder.build("assets/main-view.xml"))
class MainView extends VBox {
private var todoData = new ArrayDataSource<TodoItem>();
public function new() {
super();
todoData.onChange = updateActiveCount;
todoList.dataSource = todoData;
}
private function updateActiveCount() {
todoList.hidden = optionsContainer.hidden = pageBottom.hidden = (!todoData.isFiltered && todoData.size == 0);
var activeCount = 0;
for (i in 0...todoData.size) {
if (todoData.get(i).completed == false) {
activeCount++;
}
}
activeCountLabel.text = activeCount + " item" + (activeCount == 1 ? "" : "s") + " left";
clearCompletedLink.hidden = (activeCount == todoData.size);
}
@:bind(todoItemText, KeyboardEvent.KEY_DOWN)
private function onTodoItemKey(e:KeyboardEvent) {
if (e.keyCode == Platform.instance.KeyEnter) {
if ((todoItemText.text != "") && todoItemDate.selectedItem != null) {
todoData.add(new TodoItem(todoItemText.text, todoItemDate.selectedItem));
todoItemText.text = "";
} else if (todoItemText.text != "") {
todoData.add(new TodoItem(todoItemText.text, Date.now();));
todoItemText.text = "";
}
}
}
@:bind(todoList, ItemEvent.COMPONENT_EVENT)
private function onTodoItemEvent(e:ItemEvent) {
if (e.source.id == "delete") {
todoData.removeAt(e.itemIndex);
} else if (e.source.id == "completed") {
(e.source.value == true) ? e.target.addClass("completed", true, true) : e.target.removeClass("completed", true, true);
}
}
@:bind(optionsButtonBar, UIEvent.CHANGE)
private function onOptionsChange(_) {
switch (optionsButtonBar.selectedIndex) {
case 0:
todoData.clearFilter();
case 1:
todoData.filter((index, item) -> item.completed == false);
case 2:
todoData.filter((index, item) -> item.completed == true);
}
}
@:bind(clearCompletedLink, MouseEvent.CLICK)
private function onClearCompleted(_) {
for (i in 0...todoData.size) {
var item = todoData.get(i);
if (item.completed) {
todoData.remove(item);
}
}
}
}
class TodoItem implements IDataItem {
public var completed:Bool;
public var label:String;
public var date:Dynamic;
public function new(label:String, date:Date) {
this.label = label;
this.date = date;
}
}
and the main-view.xml
<vbox width="100%" height="100%">
<style source="./css/todos.css" />
<scrollview id="mainScrollView" width="100%" height="100%" contentWidth="100%">
<label text="todos" horizontalAlign="center" style="color: #e4d0cf;font-size: 96px;" />
<vbox id="todoFrame" width="550" horizontalAlign="center" style="spacing:0;">
<vbox id="todoContainer" width="100%" horizontalAlign="center">
<hbox width="100%" style="padding: 10px;">
<spacer width="40" />
<textfield id="todoItemText" width="70%" placeholder="What needs to be done?" style="font-size: 24px;font-style:italic;" />
<dropdown text="Select Date" type="date" width="30%" id="todoItemDate" />
</hbox>
<listview id="todoList" width="100%" hidden="true">
<item-renderer layout="horizontal" width="100%" style="padding: 10px;spacing:10px;">
<checkbox id="completed" verticalAlign="center" />
<textfield id="label" width="70%" verticalAlign="center" style="font-size: 24px" />
<dropdown id="date" width="30%" text="Select Date" type="date" verticalAlign="center" />
<button id="delete" icon="images/delete.png" tooltip="Remove" verticalAlign="center" />
</item-renderer>
</listview>
<box id="optionsContainer" width="100%" style="padding: 10px;" hidden="true">
<label id="activeCountLabel" text="" verticalAlign="center" />
<button-bar id="optionsButtonBar" selectedIndex="0" horizontalAlign="center">
<button text="All" />
<button text="Active" />
<button text="Completed" />
</button-bar>
<link id="clearCompletedLink" text="Clear Completed" verticalAlign="center" horizontalAlign="right" />
</box>
</vbox>
<vbox width="100%" id="pageBottom" style="spacing:0;" hidden="true">
<box width="98%" height="5" styleName="page-bottom" horizontalAlign="center" />
<box width="96%" height="5" styleName="page-bottom" horizontalAlign="center" />
</vbox>
</vbox>
</scrollview>
</vbox>