[gui] add view geometry

demo/src/demo/Demo.hx

@@ -23,7 +23,7 @@ import haxework.gui.VGroupView;
         manager = new LoaderManager();
         Theme.setColor(0x33aa33);
         var demo = new Demo();
-        demo.switcher.change("list_form");
+        demo.switcher.change("tail_form");
         Root.bind(demo);
     }
 

demo/src/demo/Demo.yaml

@@ -1,97 +1,82 @@
 ---
-pWidth: 100
-pHeight: 100
 skin: $r:skin:background
+geometry.size.stretch: true
 views:
     - id: tabs
       $type: haxework.gui.HGroupView
-      layoutMargin: 5
-      layoutHAlign: LEFT
-      leftPadding: 5
-      pWidth: 100
-      height: 40
+      layout.margin: 5
+      layout.hAlign: LEFT
+      geometry.size.percent.width: 100
+      geometry.padding.top: 10
+      geometry.padding.left: 5
       views:
           - id: list_form
             $type: haxework.gui.ToggleButtonView
             skin: $r:skin:tab
-            contentSize: true
-            paddings: [25, 8]
+            geometry.padding: [25, 8]
             text: List
             +onPress: "$code:switcher.change('list_form')"
           - id: tail_form
             $type: haxework.gui.ToggleButtonView
             skin: $r:skin:tab
-            contentSize: true
-            paddings: [25, 8]
+            geometry.padding: [25, 8]
             text: Tail
             +onPress: "$code:switcher.change('tail_form')"
           - id: any_form
             $type: haxework.gui.ToggleButtonView
             skin: $r:skin:tab
-            contentSize: true
-            paddings: [25, 8]
+            geometry.padding: [25, 8]
             text: Any
             +onPress: "$code:switcher.change('any_form')"
     - id: switcher
       $type: haxework.gui.frame.FrameSwitcher
       skin: $r:skin:border
       +onSwitch: $this:onFrameSwicth
-      padding: 5
-      pWidth: 100
-      pHeight: 100
+      geometry.size.stretch: true
+      geometry.padding: 5
       views:
           - id: list_form
             $type: demo.form.ListForm
-            pWidth: 100
-            pHeight: 100
+            geometry.size.stretch: true
           - id: tail_form
             $type: demo.form.TailForm
-            pWidth: 100
-            pHeight: 100
+            geometry.size.stretch: true
           - id: any_form
             $type: haxework.gui.SpriteView
-            pWidth: 100
-            pHeight: 100
+            geometry.size.stretch: true
     - $type: haxework.gui.HGroupView
-      layoutMargin: 10
-      layoutHAlign: RIGHT
-      rightPadding: 10
-      pWidth: 100
-      height: 60
+      geometry.size.percent.width: 100
+      geometry.padding: 10
+      layout.hAlign: RIGHT
+      layout.margin: 10
       views:
           - $type: haxework.gui.ButtonView
+            geometry.padding: [25, 8]
             skin: $r:skin:button
-            contentSize: true
-            padding: 8
             text: green
             +onPress: "$code:Theme.setColor(0x33aa33)"
           - $type: haxework.gui.ButtonView
+            geometry.padding: [25, 8]
             skin: $r:skin:button
-            contentSize: true
-            padding: 8
             text: red
             +onPress: "$code:Theme.setColor(0xaa3333)"
           - $type: haxework.gui.ButtonView
+            geometry.padding: [25, 8]
             skin: $r:skin:button
-            contentSize: true
-            padding: 8
             text: yellow
             +onPress: "$code:Theme.setColor(0xaaaa33)"
-            rightMargin: 30
+            geometry.margin.right: 20
 
           - $type: haxework.gui.ButtonView
+            geometry.padding: [25, 8]
             skin: $r:skin:button
-            contentSize: true
-            padding: 8
             text: OK
           - $type: haxework.gui.ButtonView
+            geometry.padding: [25, 8]
             skin: $r:skin:button
-            contentSize: true
-            padding: 8
             text: Apply
           - $type: haxework.gui.ButtonView
+            geometry.padding: [25, 8]
             skin: $r:skin:button
-            contentSize: true
-            padding: 8
             text: Cancel
             +onPress: "$code:flash.system.System.exit(0)"

demo/src/demo/form/ListForm.yaml

@@ -1,16 +1,15 @@
 ---
 $type: haxework.gui.VGroupView
-layoutMargin: 10
+# layoutMargin: 10
 views:
     - id: list
       $type: haxework.gui.list.VListView<String>
       +onItemSelect: $this:onItemSelect
       factory: { $class: haxework.gui.list.LabelListItem }
-      pWidth: 100
-      pHeight: 100
+      # pWidth: 100
+      # pHeight: 100
       scroll:
           $type: haxework.gui.list.VScrollBarView
           skin: $r:skin:scroll
-          width: 10
-          pHeight: 100
-
+          # width: 10
+          # pHeight: 100

demo/src/demo/form/TailForm.hx

@@ -14,8 +14,8 @@ import haxework.gui.TextView;
     private function init() {
         for (i in 0...100) {
             var view = new TextView();
-            view.width = 100 + 100 * Math.random();
-            view.height = 100 + 100 * Math.random();
+            view.geometry.size.fixed.width = 100 + 100 * Math.random();
+            view.geometry.size.fixed.height = 100 + 100 * Math.random();
             //view.skin = resources.skin.get("view");
             resources.skin.bind("view", view, "skin");
             view.text = 'View #${i}';

demo/src/demo/form/TailForm.yaml

@@ -1,20 +1,16 @@
 ---
-pWidth: 100
-pHeight: 100
 views:
     - $type: haxework.gui.ScrollView
-      pWidth: 100
-      pHeight: 100
+      geometry.size.stretch: true
       scroll:
           $type: haxework.gui.list.VScrollBarView
           skin: $r:skin:scroll
-          width: 10
-          pHeight: 100
+          geometry.size.percent.height: 100
+          geometry.size.fixed.width: 10
       view:
           id: group
           $type: haxework.gui.GroupView
-          pWidth: 100
-          contentSize: true
-          layoutMargin: 5
+          geometry.size.percent.width: 100
+          layout.margin: 5
           layout:
               $type: haxework.gui.layout.TailLayout