[demo] update

demo/src/demo/Demo.hx

@@ -1,5 +1,8 @@
 package demo;
 
+import haxework.gui.ToggleButtonView;
+import haxework.gui.IGroupView;
+import haxework.gui.IView;
 import haxework.resources.Resources;
 import haxework.resources.IResources;
 import haxework.gui.frame.IFrameSwitcher;
@@ -18,11 +21,16 @@ import haxework.gui.VGroupView;
         L.push(new TraceLogger());
         resources = new Resources();
         manager = new LoaderManager();
-        Style.register();
+        Theme.setColor(0x33aa33);
         var demo = new Demo();
         demo.switcher.change("list_form");
         Root.bind(demo);
     }
 
-    @:view public var switcher:IFrameSwitcher;
+    @:view var switcher:IFrameSwitcher;
+    @:view var tabs:IGroupView;
+
+    private function onFrameSwicth(frame:IView<Dynamic>):Void {
+        for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id;
+    }
 }

demo/src/demo/Demo.yaml

@@ -3,29 +3,40 @@ pWidth: 100
 pHeight: 100
 skin: $r:skin:background
 views:
-    - $type: haxework.gui.HGroupView
+    - id: tabs
+      $type: haxework.gui.HGroupView
       layoutMargin: 5
       layoutHAlign: LEFT
       leftPadding: 5
       pWidth: 100
       height: 40
       views:
-          - $type: haxework.gui.ButtonView
+          - id: list_form
-            skin: $r:skin:button
+            $type: haxework.gui.ToggleButtonView
+            skin: $r:skin:tab
             contentSize: true
-            paddings: 8
+            paddings: [25, 8]
-            text: List Form
+            text: List
             +onPress: "$code:function(_) switcher.change('list_form')"
-          - $type: haxework.gui.ButtonView
+          - id: tail_form
-            skin: $r:skin:button
+            $type: haxework.gui.ToggleButtonView
+            skin: $r:skin:tab
             contentSize: true
-            paddings: 8
+            paddings: [25, 8]
-            text: Tail Form
+            text: Tail
             +onPress: "$code:function(_) switcher.change('tail_form')"
+          - id: any_form
+            $type: haxework.gui.ToggleButtonView
+            skin: $r:skin:tab
+            contentSize: true
+            paddings: [25, 8]
+            text: Any
+            +onPress: "$code:function(_) switcher.change('any_form')"
     - id: switcher
       $type: haxework.gui.frame.FrameSwitcher
-      skin: [ $type: [ haxework.gui.skin.Skin.border, 0x33aa33, 1, 2 ] ]
+      skin: $r:skin:border
-      paddings: 5
+      +onSwitch: $this:onFrameSwicth
+      padding: 5
       pWidth: 100
       pHeight: 100
       views:
@@ -37,3 +48,51 @@ views:
             $type: demo.form.TailForm
             pWidth: 100
             pHeight: 100
+          - id: any_form
+            $type: haxework.gui.SpriteView
+            pWidth: 100
+            pHeight: 100
+    - $type: haxework.gui.HGroupView
+      layoutMargin: 10
+      layoutHAlign: RIGHT
+      rightPadding: 10
+      pWidth: 100
+      height: 60
+      views:
+          - $type: haxework.gui.ButtonView
+            skin: $r:skin:button
+            contentSize: true
+            padding: 8
+            text: green
+            +onPress: "$code:function(_) Theme.setColor(0x33aa33)"
+          - $type: haxework.gui.ButtonView
+            skin: $r:skin:button
+            contentSize: true
+            padding: 8
+            text: red
+            +onPress: "$code:function(_) Theme.setColor(0xaa3333)"
+          - $type: haxework.gui.ButtonView
+            skin: $r:skin:button
+            contentSize: true
+            padding: 8
+            text: yellow
+            +onPress: "$code:function(_) Theme.setColor(0xaaaa33)"
+            rightMargin: 30
+
+          - $type: haxework.gui.ButtonView
+            skin: $r:skin:button
+            contentSize: true
+            padding: 8
+            text: OK
+          - $type: haxework.gui.ButtonView
+            skin: $r:skin:button
+            contentSize: true
+            padding: 8
+            text: Apply
+          - $type: haxework.gui.ButtonView
+            skin: $r:skin:button
+            contentSize: true
+            padding: 8
+            text: Cancel
+            #+onPress: $this:close
+            +onPress: "$code:function(_) flash.system.System.exit(0)"

