[view] fixes

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("test", [Skin.color(0x00ffff)]);
+//        data.put("view", text().concat(background(colors.light)).concat(border()));
+//        data.put("test", [Skin.color(0x00ffff)]);
     }
 }

demo/src/demo/DemoView.yaml

@@ -1,6 +1,6 @@
 ---
-skinId: background
-geometry.size.stretch: true
+style: background
+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
-    view:
-      id: data
-      $type: haxework.view.data.DataView
-      layout:
-        $type: haxework.view.layout.VerticalLayout
-      factory: ~factory
-      geometry.size.width: 100%
-      data: $r:any:data
+    -   $type: haxework.view.ScrollView
+        geometry.stretch: true
+        view:
+            id: data
+            $type: haxework.view.data.DataView
+            layout:
+                $type: haxework.view.layout.VerticalLayout
+            factory: ~factory
+            geometry.width: 100%
+            data: $r:any:data

demo/src/demo/form/ListForm.yaml

@@ -1,10 +1,10 @@
 ---
 views:
-  - id: list
-    $type: haxework.view.list.VListView
-    +onItemSelect: ~onItemSelect
-    factory: ~factory
-    geometry.size.stretch: true
-    scroll:
-      $type: haxework.view.list.VScrollBarView
-    data: $r:any:data50
+    -   id: list
+        $type: haxework.view.list.VListView
+        +onItemSelect: ~onItemSelect
+        factory: ~factory
+        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.geometry.size.fixed.height = 200;
+        view.setSize(350, 200);
         return view;
     }
 }

demo/src/demo/form/TailForm.yaml

@@ -1,13 +1,13 @@
 ---
 views:
-  - $type: haxework.view.ScrollView
-    geometry.size.stretch: true
-    view:
-      id: data
-      $type: haxework.view.data.DataView
-      layout:
-        $type: haxework.view.layout.TailLayout
-        margin: 2
-      factory: ~factory
-      geometry.size.width: 100%
-      data: $r:any:data
+    -   $type: haxework.view.ScrollView
+        geometry.stretch: true
+        view:
+            id: data
+            $type: haxework.view.data.DataView
+            layout:
+                $type: haxework.view.layout.TailLayout
+                margin: 2
+            factory: ~factory
+            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

@@ -1,53 +1,53 @@
 ---
 views:
-  - id: main
-    $type: haxework.view.group.VGroupView
-    geometry.size.stretch: true
-    layout.hAlign: center
-    layout.vAlign: middle
-    views:
-      - id: container
+    -   id: main
         $type: haxework.view.group.VGroupView
-        layout.margin: 10
-        skin:
-          - $type: [haxework.view.skin.Skin.color, 0xffff00]
+        geometry.stretch: true
+        layout.hAlign: center
+        layout.vAlign: middle
         views:
-          - id: top
-            $type: haxework.view.group.GroupView
-            layout.hAlign: center
-            geometry.size.width: 100%
-            geometry.size.height: 20
-            skinId: test
-          - id: middle
-            $type: haxework.view.group.HGroupView
-            layout.margin: 10
-            views:
-              - id: left
-                $type: haxework.view.group.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.group.GroupView
-                layout.vAlign: middle
-                geometry.size.width: 20
-                geometry.size.height: 100%
-                skinId: test
+            -   id: container
+                $type: haxework.view.group.VGroupView
+                layout.margin: 10
+                skin:
+                    $type: [haxework.view.skin.Skin.color, 0xffff00]
                 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.group.GroupView
-            layout.hAlign: center
-            skinId: test
-            geometry.size.width: 100%
-            geometry.size.height: 20
+                    -   id: top
+                        $type: haxework.view.group.GroupView
+                        layout.hAlign: center
+                        geometry.width: 100%
+                        geometry.height: 20
+                        style: test
+                    -   id: middle
+                        $type: haxework.view.group.HGroupView
+                        layout.margin: 10
+                        views:
+                            -   id: left
+                                $type: haxework.view.group.GroupView
+                                layout.vAlign: middle
+                                geometry.width: 20
+                                geometry.height: 100%
+                                style: test
+                            -   id: render
+                                $type: haxework.view.SpriteView
+                                #geometry.width: 300
+                                #geometry.height: 200
+                                style: test
+                            -   id: right
+                                $type: haxework.view.group.GroupView
+                                layout.vAlign: middle
+                                geometry.width: 20
+                                geometry.height: 100%
+                                style: test
+                                views:
+                                    -   $type: haxework.view.SpriteView
+                                        geometry.width: 100
+                                        geometry.height: 100%
+                                        skin:
+                                            $type: [haxework.view.skin.Skin.color, 0xff0000]
+                    -   id: bottom
+                        $type: haxework.view.group.GroupView
+                        layout.hAlign: center
+                        style: test
+                        geometry.width: 100%
+                        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.skin = [Skin.buttonColor(color)];
+        view.setSize(48, 48, "fixed");
+        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.size.height: 200
+    geometry.width: 400
+    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;
-        fontEmbed = value.embed;
+        font.family = value.name;
+        font.embed = value.embed;
         return data;
     }
 }

demo/src/demo/popup/FontPopup.yaml

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

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%