[demo] update

demo/src/demo/Demo.hx

@@ -0,0 +1,23 @@
+package demo;
+
+import haxework.gui.frame.IFrameSwitcher;
+import haxework.net.manage.LoaderManager;
+import haxework.net.manage.ILoaderManager;
+import haxework.log.TraceLogger;
+import haxework.gui.Root;
+import haxework.gui.VGroupView;
+
+@:template class Demo extends VGroupView {
+
+    @:provide static var manager:ILoaderManager;
+
+    public static function main() {
+        L.push(new TraceLogger());
+        manager = new LoaderManager();
+        var demo = new Demo();
+        demo.switcher.change("list_form");
+        Root.bind(demo);
+    }
+
+    @:view public var switcher:IFrameSwitcher;
+}

demo/src/demo/Demo.yaml

@@ -0,0 +1,35 @@
+---
+pWidth: 100
+pHeight: 100
+skin: [ $type: [haxework.gui.skin.Skin.color, 0x333333] ]
+views:
+    - $type: haxework.gui.HGroupView
+      layoutMargin: 10
+      pWidth: 100
+      height: 40
+      views:
+          - $type: haxework.gui.ButtonView
+            skin: $raw:Style.buttonSkin
+            contentSize: true
+            paddings: 8
+            text: List Form
+            +onPress: "$raw:function(_) switcher.change('list_form')"
+          - $type: haxework.gui.ButtonView
+            skin: $raw:Style.buttonSkin
+            contentSize: true
+            paddings: 8
+            text: Tail Form
+            +onPress: "$raw:function(_) switcher.change('tail_form')"
+    - id: switcher
+      $type: haxework.gui.frame.FrameSwitcher
+      pWidth: 100
+      pHeight: 100
+      views:
+          - id: list_form
+            $type: demo.form.ListForm
+            pWidth: 100
+            pHeight: 100
+          - id: tail_form
+            $type: demo.form.TailForm
+            pWidth: 100
+            pHeight: 100

demo/src/demo/Style.hx

@@ -0,0 +1,23 @@
+package demo;
+
+import haxework.gui.skin.ISkin;
+import haxework.gui.skin.ButtonColorSkin;
+import haxework.gui.skin.TextSkin;
+import haxework.gui.skin.Skin;
+import haxework.gui.skin.ISkin.SkinSet;
+
+class Style {
+
+    public static var textSkin = new TextSkin(0xffffff, "Courirer");
+
+    public static var buttonSkin: SkinSet = [
+        new ButtonColorSkin(0x33aa33),
+        textSkin,
+    ];
+
+    public static var viewSkin:SkinSet = [
+        Skin.color(0x33aa33),
+        Skin.border(0xffffff),
+        textSkin,
+    ];
+}

demo/src/demo/form/ListForm.hx

@@ -0,0 +1,33 @@
+package demo.form;
+
+import flash.display.Sprite;
+import haxework.gui.ButtonView;
+import haxework.gui.IView;
+import haxework.gui.list.ListView.IListItemView;
+import haxework.gui.list.VListView;
+import haxework.gui.VGroupView;
+import haxework.net.JsonLoader;
+
+@:template class ListForm extends VGroupView {
+    @:view public var list(default, null):VListView<String>;
+    @:view public var panel(default, null):IView<Sprite>;
+    @:view public var button1(default, null):ButtonView;
+    @:view public var button2(default, null):ButtonView;
+    @:view public var button3(default, null):ButtonView;
+
+    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}');
+            })
+            .catchError(function(error) trace(error));
+    }
+
+    private function onPress(view:ButtonView):Void {
+        trace('onPress: ${view.id}');
+    }
+
+    private function onItemSelect(item:IListItemView<String>):Void {
+        trace('onItemSelect: ${item.data}');
+    }
+}

demo/src/demo/form/ListForm.yaml

@@ -0,0 +1,47 @@
+---
+$type: haxework.gui.VGroupView
+paddings: 20
+layoutMargin: 10
+skin: [ $type: [haxework.gui.skin.Skin.color, 0x333333] ]
+views:
+    - id: list
+      $type: haxework.gui.list.VListView<String>
+      +onItemSelect: $this:onItemSelect
+      factory: { $class: haxework.gui.list.LabelListItem }
+      pWidth: 100
+      pHeight: 100
+      scroll:
+          $type: haxework.gui.list.VScrollBarView
+          width: 10
+          pHeight: 100
+          skin: [ $type: [haxework.gui.list.ScrollBarSkin.vertical, 0x55cc55, 0xccffcc] ]
+      skin: [ $type: [haxework.gui.skin.Skin.color, 0xffffff] ]
+    - id: panel
+      $type: haxework.gui.HGroupView
+      pWidth: 100
+      height: 60
+      # contentSize: true
+      layoutMargin: 10
+      skin: [ $type: [haxework.gui.skin.Skin.color, 0x555555] ]
+      views:
+          - id: button1
+            $type: haxework.gui.ButtonView
+            +onPress: $this:onPress
+            contentSize: true
+            paddings: 8
+            skin: $raw:Style.buttonSkin
+            text: OK
+          - id: button2
+            $type: haxework.gui.ButtonView
+            +onPress: $this:onPress
+            contentSize: true
+            paddings: 8
+            skin: $raw:Style.buttonSkin
+            text: Apply
+          - id: button3
+            $type: haxework.gui.ButtonView
+            +onPress: $this:onPress
+            contentSize: true
+            paddings: 8
+            skin: $raw:Style.buttonSkin
+            text: Cancel

demo/src/demo/form/TailForm.hx

@@ -0,0 +1,30 @@
+package demo.form;
+
+import haxework.gui.ButtonView;
+import haxework.gui.HGroupView;
+import haxework.gui.IGroupView;
+import haxework.gui.list.ListView.IListItemView;
+import haxework.gui.TextView;
+
+@:template class TailForm extends HGroupView {
+    @:view public var group:IGroupView;
+
+    private function init() {
+        for (i in 0...100) {
+            var view = new TextView();
+            view.width = 100 + 100 * Math.random();
+            view.height = 100 + 100 * Math.random();
+            view.skin = Style.viewSkin;
+            view.text = 'View #${i}';
+            group.addView(view);
+        }
+    }
+
+    private function onPress(view:ButtonView):Void {
+        trace('onPress: ${view.id}');
+    }
+
+    private function onItemSelect(item:IListItemView<String>):Void {
+        trace('onItemSelect: ${item.data}');
+    }
+}

demo/src/demo/form/TailForm.yaml

@@ -0,0 +1,22 @@
+---
+pWidth: 100
+pHeight: 100
+views:
+    - $type: haxework.gui.ScrollView
+      skin: [ $type: [haxework.gui.skin.Skin.color, 0xff0000] ]
+      pWidth: 100
+      pHeight: 100
+      scroll:
+          $type: haxework.gui.list.VScrollBarView
+          width: 10
+          pHeight: 100
+          skin: [ $type: [haxework.gui.list.ScrollBarSkin.vertical, 0x55cc55, 0xccffcc] ]
+      view:
+          id: group
+          $type: haxework.gui.GroupView
+          skin: [ $type: [haxework.gui.skin.Skin.color, 0xffff00] ]
+          pWidth: 100
+          contentSize: true
+          layoutMargin: 5
+          layout:
+              $type: haxework.gui.layout.TailLayout