diff --git a/demo/run.sh b/demo/run.sh
index b8e8469..134002a 100755
--- a/demo/run.sh
+++ b/demo/run.sh
@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
 echo "`pwd`/target" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
+. /opt/sdk/neko/2.2.0/activate
 . /opt/sdk/haxe/3.4.7/activate
 haxe build.hxml && flashplayerdebugger target/demo.swf &
 tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt
diff --git a/demo/run_openfl.sh b/demo/run_openfl.sh
index dbb6797..e41d797 100755
--- a/demo/run_openfl.sh
+++ b/demo/run_openfl.sh
@@ -1,4 +1,5 @@
 #!/usr/bin/env bash
 echo "`pwd`/target/flash/bin" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
+. /opt/sdk/neko/2.2.0/activate
 . /opt/sdk/haxe/3.4.7/activate
-haxelib run openfl test linux
+haxelib run openfl test flash
diff --git a/demo/src/demo/Demo.hx b/demo/src/demo/Demo.hx
index 51a47ca..285f2f1 100644
--- a/demo/src/demo/Demo.hx
+++ b/demo/src/demo/Demo.hx
@@ -16,7 +16,7 @@ import haxework.log.TraceLogger;
     @:view var tabs:IGroupView;
 
     private function init():Void {
-        switcher.change("list_form");
+        switcher.change("list");
     }
 
     private function onFrameSwitch(frame:IView<Dynamic>):Void {
diff --git a/demo/src/demo/DemoView.yaml b/demo/src/demo/DemoView.yaml
index 02a3707..c9c696b 100644
--- a/demo/src/demo/DemoView.yaml
+++ b/demo/src/demo/DemoView.yaml
@@ -6,31 +6,20 @@ views:
       geometry.padding: 10
       image: $r:image:logo
     - id: tabs
-      $type: haxework.view.HGroupView
+      $type: haxework.view.ButtonGroup<String>
       layout.margin: 5
       layout.hAlign: left
       geometry.size.width: 100%
       geometry.padding.left: 5
       geometry.margin.bottom: -3
-      views:
-          - id: list_form
-            $type: haxework.view.ToggleButtonView
-            skinId: tab
-            geometry.padding: [25, 8]
-            text: List
-            +onPress: "$code:switcher.change('list_form')"
-          - id: tail_form
-            $type: haxework.view.ToggleButtonView
-            skinId: tab
-            geometry.padding: [25, 8]
-            text: Tail
-            +onPress: "$code:switcher.change('tail_form')"
-          - id: data_form
-            $type: haxework.view.ToggleButtonView
-            skinId: tab
-            geometry.padding: [25, 8]
-            text: Data
-            +onPress: "$code:switcher.change('data_form')"
+      buttonSkinId: tab
+      +onDataSelect: $code:function(id) switcher.change(id)
+      data:
+        - "list"
+        - "tail"
+        - "data"
+        - "test_layout"
+      selected: "list"
     - id: switcher
       $type: haxework.view.frame.FrameSwitcher
       skinId: panel
@@ -38,19 +27,11 @@ views:
       +onSwitch: $this:onFrameSwitch
       geometry.size.stretch: true
       geometry.padding: 5
-      views:
-          - id: list_form
-            $type: demo.form.ListForm
-            skinId: background
-            geometry.size.stretch: true
-          - id: tail_form
-            $type: demo.form.TailForm
-            skinId: background
-            geometry.size.stretch: true
-          - id: data_form
-            $type: demo.form.DataForm
-            skinId: background
-            geometry.size.stretch: true
+      factory:
+        _list_: {$class: demo.form.ListForm}
+        _tail_: {$class: demo.form.TailForm}
+        _data_: {$class: demo.form.DataForm}
+        _test_layout_: {$class: demo.form.TestLayoutForm}
     - $type: haxework.view.HGroupView
       geometry.size.percent.width: 100
       geometry.padding: 10
diff --git a/demo/src/demo/Theme.hx b/demo/src/demo/Theme.hx
index eebd819..cc53ecf 100644
--- a/demo/src/demo/Theme.hx
+++ b/demo/src/demo/Theme.hx
@@ -1,33 +1,40 @@
 package demo;
 
-import haxework.color.ColorUtil;
+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:Int, textColor:Int = 0xffffff):Void {
+    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(ColorUtil.multiply(color, 1.5), 1, 2);
+        var border = Skin.border(color.multiply(1.5), 1, 2);
         resources.skin.put("text0", [
-            Skin.color(ColorUtil.diff(color, 128)),
-            new TextSkin(ColorUtil.diff(color, -128), 16, "Courirer"),
+            Skin.color(color.diff(128)),
+            new TextSkin(color.diff(-128), 16, "Courirer"),
         ]);
         resources.skin.put("text1", [
-            Skin.color(ColorUtil.diff(color, 64)),
-            new TextSkin(ColorUtil.diff(color, -128), 16, "Courirer"),
+            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]);
+        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, ColorUtil.diff(color, 128))]);
+        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)]);
     }
 }