demo/src/demo/Style.hx

@@ -1,45 +0,0 @@
-package demo;
-
-import haxework.gui.list.ScrollBarSkin;
-import haxework.resources.IResources;
-import haxework.gui.skin.ISkin;
-import haxework.gui.skin.ButtonSkin;
-import haxework.gui.skin.Skin;
-import haxework.gui.skin.TextSkin;
-
-class Style {
-
-    @:provide static var resources:IResources;
-
-    public static var backColor = 0x33aa33;
-    public static var textColor = 0xffffff;
-    public static var borderColor = 0xffffff;
-
-    public static var text:ISkin<Dynamic> = new TextSkin(textColor, "Courirer");
-
-    public static var background:SkinSet = [
-        Skin.color(0x00000),
-    ];
-
-    public static var button:SkinSet = [
-        ButtonSkin.color(backColor),
-        text,
-    ];
-
-    public static var view:SkinSet = [
-        Skin.color(backColor),
-        Skin.border(borderColor),
-        text,
-    ];
-
-    public static var scroll:SkinSet = [
-        ScrollBarSkin.vertical(0x55cc55, 0xccffcc),
-    ];
-
-    public static function register():Void {
-        resources.skin.put("background", background);
-        resources.skin.put("button", button);
-        resources.skin.put("view", view);
-        resources.skin.put("scroll", scroll);
-    }
-}

demo/src/demo/Theme.hx

@@ -0,0 +1,45 @@
+package demo;
+
+import haxework.gui.utils.ColorUtils;
+import haxework.gui.list.ScrollBarSkin;
+import haxework.resources.IResources;
+import haxework.gui.skin.ISkin;
+import haxework.gui.skin.Skin;
+import haxework.gui.skin.TextSkin;
+
+class Theme {
+
+    @:provide static var resources:IResources;
+
+    public static function setColor(color:Int, textColor:Int = 0xffffff):Void {
+        var text:ISkin<Dynamic> = new TextSkin(textColor, 16, "Courirer");
+        var background:SkinSet = [
+            Skin.color(0x00000),
+        ];
+        var button:SkinSet = [
+            Skin.buttonColor(color),
+            text,
+        ];
+        var tab:SkinSet = [
+            Skin.tabColor(color),
+            text,
+        ];
+        var view:SkinSet = [
+            Skin.color(color),
+            Skin.border(textColor),
+            text,
+        ];
+        var scroll:SkinSet = [
+            ScrollBarSkin.vertical(color, ColorUtils.diff(color, 128)),
+        ];
+        var border:SkinSet = [
+            Skin.border(ColorUtils.multiply(color, 1.5), 1, 2),
+        ];
+        resources.skin.put("background", background);
+        resources.skin.put("button", button);
+        resources.skin.put("tab", tab);
+        resources.skin.put("view", view);
+        resources.skin.put("scroll", scroll);
+        resources.skin.put("border", border);
+    }
+}

demo/src/demo/form/TailForm.hx

@@ -1,5 +1,6 @@
 package demo.form;
 
+import haxework.resources.IResources;
 import haxework.gui.ButtonView;
 import haxework.gui.HGroupView;
 import haxework.gui.IGroupView;
@@ -8,13 +9,15 @@ import haxework.gui.TextView;
 
 @:template class TailForm extends HGroupView {
     @:view public var group:IGroupView;
+    @:provide var resources:IResources;
 
     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.view;
+            //view.skin = resources.skin.get("view");
+            resources.skin.bind("view", view, "skin");
             view.text = 'View #${i}';
             group.addView(view);
         }

src/main/haxework/gui/ButtonView.hx

