[gui] add DataView

demo/src/demo/Demo.yaml

@@ -25,12 +25,12 @@ views:
             geometry.padding: [25, 8]
             text: Tail
             +onPress: "$code:switcher.change('tail_form')"
-          - id: any_form
+          - id: data_form
             $type: haxework.gui.ToggleButtonView
             skin: $r:skin:tab
             geometry.padding: [25, 8]
-            text: Any
-            +onPress: "$code:switcher.change('any_form')"
+            text: Data
+            +onPress: "$code:switcher.change('data_form')"
     - id: switcher
       $type: haxework.gui.frame.FrameSwitcher
       skin: $r:skin:border
@@ -44,8 +44,8 @@ views:
           - id: tail_form
             $type: demo.form.TailForm
             geometry.size.stretch: true
-          - id: any_form
-            $type: haxework.gui.SpriteView
+          - id: data_form
+            $type: demo.form.DataForm
             geometry.size.stretch: true
     - $type: haxework.gui.HGroupView
       geometry.size.percent.width: 100

demo/src/demo/Theme.hx

@@ -35,6 +35,10 @@ class Theme {
         var border:SkinSet = [
             Skin.border(ColorUtils.multiply(color, 1.5), 1, 2),
         ];
+        resources.skin.put("text", [
+            Skin.color(ColorUtils.diff(color, 128)),
+            new TextSkin(ColorUtils.diff(color, -128), 16, "Courirer"),
+        ]);
         resources.skin.put("background", background);
         resources.skin.put("button", button);
         resources.skin.put("tab", tab);

demo/src/demo/Util.hx

@@ -0,0 +1,12 @@
+package demo;
+
+class Util {
+
+    public static function marray<T>(value:Array<T>, m:Int):Array<T> {
+        var result = [];
+        for (i in 0...m) {
+            result = result.concat(value);
+        }
+        return result;
+    }
+}

demo/src/demo/form/DataForm.hx

@@ -0,0 +1,31 @@
+package demo.form;
+
+import haxework.gui.DataView;
+import haxework.gui.TextView;
+import haxework.gui.VGroupView;
+import haxework.net.JsonLoader;
+import haxework.resources.IResources;
+
+@:template class DataForm extends VGroupView {
+    @:view var data:DataView<String>;
+    @:provide var resources:IResources;
+
+    private function init() {
+        new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
+            .then(function(data:Array<Dynamic>) {
+                var values = data.map(function(item) return '${item.id}: ${item.message}');
+                this.data.data = Util.marray(values, 1);
+            })
+            .catchError(function(error) trace(error));
+    }
+
+    private function factory(index:Int, value:String):TextView {
+        var label = new TextView();
+        label.geometry.size.percent.width = 100;
+        label.geometry.margin = 1;
+        label.geometry.padding = 2;
+        resources.skin.bind("text", label, "skin");
+        label.text = value;
+        return label;
+    }
+}

demo/src/demo/form/DataForm.yaml

@@ -0,0 +1,15 @@
+---
+skin: $r:skin:background
+views:
+    - $type: haxework.gui.ScrollView
+      geometry.size.stretch: true
+      view:
+          id: data
+          $type: haxework.gui.DataView<String>
+          layout:
+              $type: haxework.gui.layout.VerticalLayout
+          factory: $this:factory
+          geometry.size.width: 100%
+      scroll:
+          $type: haxework.gui.list.VScrollBarView
+          skin: $r:skin:scroll

demo/src/demo/form/ListForm.hx

@@ -11,7 +11,8 @@ import haxework.net.JsonLoader;
     private function init() {
         new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
             .then(function(data:Array<Dynamic>) {
-                list.data = data.map(function(item) return '${item.id}: ${item.message}');
+                var values = data.map(function(item) return '${item.id}: ${item.message}');
+                list.data = Util.marray(values, 50);
             })
             .catchError(function(error) trace(error));
     }

demo/src/demo/form/TailForm.hx

@@ -1,33 +1,24 @@
 package demo.form;
 
-import haxework.resources.IResources;
-import haxework.gui.ButtonView;
+import haxework.gui.DataView;
 import haxework.gui.HGroupView;
-import haxework.gui.IGroupView;
-import haxework.gui.list.ListView.IListItemView;
 import haxework.gui.TextView;
+import haxework.resources.IResources;
 
 @:template class TailForm extends HGroupView {
-    @:view public var group:IGroupView;
+    @:view public var data:DataView<String>;
     @:provide var resources:IResources;
 
     private function init() {
-        for (i in 0...100) {
-            var view = new TextView();
-            view.geometry.size.fixed.width = 100 + 100 * Math.random();
-            view.geometry.size.fixed.height = 100 + 100 * Math.random();
-            //view.skin = resources.skin.get("view");
-            resources.skin.bind("view", view, "skin");
-            view.text = 'View #${i}';
-            group.addView(view);
-        }
+        data.data = [for (i in 0...100) '${i}'];
     }
 
-    private function onPress(view:ButtonView):Void {
-        trace('onPress: ${view.id}');
-    }
-
-    private function onItemSelect(item:IListItemView<String>):Void {
-        trace('onItemSelect: ${item.data}');
+    private function factory(index:Int, value:String):TextView {
+        var view = new TextView();
+        view.geometry.size.fixed.width = 100 + 100 * Math.random();
+        view.geometry.size.fixed.height = 100 + 100 * Math.random();
+        resources.skin.bind("view", view, "skin");
+        view.text = 'View #${index}';
+        return view;
     }
 }

demo/src/demo/form/TailForm.yaml

@@ -2,15 +2,14 @@
 views:
     - $type: haxework.gui.ScrollView
       geometry.size.stretch: true
+      view:
+          id: data
+          $type: haxework.gui.DataView<String>
+          layout:
+              $type: haxework.gui.layout.TailLayout
+              margin: 2
+          factory: $this:factory
+          geometry.size.width: 100%
       scroll:
           $type: haxework.gui.list.VScrollBarView
           skin: $r:skin:scroll
-          geometry.size.height: 100%
-          geometry.size.width: 10
-      view:
-          id: group
-          $type: haxework.gui.GroupView
-          geometry.size.width: 100%
-          layout.margin: 5
-          layout:
-              $type: haxework.gui.layout.TailLayout