[demo] update

demo/build.hxml

@@ -1,10 +1,13 @@
 -cp src
--cp ../../src/main
+-cp ../src/main
 -lib yaml
 -lib promhx
--main ViewExample.hx
 --macro haxework.parser.Parser.auto()
+-debug
+-D native_trace
 -swf-version 10.1
 -swf-header 800:600:30:000000
--swf target/ViewExample.swf
+
+-main demo.Demo
+-swf target/demo.swf
 #-as3 target

demo/run.sh

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
-echo "`pwd`/target" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_test.cfg
+echo "`pwd`/target" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
 . /opt/sdk/haxe/3.4.7/activate
-haxe build.hxml && flashplayerdebugger target/ViewExample.swf
+haxe build.hxml && flashplayerdebugger target/demo.swf

demo/src/demo/Demo.hx

@@ -0,0 +1,23 @@
+package demo;
+
+import haxework.gui.frame.IFrameSwitcher;
+import haxework.net.manage.LoaderManager;
+import haxework.net.manage.ILoaderManager;
+import haxework.log.TraceLogger;
+import haxework.gui.Root;
+import haxework.gui.VGroupView;
+
+@:template class Demo extends VGroupView {
+
+    @:provide static var manager:ILoaderManager;
+
+    public static function main() {
+        L.push(new TraceLogger());
+        manager = new LoaderManager();
+        var demo = new Demo();
+        demo.switcher.change("list_form");
+        Root.bind(demo);
+    }
+
+    @:view public var switcher:IFrameSwitcher;
+}

demo/src/demo/Demo.yaml

@@ -0,0 +1,35 @@
+---
+pWidth: 100
+pHeight: 100
+skin: [ $type: [haxework.gui.skin.Skin.color, 0x333333] ]
+views:
+    - $type: haxework.gui.HGroupView
+      layoutMargin: 10
+      pWidth: 100
+      height: 40
+      views:
+          - $type: haxework.gui.ButtonView
+            skin: $raw:Style.buttonSkin
+            contentSize: true
+            paddings: 8
+            text: List Form
+            +onPress: "$raw:function(_) switcher.change('list_form')"
+          - $type: haxework.gui.ButtonView
+            skin: $raw:Style.buttonSkin
+            contentSize: true
+            paddings: 8
+            text: Tail Form
+            +onPress: "$raw:function(_) switcher.change('tail_form')"
+    - id: switcher
+      $type: haxework.gui.frame.FrameSwitcher
+      pWidth: 100
+      pHeight: 100
+      views:
+          - id: list_form
+            $type: demo.form.ListForm
+            pWidth: 100
+            pHeight: 100
+          - id: tail_form
+            $type: demo.form.TailForm
+            pWidth: 100
+            pHeight: 100

demo/src/demo/Style.hx

@@ -0,0 +1,23 @@
+package demo;
+
+import haxework.gui.skin.ISkin;
+import haxework.gui.skin.ButtonColorSkin;
+import haxework.gui.skin.TextSkin;
+import haxework.gui.skin.Skin;
+import haxework.gui.skin.ISkin.SkinSet;
+
+class Style {
+
+    public static var textSkin = new TextSkin(0xffffff, "Courirer");
+
+    public static var buttonSkin: SkinSet = [
+        new ButtonColorSkin(0x33aa33),
+        textSkin,
+    ];
+
+    public static var viewSkin:SkinSet = [
+        Skin.color(0x33aa33),
+        Skin.border(0xffffff),
+        textSkin,
+    ];
+}

demo/src/demo/form/ListForm.hx

@@ -0,0 +1,33 @@
+package demo.form;
+
+import flash.display.Sprite;
+import haxework.gui.ButtonView;
+import haxework.gui.IView;
+import haxework.gui.list.ListView.IListItemView;
+import haxework.gui.list.VListView;
+import haxework.gui.VGroupView;
+import haxework.net.JsonLoader;
+
+@:template class ListForm extends VGroupView {
+    @:view public var list(default, null):VListView<String>;
+    @:view public var panel(default, null):IView<Sprite>;
+    @:view public var button1(default, null):ButtonView;
+    @:view public var button2(default, null):ButtonView;
+    @:view public var button3(default, null):ButtonView;
+
+    private function init() {
+        new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
+            .then(function(data:Array<Dynamic>) {
+                list.data = data.map(function(item) return '${item.id}: ${item.message}');
+            })
+            .catchError(function(error) trace(error));
+    }
+
+    private function onPress(view:ButtonView):Void {
+        trace('onPress: ${view.id}');
+    }
+
+    private function onItemSelect(item:IListItemView<String>):Void {
+        trace('onItemSelect: ${item.data}');
+    }
+}

