[skin] update

samples/01-view/build.hxml

@@ -4,7 +4,7 @@
 -lib promhx
 -main ViewExample.hx
 --macro haxework.parser.Parser.auto()
-
+-swf-version 10.1
 -swf-header 800:600:30:000000
 -swf target/ViewExample.swf
 #-as3 target

samples/01-view/run.sh

@@ -1,3 +1,4 @@
 #!/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/ViewExample.swf

samples/01-view/src/ViewExample.hx

@@ -1,5 +1,11 @@
 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;
@@ -17,9 +23,13 @@ class FormView extends VGroupView {
     @: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");
-        list.data = [for (i in 0...100) StringTools.hex(Math.floor(Math.random() * 1e9))];
     }
 
     private function onPress(view:ButtonView):Void {
@@ -33,7 +43,10 @@ class FormView extends VGroupView {
 
 class ViewExample {
 
+    @:provide private static var manager:ILoaderManager;
+
     public static function main() {
+        manager = new LoaderManager(1);
         new ViewExample();
     }
 
@@ -44,5 +57,10 @@ class ViewExample {
         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/01-view/src/form.yaml

@@ -2,7 +2,7 @@
 $type: haxework.gui.VGroupView
 paddings: 20
 layoutMargin: 10
-skin: [ $type: [haxework.gui.skin.Skin.color, 0xff0000] ]
+skin: [ $type: [haxework.gui.skin.Skin.color, 0x333333] ]
 views:
     - id: list
       $type: haxework.gui.list.VListView<String>
@@ -14,44 +14,34 @@ views:
           $type: haxework.gui.list.VScrollView
           width: 10
           pHeight: 100
-          skin: [ $type: [haxework.gui.list.ScrollSkin.vertical, 0xcffcc, 0x55cc55] ]
+          skin: [ $type: [haxework.gui.list.ScrollSkin.vertical, 0x55cc55, 0xccffcc] ]
       skin: [ $type: [haxework.gui.skin.Skin.color, 0xffffff] ]
-    - $type: haxework.gui.SpriteView
-      vAlign: BOTTOM
-      width: 50
-      height: 50
-      leftMargin: 5
-      rightMargin: 10
-      skin: [ $type: [haxework.gui.skin.Skin.color, 0x0000ff] ]
     - id: panel
       $type: haxework.gui.HGroupView
-      layoutHAlign: RIGHT
       pWidth: 100
-      height: 30
-      paddings: 3
-      layoutMargin: 3
-      skin: [ $type: [haxework.gui.skin.Skin.color, 0xffff00] ]
+      height: 60
+      # contentSize: true
+      layoutMargin: 10
+      skin: [ $type: [haxework.gui.skin.Skin.color, 0x555555] ]
       views:
           - id: button1
             $type: haxework.gui.ButtonView
             +onPress: $this:onPress
-            width: 100
-            pHeight: 100
-            skin: [ $type: [haxework.gui.skin.ButtonSkin.color, 0xcc0000] ]
-            text: Text1
+            contentSize: true
+            paddings: 8
+            skin: $this:buttonSkin
+            text: OK
           - id: button2
             $type: haxework.gui.ButtonView
             +onPress: $this:onPress
             contentSize: true
-            skin: [ $type: [haxework.gui.skin.ButtonSkin.color, 0x00cc00] ]
-            text: Text2
-            fontFamily: Georgia
-            fontColor: 0xffffff
+            paddings: 8
+            skin: $this:buttonSkin
+            text: Apply
           - id: button3
             $type: haxework.gui.ButtonView
             +onPress: $this:onPress
             contentSize: true
-            skin: [ $type: [haxework.gui.skin.ButtonSkin.color, 0x00cccc] ]
-            text: Text 3333333333 ddd
-            fontFamily: Tahoma
-            fontColor: 0xff0000
+            paddings: 8
+            skin: $this:buttonSkin
+            text: Cancel

src/main/haxework/gui/IView.hx

@@ -1,10 +1,10 @@
 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.core.SizeType;
+import haxework.gui.skin.ISkin.SkinSet;
 
 interface IView<C:DisplayObject> {
   public var id(default, default):String;
@@ -38,7 +38,7 @@ interface IView<C:DisplayObject> {
   public var margins(null, set):Float;
 
   public var content(default, null):C;
-  public var skin(default, set):TSkinSet;
+  public var skin(default, set):SkinSet;
 
   public var parent(default, null):Null<IGroupView>;
   public var inLayout(default, set):Bool;

src/main/haxework/gui/SpriteView.hx

@@ -12,7 +12,7 @@ class SpriteView extends View<Sprite> {
       super.update();
       this.content.graphics.clear();
       for (skin in this.skin) {
-          skin(this);
+          skin.draw(this);
       }
   }
 

src/main/haxework/gui/TextView.hx

@@ -2,14 +2,11 @@ package haxework.gui;
 
 import haxework.text.TextUtil;
 import haxework.text.BitmapTextField;
-import flash.geom.Point;
 import flash.text.TextFieldAutoSize;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import flash.text.TextFormatAlign;
-import haxework.gui.skin.ISize;
 import flash.text.TextFormat;
-import flash.display.Sprite;
 import flash.text.TextField;
 
 class TextView extends SpriteView implements ITextView {
@@ -178,7 +175,7 @@ class TextView extends SpriteView implements ITextView {
     if (t != null) textField.text = t;
     textField.setTextFormat(textFormat);
     updateTextSize();
-    if (contentSize && !Std.is(skin, ISize)) {
+    if (contentSize) {
       #if html5
       var h = _textHeight;
       var w = _textWidth;

src/main/haxework/gui/View.hx

@@ -1,6 +1,6 @@
 package haxework.gui;
 
-import haxework.gui.skin.Skin.TSkinSet;
+import haxework.gui.skin.ISkin.SkinSet;
 import flash.display.InteractiveObject;
 import flash.display.DisplayObject;
 import haxework.gui.core.SizeType;
@@ -9,7 +9,6 @@ import haxework.gui.core.VAlign;
 import flash.events.Event;
 import flash.display.Stage;
 
-
 class View<C:DisplayObject> implements IView<C> {
 
   private static var counter:Int = 0;
@@ -46,7 +45,7 @@ class View<C:DisplayObject> implements IView<C> {
   public var margins(null, set):Float;
 
   public var content(default, null):C;
-  public var skin(default, set):TSkinSet;
+  public var skin(default, set):SkinSet;
 
   public var parent(default, null):Null<IGroupView>;
   public var inLayout(default, set):Bool;
@@ -257,7 +256,7 @@ class View<C:DisplayObject> implements IView<C> {
     return value;
   }
 
-  private function set_skin(value:TSkinSet):TSkinSet {
+  private function set_skin(value:SkinSet):SkinSet {
     skin = value;
     invalidate();
     return skin;

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

@@ -1,16 +1,25 @@
 package haxework.gui.list;
 
+import flash.text.TextFormatAlign;
+import haxework.gui.skin.ColorSkin;
 import haxework.gui.list.ListView.IListItemView;
 
 class LabelListItem<T> extends LabelView implements IListItemView<T> {
 
-    public var item_index(default, default):Int;
+    public var item_index(default, set):Int;
     public var data(default, set):T;
 
     public function new() {
         super();
         height = 20;
         pWidth = 100;
+        layoutHAlign = LEFT;
+    }
+
+    private function set_item_index(value:Int):Int {
+        item_index = value;
+        skin = item_index % 2 == 1 ? [new ColorSkin(0xdddddd)] : [new ColorSkin(0xcccccc)];
+        return item_index;
     }
 
     private function set_data(value:T):T {

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

@@ -231,6 +231,6 @@ class ListView<D> extends GroupView {
 }
 
 interface IListItemView<D> extends IView<Dynamic> {
-  public var item_index(default, default):Int;
+  public var item_index(default, set):Int;
   public var data(default, set):D;
 }

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

@@ -1,29 +1,54 @@
 package haxework.gui.list;
 
+import haxework.gui.skin.ISkin;
+
+class HScrollSkin implements ISkin<ScrollView> {
+    public var foreColor(default, default):Int;
+    public var backColor(default, default):Int;
+
+    public function new(foreColor:Int = 0, backColor:Int = 0) {
+        this.foreColor = foreColor;
+        this.backColor = backColor;
+    }
+
+    public function draw(view:ScrollView):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();
+        }
+    }
+}
+
+class VScrollSkin implements ISkin<ScrollView> {
+    public var foreColor(default, default):Int;
+    public var backColor(default, default):Int;
+
+    public function new(foreColor:Int = 0, backColor:Int = 0) {
+        this.foreColor = foreColor;
+        this.backColor = backColor;
+    }
+
+    public function draw(view:ScrollView):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();
+        }
+    }
+}
 
 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();
-            }
-        }
+        return new VScrollSkin(foreColor, backColor);
     }
 
     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();
-            }
-        }
+        return new HScrollSkin(foreColor, backColor);
     }
 }

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

@@ -1,13 +1,8 @@
 package haxework.gui.skin;
 
-import flash.geom.Rectangle;
-import flash.geom.Matrix;
 import flash.display.BitmapData;
-import haxework.gui.utils.ColorUtils;
+import flash.geom.Rectangle;
 import haxework.gui.utils.DrawUtil;
-import haxework.gui.ButtonView.ButtonState;
-import flash.display.Graphics;
-import flash.display.Sprite;
 
 class BitmapSkin implements ISkin<SpriteView> implements ISize {
 
@@ -18,7 +13,7 @@ class BitmapSkin implements ISkin<SpriteView> implements ISize {
   public var color(default, default):Int;
   public var fillType(default, default):FillType;
 
-  public function new(?image:BitmapData = null, ?fillType = null, ?color = -1) {
+  public function new(image:BitmapData = null, fillType = null, color = -1) {
     if (image != null) {
       this.image = image;
     }

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

@@ -1,15 +1,12 @@
 package haxework.gui.skin;
 
+import flash.display.BitmapData;
+import flash.geom.Rectangle;
+import haxework.gui.ButtonView.ButtonState;
 import haxework.gui.utils.BitmapUtil;
 import haxework.gui.utils.DrawUtil;
-import flash.geom.Rectangle;
-import flash.display.BitmapData;
-import haxework.gui.utils.ColorUtils;
-import haxework.gui.ButtonView.ButtonState;
-import flash.display.Graphics;
-import flash.display.Sprite;
 
-class ButtonBitmapSkin implements ISkin<ButtonView> implements ISize {
+class ButtonBitmapSkin implements ISkin<ButtonView> {
 
   public var width(default, null):Float;
   public var height(default, null):Float;
@@ -25,7 +22,7 @@ class ButtonBitmapSkin implements ISkin<ButtonView> implements ISize {
   private var images:Map<ButtonState, BitmapData>;
   private var disable:BitmapData;
 
-  public function new(?image:BitmapData = null, ?fillType:FillType = null, ?color = -1) {
+  public function new(image:BitmapData = null, fillType:FillType = null, color = -1) {
     images = new Map<ButtonState, BitmapData>();
     if (image != null) {
       this.image = image;

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

@@ -0,0 +1,38 @@
+package haxework.gui.skin;
+
+import flash.display.Graphics;
+import haxework.gui.utils.ColorUtils;
+import haxework.gui.ButtonView.ButtonState;
+
+class ButtonColorSkin implements ISkin<ButtonView> {
+
+    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);
+    }
+}

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

@@ -1,47 +1,10 @@
 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;
+    public static function color(color: Int, alpha: Float = 1.0): ISkin<ButtonView> {
+        return new ButtonColorSkin(color, alpha);
     }
 }

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

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

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

@@ -1,19 +0,0 @@
-package haxework.gui.skin;
-
-import flash.display.Graphics;
-import flash.display.Sprite;
-
-class FakeSkin implements ISkin<IView> {
-
-  public function new() {}
-
-  public function draw(view:IView):Void {
-    /*var g:Graphics = view.content.graphics;
-    g.clear();
-    g.lineStyle(1, 0x00ff00);
-    g.drawRect(0, 0, view.width, view.height);
-    g.endFill();
-    g.lineStyle();*/
-  }
-
-}

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

@@ -1,6 +0,0 @@
-package haxework.gui.skin;
-
-interface ISize {
-  public var width(default, null):Float;
-  public var height(default, null):Float;
-}

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

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

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

@@ -1,7 +1,6 @@
 package haxework.gui.skin;
 
 import flash.display.Graphics;
-import flash.display.Sprite;
 import haxework.gui.skin.ISkin;
 
 class ProgressSkin implements ISkin<ProgressView> {

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

@@ -0,0 +1,36 @@
+package haxework.gui.skin;
+
+class SizeSkin implements ISkin<IView<Dynamic>> {
+    public var width(default, default):Float;
+    public var height(default, default):Float;
+    public var pHeight(default, default):Float;
+    public var pWidth(default, default):Float;
+
+    public function new(width:Float = -1, height:Float = -1, pHeight:Float = -1, pWidth:Float = -1) {
+        this.width = width;
+        this.height = height;
+        this.pHeight = pHeight;
+        this.pWidth = pWidth;
+    }
+
+    public function draw(view:IView<Dynamic>):Void {
+        if (pHeight != -1) {
+            view.pHeight = pHeight;
+        }
+        if (pWidth != -1) {
+            view.pWidth = pWidth;
+        }
+        if (width != -1) {
+            view.width = width;
+        }
+        if (height != -1) {
+            view.height = height;
+        }
+    }
+
+    public static function percent(pHeight:Float, pWidth:Float):SizeSkin {
+        return new SizeSkin(-1, -1, pHeight, pWidth);
+    }
+
+    public static var FILL:SizeSkin = percent(100, 100);
+}

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

@@ -1,17 +1,8 @@
 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();
-        }
+    public static function color(color: Int, alpha: Float = 1.0): ISkin<SpriteView> {
+        return new ColorSkin(color, alpha);
     }
 }

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

@@ -0,0 +1,17 @@
+package haxework.gui.skin;
+
+class TextSkin implements ISkin<ITextView> {
+
+    public var fontColor(default, default):Int;
+    public var fontFamily(default, default):String;
+
+    public function new(fontColor:Int = 0xffffff, fontFamily:String = null) {
+        this.fontColor = fontColor;
+        this.fontFamily = fontFamily;
+    }
+
+    public function draw(view:ITextView):Void {
+        view.fontColor = fontColor;
+        view.fontFamily = fontFamily;
+    }
+}