Refresh of the kitchen sink app sample

davebalmer · Nov 22, 2013 · 469ef98 · 469ef98
1 parent 473ede1
commit 469ef98
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 82 deletions.
diff --git a/samples/kitchensink/htmltest.html b/samples/kitchensink/htmltest.html
@@ -0,0 +1,9 @@
+<h1>Embedded HTML</h1>
+
+<p>This HTML fragment was loaded dynamically. The joHTML control
+also intercepts <a href="htmltestlink.html">links</a> so you
+can keep them on the page. This is useful for pure content cases
+such as disclaimers, app info, and help.</p>
+
+<p><em>Note that since Jo uses custom tag names for its controls,
+you should have little if any CSS overlap with your App UI.</em></p>
diff --git a/samples/kitchensink/htmltestlink.html b/samples/kitchensink/htmltestlink.html
@@ -0,0 +1,10 @@
+<h1>Embedded HTML Link</h1>
+
+<p>You tapped a link, the app code listened for it and
+handled loading a different HTML fragment into the file source...</p>
+
+<p>Which automatically updated the UI. You could also
+push these "pages" onto your UI stack, but that's a little more
+involved.</p>
+
+<a href="htmltest.html">Back to the original file</a>
diff --git a/samples/kitchensink/index.html b/samples/kitchensink/index.html
@@ -15,52 +15,6 @@
 	<link rel="apple-touch-icon" href="joicon_114.png">
 </head>
 <body onload="App.load();">
-
-	<div id="hide">
-	<jocard id="about">
-		<jotitle>This was Defined as HTML</jotitle>
-		<jogroup id="aboutcontent">
-		<johtml class="about">
-			<img src="joicon_114.png" width="114" height="114" alt="Apple Touch Icon">
-			<p>
-				Welcome to a "kitchen sink" demo of some of the things you
-				can do with the Jo HTML5 framework.
-			</p>
-			<p>
-				One thing I hope comes across is how flexible the framework
-				truly is. This demo illustrates not only some of the important
-				goodies like widgets and interacting with data, but also some
-				of the many ways you can go about getting them to work.
-			</p>
-			<p>
-				For example, this "about" content is pulled directly from the
-				<code>index.html</code> file in the project using <code>joInterface</code>.
-				This entire box can be defined by your HTML, or using pure
-				JavaScript, or a mix.
-			</p>
-			<p>
-				Most of the coding examples use a pure JavaScript approach
-				because that tends to be more performant in terms of load time,
-				and tends to build tighter apps.
-			</p>
-			<p>
-				However, as this view shows, Jo doesn't try to force you to
-				go any deeper into the framework than you want to go. By learning
-				only a few special tags, you can have a quick prototype in HTML
-				in minutes.
-			</p>
-			<p>
-				Once you have that prototype, it's easy to turn those styled tags
-				into working UI controls by using the joInterface class. Heck,
-				you can even take static HTML content and place it directly into
-				most of the UI widgets as a string, or by passing a reference to a
-				parent DOM element.
-			</p>
-		</johtml>
-		</jogroup>
-	</jocard>
-	</div>
-
 	<!-- load the jo library -->
 	<script src="../../js/jo.js"></script>
 
@@ -69,9 +23,8 @@
 	<script src="js/menu.js"></script>
 	<script src="js/popups.js"></script>
 	<script src="js/widgets.js"></script>
-	<script src="js/lists.js"></script>
-	<script src="js/audio.js"></script>
-	<script src="js/ajax.js"></script>
+	<script src="js/table.js"></script>
+	<script src="js/html.js"></script>
 	<script src="js/themes.js"></script>
 
 </body>

