added button color skin

This commit is contained in:
2013-09-13 14:40:39 +02:00
parent b01eea00fd
commit f57fabe75f
7 changed files with 149 additions and 9 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View 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();
}
}

View 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];
}
}