[view] add Theme

demo/src/demo/AppTheme.hx

@@ -0,0 +1,35 @@
+package demo;
+
+import haxework.color.Color;
+import haxework.view.core.Geometry;
+import haxework.view.skin.Skin;
+import haxework.view.theme.Theme;
+
+using haxework.color.ColorUtil;
+
+class AppTheme extends Theme {
+
+    public function new(?color:Color, ?textColor:Color):Void {
+        super({name: "Courirer"}, {light: color, text: textColor});
+        var background = Skin.color(0x000000);
+        var border = Skin.border(colors.light.multiply(1.5), 1, 2);
+        data.set("text0", [
+            Skin.color(colors.light.diff(128)),
+            text(colors.light.diff(-128)),
+        ]);
+        data.set("text1", [
+            Skin.color(colors.light.diff(64)),
+            text(colors.light.diff(-128)),
+        ]);
+        data.set("text", data.get("text0"));
+        data.set("background", [background]);
+        data.set("button", [Skin.buttonColor(colors.light), text(colors.text)]);
+        data.set("tab", [Skin.tabColor(colors.light), text(colors.text), Skin.geometry(new Geometry().setPadding([25, 8]))]);
+        data.set("view", [Skin.color(colors.light), border, text(colors.text)]);
+        data.set("scroll", [Skin.scrollVertical(colors.light, colors.light.diff(128))]);
+        data.set("border", [border]);
+        data.set("panel", [background, border]);
+
+        data.set("test", [Skin.color(0x00ffff)]);
+    }
+}

demo/src/demo/Demo.hx

@@ -24,10 +24,11 @@ import haxework.log.TraceLogger;
     }
 
     private function choiceColor():Void {
-        new ColorPopup()
+        // ToDo: update Theme
+        /*new ColorPopup()
         .show()
-        .then(function(color) Theme.setColor(color))
-        .catchError(function(e) {});
+        .then(function(color) AppTheme.setColor(color))
+        .catchError(function(e) {});*/
     }
 }
 
@@ -36,9 +37,8 @@ class Demo extends App implements DemoListener {
     public static function main() {
         L.push(new TraceLogger());
 
-        var app = new Demo();
+        var app = new Demo(new AppTheme());
         app.resources.image.put("logo", HaxeLogo.resolve());
-        Theme.setColor(0x33aa33);
         app.start(new DemoView());
 
         var dispatcher = new DemoDispatcher();

demo/src/demo/Theme.hx

@@ -1,40 +0,0 @@
-package demo;
-
-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: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(color.multiply(1.5), 1, 2);
-        resources.skin.put("text0", [
-            Skin.color(color.diff(128)),
-            new TextSkin(color.diff(-128), 16, "Courirer"),
-        ]);
-        resources.skin.put("text1", [
-            Skin.color(color.diff(64)),
-            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, Skin.geometry(new Geometry().setPadding([25, 8]))]);
-        resources.skin.put("view", [Skin.color(color), border, text]);
-        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/SelectForm.yaml

@@ -18,11 +18,16 @@ views:
         layout.margin: 2
         dataView.layout.margin: 1
         labelSkinId: text
-        labelBuilder: ~function(item) return item.label
+        labelBuilder: |
+            ~function(item:{id:Int,label:String}):String {
+                var result = item.label;
+                result += " (" + item.id + ")";
+                return result;
+            }
         data:
-            - {id: 1, label: "item 1", $type: Dynamic}
-            - {id: 2, label: "item 2", $type: Dynamic}
-            - {id: 3, label: "item 3", $type: Dynamic}
-            - {id: 4, label: "item 4", $type: Dynamic}
+            - {id: 1, label: "Aaaaaaaa", $type: Dynamic}
+            - {id: 2, label: "Bbbbbb", $type: Dynamic}
+            - {id: 3, label: "Cccc", $type: Dynamic}
+            - {id: 4, label: "Ddd", $type: Dynamic}
         selectedId: 1
         +onSelect: ~function(value) trace('select', value)