[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
-            skin: $r:skin:button
+          - id: list_form
+            $type: haxework.gui.ToggleButtonView
+            skin: $r:skin:tab
             contentSize: true
-            paddings: 8
-            text: List Form
+            paddings: [25, 8]
+            text: List
             +onPress: "$code:function(_) switcher.change('list_form')"
-          - $type: haxework.gui.ButtonView
-            skin: $r:skin:button
+          - id: tail_form
+            $type: haxework.gui.ToggleButtonView
+            skin: $r:skin:tab
             contentSize: true
-            paddings: 8
-            text: Tail Form
+            paddings: [25, 8]
+            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 ] ]
-      paddings: 5
+      skin: $r:skin:border
+      +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);
         }