[gui] update

This commit is contained in:
2019-02-27 18:00:48 +03:00
parent d819271cd3
commit b3196d2295
18 changed files with 204 additions and 175 deletions

View File

@@ -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;

View File

@@ -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

View File

@@ -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}');
}

View File

@@ -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
# 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

BIN
demo/src/haxe-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@@ -1,10 +1,9 @@
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 {
@@ -21,8 +20,9 @@ class ImageView extends SpriteView {
private function set_image(value:BitmapData):BitmapData {
if (image != value) {
image = value;
skin = [new BitmapSkin(image, FillType.CONTAIN)];
invalidate();
skin = [new BitmapSkin(image, FillType.DEFAULT)];
toUpdate();
toRedraw();
}
return image;
}

View File

@@ -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;
@@ -16,14 +15,12 @@ import flash.text.TextFieldType;
class InputView extends TextView implements IDisposable {
public var hint(default, set):String;
public var dispatcher(default, null):IDispatcher<InputViewListener>;
public var onKeyUp(null, set):InputViewListener;
public var onChange(default, null):Signal<String> = new Signal();
private var hintTextField:TextField;
public function new() {
super();
dispatcher = new Dispatcher<InputViewListener>();
textField.addEventListener(Event.CHANGE, onTextChange);
textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
@@ -40,7 +37,7 @@ class InputView extends TextView implements IDisposable {
private function set_hint(value:String):String {
if (hint != value) {
hint = value;
invalidate();
toUpdate();
}
return hint;
}
@@ -61,7 +58,7 @@ class InputView extends TextView implements IDisposable {
private function _onKeyUp(event:KeyboardEvent):Void {
event.stopImmediatePropagation();
dispatcher.dispatch(function(listener) listener.onKeyUp(textField.text));
onChange.emit(textField.text);
}
private function onKeyDown(event:KeyboardEvent):Void {
@@ -83,13 +80,4 @@ class InputView extends TextView implements IDisposable {
textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}
private function set_onKeyUp(value:InputViewListener):InputViewListener {
dispatcher.addListener(value);
return value;
}
}
typedef InputViewListener = {
public function onKeyUp(text:String):Void;
}

View File

@@ -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;
}
}

View File

@@ -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 {

View File

@@ -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();

View File

@@ -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 {

View File

@@ -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;
@@ -9,24 +10,27 @@ import haxework.gui.list.ListView.IListItemView;
class HListView<D> extends ListView<D> {
public function new() {
super(new HorizontalLayout(), new VerticalLayout());
//box.layoutHAlign = HAlign.LEFT;
//box.layoutVAlign = VAlign.MIDDLE;
super(new VerticalLayout(), new HorizontalLayout());
box.layout.hAlign = HAlign.LEFT;
box.layout.vAlign = VAlign.MIDDLE;
}
override private function recalcSize(item:IListItemView<D>):Void {
/*itemSize = item.width + item.leftMargin + item.rightMargin + box.layoutMargin;
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.layoutMargin - 1) / itemSize);*/
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;*/
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;
offset = offset - value;
}
}

View File

@@ -10,8 +10,8 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
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;

View File

@@ -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.layoutVAlign = VAlign.MIDDLE;
main.layout.hAlign = HAlign.CENTER;
main.layout.vAlign = VAlign.MIDDLE;
main.geometry.size.stretch = true;
addView(main);
box = new GroupView(layout);

View File

@@ -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;
@@ -10,19 +11,22 @@ class VListView<D> extends ListView<D> {
public function new() {
super(new VerticalLayout(), new HorizontalLayout());
//box.layoutHAlign = HAlign.CENTER;
//box.layoutVAlign = VAlign.TOP;
box.layout.hAlign = HAlign.CENTER;
box.layout.vAlign = VAlign.TOP;
}
override private function recalcSize(item:IListItemView<D>):Void {
/*itemSize = item.height + item.topMargin + item.bottomMargin + box.layoutMargin;
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.layoutMargin - 1) / itemSize);*/
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;*/
box.geometry.padding.top = -value * itemSize;
mask.geometry.margin.top = -box.geometry.padding.top;
return super.set_offsetDiff(value);
}

View File

@@ -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.w = image.width;
view.h = image.height;
}*/
view.geometry.size.content.width = image.width;
view.geometry.size.content.height = image.height;
}
}

View File

@@ -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.w = image.width;
view.h = image.height;
}
view.geometry.size.content.width = image.width;
view.geometry.size.content.height = image.height;
}
}

View File

@@ -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);