diff --git a/samples/kitchensink/js/ajax.js b/samples/kitchensink/js/ajax.js
diff --git a/samples/kitchensink/js/app.js b/samples/kitchensink/js/app.js
@@ -1,30 +1,21 @@
 App = {
 	load: function() {
+		// loading Jo is required
 		jo.load();
 
-		// grab the HTML for our about box
-		var about = joDOM.get("about").innerHTML;
-
-		// this is a more complex UI with a nav bar and a toolbar
-		this.scn = new joScreen(
-			new joContainer([
-				new joFlexcol([
-					this.nav = new joNavbar(),
-					this.stack = new joStackScroller()
-				]),
-				this.toolbar = new joToolbar("This is a footer")
+		// typical card stack, nav and footer
+		this.screen = new joScreen(
+			new joFlexcol([
+				this.nav = new joNavbar(),
+				this.stack = new joStackScroller(),
+				this.toolbar = new joToolbar("This is a toolbar")
 			])
 		);
 
+		// attach the nav to our stack
 		this.nav.setStack(this.stack);
-
-		joCache.set("about", function() {
-			var card = new joCard(about).setTitle("About");
-
-			return card;
-		});
-
+
+		// push our menu card
 		this.stack.push(joCache.get("menu"));
-		console.log(this);
 	}
 };
diff --git a/samples/kitchensink/js/audio.js b/samples/kitchensink/js/audio.js
diff --git a/samples/kitchensink/js/html.js b/samples/kitchensink/js/html.js
@@ -0,0 +1,36 @@
+joCache.set("html", function() {
+	// create an HTML file loader
+	var file = new joFileSource("htmltest.html");
+
+	// HTML control, hook it up to file and subscribe to URL clicks
+	var html = new joHTML()
+	.setDataSource(file)
+	.selectEvent.subscribe(function(url) {
+		// a link was clicked, tell our file source to load its url
+		file.setQuery(url).load();
+	});
+
+	// for added fun, subscribe to the filesource and
+	// keep a display of its URL and file size.
+	var info = new joLabel();
+	file.changeEvent.subscribe(function(data) {
+		info.setData(file.query + " (" + data.length + " characters)");
+	});
+
+	// the UI for this card
+	card = new joCard([
+		new joGroup([
+			new joHTML("<h1>Inline HTML</h1><p>This HTML was included inline, click the load button below to pull in another file asynchronously.</p>"),
+			new joButton("Load HTML File")
+			.selectEvent.subscribe(function() { file.load(); }, this)
+		]),
+		// this is our dynamic HTML control defined above
+		new joGroup(html),
+		info
+	]).setTitle("Embedded HTML Browser");
+
+	console.log(card);
+
+	return card;
+});
+
diff --git a/samples/kitchensink/js/menu.js b/samples/kitchensink/js/menu.js
@@ -4,15 +4,12 @@ joCache.set("menu", function() {
 	// some inline data and chaining going on here,
 	// dont be afraid, it'll all make sense later
 	var card = new joCard([
-		new joTitle("Select an option below"),
 		new joMenu([
-			{ title: "About", id: "about" },
-			{ title: "Form Widgets", id: "widgets" },
-			{ title: "List Views", id: "lists" },
-			{ title: "Table View", id: "tables" },
-			{ title: "Popup Dialogs", id: "popups" },
-			{ title: "Ajax Calls", id: "ajax" },
-			{ title: "Themes and CSS", id: "themes" }
+			{ title: "UI Widgets", id: "widgets" },
+			{ title: "Simple Table View", id: "table" },
+			{ title: "Embedded HTML Browser", id: "html" },
+			{ title: "Popups & Dialogs", id: "popups" },
+			{ title: "CSS Utility Functions", id: "themes" }
 		]).selectEvent.subscribe(function(id) {
 			App.stack.push(joCache.get(id));
 		})
@@ -21,7 +18,8 @@ joCache.set("menu", function() {
 	// hey, you don't have to make messy chained and
 	// inlined code; that's a coding style decision
 	// Jo doesn't pretend it should make for you.
-	card.setTitle("Jo Kitchen Sink Demo");
+	card.setTitle("Jo App Framework Demos");
 
+	// required
 	return card;
 });
diff --git a/samples/kitchensink/js/popups.js b/samples/kitchensink/js/popups.js
@@ -18,11 +18,11 @@ joCache.set("popups", function() {
 	card.setTitle("Popup Dialogs");
 
 	simple.selectEvent.subscribe(function() {
-		App.scn.alert("This is an Alert", "It's a very simple call to the joScreen object. It's similar to the good ol' alert() function built into most JavaScript engines.");
+		App.screen.alert("This is an Alert", "It's a very simple call to the joScreen object. It's similar to the good ol' alert() function built into most JavaScript engines.");
 	});
 
 	complex.selectEvent.subscribe(function() {
-		App.scn.showPopup(joCache.get("popup"));
+		App.screen.showPopup(joCache.get("popup"));
 	});
 
 	return card;
@@ -45,7 +45,7 @@ joCache.set("popup", function() {
 
 	function pop() {
 		console.log("hide popup");
-		App.scn.hidePopup();
+		App.screen.hidePopup();
 	}
 
 	return popup;

diff --git a/samples/kitchensink/js/table.js b/samples/kitchensink/js/table.js
@@ -0,0 +1,18 @@
+joCache.set("table", function() {
+	var back;
+
+	var card = new joCard([
+		new joTable([
+			["Name", "Phone", "Email"],
+			["Bob", "555-1234", "bob@bob.not"],
+			["Candy", "555-2345", "candy@candy.not"],
+			["Doug", "555-3456", "doug@doug.not"],
+			["Evan", "555-4567", "evan@evan.not"],
+			["Frank", "555-5678", "frank@frank.not"]
+		]).selectEvent.subscribe(function(index, table) {
+			console.log(table.getNodeData(table.getRow()));
+		}, this)
+	]).setTitle("Table Demo");
+
+	return card;
+});
diff --git a/samples/kitchensink/js/tables.js b/samples/kitchensink/js/tables.js
diff --git a/samples/kitchensink/js/themes.js b/samples/kitchensink/js/themes.js
@@ -2,7 +2,7 @@ joCache.set("themes", function() {
 	var card, theme, size;
 
 	card = new joCard([
-		new joTitle("Pick a theme"),
+		new joCaption("Jo has a few built-in CSS munging functions, illustrated below."),
 		new joGroup([
 			new joLabel("Colors"),
 			theme = new joSelect([
@@ -17,7 +17,7 @@ joCache.set("themes", function() {
 				"Funky"
 			], 0))
 		]),
-		new joHTML("These theme options are all controlled with CSS. For this demo, we're dynamically setting styles inline using <code>joDOM.applyCSSRule</code>. Most apps should have their own style, and would not need to load CSS rules on the fly like this, but it makes for a more interesting demo."),
+		new joHTML("These app-level 'theme' options are all controlled with CSS. For this demo, we're dynamically setting styles inline using <code>joDOM.applyCSSRule</code>. Most apps should have their own style, and would not need to load CSS rules on the fly like this, but it makes for a more interesting demo."),
 		new joHTML("WARNING: Your eyes may burn while applying these theme tweaks.")
 	]);
 

diff --git a/samples/kitchensink/js/widgets.js b/samples/kitchensink/js/widgets.js
@@ -7,6 +7,8 @@ joCache.set("widgets", function() {
 			new joFlexrow(new joInput("Hello, Jo!")),
 			new joLabel("joPasswordInput"),
 			new joFlexrow(new joPasswordInput("password")),
+			new joLabel("joInput with Placeholder"),
+			new joFlexrow(new joInput("", "Placeholder Text")),
 			new joLabel("joTextArea"),
 			new joFlexrow(new joTextarea("This is some multi-line text, Jo!")),
 			new joDivider(),