added button color skin
This commit is contained in:
@@ -26,7 +26,7 @@
|
||||
{
|
||||
"id":"panel",
|
||||
"type":"haxework.gui.HGroupView",
|
||||
"layoutHAlign":"~haxework.gui.core.HAlign:LEFT",
|
||||
"layoutHAlign":"~haxework.gui.core.HAlign:RIGHT",
|
||||
"layoutVAlign":"~haxework.gui.core.VAlign:MIDDLE",
|
||||
"pWidth":100,
|
||||
"height":30,
|
||||
@@ -39,7 +39,7 @@
|
||||
"type":"haxework.gui.ButtonView",
|
||||
"width":100,
|
||||
"pHeight":100,
|
||||
"skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ffff"},
|
||||
"skin":{"type":"haxework.gui.skin.ButtonColorSkin", "color":"0xcc0000"},
|
||||
"text":"Text1",
|
||||
"onPress":"#listener"
|
||||
},
|
||||
@@ -47,7 +47,7 @@
|
||||
"id":"button2",
|
||||
"type":"haxework.gui.ButtonView",
|
||||
"contentSize":true,
|
||||
"skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ffff"},
|
||||
"skin":{"type":"haxework.gui.skin.ButtonColorSkin", "color":"0x00cc00"},
|
||||
"text":"Text2",
|
||||
"fontFamily":"Georgia",
|
||||
"fontColor":"0xffffff",
|
||||
@@ -57,7 +57,7 @@
|
||||
"id":"button3",
|
||||
"type":"haxework.gui.ButtonView",
|
||||
"contentSize":true,
|
||||
"skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ffff"},
|
||||
"skin":{"type":"haxework.gui.skin.ButtonColorSkin", "color":"0x00cccc"},
|
||||
"text":"Text 3333333333 ddd",
|
||||
"fontFamily":"Tahoma",
|
||||
"fontColor":"0xff0000",
|
||||
|
||||
@@ -12,29 +12,74 @@ enum ButtonState {
|
||||
|
||||
class ButtonView extends LabelView {
|
||||
|
||||
public var state(default, null):ButtonState;
|
||||
public var state(get, null):ButtonState;
|
||||
public var dispatcher(default, null):IDispatcher<ButtonViewListener>;
|
||||
public var onPress(null, set):ButtonViewListener;
|
||||
|
||||
private var overed:Bool;
|
||||
private var downed:Bool;
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
overed = false;
|
||||
downed = false;
|
||||
state = ButtonState.UP;
|
||||
dispatcher = new Dispatcher<ButtonViewListener>();
|
||||
content.buttonMode = true;
|
||||
content.mouseChildren = false;
|
||||
content.addEventListener(MouseEvent.CLICK, onMouseClick);
|
||||
content.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
|
||||
content.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
|
||||
content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
|
||||
//content.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
|
||||
}
|
||||
|
||||
private function onMouseClick(event:MouseEvent):Void {
|
||||
dispatcher.dispatch(pressCaller);
|
||||
}
|
||||
|
||||
private function onMouseOver(event:MouseEvent):Void {
|
||||
overed = true;
|
||||
invalidate();
|
||||
}
|
||||
|
||||
private function onMouseOut(event:MouseEvent):Void {
|
||||
overed = false;
|
||||
invalidate();
|
||||
}
|
||||
|
||||
private function onMouseDown(event:MouseEvent):Void {
|
||||
downed = true;
|
||||
content.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
|
||||
invalidate();
|
||||
}
|
||||
|
||||
private function onMouseUp(event:MouseEvent):Void {
|
||||
downed = false;
|
||||
content.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
|
||||
invalidate();
|
||||
}
|
||||
|
||||
private function pressCaller(listener:ButtonViewListener):Void {
|
||||
listener.onPress(this);
|
||||
}
|
||||
|
||||
private function get_state():ButtonState {
|
||||
return (downed && overed) ? ButtonState.DOWN : overed ? ButtonState.OVER : ButtonState.UP;
|
||||
}
|
||||
|
||||
private function set_onPress(value:ButtonViewListener):ButtonViewListener {
|
||||
dispatcher.addListener(value);
|
||||
return value;
|
||||
}
|
||||
|
||||
public function dispose():Void {
|
||||
content.removeEventListener(MouseEvent.CLICK, onMouseClick);
|
||||
content.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
|
||||
content.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
|
||||
content.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
|
||||
content.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
|
||||
}
|
||||
}
|
||||
|
||||
interface ButtonViewListener {
|
||||
|
||||
@@ -10,6 +10,7 @@ import haxework.gui.TextView;
|
||||
import haxework.gui.LabelView;
|
||||
import haxework.gui.ButtonView;
|
||||
import haxework.gui.skin.ColorSkin;
|
||||
import haxework.gui.skin.ButtonColorSkin;
|
||||
|
||||
class GuiBuilder {
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
package haxework.gui.layout;
|
||||
|
||||
import haxework.gui.core.HAlign;
|
||||
import haxework.gui.core.SizeType;
|
||||
|
||||
class HorizontalLayout extends DefaultLayout {
|
||||
@@ -21,10 +22,23 @@ class HorizontalLayout extends DefaultLayout {
|
||||
placeViewVertical(group, view);
|
||||
}
|
||||
|
||||
var x:Float = group.leftPadding;
|
||||
leftSize -= fixedSize;
|
||||
for (view in views) {
|
||||
if (view.widthType == SizeType.PERCENT) view.w = view.pWidth / 100 * leftSize;
|
||||
if (view.widthType == SizeType.PERCENT) {
|
||||
view.w = view.pWidth / 100 * leftSize;
|
||||
fixedSize += view.width + view.leftMargin + view.rightMargin;
|
||||
}
|
||||
}
|
||||
|
||||
var x:Float;
|
||||
switch (group.layoutHAlign) {
|
||||
case HAlign.LEFT: x = group.leftPadding;
|
||||
case HAlign.CENTER: x = (group.width - fixedSize) / 2 + group.leftPadding - group.rightPadding;
|
||||
case HAlign.RIGHT: x = group.width - fixedSize - group.rightPadding;
|
||||
case HAlign.NONE: x = 0;
|
||||
}
|
||||
|
||||
for (view in views) {
|
||||
view.x = x + view.leftMargin;
|
||||
x += (view.width + view.leftMargin + view.rightMargin + group.layoutMargin);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
package haxework.gui.layout;
|
||||
|
||||
import haxework.gui.core.VAlign;
|
||||
import haxework.gui.core.SizeType;
|
||||
|
||||
class VerticalLayout extends DefaultLayout {
|
||||
@@ -21,10 +22,23 @@ class VerticalLayout extends DefaultLayout {
|
||||
placeViewHorizontal(group, view);
|
||||
}
|
||||
|
||||
var y:Float = group.topPadding;
|
||||
leftSize -= fixedSize;
|
||||
for (view in views) {
|
||||
if (view.heightType == SizeType.PERCENT) view.h = view.pHeight / 100 * leftSize;
|
||||
if (view.heightType == SizeType.PERCENT) {
|
||||
view.h = view.pHeight / 100 * leftSize;
|
||||
fixedSize += view.height + view.topMargin + view.bottomMargin;
|
||||
}
|
||||
}
|
||||
|
||||
var y:Float;
|
||||
switch (group.layoutVAlign) {
|
||||
case VAlign.TOP: y = group.topPadding;
|
||||
case VAlign.MIDDLE: y = (group.height - fixedSize) / 2 + group.topPadding - group.bottomPadding;
|
||||
case VAlign.BOTTOM: y = group.height - fixedSize - group.bottomPadding;
|
||||
case VAlign.NONE: y = 0;
|
||||
}
|
||||
|
||||
for (view in views) {
|
||||
view.y = y + view.topMargin;
|
||||
y += (view.height + view.topMargin + view.bottomMargin + group.layoutMargin);
|
||||
}
|
||||
|
||||
35
haxework/gui/skin/ButtonColorSkin.hx
Executable file
35
haxework/gui/skin/ButtonColorSkin.hx
Executable file
@@ -0,0 +1,35 @@
|
||||
package haxework.gui.skin;
|
||||
|
||||
import haxework.gui.utils.ColorUtils;
|
||||
import haxework.gui.ButtonView.ButtonState;
|
||||
import flash.display.Graphics;
|
||||
import flash.display.Sprite;
|
||||
|
||||
class ButtonColorSkin implements ISkin<Sprite, ButtonView> {
|
||||
|
||||
public var color(default, set_color):Int;
|
||||
private var colors:Map<ButtonState, Int>;
|
||||
|
||||
public function new(?color:Int = 0xffffff) {
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
private function set_color(value:Int):Int {
|
||||
colors = new Map<ButtonState, Int>();
|
||||
colors.set(ButtonState.UP, value);
|
||||
colors.set(ButtonState.DOWN, ColorUtils.diff(value, -64));
|
||||
colors.set(ButtonState.OVER, ColorUtils.diff(value, 64));
|
||||
//colors.set(ButtonState.DISABLE, ColorUtils.multiply(value, 0.6));
|
||||
return value;
|
||||
}
|
||||
|
||||
public function draw(view:ButtonView):Void {
|
||||
var color:Int = colors.get(view.state);
|
||||
var graphics:Graphics = view.content.graphics;
|
||||
graphics.clear();
|
||||
graphics.beginFill(color);
|
||||
graphics.drawRect(0, 0, view.width, view.height);
|
||||
graphics.endFill();
|
||||
}
|
||||
|
||||
}
|
||||
31
haxework/gui/utils/ColorUtils.hx
Executable file
31
haxework/gui/utils/ColorUtils.hx
Executable file
@@ -0,0 +1,31 @@
|
||||
package haxework.gui.utils;
|
||||
|
||||
class ColorUtils {
|
||||
|
||||
public static function multiply(color:Int, m:Float):Int {
|
||||
var rgb:Array<Int> = color2rgb(color);
|
||||
var red:Int = cast Math.min(255, Math.round(rgb[0] * m));
|
||||
var green:Int = cast Math.min(255, Math.round(rgb[1] * m));
|
||||
var blue:Int = cast Math.min(255, Math.round(rgb[2] * m));
|
||||
return rgb2color(red, green, blue);
|
||||
}
|
||||
|
||||
public static function diff(color:Int, d:Int):Int {
|
||||
var rgb:Array<Int> = color2rgb(color);
|
||||
var red:Int = cast Math.max(0, Math.min(255, rgb[0] + d));
|
||||
var green:Int = cast Math.max(0, Math.min(255, rgb[1] + d));
|
||||
var blue:Int = cast Math.max(0, Math.min(255, rgb[2] + d));
|
||||
return rgb2color(red, green, blue);
|
||||
}
|
||||
|
||||
public static function rgb2color(red:Int, green:Int, blue:Int):Int {
|
||||
return (red << 16) + (green << 8) + blue;
|
||||
}
|
||||
|
||||
public static function color2rgb(color:Int):Array<Int> {
|
||||
var red:Int = ((color & 0xFF0000) >>> 16);
|
||||
var green:Int = ((color & 0x00FF00) >> 8);
|
||||
var blue:Int = (color & 0x0000FF);
|
||||
return [red, green, blue];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user