diff --git a/demo/src/demo/form/DataForm.hx b/demo/src/demo/form/DataForm.hx
index 90f43e4..3415753 100644
--- a/demo/src/demo/form/DataForm.hx
+++ b/demo/src/demo/form/DataForm.hx
@@ -1,9 +1,13 @@
 package demo.form;
 
+import haxework.view.frame.FrameView;
 import haxework.view.TextView;
-import haxework.view.VGroupView;
 
-@:template class DataForm extends VGroupView {
+
+@:template class DataForm extends FrameView<Dynamic> {
+    public function new() {
+        super("data");
+    }
 
     private function factory(index:Int, value:Model):TextView {
         var label = new TextView();
diff --git a/demo/src/demo/form/DataForm.yaml b/demo/src/demo/form/DataForm.yaml
index 06f3f5c..66a48de 100644
--- a/demo/src/demo/form/DataForm.yaml
+++ b/demo/src/demo/form/DataForm.yaml
@@ -1,15 +1,13 @@
 ---
 views:
-    - $type: haxework.view.ScrollView
-      geometry.size.stretch: true
-      view:
-          id: data
-          $type: haxework.view.DataView
-          layout:
-              $type: haxework.view.layout.VerticalLayout
-          factory: $this:factory
-          geometry.size.width: 100%
-          data: $r:any:data
-      scroll:
-          $type: haxework.view.list.VScrollBarView
-          skinId: scroll
+  - $type: haxework.view.ScrollView
+    geometry.size.stretch: true
+    scroll.skinId: scroll
+    view:
+      id: data
+      $type: haxework.view.DataView
+      layout:
+        $type: haxework.view.layout.VerticalLayout
+      factory: $this:factory
+      geometry.size.width: 100%
+      data: $r:any:data
diff --git a/demo/src/demo/form/ListForm.hx b/demo/src/demo/form/ListForm.hx
index 63ab973..621ba21 100644
--- a/demo/src/demo/form/ListForm.hx
+++ b/demo/src/demo/form/ListForm.hx
@@ -1,13 +1,17 @@
 package demo.form;
 
+import haxework.view.frame.FrameView;
 import haxework.view.list.LabelListItem;
 import haxework.view.list.ListView.IListItemView;
 import haxework.view.list.VListView;
-import haxework.view.VGroupView;
 
-@:template class ListForm extends VGroupView {
+@:template class ListForm extends FrameView<Dynamic> {
     @:view public var list(default, null):VListView<Model>;
 
+    public function new() {
+        super("list");
+    }
+
     private function factory() {
         return new LabelListItem(function(index:Int, value:Model) return '${index}. ${value.id}: ${value.title}');
     }
diff --git a/demo/src/demo/form/ListForm.yaml b/demo/src/demo/form/ListForm.yaml
index da26823..d93b79b 100644
--- a/demo/src/demo/form/ListForm.yaml
+++ b/demo/src/demo/form/ListForm.yaml
@@ -1,11 +1,11 @@
 ---
 views:
-    - id: list
-      $type: haxework.view.list.VListView
-      +onItemSelect: $this:onItemSelect
-      factory: $this:factory
-      geometry.size.stretch: true
-      scroll:
-          $type: haxework.view.list.VScrollBarView
-          skinId: scroll
-      data: $r:any:data50
+  - id: list
+    $type: haxework.view.list.VListView
+    +onItemSelect: $this:onItemSelect
+    factory: $this:factory
+    geometry.size.stretch: true
+    scroll:
+      $type: haxework.view.list.VScrollBarView
+      skinId: scroll
+    data: $r:any:data50
diff --git a/demo/src/demo/form/TailForm.hx b/demo/src/demo/form/TailForm.hx
index 0901b9a..4aa1a7f 100644
--- a/demo/src/demo/form/TailForm.hx
+++ b/demo/src/demo/form/TailForm.hx
@@ -1,12 +1,16 @@
 package demo.form;
 
-import haxework.view.HGroupView;
+import haxework.view.frame.FrameView;
 import haxework.view.ImageView;
 import haxework.view.IView;
 import haxework.view.TextView;
-import haxework.view.utils.DrawUtil.FillType;
+import haxework.view.utils.DrawUtil;
 
-@:template class TailForm extends HGroupView {
+@:template class TailForm extends FrameView<Dynamic> {
+
+    public function new() {
+        super("tail");
+    }
 
     private function factory(index:Int, value:Model):IView<Dynamic> {
         var view:IView<Dynamic>;
diff --git a/demo/src/demo/form/TailForm.yaml b/demo/src/demo/form/TailForm.yaml
index 889ed80..d658297 100644
--- a/demo/src/demo/form/TailForm.yaml
+++ b/demo/src/demo/form/TailForm.yaml
@@ -1,16 +1,14 @@
 ---
 views:
-    - $type: haxework.view.ScrollView
-      geometry.size.stretch: true
-      view:
-          id: data
-          $type: haxework.view.DataView
-          layout:
-              $type: haxework.view.layout.TailLayout
-              margin: 2
-          factory: $this:factory
-          geometry.size.width: 100%
-          data: $r:any:data
-      scroll:
-          $type: haxework.view.list.VScrollBarView
-          skinId: scroll
+  - $type: haxework.view.ScrollView
+    geometry.size.stretch: true
+    scroll.skinId: scroll
+    view:
+      id: data
+      $type: haxework.view.DataView
+      layout:
+        $type: haxework.view.layout.TailLayout
+        margin: 2
+      factory: $this:factory
+      geometry.size.width: 100%
+      data: $r:any:data
diff --git a/demo/src/demo/form/TestLayoutForm.hx b/demo/src/demo/form/TestLayoutForm.hx
new file mode 100644
index 0000000..03e1893
--- /dev/null
+++ b/demo/src/demo/form/TestLayoutForm.hx
@@ -0,0 +1,27 @@
+package demo.form;
+
+import flash.events.MouseEvent;
+import haxework.view.frame.FrameView;
+import haxework.view.SpriteView;
+
+@:template class TestLayoutForm extends FrameView<Dynamic> {
+
+    @:view var render:SpriteView;
+
+    public function new() {
+        super("test_layout");
+    }
+
+    public function init():Void {
+        resize();
+        content.addEventListener(MouseEvent.CLICK, function(_) {
+            resize();
+        });
+    }
+
+    private function resize():Void {
+        var w = 200 + 400 * Math.random();
+        var h = 100 + 200 * Math.random();
+        render.setContentSize(w, h, "render");
+    }
+}
diff --git a/demo/src/demo/form/TestLayoutForm.yaml b/demo/src/demo/form/TestLayoutForm.yaml
new file mode 100644
index 0000000..d415990
--- /dev/null
+++ b/demo/src/demo/form/TestLayoutForm.yaml
@@ -0,0 +1,53 @@
+---
+views:
+  - id: main
+    $type: haxework.view.VGroupView
+    geometry.size.stretch: true
+    layout.hAlign: center
+    layout.vAlign: middle
+    views:
+      - id: container
+        $type: haxework.view.VGroupView
+        layout.margin: 10
+        skin:
+          - $type: [haxework.view.skin.Skin.color, 0xffff00]
+        views:
+          - id: top
+            $type: haxework.view.GroupView
+            layout.hAlign: center
+            geometry.size.width: 100%
+            geometry.size.height: 20
+            skinId: test
+          - id: middle
+            $type: haxework.view.HGroupView
+            layout.margin: 10
+            views:
+              - id: left
+                $type: haxework.view.GroupView
+                layout.vAlign: middle
+                geometry.size.width: 20
+                geometry.size.height: 100%
+                skinId: test
+              - id: render
+                $type: haxework.view.SpriteView
+                #geometry.size.width: 300
+                #geometry.size.height: 200
+                skinId: test
+              - id: right
+                $type: haxework.view.GroupView
+                layout.vAlign: middle
+                geometry.size.width: 20
+                geometry.size.height: 100%
+                skinId: test
+                views:
+                  - $type: haxework.view.SpriteView
+                    geometry.size.width: 100
+                    geometry.size.height: 100%
+                    skin:
+                      - $type: [haxework.view.skin.Skin.color, 0xff0000]
+          - id: bottom
+            $type: haxework.view.GroupView
+            layout.hAlign: center
+            skinId: test
+            geometry.size.width: 100%
+            geometry.size.height: 20
diff --git a/src/main/haxework/utils/StringUtil.hx b/src/main/haxework/utils/StringUtil.hx
new file mode 100644
index 0000000..52bc922
--- /dev/null
+++ b/src/main/haxework/utils/StringUtil.hx
@@ -0,0 +1,10 @@
+package haxework.utils;
+
+using StringTools;
+
+class StringUtil {
+
+    public static function title(value:String):String {
+        return (value.substr(0, 1).toUpperCase() + value.substr(1)).replace("_", " ");
+    }
+}
diff --git a/src/main/haxework/view/ButtonGroup.hx b/src/main/haxework/view/ButtonGroup.hx
index 03711a0..6d1df28 100644
--- a/src/main/haxework/view/ButtonGroup.hx
+++ b/src/main/haxework/view/ButtonGroup.hx
@@ -1,6 +1,9 @@
 package haxework.view;
 
+using haxework.utils.StringUtil;
+import haxework.view.DataView.Factory;
 import haxe.EnumTools;
+import haxework.view.layout.HorizontalLayout;
 import haxework.view.layout.ILayout;
 
 class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
@@ -9,8 +12,8 @@ class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
     public var buttonSkinId(default, set):String;
 
     public function new(?layout:ILayout) {
-        super(layout);
-        factory = defaultFactory;
+        super(layout != null ? layout : new HorizontalLayout());
+        factory = buildFactory();
         onDataSelect.connect(function(value:D) selected = value);
     }
 
@@ -57,9 +60,14 @@ class ButtonGroup<D> extends DataView<D, ToggleButtonView> {
         }
     }
 
-    public static function defaultFactory<D>(index:Int, value:D):ToggleButtonView {
-        var result = new ToggleButtonView();
-        result.text = Std.string(value);
-        return result;
+    public static function buildFactory<D>(?label:D -> String):Factory<D, ToggleButtonView> {
+        if (label == null) {
+            label = function(value:D) return Std.string(value).title();
+        }
+        return function(index:Int, value:D):ToggleButtonView {
+            var result = new ToggleButtonView();
+            result.text = label(value);
+            return result;
+        }
     }
 }
diff --git a/src/main/haxework/view/ScrollView.hx b/src/main/haxework/view/ScrollView.hx
index abc2aef..040bdd3 100644
--- a/src/main/haxework/view/ScrollView.hx
+++ b/src/main/haxework/view/ScrollView.hx
@@ -3,10 +3,11 @@ package haxework.view;
 import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.events.MouseEvent;
+import haxework.signal.Signal;
 import haxework.view.core.Geometry.Position;
 import haxework.view.list.ScrollBarView;
+import haxework.view.list.VScrollBarView;
 import haxework.view.skin.Skin;
-import haxework.signal.Signal;
 
 class ScrollView extends HGroupView {
 
@@ -25,6 +26,7 @@ class ScrollView extends HGroupView {
         mask = new Sprite();
         content.addChild(mask);
         content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
+        scroll = new VScrollBarView();
     }
 
     private function onMouseWheelEvent(event:MouseEvent):Void {
diff --git a/src/main/haxework/view/frame/FrameView.hx b/src/main/haxework/view/frame/FrameView.hx
index 8462d2f..2ebf881 100644
--- a/src/main/haxework/view/frame/FrameView.hx
+++ b/src/main/haxework/view/frame/FrameView.hx
@@ -1,13 +1,15 @@
 package haxework.view.frame;
 
 import haxework.view.layout.ILayout;
+import haxework.view.layout.VerticalLayout;
 
 class FrameView<D> extends GroupView {
     public var frameId(default, null):String;
 
     public function new(frameId:String, ?layout:ILayout) {
-        super(layout);
+        super(layout != null ? layout : new VerticalLayout());
         this.frameId = frameId;
+        this.geometry.size.stretch = true;
     }
 
     public function onShow(data:D):Void {}