[view] add Theme

src/main/haxework/App.hx

@@ -11,15 +11,18 @@ import haxework.resources.Resources;
 import haxework.view.IView;
 import haxework.view.popup.PopupManager;
 import haxework.view.Root;
+import haxework.view.theme.ITheme;
 
 class App {
 
     @:provide var app:App;
+    @:provide var theme:ITheme;
     @:provide var resources:IResources;
     @:provide var loaderManager:ILoaderManager;
     @:provide var popupManager:PopupManager;
 
-    public function new() {
+    public function new(?theme:ITheme) {
+        this.theme = theme;
         resources = new Resources();
         loaderManager = new LoaderManager();
         popupManager = new PopupManager();

src/main/haxework/resources/IResources.hx

@@ -2,7 +2,6 @@ package haxework.resources;
 
 import flash.display.BitmapData;
 import flash.display.MovieClip;
-import haxework.view.skin.ISkin.SkinSet;
 import haxework.resources.Resources.ResMap;
 
 interface IResources {
@@ -13,5 +12,4 @@ interface IResources {
     public var float(default, null):ResMap<Float>;
     public var int(default, null):ResMap<Int>;
     public var any(default, null):ResMap<Dynamic>;
-    public var skin(default, null):ResMap<SkinSet>;
 }

src/main/haxework/resources/Resources.hx

@@ -3,7 +3,6 @@ package haxework.resources;
 import flash.display.BitmapData;
 import flash.display.MovieClip;
 import haxe.ds.StringMap;
-import haxework.view.skin.ISkin;
 
 private typedef Listener = {object:Dynamic, field:String};
 
@@ -54,7 +53,6 @@ class Resources implements IResources {
     public var float(default, null):ResMap<Float>;
     public var int(default, null):ResMap<Int>;
     public var any(default, null):ResMap<Dynamic>;
-    public var skin(default, null):ResMap<SkinSet>;
 
     public function new() {
         image = new ResMap<BitmapData>();
@@ -64,6 +62,5 @@ class Resources implements IResources {
         float = new ResMap<Float>();
         int = new ResMap<Int>();
         any = new ResMap<Dynamic>();
-        skin = new ResMap<SkinSet>();
     }
 }

src/main/haxework/view/SelectView.hx

@@ -1,5 +1,6 @@
 package haxework.view;
 
+import haxework.view.core.HAlign;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 import haxework.signal.Signal;
@@ -75,6 +76,8 @@ class SelectView<D> extends GroupView {
 
     private function factory(index:Int, value:D):LabelView {
         var result = new LabelView();
+        result.layout.hAlign = LEFT;
+        result.geometry.size.percent.width = 100;
         result.skinId = labelSkinId;
         result.text = labelBuilder(value);
         return result;

src/main/haxework/view/View.hx

@@ -3,16 +3,17 @@ package haxework.view;
 import flash.display.DisplayObject;
 import flash.display.InteractiveObject;
 import flash.geom.Rectangle;
-import haxework.resources.IResources;
 import haxework.view.core.Geometry;
 import haxework.view.skin.ISkin;
+import haxework.view.theme.ITheme;
 
 class View<C:DisplayObject> implements IView<C> {
-    @:provide private var r:IResources;
 
     private static var counter:Int = 0;
     public static var updater(default, null):ViewUpdater = new ViewUpdater();
 
+    @:provide var theme:ITheme;
+
     public var id(default, default):String;
 
     public var x(default, set):Float;
@@ -134,7 +135,7 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_skinId(value:String):String {
-        r.skin.bind(value, this, "skin");
+        skin = theme != null ? theme.resolve(value) : [];
         return value;
     }
 

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

@@ -0,0 +1,29 @@
+package haxework.view.theme;
+
+import haxework.color.Color;
+import haxework.view.skin.ISkin;
+
+typedef ThemeFont = {
+    @:optional var name:String;
+    @:optional var embed:Bool;
+}
+
+typedef ThemeColors = {
+    @:optional var light:Color;
+    @:optional var dark:Color;
+    @:optional var text:Color;
+    @:optional var border:Color;
+    @:optional var active:Color;
+}
+
+interface ITheme {
+    public var font(default, null):ThemeFont;
+    public var colors(default, null):ThemeColors;
+
+    public function resolve(id:String):SkinSet;
+    public function resolve2(ids:Array<String>):SkinSet;
+
+    // ToDo:
+    public function text(color:Color):ISkin<ITextView>;
+    public function textBox(color:Color):SkinSet;
+}

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

@@ -0,0 +1,95 @@
+package haxework.view.theme;
+
+import flash.text.FontType;
+import flash.text.Font;
+import haxework.color.Color;
+import haxework.view.skin.ISkin;
+import haxework.view.skin.Skin;
+import haxework.view.theme.ITheme;
+
+using haxework.color.ColorUtil;
+
+class Theme implements ITheme {
+    // ToDo: configurable
+    public var baseFontSize = 18;
+    public var bigFontSize = 22;
+    public var veryBigFontSize = 24;
+
+    public var font(default, null):ThemeFont;
+    public var colors(default, null):ThemeColors;
+
+    private var data:Map<String, SkinSet>;
+
+    public function new(?font:ThemeFont, ?colors:ThemeColors) {
+        data = new Map();
+        this.font = resolveFont(font);
+        this.colors = resolveColors(colors);
+        L.d("Theme", 'font: ${this.font}');
+        L.d("Theme", 'colors: ${this.colors}');
+    }
+
+    private static function resolveFont(font:ThemeFont):ThemeFont {
+        if (font == null) {
+            font = {};
+        }
+        var fonts = Font.enumerateFonts(!font.embed);
+        for (item in fonts) {
+            trace(item.fontName);
+        }
+        if (font.name == null) {
+            var flashFont = Font.enumerateFonts(!font.embed)[0];
+            font = {
+                name: flashFont.fontName,
+                embed: switch flashFont.fontType {
+                    case DEVICE: false;
+                    case _: true;
+                }
+            }
+        }
+        return font;
+    }
+
+    private static function resolveColors(colors:ThemeColors):ThemeColors {
+        if (colors == null) {
+            colors = {};
+        }
+        var light:Color = colors.light != null ? colors.light : 0x33aa33;
+        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;
+        return {
+            light: light,
+            dark: dark,
+            text: text,
+            border: border,
+            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),
+        ];
+    }
+}