[gui] udpate skins and dispatchers

.editorconfig

@@ -0,0 +1,9 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true

haxelib.json

@@ -1,16 +1,21 @@
 {
-  "name": "haxework",
+    "name": "haxework",
-  "url" : "https://bitbucket.org/shmyga/haxework",
+    "url": "https://bitbucket.org/shmyga/haxework",
-  "license": "BSD",
+    "license": "BSD",
-  "tags": ["flash", "openfl"],
+    "tags": [
-  "description": "Framework.",
+        "flash",
-  "version": "0.8.2",
+        "openfl"
-  "releasenote": "Update.",
+    ],
-  "contributors": ["shmyga"],
+    "description": "Framework.",
-  "classPath": "src/main",
+    "version": "0.9.0",
-  "dependencies": {
+    "releasenote": "Update.",
-    "promhx": "1.1.0",
+    "contributors": [
-    "openfl": "8.5.1",
+        "shmyga"
-    "yaml": "1.3.0"
+    ],
-  }
+    "classPath": "src/main",
+    "dependencies": {
+        "promhx": "1.1.0",
+        "openfl": "8.5.1",
+        "yaml": "1.3.0"
+    }
 }

samples/01-view/build.hxml

@@ -5,5 +5,6 @@
 -main ViewExample.hx
 --macro haxework.parser.Parser.auto()
 
+-swf-header 800:600:30:000000
 -swf target/ViewExample.swf
-#-as3 target
+#-as3 target

samples/01-view/src/ViewExample.hx

@@ -1,20 +1,25 @@
 package;
 
-import haxework.gui.View;
+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;
 
 
-@:template2("form.json")
+@:template("form.yaml")
 class FormView extends VGroupView {
-    @:view public var panel(default, null):View;
+    @:view public var list(default, null):VListView<String>;
-    @:view public var button1(default, null):View;
+    @:view public var panel(default, null):IView<Sprite>;
-    @:view public var button2(default, null):View;
+    @:view public var button1(default, null):ButtonView;
-    @:view public var button3(default, null):View;
+    @:view public var button2(default, null):ButtonView;
+    @:view public var button3(default, null):ButtonView;
 
     private function init() {
-        trace('Init');
+        trace("init");
+        list.data = [for (i in 0...100) StringTools.hex(Math.floor(Math.random() * 1e9))];
     }
 }
 
@@ -31,9 +36,17 @@ class ViewExample {
         trace(form.button1);
         trace(form.button2);
         trace(form.button3);
+        form.button1.onPress.connect(onPress);
+        form.button2.onPress.connect(onPress);
+        form.button3.onPress.connect(onPress);
+        form.list.onItemSelect.connect(onItemSelect);
     }
 
-    public function onPress(view:ButtonView):Void {
+    private function onPress(view:ButtonView):Void {
-        trace("onPress: " + view.id);
+        trace('onPress: ${view.id}');
     }
-}
+
+    private function onItemSelect(item:IListItemView<String>):Void {
+        trace('onItemSelect: ${item.data}');
+    }
+}

samples/01-view/src/form.json

@@ -1,63 +0,0 @@
-{
-  "@type":"haxework.gui.VGroupView",
-  "paddings":20,
-  "layoutMargin":10,
-  "skin":{"@type":"haxework.gui.skin.ColorSkin", "color":"0xff0000"},
-  "views":[
-    {
-      "@type":"haxework.gui.SpriteView",
-      "pWidth":100,
-      "pHeight":100,
-      "leftMargin":5,
-      "rightMargin":10,
-      "skin":{"@type":"haxework.gui.skin.ColorSkin", "color":"0x00ff00"}
-    },
-    {
-      "@type":"haxework.gui.SpriteView",
-      "vAlign":"BOTTOM",
-      "width":50,
-      "height":50,
-      "leftMargin":5,
-      "rightMargin":10,
-      "skin":{"@type":"haxework.gui.skin.ColorSkin", "color":"0x0000ff"}
-    },
-    {
-      "id":"panel",
-      "@type":"haxework.gui.HGroupView",
-      "layoutHAlign":"RIGHT",
-      "pWidth":100,
-      "height":30,
-      "paddings":3,
-      "layoutMargin":3,
-      "skin":{"@type":"haxework.gui.skin.ColorSkin", "color":"0xffff00"},
-      "views":[
-        {
-          "id":"button1",
-          "@type":"haxework.gui.ButtonView",
-          "width":100,
-          "pHeight":100,
-          "skin":{"@type":"haxework.gui.skin.ButtonColorSkin", "color":"0xcc0000"},
-          "text":"Text1"
-        },
-        {
-          "id":"button2",
-          "@type":"haxework.gui.ButtonView",
-          "contentSize":true,
-          "skin":{"@type":"haxework.gui.skin.ButtonColorSkin", "color":"0x00cc00"},
-          "text":"Text2",
-          "fontFamily":"Georgia",
-          "fontColor":"0xffffff"
-        },
-        {
-          "id":"button3",
-          "@type":"haxework.gui.ButtonView",
-          "contentSize":true,
-          "skin":{"@type":"haxework.gui.skin.ButtonColorSkin", "color":"0x00cccc"},
-          "text":"Text 3333333333 ddd",
-          "fontFamily":"Tahoma",
-          "fontColor":"0xff0000"
-        }
-      ]
-    }
-  ]
-}

samples/01-view/src/form.yaml