@@ -11,6 +11,8 @@ enum ButtonState {
 
 class ButtonView extends LabelView {
 
+    public static var TYPE = "button";
+
     public var disabled(default, set):Bool;
     public var state(get, null):ButtonState;
     public var onPress(default, null):Signal<ButtonView>;

src/main/haxework/gui/GroupView.hx

@@ -21,14 +21,15 @@ class GroupView extends SpriteView implements IGroupView {
     public var rightPadding(default, set):Float;
     public var topPadding(default, set):Float;
     public var bottomPadding(default, set):Float;
-  public var paddings(null, set):Float;
+    public var padding(null, set):Float;
+    public var paddings(null, set):Array<Float>;
 
     private var viewsById:Map<String, IView<Dynamic>>;
 
     public function new(?layout:ILayout) {
         super();
         this.layout = layout == null ? new DefaultLayout() : layout;
-    paddings = 0;
+        padding = 0;
         //layoutMargin = 0;
         layoutHAlign = HAlign.CENTER;
         layoutVAlign = VAlign.MIDDLE;
@@ -184,9 +185,21 @@ class GroupView extends SpriteView implements IGroupView {
         return bottomPadding;
     }
 
-  private function set_paddings(value:Float):Float {
+    private function set_padding(value:Float):Float {
-    leftPadding = rightPadding = topPadding = bottomPadding = value;
+        paddings = [value];
+        return value;
+    }
+
+    private function set_paddings(value:Array<Float>):Array<Float> {
+        switch (value) {
+            case [m]:
+                leftPadding = rightPadding = topPadding = bottomPadding = m;
+            case [a, b]:
+                leftPadding = rightPadding = a;
+                topPadding = bottomPadding = b;
+        }
         invalidate();
+        invalidateParent();
         return value;
     }
 }

src/main/haxework/gui/HasPaddings.hx

@@ -5,5 +5,6 @@ interface HasPaddings {
   public var rightPadding(default, set):Float;
   public var topPadding(default, set):Float;
   public var bottomPadding(default, set):Float;
-  public var paddings(null, set):Float;
+  public var padding(null, set):Float;
+  public var paddings(null, set):Array<Float>;
 }

src/main/haxework/gui/IView.hx

@@ -35,7 +35,8 @@ interface IView<C:DisplayObject> {
   public var rightMargin(default, set):Float;
   public var topMargin(default, set):Float;
   public var bottomMargin(default, set):Float;
-  public var margins(null, set):Float;
+  public var margin(null, set):Float;
+  public var margins(null, set):Array<Float>;
 
   public var content(default, null):C;
   public var skin(default, set):SkinSet;

src/main/haxework/gui/LabelView.hx

@@ -2,7 +2,6 @@ package haxework.gui;
 
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
-import flash.text.TextFieldAutoSize;
 
 class LabelView extends TextView {
 

src/main/haxework/gui/SpriteView.hx

@@ -9,11 +9,8 @@ class SpriteView extends View<Sprite> {
   }
 
   override public function update():Void {
-      super.update();
       this.content.graphics.clear();
-      for (skin in this.skin) {
+      super.update();
-          skin.draw(this);
-      }
   }
 
   #if dev_layout

src/main/haxework/gui/TextView.hx

@@ -29,7 +29,8 @@ class TextView extends SpriteView implements ITextView {
     public var rightPadding(default, set):Float = 0.0;
     public var topPadding(default, set):Float = 0.0;
     public var bottomPadding(default, set):Float = 0.0;
-  public var paddings(null, set):Float = 0.0;
+    public var padding(null, set):Float;
+    public var paddings(null, set):Array<Float>;
 
     public var shadow(default, set):Bool;
     public var shadowColor(default, set):Int;
@@ -258,9 +259,21 @@ class TextView extends SpriteView implements ITextView {
         return bottomPadding;
     }
 
-  private function set_paddings(value:Float):Float {
+    private function set_padding(value:Float):Float {
-    leftPadding = rightPadding = topPadding = bottomPadding = value;
+        paddings = [value];
+        return value;
+    }
+
+    private function set_paddings(value:Array<Float>):Array<Float> {
+        switch (value) {
+            case [m]:
+                leftPadding = rightPadding = topPadding = bottomPadding = m;
+            case [a, b]:
+                leftPadding = rightPadding = a;
+                topPadding = bottomPadding = b;
+        }
         invalidate();
+        invalidateParent();
         return value;
     }
 

src/main/haxework/gui/View.hx

@@ -1,13 +1,14 @@
 package haxework.gui;
 
-import haxework.gui.skin.ISkin.SkinSet;
+import Array;
-import flash.display.InteractiveObject;
 import flash.display.DisplayObject;
-import haxework.gui.core.SizeType;
+import flash.display.InteractiveObject;
-import haxework.gui.core.HAlign;
-import haxework.gui.core.VAlign;
-import flash.events.Event;
 import flash.display.Stage;
+import flash.events.Event;
+import haxework.gui.core.HAlign;
+import haxework.gui.core.SizeType;
+import haxework.gui.core.VAlign;
+import haxework.gui.skin.ISkin.SkinSet;
 
 class View<C:DisplayObject> implements IView<C> {
 
@@ -42,7 +43,8 @@ class View<C:DisplayObject> implements IView<C> {
     public var rightMargin(default, set):Float;
     public var topMargin(default, set):Float;
     public var bottomMargin(default, set):Float;
-  public var margins(null, set):Float;
+    public var margin(null, set):Float;
+    public var margins(null, set):Array<Float>;
 
     public var content(default, null):C;
     public var skin(default, set):SkinSet;
@@ -61,7 +63,7 @@ class View<C:DisplayObject> implements IView<C> {
         y = 0;
         width = 1;
         height = 1;
-    margins = 0;
+        margin = 0;
         vAlign = VAlign.NONE;
         hAlign = HAlign.NONE;
         inLayout = true;
@@ -84,13 +86,9 @@ class View<C:DisplayObject> implements IView<C> {
             content.x = x;
             content.y = y;
         }
-    /*var skin:ISkin<Dynamic> = currentSkin();
+        for (skin in this.skin) {
-    if (contentSize && skin != null && Std.is(skin, ISize)) {
+            skin.draw(this);
-      var size:ISize = cast(skin, ISize);
-      if (!Math.isNaN(size.width)) width = size.width;
-      if (!Math.isNaN(size.height))  height = size.height;
         }
-    if (skin != null) skin.draw(this);*/
     }
 
     public function remove():Void {
@@ -104,6 +102,7 @@ class View<C:DisplayObject> implements IView<C> {
         }
         return x;
     }
+
     private function set_y(value:Float):Float {
         if (y != value) {
             y = value;
@@ -120,6 +119,7 @@ class View<C:DisplayObject> implements IView<C> {
         }
         return w;
     }
+
     private function set_h(value:Float):Float {
         if (h != value) {
             h = value;
@@ -249,8 +249,20 @@ class View<C:DisplayObject> implements IView<C> {
         return bottomMargin;
     }
 
-  private function set_margins(value:Float):Float {
+    private function set_margin(value:Float):Float {
-    leftMargin = rightMargin = topMargin = bottomMargin = value;
+        margins = [value];
+        return value;
+    }
+
+    private function set_margins(value:Array<Float>):Array<Float> {
+        switch (value) {
+            case [m]:
+                leftMargin = rightMargin = topMargin = bottomMargin = m;
+            case [a, b]:
+                leftMargin = rightMargin = a;
+                topMargin = bottomMargin = b;
+        }
+
         invalidate();
         invalidateParent();
         return value;

src/main/haxework/gui/frame/FrameSwitcher.hx

@@ -1,5 +1,6 @@
 package haxework.gui.frame;
 
+import haxework.signal.Signal;
 import haxework.animate.IAnimate;
 import haxework.gui.IView;
 import haxework.gui.GroupView;
@@ -7,6 +8,8 @@ import haxework.gui.GroupView;
 class FrameSwitcher extends GroupView implements IFrameSwitcher {
 
     public var current(default, null):Null<IView<Dynamic>>;
+    public var onSwitch:Signal<IView<Dynamic>> = new Signal();
+
     private var frames:Map<String, IView<Dynamic>>;
 
     public var animateFactory(default, default):Class<IAnimate>;
@@ -49,6 +52,7 @@ class FrameSwitcher extends GroupView implements IFrameSwitcher {
         } else {
             removePrev(prev);
         }
+        onSwitch.emit(current);
         return current;
     }
 

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

@@ -6,7 +6,7 @@ import haxework.gui.list.ListView.IListItemView;
 
 class LabelListItem<T> extends LabelView implements IListItemView<T> {
 
-    public var item_index(default, set):Int;
+    public var item_index(default, default):Int;
     public var data(default, set):T;
 
     public function new() {
@@ -15,16 +15,10 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
         pWidth = 100;
         layoutHAlign = LEFT;
     }
-
-    private function set_item_index(value:Int):Int {
-        item_index = value;
-        skin = item_index % 2 == 1 ? [new ColorSkin(0xdddddd)] : [new ColorSkin(0xcccccc)];
-        return item_index;
-    }
-
     private function set_data(value:T):T {
         data = value;
         text = Std.string(value);
+        skin = item_index % 2 == 1 ? [new ColorSkin(0xdddddd)] : [new ColorSkin(0xcccccc)];
         return value;
     }
 }

src/main/haxework/gui/skin/ButtonColorSkin.hx

@@ -19,8 +19,8 @@ class ButtonColorSkin implements ISkin<ButtonView> {
     private function set_color(value:Int):Int {
         colors = new Map<ButtonState, Int>();
         colors.set(ButtonState.UP, value);
-        colors.set(ButtonState.DOWN, ColorUtils.diff(value, -64));
+        colors.set(ButtonState.DOWN, ColorUtils.diff(value, -32));
-        colors.set(ButtonState.OVER, ColorUtils.diff(value, 64));
+        colors.set(ButtonState.OVER, ColorUtils.diff(value, 32));
         //disable = ColorUtils.multiply(value, 0.6);
         return value;
     }
@@ -29,7 +29,8 @@ class ButtonColorSkin implements ISkin<ButtonView> {
         var color:Int = selectColor(view);
         var graphics:Graphics = view.content.graphics;
         graphics.beginFill(color, alpha);
-        graphics.drawRect(0, 0, view.width, view.height);
+        graphics.lineStyle(2, ColorUtils.multiply(color, 1.5));
+        graphics.drawRoundRect(1, 1, view.width - 2, view.height - 2, 5, 5);
     }
 
     private function selectColor(view:ButtonView):Int {

src/main/haxework/gui/skin/ButtonSkin.hx

@@ -1,10 +0,0 @@
-package haxework.gui.skin;
-
-import haxework.gui.ButtonView;
-
-class ButtonSkin {
-
-    public static function color(color: Int, alpha: Float = 1.0): ISkin<ButtonView> {
-        return new ButtonColorSkin(color, alpha);
-    }
-}

src/main/haxework/gui/skin/Skin.hx

@@ -23,4 +23,12 @@ class Skin {
     public static function text(fontColor:Int, fontSize:Int, fontFamily:String = null):ISkin<ITextView> {
         return new TextSkin(fontColor, fontSize, fontFamily);
     }
+
+    public static function buttonColor(color: Int, alpha: Float = 1.0): ISkin<ButtonView> {
+        return new ButtonColorSkin(color, alpha);
+    }
+
+    public static function tabColor(color: Int, alpha: Float = 1.0): ISkin<ButtonView> {
+        return new TabColorSkin(color, alpha);
+    }
 }

src/main/haxework/gui/skin/TabColorSkin.hx

@@ -0,0 +1,20 @@
+package haxework.gui.skin;
+
+import flash.display.Graphics;
+import haxework.gui.utils.ColorUtils;
+
+class TabColorSkin extends ButtonColorSkin {
+
+    override public function draw(view:ButtonView):Void {
+        var color:Int = selectColor(view);
+        if (Std.is(view, ToggleButtonView)) {
+            if (!cast(view, ToggleButtonView).on) {
+                color = ColorUtils.multiply(color, 0.5);
+            }
+        }
+        var graphics:Graphics = view.content.graphics;
+        graphics.beginFill(color, alpha);
+        graphics.lineStyle(2, ColorUtils.multiply(color, 1.5));
+        graphics.drawRoundRectComplex(1, 1, view.width - 2, view.height - 2, 5, 5, 0, 0);
+    }
+}