demo/src/demo/form/ListForm.yaml

@@ -11,10 +11,10 @@ views:
       pWidth: 100
       pHeight: 100
       scroll:
-          $type: haxework.gui.list.VScrollView
+          $type: haxework.gui.list.VScrollBarView
           width: 10
           pHeight: 100
-          skin: [ $type: [haxework.gui.list.ScrollSkin.vertical, 0x55cc55, 0xccffcc] ]
+          skin: [ $type: [haxework.gui.list.ScrollBarSkin.vertical, 0x55cc55, 0xccffcc] ]
       skin: [ $type: [haxework.gui.skin.Skin.color, 0xffffff] ]
     - id: panel
       $type: haxework.gui.HGroupView
@@ -29,19 +29,19 @@ views:
             +onPress: $this:onPress
             contentSize: true
             paddings: 8
-            skin: $this:buttonSkin
+            skin: $raw:Style.buttonSkin
             text: OK
           - id: button2
             $type: haxework.gui.ButtonView
             +onPress: $this:onPress
             contentSize: true
             paddings: 8
-            skin: $this:buttonSkin
+            skin: $raw:Style.buttonSkin
             text: Apply
           - id: button3
             $type: haxework.gui.ButtonView
             +onPress: $this:onPress
             contentSize: true
             paddings: 8
-            skin: $this:buttonSkin
+            skin: $raw:Style.buttonSkin
             text: Cancel

demo/src/demo/form/TailForm.hx

@@ -0,0 +1,30 @@
+package demo.form;
+
+import haxework.gui.ButtonView;
+import haxework.gui.HGroupView;
+import haxework.gui.IGroupView;
+import haxework.gui.list.ListView.IListItemView;
+import haxework.gui.TextView;
+
+@:template class TailForm extends HGroupView {
+    @:view public var group:IGroupView;
+
+    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.skin = Style.viewSkin;
+            view.text = 'View #${i}';
+            group.addView(view);
+        }
+    }
+
+    private function onPress(view:ButtonView):Void {
+        trace('onPress: ${view.id}');
+    }
+
+    private function onItemSelect(item:IListItemView<String>):Void {
+        trace('onItemSelect: ${item.data}');
+    }
+}

demo/src/demo/form/TailForm.yaml

@@ -0,0 +1,22 @@
+---
+pWidth: 100
+pHeight: 100
+views:
+    - $type: haxework.gui.ScrollView
+      skin: [ $type: [haxework.gui.skin.Skin.color, 0xff0000] ]
+      pWidth: 100
+      pHeight: 100
+      scroll:
+          $type: haxework.gui.list.VScrollBarView
+          width: 10
+          pHeight: 100
+          skin: [ $type: [haxework.gui.list.ScrollBarSkin.vertical, 0x55cc55, 0xccffcc] ]
+      view:
+          id: group
+          $type: haxework.gui.GroupView
+          skin: [ $type: [haxework.gui.skin.Skin.color, 0xffff00] ]
+          pWidth: 100
+          contentSize: true
+          layoutMargin: 5
+          layout:
+              $type: haxework.gui.layout.TailLayout

samples/01-view/src/ViewExample.hx