@@ -0,0 +1,64 @@
+---
+$type: haxework.gui.VGroupView
+paddings: 20
+layoutMargin: 10
+# skin:
+#     $type: haxework.gui.skin.ColorSkin
+#     color: 0xff0000
+views:
+    - id: list
+      $type: haxework.gui.list.VListView<String>
+      factory: $class:haxework.gui.list.LabelListItem
+      pWidth: 100
+      pHeight: 100
+      leftMargin: 5
+      rightMargin: 10
+      scroll:
+          $type: haxework.gui.list.VScrollView
+          width: 10
+          pHeight: 100
+          skin: [ "$class:haxework.gui.list.ScrollSkin.vertical(0xcccccc,0x555555)" ]
+      skin: [$class:haxework.gui.skin.Skin.color(0xffffff)]
+    - $type: haxework.gui.SpriteView
+      vAlign: BOTTOM
+      width: 50
+      height: 50
+      leftMargin: 5
+      rightMargin: 10
+      skin: [$class:haxework.gui.skin.Skin.color(0x0000ff)]
+    - id: panel
+      $type: haxework.gui.HGroupView
+      layoutHAlign: RIGHT
+      pWidth: 100
+      height: 30
+      paddings: 3
+      layoutMargin: 3
+      skin: [$class:haxework.gui.skin.Skin.color(0xffff00)]
+      views:
+          - id: button1
+            $type: haxework.gui.ButtonView
+            width: 100
+            pHeight: 100
+            skin: [$class:haxework.gui.skin.ButtonSkin.color(0xcc0000)]
+            # skin:
+            #     $type: haxework.gui.skin.ButtonColorSkin
+            #     color: 0xcc0000
+            text: Text1
+          - id: button2
+            $type: haxework.gui.ButtonView
+            contentSize: true
+            # skin:
+            #     $type: haxework.gui.skin.ButtonColorSkin
+            #     color: 0x00cc00
+            text: Text2
+            fontFamily: Georgia
+            fontColor: 0xffffff
+          - id: button3
+            $type: haxework.gui.ButtonView
+            contentSize: true
+            # skin:
+            #     $type: haxework.gui.skin.ButtonColorSkin
+            #     color: 0x00cccc
+            text: Text 3333333333 ddd
+            fontFamily: Tahoma
+            fontColor: 0xff0000

samples/01-view/test.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+. /opt/sdk/haxe/3.4.7/activate
+haxe build.hxml && flashplayerdebugger target/ViewExample.swf

src/main/haxework/gui/AnimateView.hx

@@ -18,7 +18,7 @@ class AnimateView extends SpriteView {
     frames = [];
     frame = 0;
     interval = 200;
-    contentAsSprite.addChild(bitmap);
+    content.addChild(bitmap);
     changeFrame();
   }
 
@@ -54,4 +54,4 @@ class AnimateView extends SpriteView {
     bitmap.x = (width - bitmap.width) / 2;
     bitmap.y = (height - bitmap.height) / 2;
   }
-}
+}

src/main/haxework/gui/ButtonView.hx

@@ -1,8 +1,7 @@
 package haxework.gui;
 
+import haxework.signal.Signal;
 import flash.events.MouseEvent;
