[theme] use ResMap for theme skins

demo/src/demo/AppTheme.hx

@@ -1,7 +1,6 @@
 package demo;
 
 import haxework.color.Color;
-import haxework.view.core.Geometry;
 import haxework.view.skin.Skin;
 import haxework.view.theme.Theme;
 
@@ -11,25 +10,11 @@ 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)]);
+    override private function reload():Void {
+        super.reload();
+        data.put("view", text().concat(background(colors.light)).concat(border()));
+        data.put("test", [Skin.color(0x00ffff)]);
     }
 }

demo/src/demo/Demo.hx

@@ -2,6 +2,7 @@ package demo;
 
 import demo.dispatch.DemoDispatcher;
 import demo.popup.ColorPopup;
+import demo.popup.FontPopup;
 import haxework.App;
 import haxework.log.TraceLogger;
 import haxework.net.JsonLoader;
@@ -24,11 +25,11 @@ import haxework.view.IView;
     }
 
     private function choiceColor():Void {
-        // ToDo: update Theme
-        new ColorPopup()
-        .show();
-        /*.then(function(color) AppTheme.setColor(color))
-        .catchError(function(e) {});*/
+        new ColorPopup().show().then(function(color) theme.colors = {light: color});
+    }
+
+    private function choiceFont():Void {
+        new FontPopup().show().then(function(font) theme.font = font);
     }
 }
 
