diff --git a/demo/src/demo/Demo.hx b/demo/src/demo/Demo.hx index 029a556..1bc514c 100644 --- a/demo/src/demo/Demo.hx +++ b/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):Void { for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id; diff --git a/demo/src/demo/Demo.yaml b/demo/src/demo/Demo.yaml index 41f212f..de748c0 100644 --- a/demo/src/demo/Demo.yaml +++ b/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 diff --git a/demo/src/demo/form/ListForm.hx b/demo/src/demo/form/ListForm.hx index bed90a6..7b3470f 100644 --- a/demo/src/demo/form/ListForm.hx +++ b/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; - @:view public var panel(default, null):IView; - @: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):Void { trace('onItemSelect: ${item.data}'); } diff --git a/demo/src/demo/form/ListForm.yaml b/demo/src/demo/form/ListForm.yaml index 7a581e4..7b0dca0 100644 --- a/demo/src/demo/form/ListForm.yaml +++ b/demo/src/demo/form/ListForm.yaml @@ -1,15 +1,12 @@ --- -$type: haxework.gui.VGroupView -# layoutMargin: 10 views: - id: list $type: haxework.gui.list.VListView +onItemSelect: $this:onItemSelect factory: { $class: haxework.gui.list.LabelListItem } - # pWidth: 100 - # pHeight: 100 + geometry.size.stretch: true scroll: $type: haxework.gui.list.VScrollBarView skin: $r:skin:scroll - # width: 10 - # pHeight: 100 + geometry.size.percent.height: 100 + geometry.size.fixed.width: 10 diff --git a/demo/src/haxe-logo.png b/demo/src/haxe-logo.png new file mode 100644 index 0000000..d3cd902 Binary files /dev/null and b/demo/src/haxe-logo.png differ diff --git a/src/main/haxework/gui/ImageView.hx b/src/main/haxework/gui/ImageView.hx index 1b6432d..88515ea 100755 --- a/src/main/haxework/gui/ImageView.hx +++ b/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 imageUrl(default, set):String; + public var image(default, set):BitmapData; + public var imageUrl(default, set):String; - public function new(?image:BitmapData) { - super(); - if (image != null) { - this.image = image; + public function new(?image:BitmapData) { + super(); + if (image != null) { + this.image = image; + } } - } - private function set_image(value:BitmapData):BitmapData { - if (image != value) { - image = value; - skin = [new BitmapSkin(image, FillType.CONTAIN)]; - invalidate(); + private function set_image(value:BitmapData):BitmapData { + if (image != value) { + image = value; + skin = [new BitmapSkin(image, FillType.DEFAULT)]; + toUpdate(); + toRedraw(); + } + return image; } - return image; - } - private function set_imageUrl(value:String):String { - if (imageUrl != value) { - imageUrl = value; - new ImageLoader().GET(imageUrl).then(function(data) { - image = data; - }); + private function set_imageUrl(value:String):String { + if (imageUrl != value) { + imageUrl = value; + new ImageLoader().GET(imageUrl).then(function(data) { + image = data; + }); + } + return imageUrl; } - return imageUrl; - } } diff --git a/src/main/haxework/gui/InputView.hx b/src/main/haxework/gui/InputView.hx index 190e0e6..5d33ade 100755 --- a/src/main/haxework/gui/InputView.hx +++ b/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 dispatcher(default, null):IDispatcher; - public var onKeyUp(null, set):InputViewListener; + public var hint(default, set):String; + public var onChange(default, null):Signal = new Signal(); - private var hintTextField:TextField; + private var hintTextField:TextField; - public function new() { - super(); - dispatcher = new Dispatcher(); - textField.addEventListener(Event.CHANGE, onTextChange); - textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp); - textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); + public function new() { + super(); + textField.addEventListener(Event.CHANGE, onTextChange); + textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp); + textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); - hintTextField = buildHintTextField(); - content.addChild(hintTextField); - 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(); + hintTextField = buildHintTextField(); + content.addChild(hintTextField); + textFormat.align = TextFormatAlign.LEFT; } - return hint; - } - private function buildHintTextField():TextField { - var textField:TextField = new TextField(); - textField.autoSize = TextFieldAutoSize.NONE; - textField.type = TextFieldType.DYNAMIC; - textField.multiline = false; - textField.defaultTextFormat = new TextFormat("Arial", 16, 0xa0a0a0); - textField.mouseEnabled = false; - return textField; - } + override private function buildTextField():TextField { + return new InputTextField(); + } - private function onTextChange(event:Event):Void { - hintTextField.visible = (textField.text == ""); - } + private function set_hint(value:String):String { + if (hint != value) { + hint = value; + toUpdate(); + } + return hint; + } - private function _onKeyUp(event:KeyboardEvent):Void { - event.stopImmediatePropagation(); - dispatcher.dispatch(function(listener) listener.onKeyUp(textField.text)); - } + private function buildHintTextField():TextField { + var textField:TextField = new TextField(); + 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 { - event.stopImmediatePropagation(); - } + private function onTextChange(event:Event):Void { + hintTextField.visible = (textField.text == ""); + } - override public function update():Void { - super.update(); - var htf:TextFormat = textField.defaultTextFormat; - htf.color = 0xa0a0a0; - htf.size -= 2; - hintTextField.defaultTextFormat = htf; - hintTextField.text = hint == null ? "" : hint; - placeTextField(hintTextField); - } + private function _onKeyUp(event:KeyboardEvent):Void { + event.stopImmediatePropagation(); + onChange.emit(textField.text); + } - public function dispose():Void { - textField.removeEventListener(Event.CHANGE, onTextChange); - textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp); - textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); - } + private function onKeyDown(event:KeyboardEvent):Void { + event.stopImmediatePropagation(); + } - private function set_onKeyUp(value:InputViewListener):InputViewListener { - dispatcher.addListener(value); - return value; - } -} - -typedef InputViewListener = { - public function onKeyUp(text:String):Void; + override public function update():Void { + super.update(); + var htf:TextFormat = textField.defaultTextFormat; + htf.color = 0xa0a0a0; + htf.size -= 2; + hintTextField.defaultTextFormat = htf; + hintTextField.text = hint == null ? "" : hint; + placeTextField(hintTextField); + } + + public function dispose():Void { + textField.removeEventListener(Event.CHANGE, onTextChange); + textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp); + textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); + } } diff --git a/src/main/haxework/gui/LabelView.hx b/src/main/haxework/gui/LabelView.hx index d9f6d9c..00b3f84 100755 --- a/src/main/haxework/gui/LabelView.hx +++ b/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; } } diff --git a/src/main/haxework/gui/TextView.hx b/src/main/haxework/gui/TextView.hx index fb43fb2..c5c13f0 100755 --- a/src/main/haxework/gui/TextView.hx +++ b/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.height = _textHeight; + textField.width = width; + 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.CENTER: (width - textField.width) / 2 + leftPadding - rightPadding; - case HAlign.RIGHT: width - textField.width - rightPadding; + case HAlign.LEFT: geometry.padding.left; + case HAlign.CENTER: (width - textField.width) / 2 + geometry.padding.left - geometry.padding.right; + 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.MIDDLE: (height - _textHeight) / 2 + topPadding - bottomPadding; - case VAlign.BOTTOM: height - _textHeight - bottomPadding; + case VAlign.TOP: geometry.padding.top; + case VAlign.MIDDLE: (height - geometry.size.content.height) / 2 + geometry.padding.top - geometry.padding.bottom; + case VAlign.BOTTOM: height - geometry.size.content.height - geometry.padding.bottom; default: 0; - }*/ + } } override private function set_mouseEnabled(value:Bool):Bool { diff --git a/src/main/haxework/gui/View.hx b/src/main/haxework/gui/View.hx index 0f299df..c761e1f 100755 --- a/src/main/haxework/gui/View.hx +++ b/src/main/haxework/gui/View.hx @@ -84,7 +84,7 @@ class View implements IView { } 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 implements IView { } private function set_height(value:Float):Float { - trace('${this.id}.height = $value'); + //trace('${this.id}.height = $value'); if (height != value) { height = value; toRedraw(); diff --git a/src/main/haxework/gui/core/Geometry.hx b/src/main/haxework/gui/core/Geometry.hx index 586a9a6..3a111aa 100644 --- a/src/main/haxework/gui/core/Geometry.hx +++ b/src/main/haxework/gui/core/Geometry.hx @@ -33,6 +33,10 @@ abstract Size(Array) { @:from static public inline function fromArray(value:Array):Size { return new Size(value); } + + @:from static public inline function fromFloat(value:Float):Size { + return new Size([value]); + } } enum SizeValue { diff --git a/src/main/haxework/gui/list/HListView.hx b/src/main/haxework/gui/list/HListView.hx index 1054242..1f6b6da 100755 --- a/src/main/haxework/gui/list/HListView.hx +++ b/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 extends ListView { - public function new() { - super(new HorizontalLayout(), new VerticalLayout()); - //box.layoutHAlign = HAlign.LEFT; - //box.layoutVAlign = VAlign.MIDDLE; - } + public function new() { + super(new VerticalLayout(), new HorizontalLayout()); + box.layout.hAlign = HAlign.LEFT; + box.layout.vAlign = VAlign.MIDDLE; + } - override private function recalcSize(item:IListItemView):Void { - /*itemSize = item.width + item.leftMargin + item.rightMargin + box.layoutMargin; - size = Math.ceil(Math.max(0, box.width / itemSize)) + 2; - sizeDiff = size - ((box.width - box.layoutMargin - 1) / itemSize);*/ - } + override private function recalcSize(item:IListItemView):Void { + var itemSize = switch(item.geometry.width) { + case SizeValue.FIXED(value): value + item.geometry.margin.horizontal + box.layout.margin; + 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 { - /*box.leftPadding = -value * itemSize; - mask.leftMargin = -box.leftPadding;*/ - return super.set_offsetDiff(value); - } + override private function set_offsetDiff(value:Float):Float { + box.geometry.padding.left = -value * itemSize; + mask.geometry.margin.left = -box.geometry.padding.left; + return super.set_offsetDiff(value); + } - override private function onMouseWheel(value:Int):Void { - offset = offset + value; - } + override private function onMouseWheel(value:Int):Void { + offset = offset - value; + } } diff --git a/src/main/haxework/gui/list/LabelListItem.hx b/src/main/haxework/gui/list/LabelListItem.hx index f0915f9..b2e06a1 100644 --- a/src/main/haxework/gui/list/LabelListItem.hx +++ b/src/main/haxework/gui/list/LabelListItem.hx @@ -10,8 +10,8 @@ class LabelListItem extends LabelView implements IListItemView { public function new() { super(); - height = 20; - //pWidth = 100; + geometry.size.percent.width = 100; + geometry.size.fixed.height = 20; } private function set_data(value:T):T { data = value; diff --git a/src/main/haxework/gui/list/ListView.hx b/src/main/haxework/gui/list/ListView.hx index d437276..d40dafe 100755 --- a/src/main/haxework/gui/list/ListView.hx +++ b/src/main/haxework/gui/list/ListView.hx @@ -41,8 +41,8 @@ class ListView extends GroupView { public function new(layout:ILayout, otherLayout:ILayout) { super(otherLayout); main = new GroupView(layout); - //main.layoutHAlign = HAlign.CENTER; - //main.layoutVAlign = VAlign.MIDDLE; + main.layout.hAlign = HAlign.CENTER; + main.layout.vAlign = VAlign.MIDDLE; main.geometry.size.stretch = true; addView(main); box = new GroupView(layout); diff --git a/src/main/haxework/gui/list/VListView.hx b/src/main/haxework/gui/list/VListView.hx index 93747e8..ea18295 100755 --- a/src/main/haxework/gui/list/VListView.hx +++ b/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 extends ListView { - public function new() { - super(new VerticalLayout(), new HorizontalLayout()); - //box.layoutHAlign = HAlign.CENTER; - //box.layoutVAlign = VAlign.TOP; - } + public function new() { + super(new VerticalLayout(), new HorizontalLayout()); + box.layout.hAlign = HAlign.CENTER; + box.layout.vAlign = VAlign.TOP; + } - override private function recalcSize(item:IListItemView):Void { - /*itemSize = item.height + item.topMargin + item.bottomMargin + box.layoutMargin; - size = Math.ceil(Math.max(0, box.height / itemSize)) + 2; - sizeDiff = size - ((box.height - box.layoutMargin - 1) / itemSize);*/ - } + override private function recalcSize(item:IListItemView):Void { + var itemSize = switch(item.geometry.height) { + case SizeValue.FIXED(value): value + item.geometry.margin.vertical + box.layout.margin; + 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 { - /*box.topPadding = -value * itemSize; - mask.topMargin = -box.topPadding;*/ - return super.set_offsetDiff(value); - } + override private function set_offsetDiff(value:Float):Float { + box.geometry.padding.top = -value * itemSize; + mask.geometry.margin.top = -box.geometry.padding.top; + return super.set_offsetDiff(value); + } - override private function onMouseWheel(value:Int):Void { - offset = offset - value; - } + override private function onMouseWheel(value:Int):Void { + offset = offset - value; + } } diff --git a/src/main/haxework/gui/skin/BitmapSkin.hx b/src/main/haxework/gui/skin/BitmapSkin.hx index 13e260f..e81d0ce 100755 --- a/src/main/haxework/gui/skin/BitmapSkin.hx +++ b/src/main/haxework/gui/skin/BitmapSkin.hx @@ -33,9 +33,7 @@ class BitmapSkin implements ISkin { 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.w = image.width; - view.h = image.height; - }*/ + view.geometry.size.content.width = image.width; + view.geometry.size.content.height = image.height; } } diff --git a/src/main/haxework/gui/skin/ButtonBitmapSkin.hx b/src/main/haxework/gui/skin/ButtonBitmapSkin.hx index e7bcd5c..fc6fec4 100755 --- a/src/main/haxework/gui/skin/ButtonBitmapSkin.hx +++ b/src/main/haxework/gui/skin/ButtonBitmapSkin.hx @@ -62,10 +62,8 @@ class ButtonBitmapSkin implements ISkin { 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.w = image.width; - view.h = image.height; - } + view.geometry.size.content.width = image.width; + view.geometry.size.content.height = image.height; } } diff --git a/src/main/haxework/resources/Resources.hx b/src/main/haxework/resources/Resources.hx index 9cac845..f1fe3a0 100755 --- a/src/main/haxework/resources/Resources.hx +++ b/src/main/haxework/resources/Resources.hx @@ -18,6 +18,7 @@ class ResMap extends StringMap { } 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);