-import haxework.dispath.Dispatcher;
-import haxework.dispath.IDispatcher;
 
 enum ButtonState {
   UP;
@@ -14,8 +13,7 @@ class ButtonView extends LabelView {
 
   public var disabled(default, set):Bool;
   public var state(get, null):ButtonState;
-  public var dispatcher(default, null):IDispatcher<ButtonViewListener<Dynamic>>;
+  public var onPress(default, null):Signal<ButtonView>;
-  public var onPress(null, set):ButtonViewListener<Dynamic>;
 
   private var overed:Bool;
   private var downed:Bool;
@@ -25,9 +23,9 @@ class ButtonView extends LabelView {
     overed = false;
     downed = false;
     state = ButtonState.UP;
-    dispatcher = new Dispatcher<ButtonViewListener<Dynamic>>();
+    onPress = new Signal();
-    contentAsSprite.buttonMode = true;
+    content.buttonMode = true;
-    contentAsSprite.mouseChildren = false;
+    content.mouseChildren = false;
     #if js
     content.addEventListener(MouseEvent.MOUSE_UP, onMouseClick);
     #else
@@ -44,7 +42,7 @@ class ButtonView extends LabelView {
   private function onMouseClick(event:MouseEvent):Void {
     #if js if (downed) { #end
       event.stopImmediatePropagation();
-      if (!disabled) dispatcher.dispatch(pressCaller);
+      if (!disabled) onPress.emit(this);
     #if js } #end
   }
 
@@ -74,14 +72,10 @@ class ButtonView extends LabelView {
     }
   }
 
-  private function pressCaller(listener:ButtonViewListener<Dynamic>):Void {
-    try {listener.onPress(this);} catch (error:Dynamic) L.e("onPress", "", error);
-  }
-
   private function set_disabled(value:Bool):Bool {
     if (disabled != value) {
       disabled = value;
-      contentAsSprite.buttonMode = !disabled;
+      content.buttonMode = !disabled;
       invalidate();
     }
     return disabled;
@@ -95,13 +89,8 @@ class ButtonView extends LabelView {
     #end
   }
 
-  private function set_onPress(value:ButtonViewListener<Dynamic>):ButtonViewListener<Dynamic> {
-    dispatcher.addListener(value);
-    return value;
-  }
-
   public function dispose():Void {
-    dispatcher.removeAllListeners();
+    onPress.dispose();
     content.removeEventListener(MouseEvent.CLICK, onMouseClick);
     content.removeEventListener(MouseEvent.MOUSE_UP, onMouseClick);
     content.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
@@ -110,7 +99,3 @@ class ButtonView extends LabelView {
     content.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
   }
 }
-
-typedef ButtonViewListener<V:ButtonView> = {
-  public function onPress(view:V):Void;
-}

src/main/haxework/gui/GroupView.hx

@@ -10,7 +10,7 @@ import flash.display.Sprite;
 class GroupView extends SpriteView implements IGroupView {
   public var container(get, null):DisplayObjectContainer;
 
-  public var views(default, set):Array<IView>;
+  public var views(default, set):Array<IView<Dynamic>>;
   public var layout(default, default):ILayout;
   
   public var layoutVAlign(default, set):VAlign;
@@ -23,7 +23,7 @@ class GroupView extends SpriteView implements IGroupView {
   public var bottomPadding(default, set):Float;
   public var paddings(null, set):Float;
 
-  private var viewsById:Map<String, IView>;
+  private var viewsById:Map<String, IView<Dynamic>>;
 
   public function new(?layout:ILayout) {
     super();
@@ -33,11 +33,11 @@ class GroupView extends SpriteView implements IGroupView {
     layoutHAlign = HAlign.CENTER;
     layoutVAlign = VAlign.MIDDLE;
     views = [];
-    viewsById = new Map<String, IView>();
+    viewsById = new Map<String, IView<Dynamic>>();
   }
 
   inline private function get_container():DisplayObjectContainer {
-    return contentAsSprite;
+    return content;
   }
 
   override public function update():Void {
@@ -45,52 +45,52 @@ class GroupView extends SpriteView implements IGroupView {
     for (view in views) {
       view.update();
       if (view.index > -1) {
-        contentAsSprite.setChildIndex(view.content, view.index);
+        content.setChildIndex(view.content, view.index);
       }
     }
     super.update();
   }
 
-  public function set_views(value:Array<IView>):Array<IView> {
+  public function set_views(value:Array<IView<Dynamic>>):Array<IView<Dynamic>> {
     removeAllViews();
     if (views == null) views = [];
     for (view in value) addView(view);
     return views;
   }
 
-  public function addView(view:IView):IView {
+  public function addView(view:IView<Dynamic>):IView<Dynamic> {
     views.push(view);
     viewsById.set(view.id, view);
-    if (view.content != null) contentAsSprite.addChild(view.content);
+    if (view.content != null) content.addChild(view.content);
     view.parent = this;
     invalidate();
     return view;
   }
 
-  public function insertView(view:IView, index:Int):IView {
+  public function insertView(view:IView<Dynamic>, index:Int):IView<Dynamic> {
     if (index < 0) index = views.length + index;
     views.insert(index, view);
     viewsById.set(view.id, view);
-    if (view.content != null) contentAsSprite.addChild(view.content);
+    if (view.content != null) content.addChild(view.content);
     view.parent = this;
     invalidate();
     return view;
   }
 
-  public function addViewFirst(view:IView):IView {
+  public function addViewFirst(view:IView<Dynamic>):IView<Dynamic> {
     views.unshift(view);
     viewsById.set(view.id, view);
-    contentAsSprite.addChild(view.content);
+    content.addChild(view.content);
     view.parent = this;
     invalidate();
     return view;
   }
 
-  public function removeView(view:IView):IView {
+  public function removeView(view:IView<Dynamic>):IView<Dynamic> {
     view.parent = null;
     viewsById.remove(view.id);
     views.remove(view);
-    if (view.content != null) contentAsSprite.removeChild(view.content);
+    if (view.content != null) content.removeChild(view.content);
     invalidate();
     return view;
   }
@@ -101,7 +101,7 @@ class GroupView extends SpriteView implements IGroupView {
     }
   }
 
-  public function removeViewById(id:String):IView {
+  public function removeViewById(id:String):IView<Dynamic> {
     if (viewsById.exists(id)) {
       return removeView(viewsById.get(id));
     } else {
@@ -109,7 +109,7 @@ class GroupView extends SpriteView implements IGroupView {
     }
   }
 
-  public function findViewById<V:IView>(id:String, ?clazz:Class<V>):Null<V> {
+  public function findViewById<V:IView<Dynamic>>(id:String, ?clazz:Class<V>):Null<V> {
     var idd:Array<String> = id.split(":");
     if (idd.length > 1) {
       var id0 = idd.shift();
@@ -189,4 +189,4 @@ class GroupView extends SpriteView implements IGroupView {
     invalidate();
     return value;
   }
-}
+}

src/main/haxework/gui/IGroupView.hx

@@ -1,26 +1,25 @@
 package haxework.gui;
 
-import flash.display.DisplayObject;
 import flash.display.DisplayObjectContainer;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.ILayout;
 
-interface IGroupView extends IView extends HasPaddings {
+interface IGroupView extends IView<Dynamic> extends HasPaddings {
   public var container(get, null):DisplayObjectContainer;
 
-  public var views(default, set):Array<IView>;
+  public var views(default, set):Array<IView<Dynamic>>;
   public var layout(default, default):ILayout;
 
   public var layoutVAlign(default, set):VAlign;
   public var layoutHAlign(default, set):HAlign;
   public var layoutMargin(default, set):Float;
 
-  public function addView(view:IView):IView;
+  public function addView(view:IView<Dynamic>):IView<Dynamic>;
-  public function addViewFirst(view:IView):IView;
+  public function addViewFirst(view:IView<Dynamic>):IView<Dynamic>;
-  public function insertView(view:IView, index:Int):IView;
+  public function insertView(view:IView<Dynamic>, index:Int):IView<Dynamic>;
-  public function removeView(view:IView):IView;
+  public function removeView(view:IView<Dynamic>):IView<Dynamic>;
   public function removeAllViews():Void;
-  public function removeViewById(id:String):IView;
+  public function removeViewById(id:String):IView<Dynamic>;
-  public function findViewById<V:IView>(id:String, ?clazz:Class<V>):Null<V>;
+  public function findViewById<V:IView<Dynamic>>(id:String, ?clazz:Class<V>):Null<V>;
-}
+}

src/main/haxework/gui/ITextView.hx

@@ -4,7 +4,7 @@ import flash.text.TextField;
 import haxework.gui.IView;
 import flash.text.TextFormatAlign;
 
-interface ITextView extends IView extends HasPaddings {
+interface ITextView extends IView<Dynamic> extends HasPaddings {
   public var textField(default, null):TextField;
   public var text(get, set):String;
   public var align(default, set):TextFormatAlign;

src/main/haxework/gui/IView.hx

@@ -1,12 +1,12 @@
 package haxework.gui;
 
+import haxework.gui.skin.Skin.TSkinSet;
 import flash.display.DisplayObject;
 import haxework.gui.core.VAlign;
 import haxework.gui.core.HAlign;
-import haxework.gui.skin.ISkin;
 import haxework.gui.core.SizeType;
 
-interface IView {
+interface IView<C:DisplayObject> {
   public var id(default, default):String;
 
   public var x(default, set):Float;
@@ -37,8 +37,8 @@ interface IView {
   public var bottomMargin(default, set):Float;
   public var margins(null, set):Float;
 
-  public var content(default, null):DisplayObject;
+  public var content(default, null):C;
-  public var skin(default, set):ISkin<Dynamic>;
+  public var skin(default, set):TSkinSet;
 
   public var parent(default, null):Null<IGroupView>;
   public var inLayout(default, set):Bool;
@@ -51,4 +51,4 @@ interface IView {
   public function invalidate():Void;
 
   public function remove():Void;
-}
+}

src/main/haxework/gui/InputView.hx

@@ -29,7 +29,7 @@ class InputView extends TextView implements IDisposable {
     textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
 
     hintTextField = buildHintTextField();
-    contentAsSprite.addChild(hintTextField);
+    content.addChild(hintTextField);
     textFormat.align = TextFormatAlign.LEFT;
   }
 
@@ -92,4 +92,4 @@ class InputView extends TextView implements IDisposable {
 
 typedef InputViewListener = {
   public function onKeyUp(text:String):Void;
-}
+}

src/main/haxework/gui/MovieView.hx

@@ -4,7 +4,7 @@ import haxework.net.SwfLoader;
 import flash.display.MovieClip;
 
 //ToDo: sprite wrapper?
-class MovieView extends View {
+class MovieView extends View<MovieClip> {
 
   public var movie(get, set):MovieClip;
   public var movieUrl(default, set):String;
@@ -54,4 +54,4 @@ class MovieView extends View {
       content.y = (height - content.loaderInfo.height * s) / 2;
     }
   }
-}
+}

src/main/haxework/gui/Root.hx

@@ -10,16 +10,16 @@ import flash.display.Sprite;
 
 class Root {
 
-  public static function bind(view:IView, autoSize:Bool = true) {
+  public static function bind(view:IView<Dynamic>, autoSize:Bool = true) {
     new Root(view, autoSize);
   }
 
   public static var instance(default, null):Root;
 
-  public var view(default, null):IView;
+  public var view(default, null):IView<Dynamic>;
   public var autoSize(default, default):Bool;
 
-  public function new(view:IView, autoSize:Bool = true) {
+  public function new(view:IView<Dynamic>, autoSize:Bool = true) {
     if (instance != null) throw new Error("Only one instance");
     instance = this;
     this.view = view;

src/main/haxework/gui/SpriteView.hx

@@ -1,27 +1,28 @@
 package haxework.gui;
 
-import flash.display.Graphics;
 import flash.display.Sprite;
 
-class SpriteView extends View {
+class SpriteView extends View<Sprite> {
-
-  public var contentAsSprite(get, null):Sprite;
 
   public function new() {
     super(new Sprite());
   }
 
-  inline private function get_contentAsSprite():Sprite {
+  override public function update():Void {
-    return cast content;
+      super.update();
+      this.content.graphics.clear();
+      for (skin in this.skin) {
+          skin(this);
+      }
   }
 
-  #if dev_layout
+    #if dev_layout
   override public function update():Void {
     super.update();
-    var g:Graphics = contentAsSprite.graphics;
+    var g:Graphics = content.graphics;
     g.lineStyle(1, 0x00ff00);
     g.drawRect(0, 0, width, height);
     g.lineStyle();
   }
   #end
-}
+}

src/main/haxework/gui/TextView.hx

@@ -60,7 +60,7 @@ class TextView extends SpriteView implements ITextView {
     textFormat.size = 16;
     textFormat.leading = 0;
     textFormat.align = TextFormatAlign.CENTER;
-    contentAsSprite.addChild(textField);
+    content.addChild(textField);
   }
 
   private function buildTextField():TextField {

src/main/haxework/gui/View.hx

@@ -1,20 +1,16 @@
 package haxework.gui;
 
+import haxework.gui.skin.Skin.TSkinSet;
 import flash.display.InteractiveObject;
 import flash.display.DisplayObject;
-import flash.errors.Error;
-import haxework.gui.skin.ISize;
 import haxework.gui.core.SizeType;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import flash.events.Event;
 import flash.display.Stage;
-import haxework.gui.skin.FakeSkin;
-import haxework.gui.skin.ISkin;
 
-import flash.display.Sprite;
 
-class View implements IView {
+class View<C:DisplayObject> implements IView<C> {
 
   private static var counter:Int = 0;
   public static var updater(default, null):Updater = new Updater();
@@ -49,8 +45,8 @@ class View implements IView {
   public var bottomMargin(default, set):Float;
   public var margins(null, set):Float;
 
-  public var content(default, null):DisplayObject;
+  public var content(default, null):C;
-  public var skin(default, set):ISkin<Dynamic>;
+  public var skin(default, set):TSkinSet;
 
   public var parent(default, null):Null<IGroupView>;
   public var inLayout(default, set):Bool;
@@ -59,7 +55,7 @@ class View implements IView {
   public var index(default, set):Int;
   public var mouseEnabled(default, set):Bool = true;
 
-  public function new(content:DisplayObject) {
+  public function new(content:C) {
     id = Type.getClassName(Type.getClass(this)) + counter++;
     this.content = content;
     x = 0;
@@ -72,10 +68,7 @@ class View implements IView {
     inLayout = true;
     visible = true;
     index = -1;
-  }
+    skin = [];
-
-  private function currentSkin():ISkin<Dynamic> {
-    return skin;
   }
 
   public function invalidate():Void {
@@ -92,13 +85,13 @@ class View implements IView {
       content.x = x;
       content.y = y;
     }
-    var skin:ISkin<Dynamic> = currentSkin();
+    /*var skin:ISkin<Dynamic> = currentSkin();
     if (contentSize && skin != null && Std.is(skin, ISize)) {
       var size:ISize = cast(skin, ISize);
       if (!Math.isNaN(size.width)) width = size.width;
       if (!Math.isNaN(size.height))  height = size.height;
     }
-    if (skin != null) skin.draw(this);
+    if (skin != null) skin.draw(this);*/
   }
 
   public function remove():Void {
@@ -264,7 +257,7 @@ class View implements IView {
     return value;
   }
 
-  private function set_skin(value:ISkin<Dynamic>):ISkin<Dynamic> {
+  private function set_skin(value:TSkinSet):TSkinSet {
     skin = value;
     invalidate();
     return skin;
@@ -309,7 +302,7 @@ class View implements IView {
 class Updater {
 
   public var stage(null, set):Stage;
-  private var invalidated:Array<Dynamic>;
+  private var invalidated:Array<IView<Dynamic>>;
 
   public function new() {
     invalidated = [];
@@ -320,7 +313,7 @@ class Updater {
     return value;
   }
 
-  public function invalidate(view:IView):Void {
+  public function invalidate(view:IView<Dynamic>):Void {
     if (Lambda.indexOf(invalidated, view) == -1) invalidated.push(view);
   }
 
@@ -339,4 +332,4 @@ class Updater {
     if (t > 10) trace("UPDATE(" + t + ")");
   }
 
-}
+}

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

@@ -35,7 +35,7 @@ class FrameSwitcher extends GroupView implements IFrameSwitcher {
     current = frames.get(id);
     addView(current);
     //ToDo:
-    if (content.stage != null) content.stage.focus = cast(current, SpriteView).contentAsSprite;
+    if (content.stage != null) content.stage.focus = cast(current, SpriteView).content;
     var onShowMethod:Dynamic = Reflect.field(current, "onShow");
     if (onShowMethod != null) Reflect.callMethod(current, onShowMethod, []);
     if (animate != null) animate.cancel();
@@ -69,4 +69,4 @@ class FrameSwitcher extends GroupView implements IFrameSwitcher {
     }
     return value;
   }
-}
+}

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

@@ -10,7 +10,7 @@ class DefaultLayout implements ILayout {
 
   }
 
-  public function place(group:IGroupView, views:Array<IView>):Void {
+  public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {
     for (view in views) {
       setViewWidth(group, view);
       setViewHeight(group, view);
@@ -19,8 +19,8 @@ class DefaultLayout implements ILayout {
     }
   }
 
-  private function filterViews(group:IGroupView, views:Array<IView>):Array<IView> {
+  private function filterViews(group:IGroupView, views:Array<IView<Dynamic>>):Array<IView<Dynamic>> {
-    return Lambda.array(Lambda.filter(views, function(view:IView):Bool {
+    return Lambda.array(Lambda.filter(views, function(view:IView<Dynamic>):Bool {
       return if (view.inLayout) {
         true;
       } else {
@@ -33,7 +33,7 @@ class DefaultLayout implements ILayout {
     }));
   }
 
-  private function setViewWidth(group:IGroupView, view:IView):Void {
+  private function setViewWidth(group:IGroupView, view:IView<Dynamic>):Void {
     if (view.widthType == SizeType.PERCENT) {
       view.w = view.pWidth / 100 * (group.width - view.leftMargin - view.rightMargin - group.leftPadding - group.rightPadding);
     } else if (group.contentSize && group.width < view.width) {
@@ -41,7 +41,7 @@ class DefaultLayout implements ILayout {
     }
   }
 
-  private function setViewHeight(group:IGroupView, view:IView):Void {
+  private function setViewHeight(group:IGroupView, view:IView<Dynamic>):Void {
     if (view.heightType == SizeType.PERCENT) {
       view.h = view.pHeight / 100 * (group.height - view.topMargin - view.bottomMargin - group.topPadding - group.bottomPadding);
     } else if (group.contentSize && group.height < view.height) {
@@ -49,7 +49,7 @@ class DefaultLayout implements ILayout {
     }
   }
 
-  private function placeViewHorizontal(group:IGroupView, view:IView):Void {
+  private function placeViewHorizontal(group:IGroupView, view:IView<Dynamic>):Void {
     var align:HAlign = view.hAlign;
     if (align == HAlign.NONE) align = group.layoutHAlign;
     switch (align) {
@@ -63,7 +63,7 @@ class DefaultLayout implements ILayout {
     }
   }
 
-  private function placeViewVertical(group:IGroupView, view:IView):Void {
+  private function placeViewVertical(group:IGroupView, view:IView<Dynamic>):Void {
     var align:VAlign = view.vAlign;
     if (align == VAlign.NONE) align = group.layoutVAlign;
     switch (align) {
@@ -76,4 +76,4 @@ class DefaultLayout implements ILayout {
       case VAlign.NONE:
     }
   }
-}
+}

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

@@ -1,6 +1,5 @@
 package haxework.gui.layout;
 
-import haxework.core.Tuple;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.SizeType;
 
@@ -10,7 +9,7 @@ class HorizontalLayout extends DefaultLayout {
     super();
   }
 
-  override public function place(group:IGroupView, views:Array<IView>):Void {
+  override public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {
     views = filterViews(group, views);
 
     var fixedSize:Float = group.layoutMargin * (views.length - 1);

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

@@ -1,5 +1,5 @@
 package haxework.gui.layout;
 
 interface ILayout {
-  public function place(group:IGroupView, views:Array<IView>):Void;
+  public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void;
-}
+}

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

@@ -9,7 +9,7 @@ class VerticalLayout extends DefaultLayout {
     super();
   }
 
-  override public function place(group:IGroupView, views:Array<IView>):Void {
+  override public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {
     views = filterViews(group, views);
 
     var fixedSize:Float = group.layoutMargin * (views.length - 1);

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

@@ -1,28 +0,0 @@
-package haxework.gui.list;
-
-import haxework.gui.skin.ISkin;
-import flash.display.Sprite;
-import flash.display.Graphics;
-
-class HScrollSkin implements ISkin<ScrollView> {
-
-  public var foreColor(default, default):Int;
-  public var backColor(default, default):Int;
-
-  public function new(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
-    this.foreColor = foreColor;
-    this.backColor = backColor;
-  }
-
-  public function draw(view:ScrollView):Void {
-    var graphics:Graphics = view.contentAsSprite.graphics;
-    graphics.clear();
-    if (view.ratio < 1) {
-      graphics.beginFill(backColor);
-      graphics.drawRect(0, 0, view.width, view.height);
-      graphics.beginFill(foreColor);
-      graphics.drawRect(view.width * view.position, 0, view.width * view.ratio, view.height);
-      graphics.endFill();
-    }
-  }
-}

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

@@ -1,23 +1,15 @@
 package haxework.gui.list;
 
-import haxework.gui.list.ScrollView.ScrollListener;
 import flash.geom.Point;
-import haxework.gui.list.HScrollSkin;
 
 class HScrollView extends ScrollView {
 
-  public function new() {
-    super();
-  }
-
   override private function onMouseDown(p:Point):Void {
     mousePosition = p.x - width * position;
   }
 
   override private function onMouseMove(p:Point):Void {
     position = (p.x - mousePosition) / width;
-    dispatcher.dispatch(function(listener:ScrollListener):Void {
+    onScroll.emit(position);
-      listener.onScroll(position);
-    });
   }
-}
+}

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

@@ -0,0 +1,21 @@
+package haxework.gui.list;
+
+import haxework.gui.list.ListView.IListItemView;
+
+class LabelListItem<T> extends LabelView implements IListItemView<T> {
+
+    public var item_index(default, default):Int;
+    public var data(default, set):T;
+
+    public function new() {
+        super();
+        height = 20;
+        pWidth = 100;
+    }
+
+    private function set_data(value:T):T {
+        data = value;
+        text = Std.string(value);
+        return value;
+    }
+}

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

@@ -1,18 +1,14 @@
 package haxework.gui.list;
 
-import haxework.gui.skin.ColorSkin;
+import haxework.gui.skin.Skin;
+import haxework.signal.Signal;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.ILayout;
 import haxework.utils.NumberUtil;
-import haxework.dispath.Dispatcher;
-import haxework.dispath.IDispatcher;
-import haxework.gui.list.ScrollView.ScrollListener;
 import flash.events.MouseEvent;
 import haxework.gui.core.HAlign;
-import flash.display.Sprite;
-import haxework.gui.skin.ISkin;
 
-class ListView<D> extends GroupView implements ScrollListener {
+class ListView<D> extends GroupView {
 
   public var data(default, set):Array<D>;
   public var factory(null, default):Class<IListItemView<D>>;
@@ -23,7 +19,7 @@ class ListView<D> extends GroupView implements ScrollListener {
   private var size(default, set):Int;
   private var sizeDiff:Float;
 
-  public var dispatcher(default, null):IDispatcher<ListViewListener<D>>;
+  public var onItemSelect(default, null):Signal<IListItemView<D>>;
   public var scroll(default, set):ScrollView;
 
   public var prev(default, set):ButtonView;
@@ -58,10 +54,10 @@ class ListView<D> extends GroupView implements ScrollListener {
     mask.pWidth = 100;
     mask.pHeight = 100;
     mask.inLayout = false;
-    mask.skin = new ColorSkin(0xffffff);
+    mask.skin.push(Skin.color(0xffffff));
     box.content.mask = mask.content;
     box.addView(mask);
-    dispatcher = new Dispatcher<ListViewListener<D>>();
+    onItemSelect = new Signal();
     itemSize = 0;
     offset = 0;
     offsetDiff = 0;
@@ -74,12 +70,12 @@ class ListView<D> extends GroupView implements ScrollListener {
 
   private function set_scroll(value:ScrollView):ScrollView {
     if (scroll != null) {
-      scroll.dispatcher.removeListener(this);
+      scroll.onScroll.disconnect(onScroll);
       removeView(scroll);
     }
     scroll = value;
     if (scroll != null) {
-      scroll.dispatcher.addListener(this);
+      scroll.onScroll.connect(onScroll);
       addView(scroll);
     }
     invalidate();
@@ -92,7 +88,7 @@ class ListView<D> extends GroupView implements ScrollListener {
       prev.dispose();
     }
     prev = value;
-    prev.onPress = {onPress:onPrevPress};
+    prev.onPress.connect(onPrevPress);
     main.addViewFirst(prev);
     return prev;
   }
@@ -107,7 +103,7 @@ class ListView<D> extends GroupView implements ScrollListener {
       next.dispose();
     }
     next = value;
-    next.onPress = {onPress:onNextPress};
+    next.onPress.connect(onNextPress);
     main.addView(next);
     return next;
   }
@@ -223,9 +219,7 @@ class ListView<D> extends GroupView implements ScrollListener {
 
   private function setClickListener(item:IListItemView<D>):Void {
     var listener:MouseEvent->Void = function(event:MouseEvent):Void {
-      dispatcher.dispatch(function(listener:ListViewListener<D>):Void {
+      onItemSelect.emit(item);
-        listener.onListItemClick(item);
-      });
     }
     item.content.addEventListener(MouseEvent.CLICK, listener);
     itemsListeners.set(item, listener);
@@ -236,12 +230,7 @@ class ListView<D> extends GroupView implements ScrollListener {
   }
 }
 
-interface IListItemView<D> extends IView {
+interface IListItemView<D> extends IView<Dynamic> {
   public var item_index(default, default):Int;
   public var data(default, set):D;
 }
-
-typedef ListViewListener<D> = {
-  public function onListItemClick(item:IListItemView<D>):Void;
-}
-

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

@@ -0,0 +1,29 @@
+package haxework.gui.list;
+
+
+class ScrollSkin {
+
+    public static function vertical(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
+        return function(view: VScrollView):Void {
+            if (view.ratio < 1) {
+                view.content.graphics.beginFill(backColor);
+                view.content.graphics.drawRect(0, 0, view.width, view.height);
+                view.content.graphics.beginFill(foreColor);
+                view.content.graphics.drawRect(0, view.height * view.position, view.width, view.height * view.ratio);
+                view.content.graphics.endFill();
+            }
+        }
+    }
+
+    public static function horizontal(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
+        return function(view: VScrollView):Void {
+            if (view.ratio < 1) {
+                view.content.graphics.beginFill(backColor);
+                view.content.graphics.drawRect(0, 0, view.width, view.height);
+                view.content.graphics.beginFill(foreColor);
+                view.content.graphics.drawRect(view.width * view.position, 0, view.width * view.ratio, view.height);
+                view.content.graphics.endFill();
+            }
+        }
+    }
+}

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

@@ -1,9 +1,8 @@
 package haxework.gui.list;
 
+import haxework.signal.Signal;
 import haxework.utils.NumberUtil;
 import flash.geom.Point;
-import haxework.dispath.Dispatcher;
-import haxework.dispath.IDispatcher;
 import flash.events.MouseEvent;
 
 class ScrollView extends SpriteView {
@@ -11,16 +10,16 @@ class ScrollView extends SpriteView {
   public var position(default, set):Float;
   public var ratio(default, set):Float;
 
-  public var dispatcher(default, null):IDispatcher<ScrollListener>;
+  public var onScroll(default, null):Signal<Float>;
 
   private var mousePosition:Float;
 
   public function new() {
     super();
-    contentAsSprite.buttonMode = true;
+    content.buttonMode = true;
     position = 0;
     ratio = 1;
-    dispatcher = new Dispatcher<ScrollListener>();
+    onScroll = new Signal();
     content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownEvent);
   }
 
@@ -61,8 +60,8 @@ class ScrollView extends SpriteView {
     }
     return ratio;
   }
-}
 
-interface ScrollListener {
+  public function dispose():Void {
-  public function onScroll(position:Float):Void;
+      onScroll.dispose();
-}
+  }
+}

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

@@ -1,28 +0,0 @@
-package haxework.gui.list;
-
-import haxework.gui.skin.ISkin;
-import flash.display.Sprite;
-import flash.display.Graphics;
-
-class VScrollSkin implements ISkin<ScrollView> {
-
-  public var foreColor(default, default):Int;
-  public var backColor(default, default):Int;
-
-  public function new(foreColor:Int = 0xffffff, backColor:Int = 0x707070) {
-    this.foreColor = foreColor;
-    this.backColor = backColor;
-  }
-
-  public function draw(view:ScrollView):Void {
-    var graphics:Graphics = view.contentAsSprite.graphics;
-    graphics.clear();
-    if (view.ratio < 1) {
-      graphics.beginFill(backColor);
-      graphics.drawRect(0, 0, view.width, view.height);
-      graphics.beginFill(foreColor);
-      graphics.drawRect(0, view.height * view.position, view.width, view.height * view.ratio);
-      graphics.endFill();
-    }
-  }
-}

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

@@ -1,23 +1,15 @@
 package haxework.gui.list;
 
-import haxework.gui.list.ScrollView.ScrollListener;
 import flash.geom.Point;
-import haxework.gui.list.VScrollSkin;
 
 class VScrollView extends ScrollView {
 
-  public function new() {
-    super();
-  }
-
   override private function onMouseDown(p:Point):Void {
     mousePosition = p.y - height * position;
   }
 
   override private function onMouseMove(p:Point):Void {
     position = (p.y - mousePosition) / height;
-    dispatcher.dispatch(function(listener:ScrollListener):Void {
+    onScroll.emit(position);
-      listener.onScroll(position);
-    });
   }
-}
+}

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

@@ -37,7 +37,7 @@ class BitmapSkin implements ISkin<SpriteView> implements ISize {
 
   public function draw(view:SpriteView):Void {
     if (image == null) return;
-    DrawUtil.draw(view.contentAsSprite.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
+    DrawUtil.draw(view.content.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
   }
 
-}
+}

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

@@ -64,7 +64,7 @@ class ButtonBitmapSkin implements ISkin<ButtonView> implements ISize {
   public function draw(view:ButtonView):Void {
     if (images == null) return;
     var image:BitmapData = view.disabled ? disableImage == null ? disable : disableImage : images.get(view.state);
-    DrawUtil.draw(view.contentAsSprite.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
+    DrawUtil.draw(view.content.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
   }
 
-}
+}

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

@@ -1,40 +0,0 @@
-package haxework.gui.skin;
-
-import flash.display.Graphics;
-import haxework.gui.ButtonView.ButtonState;
-import haxework.gui.utils.ColorUtils;
-
-class ButtonColorSkin implements ISkin<ButtonView> {
-
-  public var color(default, set_color):Int;
-  public var alpha(default, default):Float;
-  public var disable(default, default):Int;
-  private var colors:Map<ButtonState, Int>;
-
-  public function new(color:Int = 0xffffff, alpha:Float = 1.0) {
-    this.color = color;
-    this.alpha = alpha;
-  }
-
-  private function set_color(value:Int):Int {
-    colors = new Map<ButtonState, Int>();
-    colors.set(ButtonState.UP, value);
-    colors.set(ButtonState.DOWN, ColorUtils.diff(value, -64));
-    colors.set(ButtonState.OVER, ColorUtils.diff(value, 64));
-    //disable = ColorUtils.multiply(value, 0.6);
-    return value;
-  }
-
-  public function draw(view:ButtonView):Void {
-    var color:Int = selectColor(view);
-    var graphics:Graphics = view.contentAsSprite.graphics;
-    graphics.clear();
-    graphics.beginFill(color, alpha);
-    graphics.drawRect(0, 0, view.width, view.height);
-    graphics.endFill();
-  }
-
-  private function selectColor(view:ButtonView):Int {
-    return view.disabled ? disable : colors.get(view.state);
-  }
-}

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

@@ -0,0 +1,47 @@
+package haxework.gui.skin;
+
+import flash.display.Graphics;
+import haxework.gui.utils.ColorUtils;
+import haxework.gui.skin.Skin.TSkin;
+import haxework.gui.ButtonView;
+
+class ButtonColorSkin {
+
+    public var color(default, set):Int;
+    public var alpha(default, default):Float;
+    public var disable(default, default):Int;
+    private var colors:Map<ButtonState, Int>;
+
+    public function new(color:Int = 0xffffff, alpha:Float = 1.0) {
+        this.color = color;
+        this.alpha = alpha;
+    }
+
+    private function set_color(value:Int):Int {
+        colors = new Map<ButtonState, Int>();
+        colors.set(ButtonState.UP, value);
+        colors.set(ButtonState.DOWN, ColorUtils.diff(value, -64));
+        colors.set(ButtonState.OVER, ColorUtils.diff(value, 64));
+        //disable = ColorUtils.multiply(value, 0.6);
+        return value;
+    }
+
+    public function draw(view:ButtonView):Void {
+        var color:Int = selectColor(view);
+        var graphics:Graphics = view.content.graphics;
+        graphics.beginFill(color, alpha);
+        graphics.drawRect(0, 0, view.width, view.height);
+    }
+
+    private function selectColor(view:ButtonView):Int {
+        return view.disabled ? disable : colors.get(view.state);
+    }
+}
+
+
+class ButtonSkin {
+
+    public static function color(color: Int, alpha: Float = 1.0): TSkin<ButtonView> {
+        return new ButtonColorSkin(color, alpha).draw;
+    }
+}

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

@@ -1,24 +0,0 @@
-package haxework.gui.skin;
-
-import flash.display.Graphics;
-import flash.display.Sprite;
-
-class ColorSkin implements ISkin<SpriteView> {
-
-  public var color(default, default):Int;
-  public var alpha(default, default):Float;
-
-  public function new(?color:Int = 0x000000, ?alpha:Float = 1.0) {
-    this.color = color;
-    this.alpha = alpha;
-  }
-
-  public function draw(view:SpriteView):Void {
-    var graphics:Graphics = view.contentAsSprite.graphics;
-    graphics.clear();
-    graphics.beginFill(color, alpha);
-    graphics.drawRect(0, 0, view.width, view.height);
-    graphics.endFill();
-  }
-
-}

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

@@ -1,7 +0,0 @@
-package haxework.gui.skin;
-
-import haxework.gui.IView;
-
-interface ISkin<V:IView> {
-  public function draw(view:V):Void;
-}

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

@@ -13,7 +13,7 @@ class ProgressSkin implements ISkin<ProgressView> {
   public function new() {}
 
   public function draw(view:ProgressView):Void {
-    var graphics:Graphics = view.contentAsSprite.graphics;
+    var graphics:Graphics = view.content.graphics;
     graphics.clear();
     graphics.beginFill(backColor);
     graphics.drawRect(0, 0, view.width, view.height);
@@ -25,4 +25,4 @@ class ProgressSkin implements ISkin<ProgressView> {
     }
     graphics.endFill();
   }
-}
+}

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

@@ -0,0 +1,17 @@
+package haxework.gui.skin;
+
+
+typedef TSkin<V:IView<Dynamic>> = V -> Void;
+
+typedef TSkinSet = Array<TSkin<Dynamic>>;
+
+class Skin {
+
+    public static function color(color: Int, alpha: Float = 1.0): TSkin<SpriteView> {
+        return function(view: SpriteView) {
+            view.content.graphics.beginFill(color, alpha);
+            view.content.graphics.drawRect(0, 0, view.width, view.height);
+            view.content.graphics.endFill();
+        }
+    }
+}

src/main/haxework/signal/Signal.hx

@@ -0,0 +1,57 @@
+package haxework.signal;
+
+typedef Signal<A> = Signal1<A>;
+
+class BaseSignal<R> {
+
+    private var receivers:Array<R>;
+
+    public function new() {
+        receivers = [];
+    }
+
+    public function connect(receiver:R):Void {
+        receivers.push(receiver);
+    }
+
+    public function disconnect(receiver:R):Void {
+        receivers.remove(receiver);
+    }
+
+    public function dispose():Void {
+        receivers = [];
+    }
+}
+
+typedef Receiver1<A> = A -> Void;
+
+class Signal1<A> extends BaseSignal<Receiver1<A>> {
+
+    public function emit(a:A):Void {
+        for (receiver in receivers) {
+            receiver(a);
+        }
+    }
+}
+
+typedef Receiver2<A, B> = A -> B -> Void;
+
+class Signal2<A, B> extends BaseSignal<Receiver2<A, B>> {
+
+    public function emit(a:A, b:B):Void {
+        for (receiver in receivers) {
+            receiver(a, b);
+        }
+    }
+}
+
+typedef Receiver3<A, B, C> = A -> B -> C -> Void;
+
+class Signal3<A, B, C> extends BaseSignal<Receiver3<A, B, C>> {
+
+    public function emit(a:A, b:B, c:C):Void {
+        for (receiver in receivers) {
+            receiver(a, b, c);
+        }
+    }
+}