@@ -53,7 +54,7 @@ class Demo extends App implements DemoListener {
         dispatcher.test3Signal.emit(1, "test");
         dispatcher.test4Signal.emit(app);
 
-        new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
+        new JsonLoader().GET("https://embed.tvbit.co/channel/data2/renova.json")
         .then(function(data:Array<Model>) {
             app.resources.any.put("data", data);
             app.resources.any.put("data50", Util.marray(data, 50));

demo/src/demo/DemoView.yaml

@@ -23,7 +23,6 @@ views:
       selected: "list"
     - id: switcher
       $type: haxework.view.frame.FrameSwitcher
-      skinId: panel
       animateFactory: { $class: haxework.animate.SlideAnimate }
       +onSwitch: ~onFrameSwitch
       geometry.size.stretch: true
@@ -40,23 +39,18 @@ views:
       layout.margin: 10
       views:
           - $type: haxework.view.form.ButtonView
-            geometry.padding: [25, 8]
-            skinId: button
             text: Color
             +onPress: ~choiceColor()
+          - $type: haxework.view.form.ButtonView
+            text: Font
+            +onPress: ~choiceFont()
               # separator
           - $type: haxework.view.SpriteView
             geometry.size.stretch: true
           - $type: haxework.view.form.ButtonView
-            geometry.padding: [25, 8]
-            skinId: button
             text: OK
           - $type: haxework.view.form.ButtonView
-            geometry.padding: [25, 8]
-            skinId: button
             text: Apply
           - $type: haxework.view.form.ButtonView
-            geometry.padding: [25, 8]
-            skinId: button
             text: Cancel
             +onPress: ~flash.system.System.exit(0)

demo/src/demo/form/DataForm.hx

@@ -14,7 +14,6 @@ import haxework.view.text.TextView;
         label.geometry.size.percent.width = 100;
         label.geometry.margin = 1;
         label.geometry.padding = 2;
-        label.skinId = "text";
         label.text = (value.title != null ? '${value.title}\n-\n' : '') + value.message;
         return label;
     }

demo/src/demo/form/DataForm.yaml

@@ -2,7 +2,6 @@
 views:
   - $type: haxework.view.ScrollView
     geometry.size.stretch: true
-    scroll.skinId: scroll
     view:
       id: data
       $type: haxework.view.data.DataView

demo/src/demo/form/ListForm.yaml

@@ -7,5 +7,4 @@ views:
     geometry.size.stretch: true
     scroll:
       $type: haxework.view.list.VScrollBarView
-      skinId: scroll
     data: $r:any:data50

demo/src/demo/form/SelectForm.yaml

@@ -5,7 +5,6 @@ views:
     -   $type: haxework.view.form.SelectView<String>
         layout.margin: 2
         dataView.layout.margin: 1
-        labelSkinId: text
         data:
             - "value 1"
             - "value 2"
@@ -17,7 +16,6 @@ views:
     -   $type: haxework.view.form.SelectView.SelectIdView<{id:Int,label:String}, Int>
         layout.margin: 2
         dataView.layout.margin: 1
-        labelSkinId: text
         labelBuilder: |
             ~function(item:{id:Int,label:String}):String {
                 var result = item.label;

demo/src/demo/form/TailForm.yaml

@@ -2,7 +2,6 @@
 views:
   - $type: haxework.view.ScrollView
     geometry.size.stretch: true
-    scroll.skinId: scroll
     view:
       id: data
       $type: haxework.view.data.DataView

demo/src/demo/popup/ColorPopup.yaml

@@ -6,7 +6,7 @@ view:
     geometry.padding: 10
     geometry.hAlign: center
     geometry.vAlign: middle
-    skinId: panel
+    skinId: frame
     views:
         - id: colors
           $type: haxework.view.data.DataView
@@ -29,7 +29,5 @@ view:
           layout.margin: 10
           views:
             - $type: haxework.view.form.ButtonView
-              geometry.padding: [25, 8]
-              skinId: button
               text: Cancel
               +onPress: ~reject('cancel')

demo/src/demo/popup/FontPopup.hx

@@ -0,0 +1,47 @@
+package demo.popup;
+
+import flash.text.Font;
+import flash.text.FontType;
+import haxework.view.list.LabelListItem;
+import haxework.view.list.ListView;
+import haxework.view.popup.PopupView;
+import haxework.view.theme.ITheme;
+
+class FontLabelView extends LabelListItem<ThemeFont> {
+
+    override private function set_data(value:ThemeFont):ThemeFont {
+        skinId = item_index % 2 == 0 ? "light" : "dark";
+        data = value;
+        text = value.name;
+        fontFamily = value.name;
+        fontEmbed = value.embed;
+        return data;
+    }
+}
+
+@:template class FontPopup extends PopupView<ThemeFont> {
+
+    @:view var fonts:ListView<ThemeFont>;
+
+    private function init():Void {
+        var values:Array<ThemeFont> = Font.enumerateFonts(true).map(function(font:Font) {
+            return {
+                name: font.fontName,
+                embed: switch font.fontType {
+                    case DEVICE: false;
+                    case _: true;
+                }
+            }
+        });
+        values.sort(function(a:ThemeFont, b:ThemeFont) {
+            return switch [a.embed, b.embed] {
+                case [false, true]: 1;
+                case [true, false]: -1;
+                case _: 0;
+            }
+        });
+        fonts.data = values;
+    }
+
+    private function fontViewFactory() return new FontLabelView();
+}

demo/src/demo/popup/FontPopup.yaml

@@ -0,0 +1,25 @@
+---
+view:
+    $type: haxework.view.group.VGroupView
+    geometry.size.width: 400
+    geometry.size.height: 80%
+    geometry.padding: 10
+    geometry.hAlign: center
+    geometry.vAlign: middle
+    skinId: frame
+    views:
+        - id: fonts
+          $type: haxework.view.list.VListView
+          geometry.size.stretch: true
+          factory: ~fontViewFactory
+          +onItemSelect: ~function(item) close(item.data)
+          scroll:
+              $type: haxework.view.list.VScrollBarView
+        - $type: haxework.view.group.HGroupView
+          geometry.size.width: 100%
+          geometry.margin.top: 10
+          layout.hAlign: right
+          views:
+              - $type: haxework.view.form.ButtonView
+                text: Cancel
+                +onPress: ~reject('cancel')

src/main/haxework/view/View.hx

@@ -136,8 +136,12 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_skinId(value:String):String {
-        skin = theme != null ? theme.resolve(value) : [];
-        return value;
+        //skin = theme != null ? theme.resolve(value) : [];
+        skinId = value;
+        if (theme != null) {
+            theme.bind(skinId, this);
+        }
+        return skinId;
     }
 
     private function set_visible(value:Bool):Bool {

src/main/haxework/view/form/ButtonView.hx

@@ -23,6 +23,7 @@ class ButtonView extends LabelView {
 
     public function new() {
         super();
+        skinId = "button";
         overed = false;
         downed = false;
         state = ButtonState.UP;

src/main/haxework/view/form/LabelView.hx

@@ -8,6 +8,7 @@ class LabelView extends TextView {
 
     public function new() {
         super();
+        skinId = "label";
         fill = false;
         textField.selectable = false;
         textField.wordWrap = false;

src/main/haxework/view/form/SelectView.hx

@@ -66,7 +66,7 @@ class SelectView<D> extends GroupView {
         currentView = new ButtonView();
         currentView.onPress.connect(function(_) toggle());
         dataView = new DataView();
-        dataView.skin = [Skin.transparent];
+        dataView.skinId = "dropdown";
         dataView.geometry.position = ABSOLUTE;
         dataView.factory = factory;
         dataView.onDataSelect.connect(function(value:D):Void {
@@ -81,7 +81,9 @@ class SelectView<D> extends GroupView {
         var result = new LabelView();
         result.layout.hAlign = LEFT;
         result.geometry.size.percent.width = 100;
+        if (labelSkinId != null) {
             result.skinId = labelSkinId;
+        }
         result.text = labelBuilder(value);
         return result;
     }

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

@@ -9,6 +9,7 @@ class FrameView<D> extends GroupView {
 
     public function new(frameId:String, ?layout:ILayout) {
         super(layout != null ? layout : new VerticalLayout());
+        skinId = "frame";
         this.frameId = frameId;
         this.geometry.size.stretch = true;
     }

src/main/haxework/view/list/HScrollBarView.hx

@@ -6,6 +6,7 @@ class HScrollBarView extends ScrollBarView {
 
     public function new() {
         super();
+        skinId = "scroll.horizontal";
         geometry.size.percent.width = 100;
         geometry.size.fixed.height = 10;
     }

src/main/haxework/view/list/VScrollBarView.hx

@@ -6,6 +6,7 @@ class VScrollBarView extends ScrollBarView {
 
     public function new() {
         super();
+        skinId = "scroll.vertical";
         geometry.size.percent.height = 100;
         geometry.size.fixed.width = 10;
     }

src/main/haxework/view/text/TextView.hx

@@ -34,6 +34,7 @@ class TextView extends SpriteView implements ITextView {
 
     public function new() {
         super();
+        skinId = "text";
         layout = new Layout();
         textField = buildTextField();
         textField.width = 1;

src/main/haxework/view/theme/ITheme.hx

@@ -1,6 +1,5 @@
 package haxework.view.theme;
 
-import haxework.view.text.ITextView;
 import haxework.color.Color;
 import haxework.view.skin.ISkin;
 
@@ -18,13 +17,15 @@ typedef ThemeColors = {
 }
 
 interface ITheme {
-    public var font(default, null):ThemeFont;
-    public var colors(default, null):ThemeColors;
+    public var font(default, set):ThemeFont;
+    public var colors(default, set):ThemeColors;
 
     public function resolve(id:String):SkinSet;
-    public function resolve2(ids:Array<String>):SkinSet;
+    public function bind(id:String, view:IView<Dynamic>):Void;
 
-    // ToDo:
-    public function text(color:Color):ISkin<ITextView>;
-    public function textBox(color:Color):SkinSet;
+    public function background(?color:Color):SkinSet;
+    public function border(?color:Color):SkinSet;
+    public function text(?color:Color):SkinSet;
+    public function button(?color:Color, ?textColor:Color):SkinSet;
+    public function textBox(?color:Color):SkinSet;
 }

src/main/haxework/view/theme/Theme.hx

@@ -1,11 +1,12 @@
 package haxework.view.theme;
 
+import haxework.resources.Resources.ResMap;
 import flash.text.Font;
 import flash.text.FontType;
 import haxework.color.Color;
+import haxework.view.core.Geometry;
 import haxework.view.skin.ISkin;
 import haxework.view.skin.Skin;
-import haxework.view.text.ITextView;
 import haxework.view.theme.ITheme;
 
 using haxework.color.ColorUtil;
@@ -16,19 +17,111 @@ class Theme implements ITheme {
     public var bigFontSize = 22;
     public var veryBigFontSize = 24;
 
-    public var font(default, null):ThemeFont;
-    public var colors(default, null):ThemeColors;
+    public var font(default, set):ThemeFont;
+    public var colors(default, set):ThemeColors;
 
-    private var data:Map<String, SkinSet>;
+    private var data:ResMap<SkinSet>;
 
     public function new(?font:ThemeFont, ?colors:ThemeColors) {
-        data = new Map();
-        this.font = resolveFont(font);
-        this.colors = resolveColors(colors);
+        data = new ResMap();
+        this.font = font;
+        this.colors = colors;
         L.d("Theme", 'font: ${this.font}');
         L.d("Theme", 'colors: ${this.colors}');
     }
 
+    private function set_font(value:ThemeFont):ThemeFont {
+        font = resolveFont(value);
+        if (font != null && colors != null) {
+            reload();
+        }
+        return font;
+    }
+
+    private function set_colors(value:ThemeColors):ThemeColors {
+        colors = resolveColors(value);
+        if (font != null && colors != null) {
+            reload();
+        }
+        return colors;
+    }
+
+    private function reload():Void {
+        data.put("background", background());
+        data.put("border", border());
+        data.put("frame", background().concat(border()).concat([Skin.geometry(new Geometry().setPadding(2))]));
+
+        data.put("text", text());
+        data.put("label", text().concat([Skin.geometry(new Geometry().setPadding([8, 2]))]));
+        data.put("button", button());
+        data.put("dropdown", background().concat(border()));
+        data.put("tab", text().concat([
+            Skin.tabColor(this.colors.light),
+            Skin.geometry(new Geometry().setPadding([25, 8]))
+        ]));
+
+        data.put("text0", text().concat(background(this.colors.light.diff(-16))));
+        data.put("text1", text().concat(background(this.colors.light.diff(16))));
+        data.put("scroll.vertical", [
+            Skin.scrollVertical(this.colors.light, this.colors.dark),
+        ]);
+        data.put("scroll.horizontal", [
+            Skin.scrollHorizontal(this.colors.light, this.colors.dark),
+        ]);
+    }
+
+    public function background(?color:Color):SkinSet {
+        if (color == null) {
+            color = colors.dark;
+        }
+        return [
+            Skin.color(color),
+        ];
+    }
+
+    public function border(?color:Color):SkinSet {
+        if (color == null) {
+            color = colors.border;
+        }
+        return [
+            Skin.border(color, 1, 2),
+        ];
+    }
+
+    public function text(?color:Color):SkinSet {
+        if (color == null) {
+            color = colors.text;
+        }
+        return [
+            Skin.text(color, baseFontSize, font.name, font.embed),
+        ];
+    }
+
+    public function button(?color:Color, ?textColor:Color):SkinSet {
+        if (color == null) {
+            color = colors.light;
+        }
+        return text(textColor).concat([
+            Skin.buttonColor(color),
+            Skin.geometry(new Geometry().setPadding([25, 8])),
+        ]);
+    }
+
+    public function textBox(?color:Color):SkinSet {
+        return text(color).concat([
+            Skin.color(0x000000, 0.1),
+            Skin.border(colors.light, 1, 2),
+        ]);
+    }
+
+    public function bind(id:String, view:IView<Dynamic>):Void {
+        data.bind(id, view, "skin");
+    }
+
+    public function resolve(id:String):SkinSet {
+        return data.exists(id) ? data.get(id) : [];
+    }
+
     private static function resolveFont(font:ThemeFont):ThemeFont {
         if (font == null) {
             font = {};
@@ -55,7 +148,7 @@ class Theme implements ITheme {
             colors = {};
         }
         var light:Color = colors.light != null ? colors.light : 0x33aa33;
-        var dark:Color = colors.dark != null ? colors.dark : light.diff(64);
+        var dark:Color = colors.dark != null ? colors.dark : light.diff(-64);
         var text:Color = colors.text != null ? colors.text : 0xffffff;
         var border:Color = colors.border != null ? colors.border : light.multiply(1.5);
         var active:Color = colors.active != null ? colors.active : 0x00ff00;
@@ -67,30 +160,4 @@ class Theme implements ITheme {
             active: active,
         }
     }
-
-    public function resolve(id:String):SkinSet {
-        return data.exists(id) ? data.get(id) : [];
-    }
-
-    public function resolve2(ids:Array<String>):SkinSet {
-        var result = [];
-        for (id in ids) {
-            if (data.exists(id)) {
-                result = result.concat(data.get(id));
-            }
-        }
-        return result;
-    }
-
-    public function text(color:Color):ISkin<ITextView> {
-        return Skin.text(color, baseFontSize, font.name, font.embed);
-    }
-
-    public function textBox(color:Color):SkinSet {
-        return [
-            Skin.color(0x000000, 0.1),
-            Skin.border(colors.light, 1, 2),
-            text(color),
-        ];
-    }
 }