[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')