[view] fixes

demo/build.hxml

@@ -5,10 +5,10 @@
 --macro haxework.parser.Parser.auto()
 -debug
 -D native_trace
--D dev_layout
+#-D dev_layout
 -swf-version 10.1
 -swf-header 800:600:30:000000
 
--main demo.Test
+-main demo.Demo
 -swf target/demo.swf
 #-as3 target

demo/src/demo/AppTheme.hx

@@ -1,7 +1,6 @@
 package demo;
 
 import haxework.color.Color;
-import haxework.view.skin.Skin;
 import haxework.view.theme.Theme;
 
 using haxework.color.ColorUtil;
@@ -14,7 +13,7 @@ class AppTheme extends Theme {
 
     override private function reload():Void {
         super.reload();
-        data.put("view", text().concat(background(colors.light)).concat(border()));
+//        data.put("view", text().concat(background(colors.light)).concat(border()));
-        data.put("test", [Skin.color(0x00ffff)]);
+//        data.put("test", [Skin.color(0x00ffff)]);
     }
 }

demo/src/demo/DemoView.yaml

@@ -1,6 +1,6 @@
 ---
-skinId: background
+style: background
-geometry.size.stretch: true
+geometry.stretch: true
 views:
     - $type: haxework.view.ImageView
       geometry.padding: 10
@@ -9,10 +9,10 @@ views:
       $type: haxework.view.data.ButtonGroup<String>
       layout.margin: 5
       layout.hAlign: left
-      geometry.size.width: 100%
+      geometry.width: 100%
       geometry.padding.left: 5
       geometry.margin.bottom: -3
-      buttonSkinId: tab
+      buttonStyle: tab
       +onDataSelect: ~function(id) switcher.change(id)
       data:
         - "list"
@@ -25,7 +25,7 @@ views:
       $type: haxework.view.frame.FrameSwitcher
       animateFactory: { $class: haxework.animate.SlideAnimate }
       +onSwitch: ~onFrameSwitch
-      geometry.size.stretch: true
+      geometry.stretch: true
       geometry.padding: 5
       factory:
         _list_: {$class: demo.form.ListForm}
@@ -34,7 +34,7 @@ views:
         _test_layout_: {$class: demo.form.TestLayoutForm}
         _select_: {$class: demo.form.SelectForm}
     - $type: haxework.view.group.HGroupView
-      geometry.size.percent.width: 100
+      geometry.width: 100%
       geometry.padding: 10
       layout.margin: 10
       views:
@@ -46,7 +46,7 @@ views:
             +onPress: ~choiceFont()
               # separator
           - $type: haxework.view.SpriteView
-            geometry.size.stretch: true
+            geometry.stretch: true
           - $type: haxework.view.form.ButtonView
             text: OK
           - $type: haxework.view.form.ButtonView

demo/src/demo/form/DataForm.hx

@@ -3,7 +3,6 @@ package demo.form;
 import haxework.view.frame.FrameView;
 import haxework.view.text.TextView;
 
-
 @:template class DataForm extends FrameView<Dynamic> {
     public function new() {
         super("data");
@@ -11,7 +10,7 @@ import haxework.view.text.TextView;
 
     private function factory(index:Int, value:Model):TextView {
         var label = new TextView();
-        label.geometry.size.percent.width = 100;
+        label.geometry.width.percent = 100;
         label.geometry.margin = 1;
         label.geometry.padding = 2;
         label.text = (value.title != null ? '${value.title}\n-\n' : '') + value.message;

demo/src/demo/form/DataForm.yaml

@@ -1,12 +1,12 @@
 ---
 views:
     -   $type: haxework.view.ScrollView
-    geometry.size.stretch: true
+        geometry.stretch: true
         view:
             id: data
             $type: haxework.view.data.DataView
             layout:
                 $type: haxework.view.layout.VerticalLayout
             factory: ~factory
-      geometry.size.width: 100%
+            geometry.width: 100%
             data: $r:any:data

demo/src/demo/form/ListForm.yaml

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

demo/src/demo/form/TailForm.hx

@@ -17,18 +17,17 @@ import haxework.view.utils.DrawUtil;
         if (value.image != null) {
             var imageView = new ImageView();
             imageView.stretch = false;
-            imageView.skinId = "border";
+            imageView.style = "border";
             imageView.fillType = FillType.CONTAIN;
             imageView.imageUrl = value.image.url;
             view = imageView;
         } else {
             var textView = new TextView();
-            textView.skinId = "view";
+            textView.style = "view";
             textView.text = '${value.id}\n${value.maker}';
             view = textView;
         }
-        view.geometry.size.fixed.width = 350;
+        view.setSize(350, 200);
-        view.geometry.size.fixed.height = 200;
         return view;
     }
 }

demo/src/demo/form/TailForm.yaml

@@ -1,7 +1,7 @@
 ---
 views:
     -   $type: haxework.view.ScrollView
-    geometry.size.stretch: true
+        geometry.stretch: true
         view:
             id: data
             $type: haxework.view.data.DataView
@@ -9,5 +9,5 @@ views:
                 $type: haxework.view.layout.TailLayout
                 margin: 2
             factory: ~factory
-      geometry.size.width: 100%
+            geometry.width: 100%
             data: $r:any:data

demo/src/demo/form/TestLayoutForm.hx

@@ -22,6 +22,6 @@ import haxework.view.SpriteView;
     private function resize():Void {
         var w = 200 + 400 * Math.random();
         var h = 100 + 200 * Math.random();
-        render.setContentSize(w, h, "render");
+        render.setSize(w, h, "render");
     }
 }

