Update Domkit sample, add example button

samples/Domkit.hx

@@ -1,6 +1,7 @@
 
 
 @:uiComp("view")
+// Naming scheme of component classes can be customized with domkit.Macros.registerComponentsPath();
 class ViewComp extends h2d.Flow implements h2d.domkit.Object {
 
 	static var SRC =
@@ -19,11 +20,55 @@ class ViewComp extends h2d.Flow implements h2d.domkit.Object {
 
 }
 
-class ViewContainer extends h2d.Flow implements h2d.domkit.Object {
 
-	static var SRC = <flow><view(align,[]) id="view"/></flow>;
+@:uiComp("button")
+class ButtonComp extends h2d.Flow implements h2d.domkit.Object {
 
-	public function new(align,?parent) {
+	static var SRC = <button>
+		<text public id="labelTxt" />
+	</button>
+
+	public var label(get, set): String;
+	function get_label() return labelTxt.text;
+	function set_label(s) {
+		labelTxt.text = s;
+		return s;
+	}
+
+	public function new( ?parent ) {
+		super(parent);
+		initComponent();
+		enableInteractive = true;
+		interactive.onClick = function(_) onClick();
+		interactive.onOver = function(_) {
+			dom.hover = true;
+		};
+		interactive.onPush = function(_) {
+			dom.active = true;
+		};
+		interactive.onRelease = function(_) {
+			dom.active = false;
+		};
+		interactive.onOut = function(_) {
+			dom.hover = false;
+		};
+	}
+
+	public dynamic function onClick() {
+	}
+}
+
+@:uiComp("container")
+class ContainerComp extends h2d.Flow implements h2d.domkit.Object {
+
+	static var SRC = <container>
+		<view(align,[]) id="view"/>
+		<button public id="btn"/>
+		<button public id="btn1"/>
+		<button public id="btn2"/>
+	</container>;
+
+	public function new(align:h2d.Flow.FlowAlign, ?parent) {
 		super(parent);
 		initComponent();
 	}
@@ -35,16 +80,29 @@ class ViewContainer extends h2d.Flow implements h2d.domkit.Object {
 class Domkit extends hxd.App {
 
 	var center : h2d.Flow;
+	var style = null;
 
 	override function init() {
 		center = new h2d.Flow(s2d);
 		center.horizontalAlign = center.verticalAlign = Middle;
 		onResize();
-		var view = new ViewContainer(Right, center);
+		var root = new ContainerComp(Right, center);
 
-		var style = new h2d.domkit.Style();
+		// Override
+		root.btn.label = "Button";
+		root.btn1.label = "Highlight ON";
+		root.btn2.labelTxt.text = "Highlight OFF";
+
+		root.btn1.onClick = function() {
+			root.btn.dom.addClass("highlight");
+		}
+		root.btn2.onClick = function() {
+			root.btn.dom.removeClass("highlight");
+		}
+
+		style = new h2d.domkit.Style();
 		style.load(hxd.Res.style);
-		view.dom.applyStyle(style);
+		style.addObject(root);
 	}
 
 	override function onResize() {
@@ -52,6 +110,10 @@ class Domkit extends hxd.App {
 		center.minHeight = center.maxHeight = s2d.height;
 	}
 
+	override function update(dt:Float) {
+		style.sync();
+	}
+
 	static function main() {
 		#if hl
 		hxd.res.Resource.LIVE_UPDATE = true;

samples/res/style.css

@@ -5,4 +5,31 @@
 
 view.mybox {
 	padding: 10;
+}
+
+container {
+	max-width: 300;
+	layout: vertical;
+}
+
+button {
+	background: #333;
+	fill-width: true;
+	height: 30;
+}
+
+button.highlight {
+	background: #a33;
+}
+
+button text {
+	align: middle middle;
+}
+
+button:hover {
+	background: #444;
+}
+
+button:active {
+	background: #222;
 }