Enyo Tutorial: Part 2a

source/App.js

@@ -10,19 +10,25 @@ enyo.kind({
 		{kind: "onyx.InputDecorator", components: [
 			{kind: "onyx.Input", name: "percentControl", placeholder: "Enter percent"}
 		]},
-		{kind: "onyx.Button", content: "Calculate tip", ontap: "calculate"},
-		{tag: "div", name: "tipAmount"}
+		{kind: "onyx.Button", content: "Calculate tip", ontap: "calculateWithComponent"},
+		{tag: "div", name: "tipAmount"},
+		{kind: "PercentCalculator", name: "percentCalculator", onCalculated: "updateControls"}
 	],
 	create: function() {
 		this.inherited(arguments);
 	},
-	calculate: function(inSource, inEvent) {
+	updateControls: function(inSource, inEvent) {
+		this.$.tipAmount.setContent(inEvent.percentValue);
+
+		return true; // stop bubbling
+	},
+	calculateWithComponent: function(inSource, inEvent) {
 		var sum = this.$.sumControl.hasNode().value;
 		var percent = this.$.percentControl.hasNode().value;
 
-		var result = (sum * percent) / 100;
-		this.$.tipAmount.setContent(result);
+		this.$.percentCalculator.setSum(sum);
+		this.$.percentCalculator.setPercent(percent);
 
-		return true; // stop bubbling
+		this.$.percentCalculator.calculate();
 	}
 });

source/calc.percent.js

@@ -0,0 +1,21 @@
+enyo.kind({
+	name: 'PercentCalculator',
+	kind: enyo.Component,
+	published: {
+		sum: 0, //optional default values
+		percent: 0
+	},
+	events: {
+		onCalculated: ''
+	},
+	create: function() {
+		this.inherited(arguments);
+	},
+	calculate: function() {
+		var result;
+
+		result = (this.sum * this.percent) / 100;
+
+		this.doCalculated({percentValue: result});
+	}
+});

source/package.js

@@ -2,5 +2,6 @@ enyo.depends(
 	"$lib/layout",
 	"$lib/onyx",
 	"App.css",
-	"App.js"
-);
+	"App.js",
+	"calc.percent.js"
+);