[gui] update

demo/src/demo/Demo.hx

@@ -1,5 +1,7 @@
 package demo;
 
+import haxework.gui.InputView;
+import flash.display.BitmapData;
 import haxework.gui.ToggleButtonView;
 import haxework.gui.IGroupView;
 import haxework.gui.IView;
@@ -12,6 +14,9 @@ import haxework.log.TraceLogger;
 import haxework.gui.Root;
 import haxework.gui.VGroupView;
 
+@:bitmap("haxe-logo.png")
+class HaxeLogo extends BitmapData { }
+
 @:template class Demo extends VGroupView {
 
     @:provide static var resources:IResources;
@@ -21,14 +26,29 @@ import haxework.gui.VGroupView;
         L.push(new TraceLogger());
         resources = new Resources();
         manager = new LoaderManager();
-        Theme.setColor(0x33aa33);
+        resources.image.put("logo", new HaxeLogo(0, 0));
         var demo = new Demo();
-        demo.switcher.change("tail_form");
+        demo.switcher.change("list_form");
         Root.bind(demo);
     }
 
     @:view var switcher:IFrameSwitcher;
     @:view var tabs:IGroupView;
+    @:view var color:InputView;
+
+    private var themeColor(default, set):Int;
+
+    private function init():Void {
+        resources.color.bind("theme", this, "themeColor");
+        resources.color.put("theme", 0x33aa33);
+    }
+
+    private function set_themeColor(value:Int):Int {
+        themeColor = value;
+        Theme.setColor(value);
+        this.color.text = StringTools.hex(value);
+        return themeColor;
+    }
 
     private function onFrameSwicth(frame:IView<Dynamic>):Void {
         for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id;

demo/src/demo/Demo.yaml

@@ -2,12 +2,14 @@
 skin: $r:skin:background
 geometry.size.stretch: true
 views:
+    - $type: haxework.gui.ImageView
+      geometry.padding: 10
+      image: $r:image:logo
     - id: tabs
       $type: haxework.gui.HGroupView
       layout.margin: 5
       layout.hAlign: LEFT
       geometry.size.percent.width: 100
-      geometry.padding.top: 10
       geometry.padding.left: 5
       views:
           - id: list_form
@@ -50,6 +52,12 @@ views:
       layout.hAlign: RIGHT
       layout.margin: 10
       views:
+          - id: color
+            $type: haxework.gui.InputView
+            skin: [ { $type: [haxework.gui.skin.Skin.border, 0xffffff] } ]
+            +onChange: "$code:function(a) resources.color.put('theme', Std.parseInt('0x'+a))"
+            fontColor: 0xffffff
+            geometry.size.percent.width: 100
           - $type: haxework.gui.ButtonView
             geometry.padding: [25, 8]
             skin: $r:skin:button

demo/src/demo/form/ListForm.hx

@@ -1,8 +1,5 @@
 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;
@@ -10,10 +7,6 @@ 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")
@@ -23,10 +16,6 @@ import haxework.net.JsonLoader;
             .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

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

src/main/haxework/gui/ImageView.hx

@@ -1,39 +1,39 @@
 package haxework.gui;
 
-import haxework.net.ImageLoader;
-import haxework.gui.utils.DrawUtil.FillType;
-import haxework.gui.skin.BitmapSkin;
-import haxework.gui.skin.ButtonBitmapSkin;
 import flash.display.BitmapData;
+import haxework.gui.skin.BitmapSkin;
+import haxework.gui.utils.DrawUtil.FillType;
+import haxework.net.ImageLoader;
 
 class ImageView extends SpriteView {
 
-  public var image(default, set):BitmapData;
+    public var image(default, set):BitmapData;
-  public var imageUrl(default, set):String;
+    public var imageUrl(default, set):String;
 
-  public function new(?image:BitmapData) {
+    public function new(?image:BitmapData) {
-    super();
+        super();
-    if (image != null) {
+        if (image != null) {
-      this.image = image;
+            this.image = image;
+        }
     }
-  }
 
-  private function set_image(value:BitmapData):BitmapData {
+    private function set_image(value:BitmapData):BitmapData {
-    if (image != value) {
+        if (image != value) {
-      image = value;
+            image = value;
-      skin = [new BitmapSkin(image, FillType.CONTAIN)];
+            skin = [new BitmapSkin(image, FillType.DEFAULT)];
-      invalidate();
+            toUpdate();
+            toRedraw();
+        }
+        return image;
     }
-    return image;
-  }
 
-  private function set_imageUrl(value:String):String {
+    private function set_imageUrl(value:String):String {
-    if (imageUrl != value) {
+        if (imageUrl != value) {
-      imageUrl = value;
+            imageUrl = value;
-      new ImageLoader().GET(imageUrl).then(function(data) {
+            new ImageLoader().GET(imageUrl).then(function(data) {
-        image = data;
+                image = data;
-      });
+            });
+        }
+        return imageUrl;
     }
-    return imageUrl;
-  }
 }

src/main/haxework/gui/InputView.hx

@@ -1,8 +1,7 @@
 package haxework.gui;
 
+import haxework.signal.Signal;
 import flash.text.TextFormatAlign;
-import haxework.dispath.Dispatcher;
-import haxework.dispath.IDispatcher;
 import flash.events.Event;
 import flash.text.TextFormat;
 import flash.text.TextFieldAutoSize;
@@ -15,81 +14,70 @@ import flash.text.TextFieldType;
 
 class InputView extends TextView implements IDisposable {
 
-  public var hint(default, set):String;
+    public var hint(default, set):String;
-  public var dispatcher(default, null):IDispatcher<InputViewListener>;
+    public var onChange(default, null):Signal<String> = new Signal();
-  public var onKeyUp(null, set):InputViewListener;
 
-  private var hintTextField:TextField;
+    private var hintTextField:TextField;
 
-  public function new() {
+    public function new() {
-    super();
+        super();
-    dispatcher = new Dispatcher<InputViewListener>();
+        textField.addEventListener(Event.CHANGE, onTextChange);
-    textField.addEventListener(Event.CHANGE, onTextChange);
+        textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
-    textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
+        textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
-    textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
 
-    hintTextField = buildHintTextField();
+        hintTextField = buildHintTextField();
-    content.addChild(hintTextField);
+        content.addChild(hintTextField);
-    textFormat.align = TextFormatAlign.LEFT;
+        textFormat.align = TextFormatAlign.LEFT;
-  }
-
-  override private function buildTextField():TextField {
-    return new InputTextField();
-  }
-
-  private function set_hint(value:String):String {
-    if (hint != value) {
-      hint = value;
-      invalidate();
     }
-    return hint;
-  }
 
-  private function buildHintTextField():TextField {
+    override private function buildTextField():TextField {
-    var textField:TextField = new TextField();
+        return new InputTextField();
-    textField.autoSize = TextFieldAutoSize.NONE;
+    }
-    textField.type = TextFieldType.DYNAMIC;
-    textField.multiline = false;
-    textField.defaultTextFormat = new TextFormat("Arial", 16, 0xa0a0a0);
-    textField.mouseEnabled = false;
-    return textField;
-  }
 
-  private function onTextChange(event:Event):Void {
+    private function set_hint(value:String):String {
-    hintTextField.visible = (textField.text == "");
+        if (hint != value) {
-  }
+            hint = value;
+            toUpdate();
+        }
+        return hint;
+    }
 
-  private function _onKeyUp(event:KeyboardEvent):Void {
+    private function buildHintTextField():TextField {
-    event.stopImmediatePropagation();
+        var textField:TextField = new TextField();
-    dispatcher.dispatch(function(listener) listener.onKeyUp(textField.text));
+        textField.autoSize = TextFieldAutoSize.NONE;
-  }
+        textField.type = TextFieldType.DYNAMIC;
+        textField.multiline = false;
+        textField.defaultTextFormat = new TextFormat("Arial", 16, 0xa0a0a0);
+        textField.mouseEnabled = false;
+        return textField;
+    }
 
-  private function onKeyDown(event:KeyboardEvent):Void {
+    private function onTextChange(event:Event):Void {
-    event.stopImmediatePropagation();
+        hintTextField.visible = (textField.text == "");
-  }
+    }
 
-  override public function update():Void {
+    private function _onKeyUp(event:KeyboardEvent):Void {
-    super.update();
+        event.stopImmediatePropagation();
-    var htf:TextFormat = textField.defaultTextFormat;
+        onChange.emit(textField.text);
-    htf.color = 0xa0a0a0;
+    }
-    htf.size -= 2;
-    hintTextField.defaultTextFormat = htf;
-    hintTextField.text = hint == null ? "" : hint;
-    placeTextField(hintTextField);
-  }
 
-  public function dispose():Void {
+    private function onKeyDown(event:KeyboardEvent):Void {
-    textField.removeEventListener(Event.CHANGE, onTextChange);
+        event.stopImmediatePropagation();
-    textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
+    }
-    textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
-  }
 
-  private function set_onKeyUp(value:InputViewListener):InputViewListener {
+    override public function update():Void {
-    dispatcher.addListener(value);
+        super.update();
-    return value;
+        var htf:TextFormat = textField.defaultTextFormat;
-  }
+        htf.color = 0xa0a0a0;
-}
+        htf.size -= 2;
-
+        hintTextField.defaultTextFormat = htf;
-typedef InputViewListener = {
+        hintTextField.text = hint == null ? "" : hint;
-  public function onKeyUp(text:String):Void;
+        placeTextField(hintTextField);
+    }
+
+    public function dispose():Void {
+        textField.removeEventListener(Event.CHANGE, onTextChange);
+        textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
+        textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
+    }
 }

src/main/haxework/gui/LabelView.hx

@@ -1,5 +1,8 @@
 package haxework.gui;
 
+import haxework.gui.core.VAlign;
+import haxework.gui.core.HAlign;
+
 class LabelView extends TextView {
 
     public function new() {
@@ -8,5 +11,7 @@ class LabelView extends TextView {
         textField.selectable = false;
         textField.wordWrap = false;
         textField.multiline = true;
+        layout.hAlign = HAlign.CENTER;
+        layout.vAlign = VAlign.MIDDLE;
     }
 }

src/main/haxework/gui/TextView.hx

@@ -1,5 +1,7 @@
 package haxework.gui;
 
+import haxework.gui.core.VAlign;
+import haxework.gui.core.HAlign;
 import flash.text.TextField;
 import flash.text.TextFieldAutoSize;
 import flash.text.TextFormat;
@@ -7,10 +9,19 @@ import flash.text.TextFormatAlign;
 import haxework.text.BitmapTextField;
 import haxework.text.TextUtil;
 
+class TextLayout {
+    public var hAlign(default, default):HAlign = HAlign.NONE;
+    public var vAlign(default, default):VAlign = VAlign.NONE;
+
+    public function new() {}
+}
+
 class TextView extends SpriteView implements ITextView {
 
     public var textField(default, null):TextField;
     public var text(get, set):String;
+    public var layout:TextLayout;
+
     private var _text:String;
     public var align(default, set):TextFormatAlign;
     public var fontFamily(default, set):String;
@@ -28,6 +39,7 @@ class TextView extends SpriteView implements ITextView {
 
     public function new() {
         super();
+        layout = new TextLayout();
         textField = buildTextField();
         textField.width = 1;
         textField.height = 1;
@@ -144,6 +156,7 @@ class TextView extends SpriteView implements ITextView {
         if (t != null) textField.text = t;
         textField.setTextFormat(textFormat);
         updateTextSize();
+        placeTextField(textField);
         /*if (false && _text != null && _text.length > 0) {
             #if html5
             var h = _textHeight;
@@ -170,23 +183,23 @@ class TextView extends SpriteView implements ITextView {
     }
 
     private function placeTextField(textField:TextField):Void {
-        /*textField.width = width;
+        textField.width = width;
-        textField.height = _textHeight;
+        textField.height = geometry.size.content.height;
 
-        textField.x = switch (layoutHAlign) {
+        textField.x = switch (layout.hAlign) {
             case HAlign.NONE: 0;
-            case HAlign.LEFT: leftPadding;
+            case HAlign.LEFT: geometry.padding.left;
-            case HAlign.CENTER: (width - textField.width) / 2 + leftPadding - rightPadding;
+            case HAlign.CENTER: (width - textField.width) / 2 + geometry.padding.left - geometry.padding.right;
-            case HAlign.RIGHT: width - textField.width - rightPadding;
+            case HAlign.RIGHT: width - textField.width - geometry.padding.right;
             default: 0;
         }
-        textField.y = switch (layoutVAlign) {
+        textField.y = switch (layout.vAlign) {
             case VAlign.NONE: 0;
-            case VAlign.TOP: topPadding;
+            case VAlign.TOP: geometry.padding.top;
-            case VAlign.MIDDLE: (height - _textHeight) / 2 + topPadding - bottomPadding;
+            case VAlign.MIDDLE: (height - geometry.size.content.height) / 2 + geometry.padding.top - geometry.padding.bottom;
-            case VAlign.BOTTOM: height - _textHeight - bottomPadding;
+            case VAlign.BOTTOM: height - geometry.size.content.height - geometry.padding.bottom;
             default: 0;
-        }*/
+        }
     }
 
     override private function set_mouseEnabled(value:Bool):Bool {

src/main/haxework/gui/View.hx

@@ -84,7 +84,7 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_width(value:Float):Float {
-        trace('${this.id}.width = $value');
+        //trace('${this.id}.width = $value');
         if (width != value) {
             width = value;
             toRedraw();
@@ -93,7 +93,7 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_height(value:Float):Float {
-        trace('${this.id}.height = $value');
+        //trace('${this.id}.height = $value');
         if (height != value) {
             height = value;
             toRedraw();

src/main/haxework/gui/core/Geometry.hx

@@ -33,6 +33,10 @@ abstract Size(Array<Float>) {
     @:from static public inline function fromArray(value:Array<Float>):Size {
         return new Size(value);
     }
+
+    @:from static public inline function fromFloat(value:Float):Size {
+        return new Size([value]);
+    }
 }
 
 enum SizeValue {

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

@@ -1,5 +1,6 @@
 package haxework.gui.list;
 
+import haxework.gui.core.Geometry.SizeValue;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.HorizontalLayout;
@@ -8,25 +9,28 @@ import haxework.gui.list.ListView.IListItemView;
 
 class HListView<D> extends ListView<D> {
 
-  public function new() {
+    public function new() {
-    super(new HorizontalLayout(), new VerticalLayout());
+        super(new VerticalLayout(), new HorizontalLayout());
-    //box.layoutHAlign = HAlign.LEFT;
+        box.layout.hAlign = HAlign.LEFT;
-    //box.layoutVAlign = VAlign.MIDDLE;
+        box.layout.vAlign = VAlign.MIDDLE;
-  }
+    }
 
-  override private function recalcSize(item:IListItemView<D>):Void {
+    override private function recalcSize(item:IListItemView<D>):Void {
-    /*itemSize = item.width + item.leftMargin + item.rightMargin + box.layoutMargin;
+        var itemSize = switch(item.geometry.width) {
-    size = Math.ceil(Math.max(0, box.width / itemSize)) + 2;
+            case SizeValue.FIXED(value): value + item.geometry.margin.horizontal + box.layout.margin;
-    sizeDiff = size - ((box.width - box.layoutMargin - 1) / itemSize);*/
+            case _: 0;
-  }
+        }
+        size = Math.ceil(Math.max(0, box.width / itemSize)) + 2;
+        sizeDiff = size - ((box.width - box.layout.margin - 1) / itemSize);
+    }
 
-  override private function set_offsetDiff(value:Float):Float {
+    override private function set_offsetDiff(value:Float):Float {
-    /*box.leftPadding = -value * itemSize;
+        box.geometry.padding.left = -value * itemSize;
-    mask.leftMargin = -box.leftPadding;*/
+        mask.geometry.margin.left = -box.geometry.padding.left;
-    return super.set_offsetDiff(value);
+        return super.set_offsetDiff(value);
-  }
+    }
 
-  override private function onMouseWheel(value:Int):Void {
+    override private function onMouseWheel(value:Int):Void {
-    offset = offset + value;
+        offset = offset - value;
-  }
+    }
 }

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

@@ -10,8 +10,8 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
 
     public function new() {
         super();
-        height = 20;
+        geometry.size.percent.width = 100;
-        //pWidth = 100;
+        geometry.size.fixed.height = 20;
     }
     private function set_data(value:T):T {
         data = value;

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

@@ -41,8 +41,8 @@ class ListView<D> extends GroupView {
     public function new(layout:ILayout, otherLayout:ILayout) {
         super(otherLayout);
         main = new GroupView(layout);
-        //main.layoutHAlign = HAlign.CENTER;
+        main.layout.hAlign = HAlign.CENTER;
-        //main.layoutVAlign = VAlign.MIDDLE;
+        main.layout.vAlign = VAlign.MIDDLE;
         main.geometry.size.stretch = true;
         addView(main);
         box = new GroupView(layout);

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

@@ -1,5 +1,6 @@
 package haxework.gui.list;
 
+import haxework.gui.core.Geometry.SizeValue;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.HorizontalLayout;
@@ -8,25 +9,28 @@ import haxework.gui.list.ListView.IListItemView;
 
 class VListView<D> extends ListView<D> {
 
-  public function new() {
+    public function new() {
-    super(new VerticalLayout(), new HorizontalLayout());
+        super(new VerticalLayout(), new HorizontalLayout());
-    //box.layoutHAlign = HAlign.CENTER;
+        box.layout.hAlign = HAlign.CENTER;
-    //box.layoutVAlign = VAlign.TOP;
+        box.layout.vAlign = VAlign.TOP;
-  }
+    }
 
-  override private function recalcSize(item:IListItemView<D>):Void {
+    override private function recalcSize(item:IListItemView<D>):Void {
-    /*itemSize = item.height + item.topMargin + item.bottomMargin + box.layoutMargin;
+        var itemSize = switch(item.geometry.height) {
-    size = Math.ceil(Math.max(0, box.height / itemSize)) + 2;
+            case SizeValue.FIXED(value): value + item.geometry.margin.vertical + box.layout.margin;
-    sizeDiff = size - ((box.height - box.layoutMargin - 1) / itemSize);*/
+            case _: 0;
-  }
+        }
+        size = Math.ceil(Math.max(0, box.height / itemSize)) + 2;
+        sizeDiff = size - ((box.height - box.layout.margin - 1) / itemSize);
+    }
 
-  override private function set_offsetDiff(value:Float):Float {
+    override private function set_offsetDiff(value:Float):Float {
-    /*box.topPadding = -value * itemSize;
+        box.geometry.padding.top = -value * itemSize;
-    mask.topMargin = -box.topPadding;*/
+        mask.geometry.margin.top = -box.geometry.padding.top;
-    return super.set_offsetDiff(value);
+        return super.set_offsetDiff(value);
-  }
+    }
 
-  override private function onMouseWheel(value:Int):Void {
+    override private function onMouseWheel(value:Int):Void {
-    offset = offset - value;
+        offset = offset - value;
-  }
+    }
 }

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

@@ -33,9 +33,7 @@ class BitmapSkin implements ISkin<SpriteView> {
     public function draw(view:SpriteView):Void {
         if (image == null) return;
         DrawUtil.draw(view.content.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
-        /*if (view.contentSize) {
+        view.geometry.size.content.width = image.width;
-            view.w = image.width;
+        view.geometry.size.content.height = image.height;
-            view.h = image.height;
-        }*/
     }
 }

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

@@ -62,10 +62,8 @@ class ButtonBitmapSkin implements ISkin<ButtonView> {
         if (images == null) return;
         var image:BitmapData = view.disabled ? disableImage == null ? disable : disableImage : images.get(view.state);
         DrawUtil.draw(view.content.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
-        if (view.contentSize) {
+        view.geometry.size.content.width = image.width;
-            view.w = image.width;
+        view.geometry.size.content.height = image.height;
-            view.h = image.height;
-        }
     }
 
 }

src/main/haxework/resources/Resources.hx

@@ -18,6 +18,7 @@ class ResMap<T> extends StringMap<T> {
     }
 
     public function put(key:String, value:T):Void {
+        trace(key, value);
         set(key, value);
         if (listeners.exists(key)) {
             for (f in listeners.get(key)) call(f, value);