InfernalGames/haxework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[gui] update

Browse Source
This commit is contained in:
shmyga
2019-03-06 17:07:26 +03:00
parent c2ab82b351
commit b0824773c9
46 changed files with 583 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
demo/src/demo/Demo.hx
View File

@@ -1,38 +1,50 @@
package demo;
import haxework.gui.frame.IFrameSwitcher;
import haxework.net.JsonLoader;
import demo.popup.ColorPopup;
import haxework.App;
import haxework.gui.frame.FrameSwitcher;
import haxework.gui.IGroupView;
import haxework.gui.IView;
import haxework.gui.Root;
import haxework.gui.ToggleButtonView;
import haxework.gui.VGroupView;
import haxework.log.TraceLogger;
import haxework.net.manage.ILoaderManager;
import haxework.net.manage.LoaderManager;
import haxework.resources.IResources;
import haxework.resources.Resources;
@:template class Demo extends VGroupView {
@:provide static var resources:IResources;
@:provide static var manager:ILoaderManager;
public static function main() {
L.push(new TraceLogger());
resources = new Resources();
manager = new LoaderManager();
resources.image.put("logo", HaxeLogo.resolve());
Theme.setColor(0x33aa33);
var demo = new Demo();
demo.switcher.change("list_form");
Root.bind(demo);
Root.instance.onResize.connect(function(rect) trace("resize", rect));
}
@:view var switcher:IFrameSwitcher;
@:template class DemoView extends VGroupView {
@:view var switcher:FrameSwitcher;
@:view var tabs:IGroupView;
private function init():Void {
switcher.change("list_form");
}
private function onFrameSwitch(frame:IView<Dynamic>):Void {
for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id;
}
private function choiceColor():Void {
new ColorPopup()
.show()
.then(function(color) Theme.setColor(color))
.catchError(function(e) {});
}
}
class Demo extends App {
public static function main() {
L.push(new TraceLogger());
var app = new App();
app.resources.image.put("logo", HaxeLogo.resolve());
Theme.setColor(0x33aa33);
app.start(new DemoView());
new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
.then(function(data:Array<Model>) {
app.resources.any.put("data", data);
app.resources.any.put("data50", Util.marray(data, 50));
})
.catchError(function(error) trace(error));
}
}

25
demo/src/demo/Demo.yaml → demo/src/demo/DemoView.yaml
View File

@@ -33,19 +33,23 @@ views:
+onPress: "$code:switcher.change('data_form')"
- id: switcher
$type: haxework.gui.frame.FrameSwitcher
skin: $r:skin:border
skin: $r:skin:panel
animateFactory: { $class: haxework.animate.SlideAnimate }
+onSwitch: $this:onFrameSwitch
geometry.size.stretch: true
geometry.padding: 5
views:
- id: list_form
$type: demo.form.ListForm
skin: $r:skin:background
geometry.size.stretch: true
- id: tail_form
$type: demo.form.TailForm
skin: $r:skin:background
geometry.size.stretch: true
- id: data_form
$type: demo.form.DataForm
skin: $r:skin:background
geometry.size.stretch: true
- $type: haxework.gui.HGroupView
geometry.size.percent.width: 100
@@ -55,23 +59,8 @@ views:
- $type: haxework.gui.ButtonView
geometry.padding: [25, 8]
skin: $r:skin:button
text: green
+onPress: "$code:Theme.setColor(0x33AA33)"
- $type: haxework.gui.ButtonView
geometry.padding: [25, 8]
skin: $r:skin:button
text: red
+onPress: "$code:Theme.setColor(0xAA3333)"
- $type: haxework.gui.ButtonView
geometry.padding: [25, 8]
skin: $r:skin:button
text: yellow
+onPress: "$code:Theme.setColor(0xFFCC55, 0x555555)"
- $type: haxework.gui.ButtonView
geometry.padding: [25, 8]
skin: $r:skin:button
text: pink
+onPress: "$code:Theme.setColor(0xCC33AA)"
text: Color
+onPress: "$code:choiceColor()"
# separator
- $type: haxework.gui.SpriteView
geometry.size.stretch: true

10
demo/src/demo/Model.hx Normal file
View File

@@ -0,0 +1,10 @@
package demo;
typedef Model = {
var id:String;
var created_at:Int;
var maker:String;
var title:String;
var message:String;
var image:{url:String, width:Int, height:Int};
}

20
demo/src/demo/Theme.hx
View File

@@ -13,9 +13,7 @@ class Theme {
public static function setColor(color:Int, textColor:Int = 0xffffff):Void {
var text:ISkin<Dynamic> = new TextSkin(textColor, 16, "Courirer");
var background:SkinSet = [
Skin.color(0x00000),
];
var background = Skin.color(0x00000);
var button:SkinSet = [
Skin.buttonColor(color),
text,
@@ -32,18 +30,22 @@ class Theme {
var scroll:SkinSet = [
ScrollBarSkin.vertical(color, ColorUtils.diff(color, 128)),
];
var border:SkinSet = [
Skin.border(ColorUtils.multiply(color, 1.5), 1, 2),
];
resources.skin.put("text", [
var border = Skin.border(ColorUtils.multiply(color, 1.5), 1, 2);
resources.skin.put("text0", [
Skin.color(ColorUtils.diff(color, 128)),
new TextSkin(ColorUtils.diff(color, -128), 16, "Courirer"),
]);
resources.skin.put("background", background);
resources.skin.put("text1", [
Skin.color(ColorUtils.diff(color, 64)),
new TextSkin(ColorUtils.diff(color, -128), 16, "Courirer"),
]);
resources.skin.put("text", resources.skin.get("text0"));
resources.skin.put("background", [background]);
resources.skin.put("button", button);
resources.skin.put("tab", tab);
resources.skin.put("view", view);
resources.skin.put("scroll", scroll);
resources.skin.put("border", border);
resources.skin.put("border", [border]);
resources.skin.put("panel", [background, border]);
}
}

20
demo/src/demo/form/DataForm.hx
View File

@@ -1,31 +1,17 @@
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 {
private function factory(index:Int, value:Model):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;
label.skinId = "text";
label.text = (value.title != null ? '${value.title}\n-\n' : '') + value.message;
return label;
}
}

3
demo/src/demo/form/DataForm.yaml
View File

@@ -5,11 +5,12 @@ views:
geometry.size.stretch: true
view:
id: data
$type: haxework.gui.DataView<String>
$type: haxework.gui.DataView<Model>
layout:
$type: haxework.gui.layout.VerticalLayout
factory: $this:factory
geometry.size.width: 100%
data: $r:any:data
scroll:
$type: haxework.gui.list.VScrollBarView
skin: $r:skin:scroll

17
demo/src/demo/form/ListForm.hx
View File

@@ -1,23 +1,18 @@
package demo.form;
import haxework.gui.list.LabelListItem;
import haxework.gui.list.ListView.IListItemView;
import haxework.gui.list.VListView;
import haxework.gui.VGroupView;
import haxework.net.JsonLoader;
@:template class ListForm extends VGroupView {
@:view public var list(default, null):VListView<String>;
@:view public var list(default, null):VListView<Model>;
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}');
list.data = Util.marray(values, 50);
})
.catchError(function(error) trace(error));
private function factory() {
return new LabelListItem(function(index:Int, value:Model) return '${index}. ${value.id}: ${value.title}');
}
private function onItemSelect(item:IListItemView<String>):Void {
trace('onItemSelect: ${item.data}');
private function onItemSelect(item:IListItemView<Model>):Void {
trace('onItemSelect: ${item.data.id}');
}
}

5
demo/src/demo/form/ListForm.yaml
View File

@@ -1,12 +1,13 @@
---
views:
- id: list
$type: haxework.gui.list.VListView<String>
$type: haxework.gui.list.VListView<Model>
+onItemSelect: $this:onItemSelect
factory: { $class: haxework.gui.list.LabelListItem }
factory: $this:factory
geometry.size.stretch: true
scroll:
$type: haxework.gui.list.VScrollBarView
skin: $r:skin:scroll
geometry.size.height: 100%
geometry.size.width: 10
data: $r:any:data50

33
demo/src/demo/form/TailForm.hx
View File

@@ -1,24 +1,29 @@
package demo.form;
import haxework.gui.DataView;
import haxework.gui.HGroupView;
import haxework.gui.ImageView;
import haxework.gui.IView;
import haxework.gui.TextView;
import haxework.resources.IResources;
import haxework.gui.utils.DrawUtil.FillType;
@:template class TailForm extends HGroupView {
@:view public var data:DataView<String>;
@:provide var resources:IResources;
private function init() {
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();
resources.skin.bind("view", view, "skin");
view.text = 'View #${index}';
private function factory(index:Int, value:Model):IView<Dynamic> {
var view:IView<Dynamic>;
if (value.image != null) {
var imageView = new ImageView();
imageView.skinId = "border";
imageView.fillType = FillType.CONTAIN;
imageView.imageUrl = value.image.url;
view = imageView;
} else {
var textView = new TextView();
textView.skinId = "view";
textView.text = '${value.id}\n${value.maker}';
view = textView;
}
view.geometry.size.fixed.width = 350;
view.geometry.size.fixed.height = 200;
return view;
}
}

3
demo/src/demo/form/TailForm.yaml
View File

@@ -4,12 +4,13 @@ views:
geometry.size.stretch: true
view:
id: data
$type: haxework.gui.DataView<String>
$type: haxework.gui.DataView<Model>
layout:
$type: haxework.gui.layout.TailLayout
margin: 2
factory: $this:factory
geometry.size.width: 100%
data: $r:any:data
scroll:
$type: haxework.gui.list.VScrollBarView
skin: $r:skin:scroll

15
demo/src/demo/popup/ColorPopup.hx Normal file
View File

@@ -0,0 +1,15 @@
package demo.popup;
import haxework.gui.ButtonView;
import haxework.gui.popup.PopupView;
import haxework.gui.skin.Skin;
@:template class ColorPopup extends PopupView<Int> {
private function colorViewFactory(index:Int, color:Int) {
var view = new ButtonView();
view.geometry.size.fixed = [48, 48];
view.skin = [Skin.buttonColor(color)];
return view;
}
}

35
demo/src/demo/popup/ColorPopup.yaml Normal file
View File

@@ -0,0 +1,35 @@
---
view:
$type: haxework.gui.VGroupView
geometry.size.width: 400
geometry.size.height: 200
geometry.padding: 10
geometry.hAlign: center
geometry.vAlign: middle
skinId: panel
views:
- id: colors
$type: haxework.gui.DataView
geometry.size.stretch: true
layout:
$type: haxework.gui.layout.TailLayout
vAlign: middle
margin: 5
factory: $this:colorViewFactory
data:
- 0x33AA33
- 0xAA3333
- 0xFFCC55 # 0x555555
- 0xCC33AA
- 0x3333AA
+onDataSelect: $this:close
- $type: haxework.gui.HGroupView
geometry.size.width: 100%
layout.hAlign: right
layout.margin: 10
views:
- $type: haxework.gui.ButtonView
geometry.padding: [25, 8]
skinId: button
text: Cancel
+onPress: $code:reject('cancel')