added root

.gitignore

@@ -1,4 +1,5 @@
 *.iml
 *.ipr
 *.iws
-out/
+out/
+target/

build.hxml

@@ -0,0 +1,3 @@
+-main examples.ViewExample
+-swf target/ViewExample.swf
+-debug

examples/ViewExample.hx

@@ -1,5 +1,8 @@
 package examples;
 
+import haxework.gui.Root;
+import haxework.gui.core.HAlign;
+import haxework.gui.core.VAlign;
 import flash.Lib;
 import haxework.gui.skin.ColorSkin;
 import haxework.gui.View;
@@ -11,15 +14,13 @@ import haxework.gui.IGroupView;
 class ViewExample {
 
   public static function main() {
-    View.updater.stage = Lib.current.stage;
-
     var group:IGroupView<Sprite> = new GroupView();
-    group.width = 400;
+    group.layoutVAlign = VAlign.MIDDLE;
-    group.height = 400;
+    group.layoutHAlign = HAlign.CENTER;
     group.skin = new ColorSkin(0xffff00);
     var view:IView<Sprite> = new View();
-    view.width = 200;
+    view.pWidth = 80;
-    view.height = 200;
+    view.pHeight = 80;
     view.skin = new ColorSkin(0xff0000);
     group.addView(view);
     view = new View();
@@ -33,5 +34,7 @@ class ViewExample {
     view.skin = new ColorSkin(0x0000ff);
     group.addView(view);
     Lib.current.addChild(group.content);
+
+    new Root(group);
   }
 }

haxework/gui/GroupView.hx

@@ -26,6 +26,10 @@ class GroupView extends View implements IGroupView<Sprite> {
   public function new(?layout:ILayout) {
     super();
     this.layout = layout == null ? new DefaultLayout() : layout;
+    paddings = 0;
+    layoutMargin = 0;
+    layoutHAlign = HAlign.NONE;
+    layoutVAlign = VAlign.NONE;
     views = [];
     viewsById = new Map<String, IView<Sprite>>();
   }

haxework/gui/IView.hx

@@ -11,11 +11,14 @@ interface IView<C> {
   public var x(default, set):Float;
   public var y(default, set):Float;
 
+  public var w(default, set):Float;
+  public var h(default, set):Float;
+
   public var widthType(default, null):SizeType;
   public var heightType(default, null):SizeType;
 
-  public var width(default, set):Float;
+  public var width(get, set):Float;
-  public var height(default, set):Float;
+  public var height(get, set):Float;
 
   public var pWidth(default, set):Float;
   public var pHeight(default, set):Float;

haxework/gui/Root.hx

@@ -0,0 +1,39 @@
+package haxework.gui;
+
+import flash.display.StageAlign;
+import flash.display.StageScaleMode;
+import flash.display.DisplayObject;
+import flash.events.Event;
+import flash.display.Sprite;
+
+class Root {
+
+  private var view:IView<Sprite>;
+
+  public function new(view:IView<Sprite>) {
+    this.view = view;
+    var content:DisplayObject = view.content;
+    if (content.stage == null) {
+      content.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
+    } else {
+      onAddedToStage();
+    }
+  }
+
+  private function onAddedToStage(?_):Void {
+    var content:DisplayObject = view.content;
+    content.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
+    content.stage.scaleMode = StageScaleMode.NO_SCALE;
+    content.stage.align = StageAlign.TOP_LEFT;
+    View.updater.stage = content.stage;
+
+    content.stage.addEventListener(Event.RESIZE, onResize);
+    onResize();
+  }
+
+  private function onResize(?_):Void {
+    var content:DisplayObject = view.content;
+    view.width = content.stage.stageWidth;
+    view.height = content.stage.stageHeight;
+  }
+}

haxework/gui/View.hx

@@ -1,7 +1,5 @@
 package haxework.gui;
 
-import flash.display.StageAlign;
-import flash.display.StageScaleMode;
 import haxework.gui.core.SizeType;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
@@ -22,11 +20,14 @@ class View implements IView<Sprite> {
   public var x(default, set):Float;
   public var y(default, set):Float;
 
+  public var w(default, set):Float;
+  public var h(default, set):Float;
+
   public var widthType(default, null):SizeType;
   public var heightType(default, null):SizeType;
 
-  public var width(default, set):Float;
+  public var width(get, set):Float;
-  public var height(default, set):Float;
+  public var height(get, set):Float;
 
   public var pWidth(default, set):Float;
   public var pHeight(default, set):Float;
@@ -54,8 +55,8 @@ class View implements IView<Sprite> {
     width = 100;
     height = 100;
     margins = 0;
-    vAlign = VAlign.CENTER;
+    vAlign = VAlign.NONE;
-    hAlign = HAlign.MIDDLE;
+    hAlign = HAlign.NONE;
   }
 
   private function invalidate():Void {
@@ -88,24 +89,47 @@ class View implements IView<Sprite> {
     return y;
   }
 
+  private function set_w(value:Float):Float {
+    if (w != value) {
+      w = value;
+      invalidate();
+    }
+    return w;
+  }
+  private function set_h(value:Float):Float {
+    if (h != value) {
+      h = value;
+      invalidate();
+    }
+    return h;
+  }
+
+  private function get_width():Float {
+    return w;
+  }
+
+  private function get_height():Float {
+    return h;
+  }
+
   private function set_width(value:Float):Float {
-    if (width != value || widthType != SizeType.NORMAL) {
+    if (w != value || widthType != SizeType.NORMAL) {
-      width = value;
+      w = value;
       widthType = SizeType.NORMAL;
       invalidate();
       invalidateParent();
     }
-    return width;
+    return w;
   }
 
   private function set_height(value:Float):Float {
-    if (height != value || heightType != SizeType.NORMAL) {
+    if (h != value || heightType != SizeType.NORMAL) {
-      height = value;
+      h = value;
       heightType = SizeType.NORMAL;
       invalidate();
       invalidateParent();
     }
-    return height;
+    return h;
   }
 
   private function set_pWidth(value:Float):Float {
@@ -207,8 +231,6 @@ class Updater {
   }
 
   private function set_stage(value:Stage):Stage {
-    value.scaleMode = StageScaleMode.NO_SCALE;
-    value.align = StageAlign.TOP_LEFT;
     value.addEventListener(Event.ENTER_FRAME, update);
     return value;
   }

haxework/gui/core/Direction.hx

@@ -0,0 +1,6 @@
+package haxework.gui.core;
+
+enum Direction {
+  HORIZONTAL;
+  VERTICAL;
+}

haxework/gui/core/HAlign.hx

@@ -1,7 +1,8 @@
 package haxework.gui.core;
 
 enum HAlign {
-  TOP;
+  NONE;
-  MIDDLE;
+  LEFT;
-  BOTTOM;
+  CENTER;
+  RIGHT;
 }

haxework/gui/core/VAlign.hx

@@ -1,7 +1,8 @@
 package haxework.gui.core;
 
 enum VAlign {
-  LEFT;
+  NONE;
-  CENTER;
+  TOP;
-  RIGHT;
+  MIDDLE;
+  BOTTOM;
 }

haxework/gui/layout/DefaultLayout.hx

@@ -1,5 +1,9 @@
 package haxework.gui.layout;
 
+import haxework.gui.core.SizeType;
+import haxework.gui.core.VAlign;
+import haxework.gui.core.HAlign;
+
 class DefaultLayout implements ILayout {
 
   public function new() {
@@ -7,6 +11,47 @@ class DefaultLayout implements ILayout {
   }
 
   public function place(group:IGroupView<Dynamic>, views:Array<IView<Dynamic>>):Void {
+    for (view in views) {
+      setViewSize(group, view);
+      placeViewHorizontal(group, view);
+      placeViewVertical(group, view);
+    }
+  }
 
+  private function setViewSize(group:IGroupView<Dynamic>, view:IView<Dynamic>):Void {
+    if (view.widthType == SizeType.PERCENT) {
+      view.w = view.pWidth / 100 * group.width;
+    }
+    if (view.heightType == SizeType.PERCENT) {
+      view.h = view.pHeight / 100 * group.height;
+    }
+  }
+
+  private function placeViewHorizontal(group:IGroupView<Dynamic>, view:IView<Dynamic>):Void {
+    var align:HAlign = view.hAlign;
+    if (align == HAlign.NONE) align = group.layoutHAlign;
+    switch (align) {
+      case HAlign.LEFT:
+        view.x = group.leftPadding + view.leftMargin;
+      case HAlign.CENTER:
+        view.x = (group.width - view.width) / 2 + (group.leftPadding - group.rightPadding) + (view.leftMargin - view.rightMargin);
+      case HAlign.RIGHT:
+        view.x = group.width - view.width - group.rightPadding - view.rightMargin;
+      case HAlign.NONE:
+    }
+  }
+
+  private function placeViewVertical(group:IGroupView<Dynamic>, view:IView<Dynamic>):Void {
+    var align:VAlign = view.vAlign;
+    if (align == VAlign.NONE) align = group.layoutVAlign;
+    switch (align) {
+      case VAlign.TOP:
+        view.y = group.topPadding + view.topMargin;
+      case VAlign.MIDDLE:
+        view.y = (group.height - view.height) / 2 + (group.topPadding - group.topPadding) + (view.bottomMargin - view.bottomMargin);
+      case VAlign.BOTTOM:
+        view.y = group.height - view.height - group.bottomPadding - view.bottomMargin;
+      case VAlign.NONE:
+    }
   }
 }