From 66f0e79297f16b09ccfec2b4842ec8af77f57342 Mon Sep 17 00:00:00 2001 From: shmyga Date: Fri, 1 Mar 2019 17:33:01 +0300 Subject: [PATCH] [gui] add DataView --- demo/src/demo/Demo.yaml | 10 +++---- demo/src/demo/Theme.hx | 4 +++ demo/src/demo/Util.hx | 12 ++++++++ demo/src/demo/form/DataForm.hx | 31 ++++++++++++++++++++ demo/src/demo/form/DataForm.yaml | 15 ++++++++++ demo/src/demo/form/ListForm.hx | 3 +- demo/src/demo/form/TailForm.hx | 31 +++++++------------- demo/src/demo/form/TailForm.yaml | 17 +++++------ src/main/haxework/gui/DataView.hx | 17 +++++++++++ src/main/haxework/gui/ScrollView.hx | 4 ++- src/main/haxework/gui/list/HScrollBarView.hx | 20 ++++++++----- src/main/haxework/gui/list/VScrollBarView.hx | 20 ++++++++----- 12 files changed, 134 insertions(+), 50 deletions(-) create mode 100644 demo/src/demo/Util.hx create mode 100644 demo/src/demo/form/DataForm.hx create mode 100644 demo/src/demo/form/DataForm.yaml create mode 100644 src/main/haxework/gui/DataView.hx diff --git a/demo/src/demo/Demo.yaml b/demo/src/demo/Demo.yaml index 3528a0a..7e4a8ba 100644 --- a/demo/src/demo/Demo.yaml +++ b/demo/src/demo/Demo.yaml @@ -25,12 +25,12 @@ views: geometry.padding: [25, 8] text: Tail +onPress: "$code:switcher.change('tail_form')" - - id: any_form + - id: data_form $type: haxework.gui.ToggleButtonView skin: $r:skin:tab geometry.padding: [25, 8] - text: Any - +onPress: "$code:switcher.change('any_form')" + text: Data + +onPress: "$code:switcher.change('data_form')" - id: switcher $type: haxework.gui.frame.FrameSwitcher skin: $r:skin:border @@ -44,8 +44,8 @@ views: - id: tail_form $type: demo.form.TailForm geometry.size.stretch: true - - id: any_form - $type: haxework.gui.SpriteView + - id: data_form + $type: demo.form.DataForm geometry.size.stretch: true - $type: haxework.gui.HGroupView geometry.size.percent.width: 100 diff --git a/demo/src/demo/Theme.hx b/demo/src/demo/Theme.hx index beb9261..d297c02 100644 --- a/demo/src/demo/Theme.hx +++ b/demo/src/demo/Theme.hx @@ -35,6 +35,10 @@ class Theme { var border:SkinSet = [ Skin.border(ColorUtils.multiply(color, 1.5), 1, 2), ]; + resources.skin.put("text", [ + Skin.color(ColorUtils.diff(color, 128)), + new TextSkin(ColorUtils.diff(color, -128), 16, "Courirer"), + ]); resources.skin.put("background", background); resources.skin.put("button", button); resources.skin.put("tab", tab); diff --git a/demo/src/demo/Util.hx b/demo/src/demo/Util.hx new file mode 100644 index 0000000..d3cfc66 --- /dev/null +++ b/demo/src/demo/Util.hx @@ -0,0 +1,12 @@ +package demo; + +class Util { + + public static function marray(value:Array, m:Int):Array { + var result = []; + for (i in 0...m) { + result = result.concat(value); + } + return result; + } +} diff --git a/demo/src/demo/form/DataForm.hx b/demo/src/demo/form/DataForm.hx new file mode 100644 index 0000000..7e72daa --- /dev/null +++ b/demo/src/demo/form/DataForm.hx @@ -0,0 +1,31 @@ +package demo.form; + +import haxework.gui.DataView; +import haxework.gui.TextView; +import haxework.gui.VGroupView; +import haxework.net.JsonLoader; +import haxework.resources.IResources; + +@:template class DataForm extends VGroupView { + @:view var data:DataView; + @:provide var resources:IResources; + + private function init() { + new JsonLoader().GET("http://umix.tv/channel/data2/renova.json") + .then(function(data:Array) { + var values = data.map(function(item) return '${item.id}: ${item.message}'); + this.data.data = Util.marray(values, 1); + }) + .catchError(function(error) trace(error)); + } + + private function factory(index:Int, value:String):TextView { + var label = new TextView(); + label.geometry.size.percent.width = 100; + label.geometry.margin = 1; + label.geometry.padding = 2; + resources.skin.bind("text", label, "skin"); + label.text = value; + return label; + } +} diff --git a/demo/src/demo/form/DataForm.yaml b/demo/src/demo/form/DataForm.yaml new file mode 100644 index 0000000..38df8db --- /dev/null +++ b/demo/src/demo/form/DataForm.yaml @@ -0,0 +1,15 @@ +--- +skin: $r:skin:background +views: + - $type: haxework.gui.ScrollView + geometry.size.stretch: true + view: + id: data + $type: haxework.gui.DataView + layout: + $type: haxework.gui.layout.VerticalLayout + factory: $this:factory + geometry.size.width: 100% + scroll: + $type: haxework.gui.list.VScrollBarView + skin: $r:skin:scroll diff --git a/demo/src/demo/form/ListForm.hx b/demo/src/demo/form/ListForm.hx index 7b3470f..aa26616 100644 --- a/demo/src/demo/form/ListForm.hx +++ b/demo/src/demo/form/ListForm.hx @@ -11,7 +11,8 @@ import haxework.net.JsonLoader; private function init() { new JsonLoader().GET("http://umix.tv/channel/data2/renova.json") .then(function(data:Array) { - list.data = data.map(function(item) return '${item.id}: ${item.message}'); + var values = data.map(function(item) return '${item.id}: ${item.message}'); + list.data = Util.marray(values, 50); }) .catchError(function(error) trace(error)); } diff --git a/demo/src/demo/form/TailForm.hx b/demo/src/demo/form/TailForm.hx index d20c269..e31e11d 100644 --- a/demo/src/demo/form/TailForm.hx +++ b/demo/src/demo/form/TailForm.hx @@ -1,33 +1,24 @@ package demo.form; -import haxework.resources.IResources; -import haxework.gui.ButtonView; +import haxework.gui.DataView; import haxework.gui.HGroupView; -import haxework.gui.IGroupView; -import haxework.gui.list.ListView.IListItemView; import haxework.gui.TextView; +import haxework.resources.IResources; @:template class TailForm extends HGroupView { - @:view public var group:IGroupView; + @:view public var data:DataView; @:provide var resources:IResources; private function init() { - for (i in 0...100) { - var view = new TextView(); - view.geometry.size.fixed.width = 100 + 100 * Math.random(); - view.geometry.size.fixed.height = 100 + 100 * Math.random(); - //view.skin = resources.skin.get("view"); - resources.skin.bind("view", view, "skin"); - view.text = 'View #${i}'; - group.addView(view); - } + data.data = [for (i in 0...100) '${i}']; } - private function onPress(view:ButtonView):Void { - trace('onPress: ${view.id}'); - } - - private function onItemSelect(item:IListItemView):Void { - trace('onItemSelect: ${item.data}'); + private function factory(index:Int, value:String):TextView { + var view = new TextView(); + view.geometry.size.fixed.width = 100 + 100 * Math.random(); + view.geometry.size.fixed.height = 100 + 100 * Math.random(); + resources.skin.bind("view", view, "skin"); + view.text = 'View #${index}'; + return view; } } diff --git a/demo/src/demo/form/TailForm.yaml b/demo/src/demo/form/TailForm.yaml index d7816af..59278b9 100644 --- a/demo/src/demo/form/TailForm.yaml +++ b/demo/src/demo/form/TailForm.yaml @@ -2,15 +2,14 @@ views: - $type: haxework.gui.ScrollView geometry.size.stretch: true + view: + id: data + $type: haxework.gui.DataView + layout: + $type: haxework.gui.layout.TailLayout + margin: 2 + factory: $this:factory + geometry.size.width: 100% scroll: $type: haxework.gui.list.VScrollBarView skin: $r:skin:scroll - geometry.size.height: 100% - geometry.size.width: 10 - view: - id: group - $type: haxework.gui.GroupView - geometry.size.width: 100% - layout.margin: 5 - layout: - $type: haxework.gui.layout.TailLayout diff --git a/src/main/haxework/gui/DataView.hx b/src/main/haxework/gui/DataView.hx new file mode 100644 index 0000000..4487527 --- /dev/null +++ b/src/main/haxework/gui/DataView.hx @@ -0,0 +1,17 @@ +package haxework.gui; + +class DataView extends GroupView { + + public var data(default, set):Array; + public var factory(default, default):Int -> D -> IView; + + private function set_data(value:Array):Array { + data = value; + rebuild(); + return data; + } + + private function rebuild():Void { + views = Lambda.array(Lambda.mapi(data, factory)); + } +} diff --git a/src/main/haxework/gui/ScrollView.hx b/src/main/haxework/gui/ScrollView.hx index 55fc7a0..b804d27 100644 --- a/src/main/haxework/gui/ScrollView.hx +++ b/src/main/haxework/gui/ScrollView.hx @@ -57,7 +57,9 @@ class ScrollView extends HGroupView { private function set_position(value:Float):Float { position = Math.min(Math.max(0, value), 1 - (height / view.height)); - scroll.position = position; + if (scroll != null) { + scroll.position = position; + } toUpdate(); return position; } diff --git a/src/main/haxework/gui/list/HScrollBarView.hx b/src/main/haxework/gui/list/HScrollBarView.hx index 497d2de..34e4e8f 100755 --- a/src/main/haxework/gui/list/HScrollBarView.hx +++ b/src/main/haxework/gui/list/HScrollBarView.hx @@ -4,12 +4,18 @@ import flash.geom.Point; class HScrollBarView extends ScrollBarView { - override private function onMouseDown(p:Point):Void { - mousePosition = p.x - width * position; - } + public function new() { + super(); + geometry.size.percent.width = 100; + geometry.size.fixed.height = 10; + } - override private function onMouseMove(p:Point):Void { - position = (p.x - mousePosition) / width; - onScroll.emit(position); - } + override private function onMouseDown(p:Point):Void { + mousePosition = p.x - width * position; + } + + override private function onMouseMove(p:Point):Void { + position = (p.x - mousePosition) / width; + onScroll.emit(position); + } } diff --git a/src/main/haxework/gui/list/VScrollBarView.hx b/src/main/haxework/gui/list/VScrollBarView.hx index d02d426..eda6675 100755 --- a/src/main/haxework/gui/list/VScrollBarView.hx +++ b/src/main/haxework/gui/list/VScrollBarView.hx @@ -4,12 +4,18 @@ import flash.geom.Point; class VScrollBarView extends ScrollBarView { - override private function onMouseDown(p:Point):Void { - mousePosition = p.y - height * position; - } + public function new() { + super(); + geometry.size.percent.height = 100; + geometry.size.fixed.width = 10; + } - override private function onMouseMove(p:Point):Void { - position = (p.y - mousePosition) / height; - onScroll.emit(position); - } + override private function onMouseDown(p:Point):Void { + mousePosition = p.y - height * position; + } + + override private function onMouseMove(p:Point):Void { + position = (p.y - mousePosition) / height; + onScroll.emit(position); + } }