[gui] add DataView
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
12
demo/src/demo/Util.hx
Normal 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;
|
||||
}
|
||||
}
|
||||
31
demo/src/demo/form/DataForm.hx
Normal file
31
demo/src/demo/form/DataForm.hx
Normal 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;
|
||||
}
|
||||
}
|
||||
15
demo/src/demo/form/DataForm.yaml
Normal file
15
demo/src/demo/form/DataForm.yaml
Normal 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
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
data.data = [for (i in 0...100) '${i}'];
|
||||
}
|
||||
|
||||
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();
|
||||
//view.skin = resources.skin.get("view");
|
||||
resources.skin.bind("view", view, "skin");
|
||||
view.text = 'View #${i}';
|
||||
group.addView(view);
|
||||
}
|
||||
}
|
||||
|
||||
private function onPress(view:ButtonView):Void {
|
||||
trace('onPress: ${view.id}');
|
||||
}
|
||||
|
||||
private function onItemSelect(item:IListItemView<String>):Void {
|
||||
trace('onItemSelect: ${item.data}');
|
||||
view.text = 'View #${index}';
|
||||
return view;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
17
src/main/haxework/gui/DataView.hx
Normal file
17
src/main/haxework/gui/DataView.hx
Normal 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));
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
if (scroll != null) {
|
||||
scroll.position = position;
|
||||
}
|
||||
toUpdate();
|
||||
return position;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,12 @@ import flash.geom.Point;
|
||||
|
||||
class HScrollBarView extends ScrollBarView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
geometry.size.percent.width = 100;
|
||||
geometry.size.fixed.height = 10;
|
||||
}
|
||||
|
||||
override private function onMouseDown(p:Point):Void {
|
||||
mousePosition = p.x - width * position;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,12 @@ import flash.geom.Point;
|
||||
|
||||
class VScrollBarView extends ScrollBarView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
geometry.size.percent.height = 100;
|
||||
geometry.size.fixed.width = 10;
|
||||
}
|
||||
|
||||
override private function onMouseDown(p:Point):Void {
|
||||
mousePosition = p.y - height * position;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user