[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
+            text: Data
-            +onPress: "$code:switcher.change('any_form')"
+            +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
+          - id: data_form
-            $type: haxework.gui.SpriteView
+            $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.DataView;
-import haxework.gui.ButtonView;
 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) {
+        data.data = [for (i in 0...100) '${i}'];
-            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);
-        }
     }
 
-    private function onPress(view:ButtonView):Void {
+    private function factory(index:Int, value:String):TextView {
-        trace('onPress: ${view.id}');
+        var view = new TextView();
-    }
+        view.geometry.size.fixed.width = 100 + 100 * Math.random();
-
+        view.geometry.size.fixed.height = 100 + 100 * Math.random();
-    private function onItemSelect(item:IListItemView<String>):Void {
+        resources.skin.bind("view", view, "skin");
-        trace('onItemSelect: ${item.data}');
+        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

src/main/haxework/gui/DataView.hx

@@ -0,0 +1,17 @@
+package haxework.gui;
+
+class DataView<D> extends GroupView {
+
+    public var data(default, set):Array<D>;
+    public var factory(default, default):Int -> D -> IView<Dynamic>;
+
+    private function set_data(value:Array<D>):Array<D> {
+        data = value;
+        rebuild();
+        return data;
+    }
+
+    private function rebuild():Void {
+        views = Lambda.array(Lambda.mapi(data, factory));
+    }
+}

src/main/haxework/gui/ScrollView.hx

@@ -57,7 +57,9 @@ class ScrollView extends HGroupView {
 
     private function set_position(value:Float):Float {
         position = Math.min(Math.max(0, value), 1 - (height / view.height));
-        scroll.position = position;
+        if (scroll != null) {
+            scroll.position = position;
+        }
         toUpdate();
         return position;
     }

src/main/haxework/gui/list/HScrollBarView.hx

@@ -4,12 +4,18 @@ import flash.geom.Point;
 
 class HScrollBarView extends ScrollBarView {
 
-  override private function onMouseDown(p:Point):Void {
+    public function new() {
-    mousePosition = p.x - width * position;
+        super();
-  }
+        geometry.size.percent.width = 100;
+        geometry.size.fixed.height = 10;
+    }
 
-  override private function onMouseMove(p:Point):Void {
+    override private function onMouseDown(p:Point):Void {
-    position = (p.x - mousePosition) / width;
+        mousePosition = p.x - width * position;
-    onScroll.emit(position);
+    }
-  }
+
+    override private function onMouseMove(p:Point):Void {
+        position = (p.x - mousePosition) / width;
+        onScroll.emit(position);
+    }
 }

src/main/haxework/gui/list/VScrollBarView.hx

@@ -4,12 +4,18 @@ import flash.geom.Point;
 
 class VScrollBarView extends ScrollBarView {
 
-  override private function onMouseDown(p:Point):Void {
+    public function new() {
-    mousePosition = p.y - height * position;
+        super();
-  }
+        geometry.size.percent.height = 100;
+        geometry.size.fixed.width = 10;
+    }
 
-  override private function onMouseMove(p:Point):Void {
+    override private function onMouseDown(p:Point):Void {
-    position = (p.y - mousePosition) / height;
+        mousePosition = p.y - height * position;
-    onScroll.emit(position);
+    }
-  }
+
+    override private function onMouseMove(p:Point):Void {
+        position = (p.y - mousePosition) / height;
+        onScroll.emit(position);
+    }
 }