@@ -1,66 +0,0 @@
-package;
-
-import haxework.net.manage.LoaderManager;
-import haxework.net.manage.ILoaderManager;
-import haxework.net.JsonLoader;
-import haxework.gui.skin.ISkin.SkinSet;
-import haxework.gui.skin.ButtonColorSkin;
-import haxework.gui.skin.TextSkin;
-import flash.display.Sprite;
-import haxework.gui.list.ListView.IListItemView;
-import haxework.gui.list.VListView;
-import haxework.gui.IView;
-import haxework.gui.VGroupView;
-import haxework.gui.ButtonView;
-import haxework.gui.Root;
-
-
-@:template("form.yaml")
-class FormView extends VGroupView {
-    @:view public var list(default, null):VListView<String>;
-    @:view public var panel(default, null):IView<Sprite>;
-    @:view public var button1(default, null):ButtonView;
-    @:view public var button2(default, null):ButtonView;
-    @:view public var button3(default, null):ButtonView;
-
-    private var buttonSkin: SkinSet = [
-        new ButtonColorSkin(0x33aa33),
-        new TextSkin(0xffffff, "Courirer"),
-    ];
-
-    private function init() {
-        trace("init");
-    }
-
-    private function onPress(view:ButtonView):Void {
-        trace('onPress: ${view.id}');
-    }
-
-    private function onItemSelect(item:IListItemView<String>):Void {
-        trace('onItemSelect: ${item.data}');
-    }
-}
-
-class ViewExample {
-
-    @:provide private static var manager:ILoaderManager;
-
-    public static function main() {
-        manager = new LoaderManager(1);
-        new ViewExample();
-    }
-
-    public function new() {
-        var form:FormView = new FormView();
-        Root.bind(form);
-        trace(form.panel);
-        trace(form.button1);
-        trace(form.button2);
-        trace(form.button3);
-        new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
-            .then(function(data:Array<Dynamic>) {
-                form.list.data = data.map(function(item) return '${item.id}: ${item.message}');
-            })
-            .catchError(function(error) trace(error));
-    }
-}

samples/02-loader/build.hxml

@@ -1,8 +0,0 @@
--cp src
--lib promhx
--lib haxework
--main LoaderExample.hx
--swf-version 10.1
--swf-header 800:600:30:000000
--swf target/LoaderExample.swf
-#-as3 target

samples/02-loader/run.sh

@@ -1,4 +0,0 @@
-#!/usr/bin/env bash
-echo "`pwd`/target" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_test.cfg
-. /opt/sdk/haxe/3.4.7/activate
-haxe build.hxml && flashplayerdebugger target/LoaderExample.swf

samples/02-loader/src/LoaderExample.hx

@@ -1,46 +0,0 @@
-package;
-
-import haxework.net.manage.LoaderManager;
-import haxework.net.manage.ILoaderManager;
-import flash.display.Bitmap;
-import flash.Lib;
-import flash.display.BitmapData;
-import haxework.net.ImageLoader;
-import haxework.net.JsonLoader;
-
-
-typedef ChannelItem = {
-    var id:String;
-    var maker:String;
-    var title:String;
-    var message:String;
-}
-
-class LoaderExample {
-
-    @:provide private static var manager:ILoaderManager;
-
-    public static function main() {
-        manager = new LoaderManager(1);
-
-        // Json
-        trace("Json Request");
-        new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
-            .then(function(channel:Array<ChannelItem>) {
-                trace('Json Ok: ${channel.length}');
-                for (item in channel) {
-                    trace('${item.id}: ${item.message}');
-                }
-            })
-            .catchError(function(error) trace(error));
-
-        // Image
-        trace("Image Request");
-        new ImageLoader().GET("http://umix.tv/channel/block/renova/1")
-            .then(function(image:BitmapData) {
-                trace('Image Ok: ${image.width}x${image.height}}');
-                Lib.current.addChild(new Bitmap(image));
-            })
-            .catchError(function(error) trace(error));
-    }
-}

src/main/haxework/gui/Root.hx

@@ -42,6 +42,7 @@ class Root {
     View.updater.stage = content.stage;
 
     content.stage.addEventListener(Event.RESIZE, onResize);
+    content.stage.stageFocusRect = false;
     onResize();
   }
 

src/main/haxework/gui/ScrollView.hx

