[skin] update

demo/src/demo/Demo.hx

@@ -1,5 +1,7 @@
 package demo;
 
+import haxework.resources.Resources;
+import haxework.resources.IResources;
 import haxework.gui.frame.IFrameSwitcher;
 import haxework.net.manage.LoaderManager;
 import haxework.net.manage.ILoaderManager;
@@ -9,11 +11,14 @@ import haxework.gui.VGroupView;
 
 @:template class Demo extends VGroupView {
 
+    @:provide static var resources:IResources;
     @:provide static var manager:ILoaderManager;
 
     public static function main() {
         L.push(new TraceLogger());
+        resources = new Resources();
         manager = new LoaderManager();
+        Style.register();
         var demo = new Demo();
         demo.switcher.change("list_form");
         Root.bind(demo);

demo/src/demo/Demo.yaml

@@ -1,27 +1,31 @@
 ---
 pWidth: 100
 pHeight: 100
-skin: [ $type: [haxework.gui.skin.Skin.color, 0x333333] ]
+skin: $r:skin:background
 views:
     - $type: haxework.gui.HGroupView
-      layoutMargin: 10
+      layoutMargin: 5
+      layoutHAlign: LEFT
+      leftPadding: 5
       pWidth: 100
       height: 40
       views:
           - $type: haxework.gui.ButtonView
-            skin: $raw:Style.buttonSkin
+            skin: $r:skin:button
             contentSize: true
             paddings: 8
             text: List Form
-            +onPress: "$raw:function(_) switcher.change('list_form')"
+            +onPress: "$code:function(_) switcher.change('list_form')"
           - $type: haxework.gui.ButtonView
-            skin: $raw:Style.buttonSkin
+            skin: $r:skin:button
             contentSize: true
             paddings: 8
             text: Tail Form
-            +onPress: "$raw:function(_) switcher.change('tail_form')"
+            +onPress: "$code:function(_) switcher.change('tail_form')"
     - id: switcher
       $type: haxework.gui.frame.FrameSwitcher
+      skin: [ $type: [ haxework.gui.skin.Skin.border, 0x33aa33, 1, 2 ] ]
+      paddings: 5
       pWidth: 100
       pHeight: 100
       views:

demo/src/demo/Style.hx

@@ -1,23 +1,45 @@
 package demo;
 
+import haxework.gui.list.ScrollBarSkin;
+import haxework.resources.IResources;
 import haxework.gui.skin.ISkin;
-import haxework.gui.skin.ButtonColorSkin;
-import haxework.gui.skin.TextSkin;
+import haxework.gui.skin.ButtonSkin;
 import haxework.gui.skin.Skin;
-import haxework.gui.skin.ISkin.SkinSet;
+import haxework.gui.skin.TextSkin;
 
 class Style {
 
-    public static var textSkin = new TextSkin(0xffffff, "Courirer");
+    @:provide static var resources:IResources;
 
-    public static var buttonSkin: SkinSet = [
-        new ButtonColorSkin(0x33aa33),
-        textSkin,
+    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 viewSkin:SkinSet = [
-        Skin.color(0x33aa33),
-        Skin.border(0xffffff),
-        textSkin,
+    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/form/ListForm.yaml

@@ -1,8 +1,6 @@
 ---
 $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>
@@ -12,36 +10,7 @@ views:
       pHeight: 100
       scroll:
           $type: haxework.gui.list.VScrollBarView
+          skin: $r:skin:scroll
           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

@@ -14,7 +14,7 @@ import haxework.gui.TextView;
             var view = new TextView();
             view.width = 100 + 100 * Math.random();
             view.height = 100 + 100 * Math.random();
-            view.skin = Style.viewSkin;
+            view.skin = Style.view;
             view.text = 'View #${i}';
             group.addView(view);
         }

demo/src/demo/form/TailForm.yaml

@@ -3,18 +3,16 @@ 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
+          skin: $r:skin:scroll
           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