Enyo Tutorial: Part 2b

robertkowalski · Sep 3, 2012 · 8bb1959 · 8bb1959
1 parent 8f931b8
commit 8bb1959
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/source/App.css b/source/App.css
@@ -3,8 +3,13 @@
 	This way, you can minify your application, and just remove the "source" folder for production
 */
 #app {
-	margin: 16px;
-	border-radius: 4px;
-	background-color: silver;
-	padding: 16px;
+	background-color: #c6c6c6;
 }
+
+.center {
+	text-align: center;
+}
+
+.inputDecorator {
+	width: 80%;
+}
diff --git a/source/App.js b/source/App.js
@@ -1,24 +1,29 @@
 enyo.kind({
 	name: "App",
-	kind: enyo.Control,
+	kind: enyo.FittableRows,
 	style: "",
 	classes: "onyx",
 	components: [
-		{kind: "onyx.InputDecorator", components: [
-			{kind: "onyx.Input", name: "sumControl", placeholder: "Enter sum"}
+		{kind: "onyx.Toolbar", classes: 'center', content: 'Tip calculator'},
+		{kind: enyo.Scroller, classes: 'center', fit: true, components: [
+			{kind: "onyx.InputDecorator", classes: "inputDecorator", style: "margin-top: 50px;", components: [
+				{kind: "onyx.Input", classes: "center", name: "sumControl", placeholder: "Enter sum"}
+			]},
+			{kind: "onyx.InputDecorator", classes: "inputDecorator", components: [
+				{kind: "onyx.Input", classes: "center", name: "percentControl", placeholder: "Enter percent"}
+			]},
+			{tag: "div", name: "tipAmount"}
 		]},
-		{kind: "onyx.InputDecorator", components: [
-			{kind: "onyx.Input", name: "percentControl", placeholder: "Enter percent"}
+		{kind: "onyx.Toolbar", style: 'text-align: right;', components: [
+			{kind: "onyx.Button", content: "Calculate tip", ontap: "calculateWithComponent"}
 		]},
-		{kind: "onyx.Button", content: "Calculate tip", ontap: "calculateWithComponent"},
-		{tag: "div", name: "tipAmount"},
 		{kind: "PercentCalculator", name: "percentCalculator", onCalculated: "updateControls"}
 	],
 	create: function() {
 		this.inherited(arguments);
 	},
 	updateControls: function(inSource, inEvent) {
-		this.$.tipAmount.setContent(inEvent.percentValue);
+		this.$.tipAmount.setContent("The tip is: " + inEvent.percentValue);
 
 		return true; // stop bubbling
 	},