demo/src/demo/form/TestLayoutForm.yaml

@@ -2,7 +2,7 @@
 views:
     -   id: main
         $type: haxework.view.group.VGroupView
-    geometry.size.stretch: true
+        geometry.stretch: true
         layout.hAlign: center
         layout.vAlign: middle
         views:
@@ -10,14 +10,14 @@ views:
                 $type: haxework.view.group.VGroupView
                 layout.margin: 10
                 skin:
-          - $type: [haxework.view.skin.Skin.color, 0xffff00]
+                    $type: [haxework.view.skin.Skin.color, 0xffff00]
                 views:
                     -   id: top
                         $type: haxework.view.group.GroupView
                         layout.hAlign: center
-            geometry.size.width: 100%
+                        geometry.width: 100%
-            geometry.size.height: 20
+                        geometry.height: 20
-            skinId: test
+                        style: test
                     -   id: middle
                         $type: haxework.view.group.HGroupView
                         layout.margin: 10
@@ -25,29 +25,29 @@ views:
                             -   id: left
                                 $type: haxework.view.group.GroupView
                                 layout.vAlign: middle
-                geometry.size.width: 20
+                                geometry.width: 20
-                geometry.size.height: 100%
+                                geometry.height: 100%
-                skinId: test
+                                style: test
                             -   id: render
                                 $type: haxework.view.SpriteView
-                #geometry.size.width: 300
+                                #geometry.width: 300
-                #geometry.size.height: 200
+                                #geometry.height: 200
-                skinId: test
+                                style: test
                             -   id: right
                                 $type: haxework.view.group.GroupView
                                 layout.vAlign: middle
-                geometry.size.width: 20
+                                geometry.width: 20
-                geometry.size.height: 100%
+                                geometry.height: 100%
-                skinId: test
+                                style: test
                                 views:
                                     -   $type: haxework.view.SpriteView
-                    geometry.size.width: 100
+                                        geometry.width: 100
-                    geometry.size.height: 100%
+                                        geometry.height: 100%
                                         skin:
-                      - $type: [haxework.view.skin.Skin.color, 0xff0000]
+                                            $type: [haxework.view.skin.Skin.color, 0xff0000]
                     -   id: bottom
                         $type: haxework.view.group.GroupView
                         layout.hAlign: center
-            skinId: test
+                        style: test
-            geometry.size.width: 100%
+                        geometry.width: 100%
-            geometry.size.height: 20
+                        geometry.height: 20

demo/src/demo/popup/ColorPopup.hx

@@ -8,8 +8,8 @@ import haxework.view.skin.Skin;
 
     private function colorViewFactory(index:Int, color:Int) {
         var view = new ButtonView();
-        view.geometry.size.fixed = [48, 48];
+        view.setSize(48, 48, "fixed");
-        view.skin = [Skin.buttonColor(color)];
+        view.skin = Skin.buttonColor(color);
         return view;
     }
 }

demo/src/demo/popup/ColorPopup.yaml

@@ -1,16 +1,16 @@
 ---
 view:
     $type: haxework.view.group.VGroupView
-    geometry.size.width: 400
+    geometry.width: 400
-    geometry.size.height: 200
+    geometry.height: 200
     geometry.padding: 10
     geometry.hAlign: center
     geometry.vAlign: middle
-    skinId: frame
+    style: frame
     views:
         - id: colors
           $type: haxework.view.data.DataView
-          geometry.size.stretch: true
+          geometry.stretch: true
           layout:
               $type: haxework.view.layout.TailLayout
               vAlign: middle
@@ -24,7 +24,7 @@ view:
               - 0x3333AA
           +onDataSelect: ~close
         - $type: haxework.view.group.HGroupView
-          geometry.size.width: 100%
+          geometry.width: 100%
           layout.hAlign: right
           layout.margin: 10
           views:

demo/src/demo/popup/FontPopup.hx

@@ -10,11 +10,11 @@ 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";
+        style = item_index % 2 == 0 ? "light" : "dark";
         data = value;
         text = value.name;
-        fontFamily = value.name;
+        font.family = value.name;
-        fontEmbed = value.embed;
+        font.embed = value.embed;
         return data;
     }
 }

demo/src/demo/popup/FontPopup.yaml

@@ -1,22 +1,22 @@
 ---
 view:
     $type: haxework.view.group.VGroupView
-    geometry.size.width: 400
+    geometry.width: 400
-    geometry.size.height: 80%
+    geometry.height: 80%
     geometry.padding: 10
     geometry.hAlign: center
     geometry.vAlign: middle
-    skinId: frame
+    style: frame
     views:
         -   id: fonts
             $type: haxework.view.list.VListView
-          geometry.size.stretch: true
+            geometry.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.width: 100%
             geometry.margin.top: 10
             layout.hAlign: right
             views:

demo/src/demo/test/TestView.yaml

@@ -37,6 +37,14 @@ views:
                         skin:
                             $type: haxework.view.skin.ColorSkin
                             color: 0xff0000
+                    -   $type: haxework.view.list.VListView
+                        factory: ~haxework.view.list.LabelListItem.factory
+                        geometry.width: 100
+                        geometry.height: 100
+                        scroll:
+                            $type: haxework.view.list.VScrollBarView
+                        data:
+                            - "aaa"
             -   $type: haxework.view.SpriteView
                 geometry.width: 60%
                 geometry.height: 100%

