[gui] add DataView

This commit is contained in:
2019-03-01 17:33:01 +03:00
parent cad4faa580
commit 66f0e79297
12 changed files with 134 additions and 50 deletions

View File

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

View File

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

12
demo/src/demo/Util.hx Normal file
View File

@@ -0,0 +1,12 @@
package demo;
class Util {
public static function marray<T>(value:Array<T>, m:Int):Array<T> {
var result = [];
for (i in 0...m) {
result = result.concat(value);
}
return result;
}
}

View File

@@ -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<String>;
@:provide var resources:IResources;
private function init() {
new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
.then(function(data:Array<Dynamic>) {
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;
}
}

View File

@@ -0,0 +1,15 @@
---
skin: $r:skin:background
views:
- $type: haxework.gui.ScrollView
geometry.size.stretch: true
view:
id: data
$type: haxework.gui.DataView<String>
layout:
$type: haxework.gui.layout.VerticalLayout
factory: $this:factory
geometry.size.width: 100%
scroll:
$type: haxework.gui.list.VScrollBarView
skin: $r:skin:scroll

View File

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

View File

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

View File

@@ -2,15 +2,14 @@
views:
- $type: haxework.gui.ScrollView
geometry.size.stretch: true
view:
id: data
$type: haxework.gui.DataView<String>
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

View File

@@ -0,0 +1,17 @@
package haxework.gui;
class DataView<D> extends GroupView {
public var data(default, set):Array<D>;
public var factory(default, default):Int -> D -> IView<Dynamic>;
private function set_data(value:Array<D>):Array<D> {
data = value;
rebuild();
return data;
}
private function rebuild():Void {
views = Lambda.array(Lambda.mapi(data, factory));
}
}

View File

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

View File

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

View File

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