@@ -0,0 +1,72 @@
+package haxework.gui;
+
+import flash.display.Shape;
+import haxework.gui.skin.Skin;
+import flash.events.MouseEvent;
+import haxework.gui.list.ScrollBarView;
+import haxework.signal.Signal;
+
+class ScrollView extends HGroupView {
+
+    public var view(default, set):IView<Dynamic>;
+    public var scroll(default, set):ScrollBarView;
+
+    public var ratio(default, null):Signal<Float> = new Signal();
+    public var position(default, set):Float = 0;
+
+    private var mask:Shape;
+
+    public function new() {
+        super();
+        skin = [Skin.color(0x0000FF, 1.0)];
+        mask = new Shape();
+        content.addChild(mask);
+        content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
+    }
+
+    private function onMouseWheelEvent(event:MouseEvent):Void {
+        #if flash event.preventDefault(); #end
+        position -= event.delta / 50;
+    }
+
+    private function set_view(value:IView<Dynamic>):IView<Dynamic> {
+        view = value;
+        views = [view, scroll];
+        view.content.mask = mask;
+        return view;
+    }
+
+    private function set_scroll(value:ScrollBarView):ScrollBarView {
+        scroll = value;
+        views = [view, scroll];
+        ratio.connect(function(ratio) {
+            if (scroll.ratio == ratio) return;
+            scroll.ratio = ratio;
+            scroll.visible = scroll.inLayout = ratio < 1;
+        });
+        scroll.onScroll.connect(function(position) this.position = position);
+        return scroll;
+    }
+
+    override public function set_views(value:Array<IView<Dynamic>>):Array<IView<Dynamic>> {
+        return super.set_views(value.filter(function(view) return view != null));
+    }
+
+    private function set_position(value:Float):Float {
+        position = Math.min(Math.max(0, value), 1 - (height / view.height));
+        scroll.position = position;
+        invalidate();
+        return position;
+    }
+
+    override public function update():Void {
+        super.update();
+        ratio.emit(height / view.height);
+        view.y = - position * view.height;
+        // mask redraw
+        mask.graphics.clear();
+        mask.graphics.beginFill(0, 0);
+        mask.graphics.drawRect(0, 0, width, height);
+        mask.graphics.endFill();
+    }
+}

src/main/haxework/gui/frame/FrameSwitcher.hx

@@ -1,32 +1,31 @@
 package haxework.gui.frame;
 
 import haxework.animate.IAnimate;