src/main/haxework/view/IView.hx

@@ -5,6 +5,7 @@ import flash.geom.Rectangle;
 import haxework.view.geometry.Geometry;
 import haxework.view.group.IGroupView;
 import haxework.view.skin.ISkin;
+import haxework.view.theme.StyleId;
 
 interface IView<C:DisplayObject> {
     @:style public var geometry(default, default):Geometry;
@@ -18,7 +19,7 @@ interface IView<C:DisplayObject> {
     public var width(default, null):Float;
     public var height(default, null):Float;
 
-    public var styles(default, default):Array<String>;
+    public var style(default, default):StyleId;
 
     public var content(default, null):C;
 

src/main/haxework/view/ImageView.hx

@@ -1,13 +1,12 @@
 package haxework.view;
 
 import flash.display.BitmapData;
+import haxework.net.ImageLoader;
 import haxework.view.skin.BitmapSkin;
-import haxework.view.skin.ISkin;
 import haxework.view.utils.BitmapUtil;
 import haxework.view.utils.DrawUtil.FillType;
-import haxework.net.ImageLoader;
 
-@:style("image") class ImageView extends SpriteView {
+class ImageView extends SpriteView {
 
     public var image(default, set):BitmapData;
     public var imageUrl(default, set):String;
@@ -26,16 +25,10 @@ import haxework.net.ImageLoader;
         }
     }
 
-    override private function set_skin(value:SkinSet):SkinSet {
-        value = value.slice(0);
-        value.unshift(bitmapSkin);
-        return super.set_skin(value);
-    }
-
     private function set_image(value:BitmapData):BitmapData {
         if (image != value) {
             if (stretch) {
-                setContentSize(value.width, value.height, "image");
+                setSize(value.width, value.height, "image");
             }
             image = value;
             if (color > -1) {

src/main/haxework/view/ScrollView.hx

@@ -4,7 +4,7 @@ import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 import haxework.signal.Signal;
-import haxework.view.geometry.Geometry.Position;
+import haxework.view.geometry.Position;
 import haxework.view.group.HGroupView;
 import haxework.view.list.ScrollBarView;
 import haxework.view.list.VScrollBarView;
@@ -23,7 +23,7 @@ class ScrollView extends HGroupView {
     public function new() {
         super();
         layout.overflow = true;
-        skin = [Skin.color(0x000000, 0.0)];
+        skin = Skin.transparent;
         mask = new Sprite();
         content.addChild(mask);
         content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);

src/main/haxework/view/View.hx

@@ -8,6 +8,7 @@ import haxework.view.geometry.SizeSet;
 import haxework.view.group.IGroupView;
 import haxework.view.skin.ISkin;
 import haxework.view.theme.ITheme;
+import haxework.view.theme.StyleId;
 
 class View<C:DisplayObject> implements IView<C> {
 
@@ -18,7 +19,7 @@ class View<C:DisplayObject> implements IView<C> {
 
     public var geometry(default, default):Geometry;
     public var skin(default, default):ISkin<Dynamic>;
-    public var styles(default, default):Array<String>;
+    public var style(default, default):StyleId;
 
     public var id(default, default):String;
 

src/main/haxework/view/data/ButtonGroup.hx

@@ -1,5 +1,6 @@
 package haxework.view.data;
 
+import haxework.view.theme.StyleId;
 import haxework.view.form.ToggleButtonView;
 import haxework.view.data.DataView.Factory;
 import haxe.EnumTools;
@@ -11,7 +12,7 @@ using haxework.utils.StringUtil;
 class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
 
     public var selected(default, set):D;
-    public var buttonSkinId(default, set):String;
+    public var buttonStyle(default, set):StyleId;
 
     public function new(?layout:ILayout) {
         super(layout != null ? layout : new HorizontalLayout());
@@ -45,20 +46,20 @@ class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
         return selected;
     }
 
-    private function set_buttonSkinId(value:String):String {
+    private function set_buttonStyle(value:StyleId):StyleId {
-        if (buttonSkinId != value) {
+        if (buttonStyle != value) {
-            buttonSkinId = value;
+            buttonStyle = value;
             for (view in dataViews) {
-                view.skinId = buttonSkinId;
+                view.style = buttonStyle;
             }
         }
-        return buttonSkinId;
+        return buttonStyle;
     }
 
     override private function rebuild():Void {
         super.rebuild();
         for (view in dataViews) {
-            view.skinId = buttonSkinId;
+            view.style = buttonStyle;
         }
     }
 

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

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

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

@@ -1,14 +1,14 @@
 package haxework.view.form;
 
-import haxework.view.core.HAlign;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.VAlign;
+import haxework.view.geometry.VAlign;
 import haxework.view.text.TextView;
 
 class LabelView extends TextView {
 
     public function new() {
         super();
-        skinId = "label";
+        style = "label";
         fill = false;
         textField.selectable = false;
         textField.wordWrap = false;

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

@@ -1,11 +1,12 @@
 package haxework.view.form;
 
+import haxework.view.theme.StyleId;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 import haxework.signal.Signal;
-import haxework.view.geometry.Geometry.Position;
-import haxework.view.core.HAlign;
 import haxework.view.data.DataView;
+import haxework.view.geometry.HAlign;
+import haxework.view.geometry.Position;
 import haxework.view.group.GroupView;
 import haxework.view.group.IGroupView;
 import haxework.view.layout.VerticalLayout;
@@ -52,7 +53,7 @@ class SelectView<D> extends GroupView {
     public var currentView(default, null):ButtonView;
     public var dataView(default, null):DataView<D, LabelView>;
 
-    public var labelSkinId(default, set):String;
+    public var labelStyle(default, set):StyleId;
     public var labelBuilder(default, set):D -> String;
     public var data(default, set):Array<D>;
     public var selected(default, set):D;
@@ -62,11 +63,11 @@ class SelectView<D> extends GroupView {
 
     public function new() {
         super(new VerticalLayout());
-        skin = [Skin.transparent];
+        skin = Skin.transparent;
         currentView = new ButtonView();
         currentView.onPress.connect(function(_) toggle());
         dataView = new DataView();
-        dataView.skinId = "dropdown";
+        dataView.style = "dropdown";
         dataView.geometry.position = ABSOLUTE;
         dataView.factory = factory;
         dataView.onDataSelect.connect(function(value:D):Void {
@@ -80,23 +81,23 @@ 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.geometry.width.percent = 100;
-        if (labelSkinId != null) {
+        if (labelStyle != null) {
-            result.skinId = labelSkinId;
+            result.style = labelStyle;
         }
         result.text = labelBuilder(value);
         return result;
     }
 
-    private function set_labelSkinId(value:String):String {
+    private function set_labelStyle(value:StyleId):StyleId {
-        if (labelSkinId != value) {
+        if (labelStyle != value) {
-            labelSkinId = value;
+            labelStyle = value;
-            currentView.skinId = labelSkinId;
+            currentView.style = labelStyle;
             for (view in dataView.dataViews) {
-                view.skinId = labelSkinId;
+                view.style = labelStyle;
             }
         }
-        return labelSkinId;
+        return labelStyle;
     }
 
     private function set_labelBuilder(value:D -> String):D -> String {

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

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

src/main/haxework/view/geometry/Geometry.hx

@@ -9,6 +9,7 @@ class Geometry {
     public var vAlign(default, default):VAlign;
     public var position(default, default):Position;
     public var ratio(default, default):Float;
+    public var stretch(null, set):Bool;
 
     public function new() {
         this.padding = [];
@@ -21,6 +22,14 @@ class Geometry {
         this.ratio = -1;
     }
 
+    private function set_stretch(value:Bool):Bool {
+        if (value) {
+            width.percent = 100;
+            height.percent = 100;
+        }
+        return value;
+    }
+
     public function setSize(width:SizeValue, height:SizeValue):Geometry {
         this.width = width;
         this.height = height;

src/main/haxework/view/group/GroupView.hx

@@ -16,24 +16,6 @@ class GroupView extends SpriteView implements IGroupView {
         views = [];
     }
 
-    /*override private function set_width(value:Float):Float {
-        if (width != value) {
-            width = value;
-            toUpdate();
-            toRedraw();
-        }
-        return width;
-    }
-
-    override private function set_height(value:Float):Float {
-        if (height != value) {
-            height = value;
-            toUpdate();
-            toRedraw();
-        }
-        return height;
-    }*/
-
     inline private function get_container():DisplayObjectContainer {
         return content;
     }

src/main/haxework/view/layout/TailLayout.hx

@@ -1,6 +1,6 @@
 package haxework.view.layout;
 
-import haxework.view.core.VAlign;
+import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
 
 typedef Row = {
@@ -73,6 +73,6 @@ class TailLayout extends DefaultLayout {
             y += row.height + margin;
         }
 
-        group.setContentSize(w, h, "group");
+        group.setSize(w, h, "group");
     }
 }

src/main/haxework/view/layout/VerticalLayout.hx

@@ -35,7 +35,7 @@ class VerticalLayout extends DefaultLayout {
                 case PERCENT:
                     var result = view.geometry.height.value / 100 * leftSize;
                     fixedSize += result + view.geometry.margin.vertical;
-                    view.setSize(0, result, "percent.width");
+                    view.setSize(0, result, "percent.height");
                 case _:
             };
         }

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

@@ -1,8 +1,7 @@
 package haxework.view.list;
 
-import haxework.view.geometry.Geometry.SizeValue;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.HAlign;
+import haxework.view.geometry.VAlign;
-import haxework.view.core.VAlign;
 import haxework.view.layout.HorizontalLayout;
 import haxework.view.layout.VerticalLayout;
 import haxework.view.list.ListView.IListItemView;
@@ -11,17 +10,14 @@ class HListView<D> extends ListView<D> {
 
     public function new() {
         super(new VerticalLayout(), new HorizontalLayout());
-        box.layout.hAlign = HAlign.LEFT;
+        box.layout.hAlign = LEFT;
-        box.layout.vAlign = VAlign.MIDDLE;
+        box.layout.vAlign = MIDDLE;
     }
 
     override private function recalcSize(item:IListItemView<D>):Void {
-        itemSize = switch(item.geometry.width) {
+        itemSize = item.geometry.width.fixed + item.geometry.margin.horizontal + box.layout.margin;
-            case SizeValue.FIXED(value): value + item.geometry.margin.horizontal + box.layout.margin;
+        itemCount = Math.ceil(Math.max(0, box.width / itemSize)) + 2;
-            case _: 0;
+        sizeDiff = itemCount - ((box.width - box.layout.margin - 1) / itemSize);
-        }
-        size = Math.ceil(Math.max(0, box.width / itemSize)) + 2;
-        sizeDiff = size - ((box.width - box.layout.margin - 1) / itemSize);
     }
 
     override private function set_offsetDiff(value:Float):Float {

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

@@ -6,9 +6,9 @@ class HScrollBarView extends ScrollBarView {
 
     public function new() {
         super();
-        skinId = "scroll.horizontal";
+        style = "scroll.horizontal";
-        geometry.size.percent.width = 100;
+        geometry.width.percent = 100;
-        geometry.size.fixed.height = 10;
+        geometry.height.fixed = 10;
     }
 
     override private function onMouseDown(p:Point):Void {

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

@@ -1,7 +1,7 @@
 package haxework.view.list;
 
-import haxework.view.core.HAlign;
 import haxework.view.form.LabelView;
+import haxework.view.geometry.HAlign;
 import haxework.view.list.ListView.IListItemView;
 
 private typedef Formatter<T> = Int -> T -> String;
@@ -19,8 +19,8 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
     public function new(formatter:Formatter<T> = null) {
         super();
         this.formatter = formatter == null ? defaultFormatter : formatter;
-        geometry.size.percent.width = 100;
+        geometry.width.percent = 100;
-        geometry.size.fixed.height = 20;
+        geometry.height.fixed = 20;
         geometry.padding = 8;
         layout.hAlign = LEFT;
     }
@@ -28,7 +28,7 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
     private function set_data(value:T):T {
         data = value;
         text = formatter(item_index, value);
-        skinId = 'text${item_index % 2}';
+        style = 'text${item_index % 2}';
         return value;
     }
 

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

@@ -3,9 +3,9 @@ package haxework.view.list;
 import flash.events.MouseEvent;
 import haxework.signal.Signal;
 import haxework.utils.NumberUtil;
-import haxework.view.geometry.Geometry.Position;
+import haxework.view.geometry.Position;
-import haxework.view.core.HAlign;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.VAlign;
+import haxework.view.geometry.VAlign;
 import haxework.view.form.ButtonView;
 import haxework.view.group.GroupView;
 import haxework.view.layout.ILayout;
@@ -19,7 +19,7 @@ class ListView<D> extends GroupView {
     public var offset(default, set):Int;
     private var offsetDiff(default, set):Float;
 
-    private var size(default, set):Int;
+    private var itemCount(default, set):Int;
     private var sizeDiff:Float;
 
     public var onItemSelect(default, null):Signal<IListItemView<D>>;
@@ -46,16 +46,16 @@ class ListView<D> extends GroupView {
         main = new GroupView(layout);
         main.layout.hAlign = CENTER;
         main.layout.vAlign = MIDDLE;
-        main.geometry.size.stretch = true;
+        main.geometry.stretch = true;
         addView(main);
         box = new GroupView(layout);
-        box.geometry.size.stretch = true;
+        box.geometry.stretch = true;
         box.layout.overflow = true;
         main.addView(box);
         mask = new SpriteView();
-        mask.geometry.size.stretch = true;
+        mask.geometry.stretch = true;
         mask.geometry.position = ABSOLUTE;
-        mask.skin.push(Skin.color(0xffffff));
+        mask.skin = Skin.color(0xffffff);
         box.content.mask = mask.content;
         box.addView(mask);
         onItemSelect = new Signal();
@@ -128,12 +128,12 @@ class ListView<D> extends GroupView {
     private function onMouseWheel(value:Int):Void {}
 
     private function set_offset(value:Int):Int {
-        value = NumberUtil.limitInt(value, 0, filteredData == null ? 0 : filteredData.length - size + 2);
+        value = NumberUtil.limitInt(value, 0, filteredData == null ? 0 : filteredData.length - itemCount + 2);
         if (offset != value) {
             if (filteredData != null) {
                 //ToDo: constant for 2
                 if (value == 0) offsetDiff = 0;
-                if (value == filteredData.length - size + 2) offsetDiff = sizeDiff - 2;
+                if (value == filteredData.length - itemCount + 2) offsetDiff = sizeDiff - 2;
             }
             offset = value;
             render();
@@ -167,10 +167,10 @@ class ListView<D> extends GroupView {
         if (data != null && factory != null) {
             filteredData = filter == null ? data : data.filter(filter);
             if (scroll != null) {
-                scroll.ratio = Math.min(1.0, (size - sizeDiff) / filteredData.length);
+                scroll.ratio = Math.min(1.0, (itemCount - sizeDiff) / filteredData.length);
                 scroll.position = ((offset + offsetDiff) / filteredData.length);
             }
-            for (i in 0...size) {
+            for (i in 0...itemCount) {
                 var item:IListItemView<D> = items[i];
                 var index = offset + i;
                 if (filteredData[index] == null) {
@@ -192,10 +192,10 @@ class ListView<D> extends GroupView {
 
     private function recalcSize(item:IListItemView<D>):Void {}
 
-    private function set_size(value:Int):Int {
+    private function set_itemCount(value:Int):Int {
-        if (size != value) {
+        if (itemCount != value) {
-            size = value;
+            itemCount = value;
-            var diff:Int = size - items.length;
+            var diff:Int = itemCount - items.length;
             if (diff > 0) {
                 for (i in 0...diff) {
                     var item:IListItemView<D> = factory();
@@ -213,7 +213,7 @@ class ListView<D> extends GroupView {
                 }
             }
         }
-        return size;
+        return itemCount;
     }
 
     private function set_offsetDiff(value:Float):Float {

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

@@ -1,8 +1,7 @@
 package haxework.view.list;
 
-import haxework.view.geometry.Geometry.SizeValue;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.HAlign;
+import haxework.view.geometry.VAlign;
-import haxework.view.core.VAlign;
 import haxework.view.layout.HorizontalLayout;
 import haxework.view.layout.VerticalLayout;
 import haxework.view.list.ListView.IListItemView;
@@ -11,17 +10,14 @@ class VListView<D> extends ListView<D> {
 
     public function new() {
         super(new VerticalLayout(), new HorizontalLayout());
-        box.layout.hAlign = HAlign.CENTER;
+        box.layout.hAlign = CENTER;
-        box.layout.vAlign = VAlign.TOP;
+        box.layout.vAlign = TOP;
     }
 
     override private function recalcSize(item:IListItemView<D>):Void {
-        itemSize = switch(item.geometry.height) {
+        itemSize = item.geometry.height.fixed + item.geometry.margin.vertical + box.layout.margin;
-            case SizeValue.FIXED(value): value + item.geometry.margin.vertical + box.layout.margin;
+        itemCount = Math.ceil(Math.max(0, box.height / itemSize)) + 2;
-            case _: 0;
+        sizeDiff = itemCount - ((box.height - box.layout.margin - 1) / itemSize);
-        }
-        size = Math.ceil(Math.max(0, box.height / itemSize)) + 2;
-        sizeDiff = size - ((box.height - box.layout.margin - 1) / itemSize);
     }
 
     override private function set_offsetDiff(value:Float):Float {

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

@@ -6,9 +6,9 @@ class VScrollBarView extends ScrollBarView {
 
     public function new() {
         super();
-        skinId = "scroll.vertical";
+        style = "scroll.vertical";
-        geometry.size.percent.height = 100;
+        geometry.height.percent = 100;
-        geometry.size.fixed.width = 10;
+        geometry.width.fixed = 10;
     }
 
     override private function onMouseDown(p:Point):Void {

src/main/haxework/view/popup/PopupView.hx

@@ -1,8 +1,7 @@
 package haxework.view.popup;
 
-import flash.display.DisplayObject;
 import flash.events.MouseEvent;
-import haxework.view.geometry.Geometry.Position;
+import haxework.view.geometry.Position;
 import haxework.view.group.GroupView;
 import haxework.view.skin.Skin;
 import promhx.Deferred;
@@ -17,7 +16,7 @@ class PopupView<R> extends GroupView {
 
     public function new() {
         super();
-        geometry.size.stretch = true;
+        geometry.stretch = true;
         geometry.position = Position.ABSOLUTE;
         background = buildBackground();
         background.content.addEventListener(MouseEvent.CLICK, onBackgroundClick);
@@ -26,9 +25,9 @@ class PopupView<R> extends GroupView {
 
     private function buildBackground():IView<Dynamic> {
         var result = new SpriteView();
-        result.geometry.size.stretch = true;
+        result.geometry.stretch = true;
         result.geometry.position = Position.ABSOLUTE;
-        result.skin = [Skin.color(0x000000, 0.6)];
+        result.skin = Skin.color(0x000000, 0.6);
         return result;
     }
 

src/main/haxework/view/skin/GeometrySkin.hx

@@ -1,50 +0,0 @@
-package haxework.view.skin;
-
-import haxework.view.core.HAlign;
-import haxework.view.core.VAlign;
-import haxework.view.geometry.Geometry;
-
-class GeometrySkin implements ISkin<IView<Dynamic>> {
-
-    private var geometry(default, default):Geometry;
-
-    public function new(geometry:Geometry) {
-        this.geometry = geometry;
-    }
-
-    public function draw(view:IView<Dynamic>):Void {
-        var updated = false;
-        if (!geometry.padding.empty && view.geometry.padding != geometry.padding) {
-            view.geometry.padding = geometry.padding;
-            updated = true;
-        }
-        if (!geometry.margin.empty && view.geometry.margin != geometry.margin) {
-            view.geometry.margin = geometry.margin;
-            updated = true;
-        }
-        if (geometry.position != view.geometry.position) {
-            view.geometry.position = geometry.position;
-            updated = true;
-        }
-        if (geometry.hAlign != NONE && geometry.hAlign != view.geometry.hAlign) {
-            view.geometry.hAlign = geometry.hAlign;
-            updated = true;
-        }
-        if (geometry.vAlign != NONE && geometry.vAlign != view.geometry.vAlign) {
-            view.geometry.vAlign = geometry.vAlign;
-            updated = true;
-        }
-        if (!geometry.size.fixed.empty && geometry.size.fixed != view.geometry.size.fixed) {
-            view.geometry.size.fixed = geometry.size.fixed;
-            updated = true;
-        }
-        if (!geometry.size.percent.empty && geometry.size.percent != view.geometry.size.percent) {
-            view.geometry.size.percent = geometry.size.percent;
-            updated = true;
-        }
-        if (updated) {
-            view.toUpdate();
-            view.toUpdateParent();
-        }
-    }
-}

src/main/haxework/view/skin/LayoutSkin.hx

@@ -1,35 +0,0 @@
-package haxework.view.skin;
-
-import haxework.view.core.HAlign;
-import haxework.view.core.VAlign;
-import haxework.view.group.IGroupView;
-import haxework.view.layout.ILayout;
-
-class LayoutSkin implements ISkin<IGroupView> {
-
-    private var layout(default, default):ILayout;
-
-    public function new(layout:ILayout) {
-        this.layout = layout;
-    }
-
-    public function draw(view:IGroupView):Void {
-        var updated = false;
-        if (layout.margin > 0 && view.layout.margin != layout.margin) {
-            view.layout.margin = layout.margin;
-            updated = true;
-        }
-        if (layout.hAlign != NONE && layout.hAlign != view.layout.hAlign) {
-            view.layout.hAlign = layout.hAlign;
-            updated = true;
-        }
-        if (layout.vAlign != NONE && layout.vAlign != view.layout.vAlign) {
-            view.layout.vAlign = layout.vAlign;
-            updated = true;
-        }
-        if (updated) {
-            view.toUpdate();
-            view.toUpdateParent();
-        }
-    }
-}

src/main/haxework/view/skin/Skin.hx

@@ -1,20 +1,13 @@
 package haxework.view.skin;
 
 import flash.display.BitmapData;
-import haxework.view.geometry.Geometry;
 import haxework.view.form.ButtonView;
-import haxework.view.layout.ILayout;
-import haxework.view.text.ITextView;
 import haxework.view.utils.DrawUtil;
 
 class Skin {
 
     public static var transparent(default, never):ISkin<SpriteView> = new ColorSkin(0, 0);
 
-    public static function size(width:Float, height:Float):ISkin<Dynamic> {
-        return new GeometrySkin(new Geometry().setSize(width, height));
-    }
-
     public static function bitmap(image:BitmapData, fillType:FillType = null):ISkin<SpriteView> {
         return new BitmapSkin(image, fillType);
     }
@@ -27,10 +20,6 @@ class Skin {
         return new BorderSkin(color, alpha, tickness);
     }
 
-    public static function text(fontColor:Int, fontSize:Int, fontFamily:String = null, fontEmbed:Bool = false):ISkin<ITextView> {
-        return new TextSkin(fontColor, fontSize, fontFamily, fontEmbed);
-    }
-
     public static function buttonColor(color:Int, borderColor:Int = -1):ISkin<ButtonView> {
         return new ButtonColorSkin(color, borderColor);
     }
@@ -50,12 +39,4 @@ class Skin {
     public static function scrollVertical(foreColor:Int, backColor:Int) {
         return new VScrollBarSkin(foreColor, backColor);
     }
-
-    public static function geometry(geometry:Geometry):GeometrySkin {
-        return new GeometrySkin(geometry);
-    }
-
-    public static function layout(layout:ILayout):LayoutSkin {
-        return new LayoutSkin(layout);
-    }
 }

src/main/haxework/view/skin/TextSkin.hx

@@ -1,27 +0,0 @@
-package haxework.view.skin;
-
-import haxework.view.text.ITextView;
-
-class TextSkin implements ISkin<ITextView> {
-
-    public var fontColor(default, default):Int;
-    public var fontSize(default, default):Int;
-    public var fontFamily(default, default):String;
-    public var fontEmbed(default, default):Bool;
-
-    public function new(fontColor:Int, fontSize:Int, fontFamily:String, fontEmbed:Bool=false) {
-        this.fontColor = fontColor;
-        this.fontSize = fontSize;
-        this.fontFamily = fontFamily;
-        this.fontEmbed = fontEmbed;
-    }
-
-    public function draw(view:ITextView):Void {
-        view.fontColor = fontColor;
-        if (fontSize > 0) {
-            view.fontSize = fontSize;
-        }
-        view.fontFamily = fontFamily;
-        view.fontEmbed = fontEmbed;
-    }
-}

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

@@ -9,4 +9,13 @@ class FontStyle {
     public var size(default, default):Int;
     public var bold(default, default):Bool;
     public var align(default, default):TextFormatAlign;
+
+    public function new() {
+        family = null;
+        embed = false;
+        color = 0xffffff;
+        size = 16;
+        bold = false;
+        align = null;
+    }
 }

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

@@ -2,9 +2,11 @@ package haxework.view.text;
 
 import flash.text.TextField;
 import haxework.view.IView;
+import haxework.view.layout.ILayout;
 
 interface ITextView extends IView<Dynamic> {
     @:style public var font(default, default):FontStyle;
+    @:style public var layout(default, default):ILayout;
 
     public var textField(default, null):TextField;
     public var text(get, set):String;

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

@@ -1,40 +1,34 @@
 package haxework.view.text;
 
-import haxework.view.layout.ILayout;
-import haxework.view.layout.Layout;
 import flash.text.TextField;
 import flash.text.TextFieldAutoSize;
 import flash.text.TextFormat;
 import flash.text.TextFormatAlign;
-import haxework.view.core.HAlign;
-import haxework.view.core.VAlign;
 import haxework.text.BitmapTextField;
 import haxework.text.TextUtil;
+import haxework.view.geometry.HAlign;
+import haxework.view.geometry.VAlign;
+import haxework.view.layout.ILayout;
+import haxework.view.layout.Layout;
 
 class TextView extends SpriteView implements ITextView {
+    public var font(default, default):FontStyle;
+    public var layout(default, default):ILayout;
 
     public var textField(default, null):TextField;
     public var text(get, set):String;
-    public var layout:ILayout;
 
     private var _text:String;
-    public var align(default, set):TextFormatAlign;
-    public var fontFamily(default, set):String;
-    public var fontEmbed(default, set):Bool;
-    public var fontColor(default, set):Int;
-    public var fontSize(default, set):Int;
-    public var fontBold(default, set):Bool;
 
     public var fill(default, set):Bool = true;
 
     public var shadow(default, set):Bool;
     public var shadowColor(default, set):Int;
 
-    private var textFormat:TextFormat;
-
     public function new() {
         super();
-        skinId = "text";
+        font = new FontStyle();
+        style = "text";
         layout = new Layout();
         textField = buildTextField();
         textField.width = 1;
@@ -45,11 +39,6 @@ class TextView extends SpriteView implements ITextView {
         textField.borderColor = 0xff0000;
         textField.border = true;
         #end
-        textFormat = textField.defaultTextFormat;
-        textFormat.font = "Arial";
-        textFormat.size = 16;
-        textFormat.leading = 0;
-        textFormat.align = TextFormatAlign.LEFT;
         content.addChild(textField);
     }
 
@@ -81,77 +70,24 @@ class TextView extends SpriteView implements ITextView {
         return _text;
     }
 
-    private function set_align(value:TextFormatAlign):TextFormatAlign {
-        if (align != value) {
-            align = value;
-            textFormat.align = value;
-            toUpdate();
-        }
-        return align;
-    }
-
-    private function set_fontFamily(value:String):String {
-        if (fontFamily != value) {
-            fontFamily = value;
-            textFormat.font = fontFamily;
-            toUpdate();
-        }
-        return fontFamily;
-    }
-
-    private function set_fontEmbed(value:Bool):Bool {
-        if (fontEmbed != value) {
-            fontEmbed = value;
-            toUpdate();
-        }
-        return fontEmbed;
-    }
-
-    private function set_fontColor(value:Int):Int {
-        if (fontColor != value) {
-            fontColor = value;
-            textFormat.color = fontColor;
-            toUpdate();
-        }
-        return fontColor;
-    }
-
-    private function set_fontSize(value:Int):Int {
-        if (fontSize != value) {
-            fontSize = value;
-            textFormat.size = fontSize;
-            toUpdate();
-        }
-        return fontSize;
-    }
-
-    private function set_fontBold(value:Bool):Bool {
-        if (fontBold != value) {
-            fontBold = value;
-            textFormat.bold = fontBold;
-            toUpdate();
-        }
-        return fontBold;
-    }
-
     private function currentText():String {
         return _text;
     }
 
     private function updateTextSize():Void {
         var size = TextUtil.getSize(textField);
-        if (!Math.isNaN(size.x) && !Math.isNaN(size.y)) {
+        if (!Math.isNaN(size.x) && !Math.isNaN(size.y)/* && size.x > 0 && size.y > 0*/) {
-            setContentSize(size.x, size.y, "text");
+            setSize(size.x, size.y, "text");
         }
     }
 
     override public function update():Void {
-        textField.embedFonts = fontEmbed;
+        textField.embedFonts = font.embed;
-        textField.defaultTextFormat = textFormat;
+        textField.defaultTextFormat = new TextFormat(font.family, font.size, font.color, font.bold);
         textField.autoSize = fill ? TextFieldAutoSize.NONE : TextFieldAutoSize.LEFT;
         var t:String = currentText();
         if (t != null) textField.text = t;
-        textField.setTextFormat(textFormat);
+        textField.setTextFormat(textField.defaultTextFormat);
         updateTextSize();
         placeTextField(textField);
         //ToDo:
@@ -166,7 +102,7 @@ class TextView extends SpriteView implements ITextView {
 
     private function placeTextField(textField:TextField):Void {
         textField.width = width;
-        textField.height = geometry.size.content.exists("text") ? geometry.size.content.get("text").height : height;
+        textField.height = height;  // ToDo:
 
         textField.x = switch (layout.hAlign) {
             case LEFT | NONE: geometry.padding.left;

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

@@ -1,7 +1,6 @@
 package haxework.view.theme;
 
 import haxework.color.Color;
-import haxework.view.skin.ISkin;
 
 typedef ThemeFont = {
     @:optional var name:String;

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

@@ -0,0 +1,24 @@
+package haxework.view.theme;
+
+abstract StyleId(Array<String>) {
+
+    public function new(value:Array<String>) {
+        this = value;
+    }
+
+    @:to public inline function toArray():Array<String> {
+        return this;
+    }
+
+    @:to public inline function toString():String {
+        return this.join(".");
+    }
+
+    @:from public static inline function fromArray(value:Array<String>):StyleId {
+        return new StyleId(value);
+    }
+
+    @:from public static inline function fromString(value:String):StyleId {
+        return new StyleId(value.split("."));
+    }
+}

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

@@ -1,19 +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.geometry.Geometry;
-import haxework.view.skin.ISkin;
-import haxework.view.skin.Skin;
 import haxework.view.theme.ITheme;
 
 using haxework.color.ColorUtil;
 
-//ToDo: temp
-typedef SkinSet = Array<ISkin<Dynamic>>;
-
 class Theme implements ITheme {
     // ToDo: configurable
     public var baseFontSize = 18;
@@ -23,10 +16,7 @@ class Theme implements ITheme {
     public var font(default, set):ThemeFont;
     public var colors(default, set):ThemeColors;
 
-    private var data:ResMap<SkinSet>;
-
     public function new(?font:ThemeFont, ?colors:ThemeColors) {
-        data = new ResMap();
         this.font = font;
         this.colors = colors;
         L.d("Theme", 'font: ${this.font}');
@@ -50,71 +40,7 @@ class Theme implements ITheme {
     }
 
     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(styles:Array<String>, view:IView<Dynamic>):Void {
@@ -126,9 +52,6 @@ class Theme implements ITheme {
             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 = {