Enyo Tutorial: Part 1

robertkowalski · Sep 3, 2012 · 4f6eb9e · 4f6eb9e · robertkowalski · Jan 15, 2014
1 parent 6549b99
commit 4f6eb9e
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/source/App.js b/source/App.js
@@ -1,10 +1,28 @@
 enyo.kind({
 	name: "App",
-	fit: true,
-	components:[
-		{name: "hello", content: "Hello World", allowHtml: true, ontap: "helloWorldTap"}
+	kind: enyo.Control,
+	style: "",
+	classes: "onyx",
+	components: [
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.Input", name: "sumControl", placeholder: "Enter sum"}
+		]},
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.Input", name: "percentControl", placeholder: "Enter percent"}
+		]},
+		{kind: "onyx.Button", content: "Calculate tip", ontap: "calculate"},
+		{tag: "div", name: "tipAmount"}
 	],
-	helloWorldTap: function(inSender, inEvent) {
-		this.$.hello.addContent("<br/><b>hello</b> control was tapped");
+	create: function() {
+		this.inherited(arguments);
+	},
+	calculate: function(inSource, inEvent) {
+		var sum = this.$.sumControl.hasNode().value;
+		var percent = this.$.percentControl.hasNode().value;
+
+		var result = (sum * percent) / 100;
+		this.$.tipAmount.setContent(result);
+
+		return true; // stop bubbling
 	}
-});
+});