-import flash.display.Sprite;
 import haxework.gui.IView;
 import haxework.gui.GroupView;
 
 class FrameSwitcher extends GroupView implements IFrameSwitcher {
 
-  public var current(default, null):Null<IView>;
+  public var current(default, null):Null<IView<Dynamic>>;
-  private var frames:Map<String, IView>;
+  private var frames:Map<String, IView<Dynamic>>;
 
   public var animateFactory(default, default):Class<IAnimate>;
   private var animate:IAnimate;
 
   public function new() {
     super();
-    frames = new Map<String, IView>();
+    frames = new Map<String, IView<Dynamic>>();
     current = null;
   }
 
-  private function buildAnimate(view:IView):Null<IAnimate> {
+  private function buildAnimate(view:IView<Dynamic>):Null<IAnimate> {
     if (animateFactory != null) {
       return Type.createInstance(animateFactory, [view]);
     }
     return null;
   }
 
-  public function change(id:String):IView {
+  public function change(id:String):IView<Dynamic> {
     var prev = null;
     if (current != null) {
       if (current.id == id) return current;
@@ -50,7 +49,7 @@ class FrameSwitcher extends GroupView implements IFrameSwitcher {
     return current;
   }
 
-  private function removePrev(prev:Null<IView>):Void {
+  private function removePrev(prev:Null<IView<Dynamic>>):Void {
     if (prev != null) {
       var onHideMethod:Dynamic = Reflect.field(prev, "onHide");
       if (onHideMethod != null) Reflect.callMethod(prev, onHideMethod, []);
@@ -58,7 +57,7 @@ class FrameSwitcher extends GroupView implements IFrameSwitcher {
     }
   }
 
-  override public function set_views(value:Array<IView>):Array<IView> {
+  override public function set_views(value:Array<IView<Dynamic>>):Array<IView<Dynamic>> {
     views = [];
     if (value.length > 0) {
       for (view in value) {

src/main/haxework/gui/frame/IFrameSwitcher.hx

@@ -2,7 +2,7 @@ package haxework.gui.frame;
 
 import haxework.gui.IView;
 
-interface IFrameSwitcher extends IView {
+interface IFrameSwitcher extends IView<Dynamic> {
-  public var current(default, null):Null<IView>;
+  public var current(default, null):Null<IView<Dynamic>>;
-  public function change(id:String):IView;
+  public function change(id:String):IView<Dynamic>;
 }

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

@@ -0,0 +1,58 @@
+package haxework.gui.layout;
+
+typedef Row = {
+    var width:Float;
+    var height:Float;
+    var views:Array<IView<Dynamic>>;
+}
+
+class TailLayout extends DefaultLayout {
+
+    public function new() {
+        super();
+    }
+
+    // ToDo: check group.layoutAlign
+    private function placeRow(group:IGroupView, y:Float, row:Row):Void {
+        var x:Float = (group.width - row.width) / 2;
+        for (v in row.views) {
+            v.x = x;
+            v.y = y + (row.height - v.height) / 2;
+            x += v.width + group.layoutMargin;
+        }
+    }
+
+    override public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {
+        var rows:Array<Row> = [];
+        var row:Row = {
+            width: 0,
+            height: 0,
+            views: [],
+        }
+        for (view in views) {
+            if (row.width + view.width + group.layoutMargin + group.leftMargin + group.rightMargin > group.width) {
+                rows.push(row);
+                row = {
+                    width: 0,
+                    height: 0,
+                    views: [],
+                };
+            }
+            row.views.push(view);
+            row.width += view.width + group.layoutMargin;
+            row.height = Math.max(row.height, view.height);
+        }
+        rows.push(row);
+        var h:Float = Lambda.fold(rows, function(row, h) return row.height + h, 0) + group.layoutMargin * (rows.length - 1);
+        var y:Float = Math.max(group.topMargin, (group.height - h) / 2);
+
+        y = 0;
+        for (row in rows) {
+            placeRow(group, y, row);
+            y += row.height + group.layoutMargin;
+        }
+        if (group.contentSize) {
+            group.height = h;
+        }
+    }
+}

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

@@ -1,11 +1,10 @@
 package haxework.gui.list;
 
-import haxework.gui.list.ListView.IListItemView;
 import haxework.gui.core.HAlign;
-import haxework.gui.layout.VerticalLayout;
-import haxework.gui.list.HScrollView;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.HorizontalLayout;
+import haxework.gui.layout.VerticalLayout;
+import haxework.gui.list.ListView.IListItemView;
 
 class HListView<D> extends ListView<D> {
 

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

@@ -2,7 +2,7 @@ package haxework.gui.list;
 
 import flash.geom.Point;
 
-class HScrollView extends ScrollView {
+class HScrollBarView extends ScrollBarView {
 
   override private function onMouseDown(p:Point):Void {
     mousePosition = p.x - width * position;

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

@@ -20,7 +20,7 @@ class ListView<D> extends GroupView {
   private var sizeDiff:Float;
 
   public var onItemSelect(default, null):Signal<IListItemView<D>>;
-  public var scroll(default, set):ScrollView;
+  public var scroll(default, set):ScrollBarView;
 
   public var prev(default, set):ButtonView;
   public var next(default, set):ButtonView;
@@ -68,7 +68,7 @@ class ListView<D> extends GroupView {
     content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
   }
 
-  private function set_scroll(value:ScrollView):ScrollView {
+  private function set_scroll(value:ScrollBarView):ScrollBarView {
     if (scroll != null) {
       scroll.onScroll.disconnect(onScroll);
       removeView(scroll);

src/main/haxework/gui/list/ScrollBarSkin.hx

@@ -2,7 +2,7 @@ package haxework.gui.list;
 
 import haxework.gui.skin.ISkin;
 
-class HScrollSkin implements ISkin<ScrollView> {
+class HScrollBarSkin implements ISkin<ScrollBarView> {
     public var foreColor(default, default):Int;
     public var backColor(default, default):Int;
 
@@ -11,7 +11,7 @@ class HScrollSkin implements ISkin<ScrollView> {
         this.backColor = backColor;
     }
 
-    public function draw(view:ScrollView):Void {
+    public function draw(view:ScrollBarView):Void {
         if (view.ratio < 1) {
             view.content.graphics.beginFill(backColor);
             view.content.graphics.drawRect(0, 0, view.width, view.height);
@@ -22,7 +22,7 @@ class HScrollSkin implements ISkin<ScrollView> {
     }
 }
 
-class VScrollSkin implements ISkin<ScrollView> {
+class VScrollBarSkin implements ISkin<ScrollBarView> {
     public var foreColor(default, default):Int;
     public var backColor(default, default):Int;
 
@@ -31,7 +31,7 @@ class VScrollSkin implements ISkin<ScrollView> {
         this.backColor = backColor;
     }
 
-    public function draw(view:ScrollView):Void {
+    public function draw(view:ScrollBarView):Void {
         if (view.ratio < 1) {
             view.content.graphics.beginFill(backColor);
             view.content.graphics.drawRect(0, 0, view.width, view.height);
@@ -42,13 +42,13 @@ class VScrollSkin implements ISkin<ScrollView> {
     }
 }
 
-class ScrollSkin {
+class ScrollBarSkin {
-
-    public static function vertical(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
-        return new VScrollSkin(foreColor, backColor);
-    }
 
     public static function horizontal(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
-        return new HScrollSkin(foreColor, backColor);
+        return new HScrollBarSkin(foreColor, backColor);
+    }
+
+    public static function vertical(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
+        return new VScrollBarSkin(foreColor, backColor);
     }
 }

src/main/haxework/gui/list/ScrollBarView.hx

@@ -5,21 +5,20 @@ import haxework.utils.NumberUtil;
 import flash.geom.Point;
 import flash.events.MouseEvent;
 
-class ScrollView extends SpriteView {
+class ScrollBarView extends SpriteView {
 
   public var position(default, set):Float;
   public var ratio(default, set):Float;
 
-  public var onScroll(default, null):Signal<Float>;
+  public var onScroll(default, null):Signal<Float> = new Signal();
 
   private var mousePosition:Float;
 
   public function new() {
     super();
     content.buttonMode = true;
-    position = 0;
     ratio = 1;
-    onScroll = new Signal();
+    position = 0;
     content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownEvent);
   }
 

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

@@ -1,11 +1,10 @@
 package haxework.gui.list;
 
-import haxework.gui.list.ListView.IListItemView;
-import haxework.gui.core.VAlign;
-import haxework.gui.layout.VerticalLayout;
-import haxework.gui.list.VScrollView;
 import haxework.gui.core.HAlign;
+import haxework.gui.core.VAlign;
 import haxework.gui.layout.HorizontalLayout;
+import haxework.gui.layout.VerticalLayout;
+import haxework.gui.list.ListView.IListItemView;
 
 class VListView<D> extends ListView<D> {
 

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

@@ -2,7 +2,7 @@ package haxework.gui.list;
 
 import flash.geom.Point;
 
-class VScrollView extends ScrollView {
+class VScrollBarView extends ScrollBarView {
 
   override private function onMouseDown(p:Point):Void {
     mousePosition = p.y - height * position;

src/main/haxework/gui/skin/BorderSkin.hx

@@ -0,0 +1,20 @@
+package haxework.gui.skin;
+
+class BorderSkin implements ISkin<SpriteView> {
+
+    public var color(default, default):Int;
+    public var alpha(default, default):Float;
+    public var tickness(default, default):Float;
+
+    public function new(color:Int = 0xffffff, alpha:Float = 1.0, tickness: Float = 1.0) {
+        this.color = color;
+        this.alpha = alpha;
+        this.tickness = tickness;
+    }
+
+    public function draw(view:SpriteView):Void {
+        view.content.graphics.lineStyle(tickness, color, alpha, true);
+        view.content.graphics.drawRect(0, 0, view.width, view.height);
+        view.content.graphics.lineStyle();
+    }
+}

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

@@ -5,4 +5,8 @@ class Skin {
     public static function color(color: Int, alpha: Float = 1.0): ISkin<SpriteView> {
         return new ColorSkin(color, alpha);
     }
+
+    public static function border(color: Int, alpha: Float = 1.0, tickness: Float = 1.0): ISkin<SpriteView> {
+        return new BorderSkin(color, alpha, tickness);
+    }
 }

src/main/haxework/log/TraceLogger.hx

@@ -19,7 +19,7 @@ class TraceLogger extends BaseLogger {
                 var str = flash.Boot.__string_rec(v, "");
                 untyped __global__["trace"](str);
             #else
-                untyped flash.Boot.__trace(v);
+                untyped flash.Boot.__trace(v, infos);
             #end
         #elseif neko
             untyped {