[demo] update

demo/run.sh

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
 echo "`pwd`/target" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
+. /opt/sdk/neko/2.2.0/activate
 . /opt/sdk/haxe/3.4.7/activate
 haxe build.hxml && flashplayerdebugger target/demo.swf &
 tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt

demo/run_openfl.sh

@@ -1,4 +1,5 @@
 #!/usr/bin/env bash
 echo "`pwd`/target/flash/bin" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
+. /opt/sdk/neko/2.2.0/activate
 . /opt/sdk/haxe/3.4.7/activate
-haxelib run openfl test linux
+haxelib run openfl test flash

demo/src/demo/Demo.hx

@@ -16,7 +16,7 @@ import haxework.log.TraceLogger;
     @:view var tabs:IGroupView;
 
     private function init():Void {
-        switcher.change("list_form");
+        switcher.change("list");
     }
 
     private function onFrameSwitch(frame:IView<Dynamic>):Void {

demo/src/demo/DemoView.yaml

@@ -6,31 +6,20 @@ views:
       geometry.padding: 10
       image: $r:image:logo
     - id: tabs
-      $type: haxework.view.HGroupView
+      $type: haxework.view.ButtonGroup<String>
       layout.margin: 5
       layout.hAlign: left
       geometry.size.width: 100%
       geometry.padding.left: 5
       geometry.margin.bottom: -3
-      views:
+      buttonSkinId: tab
-          - id: list_form
+      +onDataSelect: $code:function(id) switcher.change(id)
-            $type: haxework.view.ToggleButtonView
+      data:
-            skinId: tab
+        - "list"
-            geometry.padding: [25, 8]
+        - "tail"
-            text: List
+        - "data"
-            +onPress: "$code:switcher.change('list_form')"
+        - "test_layout"
-          - id: tail_form
+      selected: "list"
-            $type: haxework.view.ToggleButtonView
-            skinId: tab
-            geometry.padding: [25, 8]
-            text: Tail
-            +onPress: "$code:switcher.change('tail_form')"
-          - id: data_form
-            $type: haxework.view.ToggleButtonView
-            skinId: tab
-            geometry.padding: [25, 8]
-            text: Data
-            +onPress: "$code:switcher.change('data_form')"
     - id: switcher
       $type: haxework.view.frame.FrameSwitcher
       skinId: panel
@@ -38,19 +27,11 @@ views:
       +onSwitch: $this:onFrameSwitch
       geometry.size.stretch: true
       geometry.padding: 5
-      views:
+      factory:
-          - id: list_form
+        _list_: {$class: demo.form.ListForm}
-            $type: demo.form.ListForm
+        _tail_: {$class: demo.form.TailForm}
-            skinId: background
+        _data_: {$class: demo.form.DataForm}
-            geometry.size.stretch: true
+        _test_layout_: {$class: demo.form.TestLayoutForm}
-          - id: tail_form
-            $type: demo.form.TailForm
-            skinId: background
-            geometry.size.stretch: true
-          - id: data_form
-            $type: demo.form.DataForm
-            skinId: background
-            geometry.size.stretch: true
     - $type: haxework.view.HGroupView
       geometry.size.percent.width: 100
       geometry.padding: 10

demo/src/demo/Theme.hx

@@ -1,33 +1,40 @@
 package demo;
 
-import haxework.color.ColorUtil;
+import haxework.color.Color;
 import haxework.resources.IResources;
+import haxework.view.core.Geometry;
 import haxework.view.skin.Skin;
 import haxework.view.skin.TextSkin;
+using haxework.color.ColorUtil;
 
 class Theme {
 
     @:provide static var resources:IResources;
 
-    public static function setColor(color:Int, textColor:Int = 0xffffff):Void {
+    public static function setColor(color:Color, ?textColor:Color):Void {
+        if (textColor == null) {
+            textColor = 0xffffff;
+        }
         var text = new TextSkin(textColor, 16, "Courirer");
         var background = Skin.color(0x000000);
-        var border = Skin.border(ColorUtil.multiply(color, 1.5), 1, 2);
+        var border = Skin.border(color.multiply(1.5), 1, 2);
         resources.skin.put("text0", [
-            Skin.color(ColorUtil.diff(color, 128)),
+            Skin.color(color.diff(128)),
-            new TextSkin(ColorUtil.diff(color, -128), 16, "Courirer"),
+            new TextSkin(color.diff(-128), 16, "Courirer"),
         ]);
         resources.skin.put("text1", [
-            Skin.color(ColorUtil.diff(color, 64)),
+            Skin.color(color.diff(64)),
-            new TextSkin(ColorUtil.diff(color, -128), 16, "Courirer"),
+            new TextSkin(color.diff(-128), 16, "Courirer"),
         ]);
         resources.skin.put("text", resources.skin.get("text0"));
         resources.skin.put("background", [background]);
         resources.skin.put("button", [Skin.buttonColor(color), text]);
-        resources.skin.put("tab", [Skin.tabColor(color), text]);
+        resources.skin.put("tab", [Skin.tabColor(color), text, Skin.geometry(new Geometry().setPadding([25, 8]))]);
         resources.skin.put("view", [Skin.color(color), border, text]);
-        resources.skin.put("scroll", [Skin.scrollVertical(color, ColorUtil.diff(color, 128))]);
+        resources.skin.put("scroll", [Skin.scrollVertical(color, color.diff(128))]);
         resources.skin.put("border", [border]);
         resources.skin.put("panel", [background, border]);
+
+        resources.skin.put("test", [Skin.color(0x00ffff)]);
     }
 }

demo/src/demo/form/DataForm.hx

@@ -1,9 +1,13 @@
 package demo.form;
 
+import haxework.view.frame.FrameView;
 import haxework.view.TextView;
-import haxework.view.VGroupView;
 
-@:template class DataForm extends VGroupView {
+
+@:template class DataForm extends FrameView<Dynamic> {
+    public function new() {
+        super("data");
+    }
 
     private function factory(index:Int, value:Model):TextView {
         var label = new TextView();

demo/src/demo/form/DataForm.yaml

@@ -2,6 +2,7 @@
 views:
   - $type: haxework.view.ScrollView
     geometry.size.stretch: true
+    scroll.skinId: scroll
     view:
       id: data
       $type: haxework.view.DataView
@@ -10,6 +11,3 @@ views:
       factory: $this:factory
       geometry.size.width: 100%
       data: $r:any:data
-      scroll:
-          $type: haxework.view.list.VScrollBarView
-          skinId: scroll

demo/src/demo/form/ListForm.hx

@@ -1,13 +1,17 @@
 package demo.form;
 
+import haxework.view.frame.FrameView;
 import haxework.view.list.LabelListItem;
 import haxework.view.list.ListView.IListItemView;
 import haxework.view.list.VListView;
-import haxework.view.VGroupView;
 
-@:template class ListForm extends VGroupView {
+@:template class ListForm extends FrameView<Dynamic> {
     @:view public var list(default, null):VListView<Model>;
 
+    public function new() {
+        super("list");
+    }
+
     private function factory() {
         return new LabelListItem(function(index:Int, value:Model) return '${index}. ${value.id}: ${value.title}');
     }

demo/src/demo/form/TailForm.hx

@@ -1,12 +1,16 @@
 package demo.form;
 
-import haxework.view.HGroupView;
+import haxework.view.frame.FrameView;
 import haxework.view.ImageView;
 import haxework.view.IView;
 import haxework.view.TextView;
-import haxework.view.utils.DrawUtil.FillType;
+import haxework.view.utils.DrawUtil;
 
-@:template class TailForm extends HGroupView {
+@:template class TailForm extends FrameView<Dynamic> {
+
+    public function new() {
+        super("tail");
+    }
 
     private function factory(index:Int, value:Model):IView<Dynamic> {
         var view:IView<Dynamic>;

demo/src/demo/form/TailForm.yaml

@@ -2,6 +2,7 @@
 views:
   - $type: haxework.view.ScrollView
     geometry.size.stretch: true
+    scroll.skinId: scroll
     view:
       id: data
       $type: haxework.view.DataView
@@ -11,6 +12,3 @@ views:
       factory: $this:factory
       geometry.size.width: 100%
       data: $r:any:data
-      scroll:
-          $type: haxework.view.list.VScrollBarView
-          skinId: scroll

demo/src/demo/form/TestLayoutForm.hx

@@ -0,0 +1,27 @@
+package demo.form;
+
+import flash.events.MouseEvent;
+import haxework.view.frame.FrameView;
+import haxework.view.SpriteView;
+
+@:template class TestLayoutForm extends FrameView<Dynamic> {
+
+    @:view var render:SpriteView;
+
+    public function new() {
+        super("test_layout");
+    }
+
+    public function init():Void {
+        resize();
+        content.addEventListener(MouseEvent.CLICK, function(_) {
+            resize();
+        });
+    }
+
+    private function resize():Void {
+        var w = 200 + 400 * Math.random();
+        var h = 100 + 200 * Math.random();
+        render.setContentSize(w, h, "render");
+    }
+}

demo/src/demo/form/TestLayoutForm.yaml

@@ -0,0 +1,53 @@
+---
+views:
+  - id: main
+    $type: haxework.view.VGroupView
+    geometry.size.stretch: true
+    layout.hAlign: center
+    layout.vAlign: middle
+    views:
+      - id: container
+        $type: haxework.view.VGroupView
+        layout.margin: 10
+        skin:
+          - $type: [haxework.view.skin.Skin.color, 0xffff00]
+        views:
+          - id: top
+            $type: haxework.view.GroupView
+            layout.hAlign: center
+            geometry.size.width: 100%
+            geometry.size.height: 20
+            skinId: test
+          - id: middle
+            $type: haxework.view.HGroupView
+            layout.margin: 10
+            views:
+              - id: left
+                $type: haxework.view.GroupView
+                layout.vAlign: middle
+                geometry.size.width: 20
+                geometry.size.height: 100%
+                skinId: test
+              - id: render
+                $type: haxework.view.SpriteView
+                #geometry.size.width: 300
+                #geometry.size.height: 200
+                skinId: test
+              - id: right
+                $type: haxework.view.GroupView
+                layout.vAlign: middle
+                geometry.size.width: 20
+                geometry.size.height: 100%
+                skinId: test
+                views:
+                  - $type: haxework.view.SpriteView
+                    geometry.size.width: 100
+                    geometry.size.height: 100%
+                    skin:
+                      - $type: [haxework.view.skin.Skin.color, 0xff0000]
+          - id: bottom
+            $type: haxework.view.GroupView
+            layout.hAlign: center
+            skinId: test
+            geometry.size.width: 100%
+            geometry.size.height: 20

src/main/haxework/utils/StringUtil.hx

@@ -0,0 +1,10 @@
+package haxework.utils;
+
+using StringTools;
+
+class StringUtil {
+
+    public static function title(value:String):String {
+        return (value.substr(0, 1).toUpperCase() + value.substr(1)).replace("_", " ");
+    }
+}

src/main/haxework/view/ButtonGroup.hx

@@ -1,6 +1,9 @@
 package haxework.view;
 
+using haxework.utils.StringUtil;
+import haxework.view.DataView.Factory;
 import haxe.EnumTools;
+import haxework.view.layout.HorizontalLayout;
 import haxework.view.layout.ILayout;
 
 class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
@@ -9,8 +12,8 @@ class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
     public var buttonSkinId(default, set):String;
 
     public function new(?layout:ILayout) {
-        super(layout);
+        super(layout != null ? layout : new HorizontalLayout());
-        factory = defaultFactory;
+        factory = buildFactory();
         onDataSelect.connect(function(value:D) selected = value);
     }
 
@@ -57,9 +60,14 @@ class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
         }
     }
 
-    public static function defaultFactory<D>(index:Int, value:D):ToggleButtonView {
+    public static function buildFactory<D>(?label:D -> String):Factory<D, ToggleButtonView> {
+        if (label == null) {
+            label = function(value:D) return Std.string(value).title();
+        }
+        return function(index:Int, value:D):ToggleButtonView {
             var result = new ToggleButtonView();
-        result.text = Std.string(value);
+            result.text = label(value);
             return result;
         }
+    }
 }

src/main/haxework/view/ScrollView.hx

@@ -3,10 +3,11 @@ package haxework.view;
 import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.events.MouseEvent;
+import haxework.signal.Signal;
 import haxework.view.core.Geometry.Position;
 import haxework.view.list.ScrollBarView;
+import haxework.view.list.VScrollBarView;
 import haxework.view.skin.Skin;
-import haxework.signal.Signal;
 
 class ScrollView extends HGroupView {
 
@@ -25,6 +26,7 @@ class ScrollView extends HGroupView {
         mask = new Sprite();
         content.addChild(mask);
         content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
+        scroll = new VScrollBarView();
     }
 
     private function onMouseWheelEvent(event:MouseEvent):Void {

src/main/haxework/view/frame/FrameView.hx

@@ -1,13 +1,15 @@
 package haxework.view.frame;
 
 import haxework.view.layout.ILayout;
+import haxework.view.layout.VerticalLayout;
 
 class FrameView<D> extends GroupView {
     public var frameId(default, null):String;
 
     public function new(frameId:String, ?layout:ILayout) {
-        super(layout);
+        super(layout != null ? layout : new VerticalLayout());
         this.frameId = frameId;
+        this.geometry.size.stretch = true;
     }
 
     public function onShow(data:D):Void {}