Refactor bookplate skeleton per best-practice structure.

Kevin Schaaf · Kevin Schaaf · commit 084aa6a13bcd · 2014-01-29T13:42:13.000-08:00
DCO-1.1-Signed-Off-By: Kevin Schaaf &lt;kevin.schaaf@lge.com&gt;
diff --git a/debug.html b/debug.html
@@ -16,8 +16,5 @@
 		<script src="source/package.js" charset="utf-8"></script>
 	</head>
 	<body class="enyo-unselectable">
-		<script>
-			new App().renderInto(document.body);
-		</script>
 	</body>
 </html>
diff --git a/index.html b/index.html
@@ -16,12 +16,6 @@
 		<script src="build/app.js" charset="utf-8"></script>
 	</head>
 	<body class="enyo-unselectable">
-		<script>
-			if (!window.App) {
-				alert('No application build found, redirecting to debug.html.');
-				location = 'debug.html';
-			}
-			new App().renderInto(document.body);
-		</script>
+	    <script type="text/javascript">if (undefined === window.enyo) location = "debug.html";</script>
 	</body>
 </html>
diff --git a/source-old/App.css b/source-old/App.css
diff --git a/source-old/App.js b/source-old/App.js
@@ -0,0 +1,17 @@
+enyo.kind({
+	name: "App",
+	kind: "FittableRows",
+	fit: true,
+	components:[
+		{kind: "onyx.Toolbar", content: "Hello World"},
+		{kind: "enyo.Scroller", fit: true, components: [
+			{name: "main", classes: "nice-padding", allowHtml: true}
+		]},
+		{kind: "onyx.Toolbar", components: [
+			{kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"}
+		]}
+	],
+	helloWorldTap: function(inSender, inEvent) {
+		this.$.main.addContent("The button was tapped.<br/>");
+	}
+});
diff --git a/source-old/Theme.less b/source-old/Theme.less
diff --git a/source-old/package.js b/source-old/package.js
@@ -0,0 +1,7 @@
+enyo.depends(
+	"$lib/layout",
+	"$lib/onyx",	// To theme Onyx using Theme.less, change this line to $lib/onyx/source,
+	//"Theme.less",	// uncomment this line, and follow the steps described in Theme.less
+	"App.css",
+	"App.js"
+);
diff --git a/source/App.js b/source/App.js
@@ -1,17 +1,15 @@
+/**
+	Define and instantiate your enyo.Application kind in this file.  Note,
+	application rendering should be deferred until DOM is ready by wrapping
+	it in a call to enyo.ready().
+*/
+
 enyo.kind({
-	name: "App",
-	kind: "FittableRows",
-	fit: true,
-	components:[
-		{kind: "onyx.Toolbar", content: "Hello World"},
-		{kind: "enyo.Scroller", fit: true, components: [
-			{name: "main", classes: "nice-padding", allowHtml: true}
-		]},
-		{kind: "onyx.Toolbar", components: [
-			{kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"}
-		]}
-	],
-	helloWorldTap: function(inSender, inEvent) {
-		this.$.main.addContent("The button was tapped.<br/>");
-	}
+	name: "myapp.Application",
+	kind: "enyo.Application",
+	view: "myapp.MainView"
 });
+
+enyo.ready(function () {
+	new myapp.Application({name: "app"});
+});
diff --git a/source/data/data.js b/source/data/data.js
@@ -0,0 +1,5 @@
+/**
+	For simple applications, you might define all of your models, collections,
+	and sources in this file.  For more complex applications, you might choose to separate
+	these kind definitions into multiple files under this folder.
+*/
diff --git a/source/data/package.js b/source/data/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"data.js"
+);
diff --git a/source/package.js b/source/package.js
@@ -1,7 +1,15 @@
 enyo.depends(
+	// Layout library
 	"$lib/layout",
+	// Onyx UI library
 	"$lib/onyx",	// To theme Onyx using Theme.less, change this line to $lib/onyx/source,
 	//"Theme.less",	// uncomment this line, and follow the steps described in Theme.less
-	"App.css",
-	"App.js"
-);
+	// CSS/LESS style files
+	"style",
+	// Model and data definitions
+	"data",
+	// View kind definitions
+	"views",
+	// Include our default entry point
+	"app.js"
+);
diff --git a/source/style/Theme.less b/source/style/Theme.less
@@ -0,0 +1,25 @@
+/* 
+    You can modify the Moonraker theme by adding variable and rule overrides to this
+    file.  To enable theming, follow these steps:
+
+    1. In source/package.js, change "$lib/moonraker" to "$lib/moonraker/source".
+    2. In source/style/package.js, add "Theme.less" (this file).
+    3. Add variable and rule overrides below.
+
+    See [https://github.com/enyojs/enyo/wiki/UI-Theming] for more information.
+*/
+
+
+/* Moonstone default variable definitions: */
+@import "../../lib/moonstone/css/moonstone-variables.less";
+
+/* Place your Moonstone variable overrides here --------------- */
+
+/* ------------------------------------- end variable overrides */
+
+/* Moonstone rule definitions: */
+@import "../../lib/moonstone/css/moonstone-rules.less";
+
+/* Place your Moonstone rule overrides here ------------------- */
+
+/* ----------------------------------------- end rule overrides */
diff --git a/source/style/main.less b/source/style/main.less
@@ -0,0 +1,8 @@
+/*
++    App-specific LESS/CSS would go here, but to make your
++    application easier to maintain, you should try to
++    minimize the use of custom CSS.
++*/
+
+.main-view {
+}
diff --git a/source/style/package.js b/source/style/package.js
@@ -0,0 +1,4 @@
+enyo.depends(
+	//"Theme.less",	// To theme Moonstone, uncomment this line, and follow the steps described in Theme.less
+	"main.less"
+);
diff --git a/source/views/package.js b/source/views/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"views.js"
+);
diff --git a/source/views/views.js b/source/views/views.js
@@ -0,0 +1,23 @@
+/**
+	For simple applications, you might define all of your views in this file.  
+	For more complex applications, you might choose to separate these kind definitions 
+	into multiple files under this folder.
+*/
+
+enyo.kind({
+	name: "myapp.MainView",
+	kind: "FittableRows",
+	fit: true,
+	components:[
+		{kind: "onyx.Toolbar", content: "Hello World"},
+		{kind: "enyo.Scroller", fit: true, components: [
+			{name: "main", classes: "nice-padding", allowHtml: true}
+		]},
+		{kind: "onyx.Toolbar", components: [
+			{kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"}
+		]}
+	],
+	helloWorldTap: function(inSender, inEvent) {
+		this.$.main.addContent("The button was tapped.<br/>");
+	}
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+enyo.depends(`
	`2`	`+ "data.js"`
	`3`	`+);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+enyo.depends(`
	`2`	`+ "views.js"`
	`3`	`+);`