start of example of form enhancement

robfletcher · Apr 27, 2011 · f34485e · f34485e
1 parent 46aa31c
commit f34485e
Show file tree

Hide file tree

Showing 31 changed files with 421 additions and 136 deletions.
diff --git a/grails-app/conf/AppResources.groovy b/grails-app/conf/AppResources.groovy
@@ -16,23 +16,36 @@ modules = {
 
 	visualize {
 		dependsOn "jquery"
-		resource "js/plugins/visualize.jQuery.js"
-		resource "css/visualize.css"
-		resource "css/visualize-light.css"
+		resource "js/plugins/visualize/visualize.jQuery.js"
+		resource "js/plugins/visualize/css/visualize.css"
+		resource "js/plugins/visualize/css/visualize-light.css"
 	}
+
+    index {
+        dependsOn "modernizr", "boilerplate"
+        resource url: "css/index.less" ,attrs:[rel: "stylesheet/less", type: "css"], bundle: "bundle_index"
+    }
 
-	twitter {
+	scroll {
 		dependsOn "modernizr", "jquery", "boilerplate", "infinite-scroll"
+		resource "js/scroll.js"
+		resource url: "css/scroll.less" ,attrs:[rel: "stylesheet/less", type: "css"], bundle: "bundle_scroll"
 	}
 
 	graphs {
 		dependsOn "modernizr", "boilerplate", "visualize"
+        resource "js/graphs.js"
 		resource url: "css/graphs.less" ,attrs:[rel: "stylesheet/less", type: "css"], bundle: "bundle_twitter"
 	}
 
 	polls {
 		dependsOn "modernizr", "boilerplate"
 		resource url: "css/polls.less" ,attrs:[rel: "stylesheet/less", type: "css"], bundle: "bundle_polls"
 	}
+
+	forms {
+		dependsOn "modernizr", "boilerplate"
+		resource url: "css/forms.less" ,attrs:[rel: "stylesheet/less", type: "css"], bundle: "bundle_forms"
+	}
 
 }
diff --git a/grails-app/conf/BootStrap.groovy b/grails-app/conf/BootStrap.groovy
@@ -1,5 +1,6 @@
 import gr8.examples.Poll
 import gr8.examples.backport.CountBy
+import gr8.examples.forms.Album
 
 class BootStrap {
 
@@ -8,6 +9,12 @@ class BootStrap {
 		createPoll("What is your favourite browser?", ["Firefox", "Google Chrome", "Internet Explorer", "Konqueror", "Opera", "Lynx", "Safari", "Other"])
 		createPoll("What language do you use most in your day-to-day job?", ["Ada", "C++", "C#", "Clojure", "Erlang", "Groovy", "Java", "Perl", "Python", "Ruby", "Scala", "Other"])
 
+		new Album(title: "Up From Below", artist: "Edward Sharpe & the Magnetic Zeros", cover: new URI("/images/albums/album-01.jpg"), tracks: ["40 Day Dream", "Janglin", "Up From Below", "Carries On", "Jade", "Home", "Desert Song", "Black Water", "I Come In Please", "Simplest Love", "Kisses Over Babylon", "Brother", "Om Nashi Me"]).save(failOnError: true)
+		new Album(title: "Alexander", artist: "Alexander", cover: new URI("/images/albums/album-02.jpg")).save(failOnError: true)
+		new Album(title: "Another Man's Treasure", artist: "Ima Robot", cover: new URI("/images/albums/album-03.jpg")).save(failOnError: true)
+		new Album(title: "The Wild Hunt", artist: "The Tallest Man on Earth", cover: new URI("/images/albums/album-04.jpg")).save(failOnError: true)
+
+		// Groovy 1.8 feature backport
 		Collection.mixin(CountBy)
     }
 

diff --git a/grails-app/controllers/gr8/examples/forms/RatingController.groovy b/grails-app/controllers/gr8/examples/forms/RatingController.groovy
@@ -0,0 +1,15 @@
+package gr8.examples.forms
+
+class RatingController {
+
+    def index = {
+		def album = Album.findByTitle("Up From Below")
+		def related = Album.list() - album
+		[album: album, related: related]
+	}
+
+	def rate = {
+
+	}
+
+}
diff --git a/grails-app/domain/gr8/examples/forms/Album.groovy b/grails-app/domain/gr8/examples/forms/Album.groovy
@@ -0,0 +1,22 @@
+package gr8.examples.forms
+
+class Album {
+
+	String title
+	String artist
+	URI cover
+	List<String> tracks
+
+	static hasMany = [tracks: String]
+
+    static constraints = {
+		title blank: false
+		artist blank: false
+    }
+
+	@Override
+	String toString() {
+		"$title by $artist"
+	}
+
+}
diff --git a/grails-app/domain/gr8/examples/forms/Rating.groovy b/grails-app/domain/gr8/examples/forms/Rating.groovy
@@ -0,0 +1,12 @@
+package gr8.examples.forms
+
+class Rating {
+
+    String userToken
+    int rating
+
+    static constraints = {
+        userToken blank: false, unique: true
+        rating range: 1..5
+    }
+}
diff --git a/grails-app/views/index.gsp b/grails-app/views/index.gsp
@@ -1,42 +1,34 @@
+<!doctype html>
 <html>
     <head>
-        <title>Welcome to Grails</title>
+        <title>Building Progressive UIs with Grails</title>
         <meta name="layout" content="main" />
+        <r:use module="index"/>
     </head>
     <body>
-        <aside id="status">
-			<h1>Application Status</h1>
-			<ul>
-			    <li>App version: <g:meta name="app.version"></g:meta></li>
-			    <li>Grails version: <g:meta name="app.grails.version"></g:meta></li>
-			    <li>Groovy version: ${org.codehaus.groovy.runtime.InvokerHelper.getVersion()}</li>
-			    <li>JVM version: ${System.getProperty('java.version')}</li>
-			    <li>Controllers: ${grailsApplication.controllerClasses.size()}</li>
-			    <li>Domains: ${grailsApplication.domainClasses.size()}</li>
-			    <li>Services: ${grailsApplication.serviceClasses.size()}</li>
-			    <li>Tag Libraries: ${grailsApplication.tagLibClasses.size()}</li>
-			</ul>
-			<h1>Installed Plugins</h1>
-			<ul>
-			    <g:set var="pluginManager" value="${applicationContext.getBean('pluginManager')}"></g:set>
-			    <g:each var="plugin" in="${pluginManager.allPlugins}">
-			        <li>${plugin.name} - ${plugin.version}</li>
-			    </g:each>
-			</ul>
-        </aside>
-        <section id="pageBody">
-            <h1>Welcome to Grails</h1>
-            <p>Congratulations, you have successfully started your first Grails application! At the moment
-            this is the default page, feel free to modify it to either redirect to a controller or display whatever
-            content you may choose. Below is a list of controllers that are currently deployed in this application,
-            click on each to execute its default action:</p>
-
-            <nav id="controllerList">
-                <h2>Available Controllers:</h2>
+        <section id="index">
+            <nav id="examples">
+                <h2>Examples:</h2>
                 <ul>
-                    <g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
-                        <li class="controller"><g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link></li>
-                    </g:each>
+                    <li>
+                        Pagination
+                        <ul>
+                            <li><g:link controller="twitterSearch">Pagination -> Infinite scroll</g:link></li>
+                        </ul>
+                    </li>
+                    <li>
+                        Forms
+                        <ul>
+                            <li><g:link controller="rating">Radio buttons -> Rating widget</g:link></li>
+                        </ul>
+                    </li>
+                    <li>
+                        Charts
+                        <ul>
+                            <li><g:link controller="twitterGraph" action="users">Table -> Bar chart</g:link></li>
+                            <li><g:link controller="twitterGraph" action="clients">Table -> Pie chart</g:link></li>
+                        </ul>
+                    </li>
                 </ul>
             </nav>
         </section>

diff --git a/grails-app/views/rating/index.gsp b/grails-app/views/rating/index.gsp
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="layout" content="main">
+		<title>${album}</title>
+		<r:use module="forms"/>
+	</head>
+	<body>
+
+		<article id="album">
+			<r:img uri="${album.cover.toString()}" alt="${album}" class="large-cover"/>
+			<hgroup>
+				<h1 class="title">${album.title}</h1>
+				<h2 class="artist">${album.artist}</h2>
+			</hgroup>
+			<ol class="tracks">
+				<g:each in="${album.tracks}">
+					<li>${it}</li>
+				</g:each>
+			</ol>
+
+			<g:form action="rate" class="rating">
+				<fieldset>
+					<legend>Rating:</legend>
+					<input type="hidden" name="id" value="${album.id}">
+					<g:radioGroup name="rating" values="${1..5}" labels="${1..5}">
+						<label><span class="num">${it.label}</span>${it.radio}</label>
+					</g:radioGroup>
+				</fieldset>
+			</g:form>
+		</article>
+
+		<aside id="related">
+			<header><h1>People who bought <em>${album}</em> also bought&hellip;</h1></header>
+			<ul>
+				<g:each in="${related}">
+					<li>
+						<article class="album">
+							<r:img uri="${it.cover.toString()}" alt="${it.title} by ${it.artist}" class="small-cover"/>
+							<hgroup>
+								<h1 class="title">${it.title}</h1>
+								<h2 class="artist">${it.artist}</h2>
+							</hgroup>
+						</article>
+					</li>
+				</g:each>
+			</ul>
+		</aside>
+
+	</body>
+</html>
diff --git a/grails-app/views/twitterGraph/clients.gsp b/grails-app/views/twitterGraph/clients.gsp
@@ -4,17 +4,6 @@
 		<g:if test="${!request.xhr}"><meta name="layout" content="main"></g:if>
 		<title>Twitter Results for '${q}'</title>
 		<r:use module="graphs"/>
-		<r:script disposition="head">
-			$(function() {
-				if (Modernizr.canvas) {
-					$('#twitter-clients').visualize({
-						type: 'pie',
-						width: 500,
-						height: 500
-					});
-				}
-			});
-		</r:script>
 	</head>
 
 	<body>

diff --git a/grails-app/views/twitterGraph/users.gsp b/grails-app/views/twitterGraph/users.gsp
@@ -4,16 +4,6 @@
 		<g:if test="${!request.xhr}"><meta name="layout" content="main"></g:if>
 		<title>Twitter Results for '${q}'</title>
 		<r:use module="graphs"/>
-		<r:script disposition="head">
-			$(function() {
-				if (Modernizr.canvas) {
-					$('#twitter-users').visualize({
-						width: 800,
-						height: 300
-					});
-				}
-			});
-		</r:script>
 	</head>
 
 	<body>

diff --git a/grails-app/views/twitterSearch/_tweet.gsp b/grails-app/views/twitterSearch/_tweet.gsp
@@ -1,6 +1,6 @@
 <article class="tweet" data-tweet-id="${it.id}">
 	<header>
-		<h3>${it.from_user}</h3>
+		<h3>@${it.from_user}</h3>
 		<img src="${it.profile_image_url}" class="profile-image">
 	</header>
 	<p>${it.text}</p>

diff --git a/grails-app/views/twitterSearch/index.gsp b/grails-app/views/twitterSearch/index.gsp
@@ -3,10 +3,7 @@
 <head>
 	<g:if test="${!request.xhr}"><meta name="layout" content="main"></g:if>
 	<title>Twitter Results for '${q}'</title>
-	<r:use module="twitter"/>
-	<r:script>
-		jQuery('#twitter-search-results').infiniteScroll('.tweet');
-	</r:script>
+	<r:use module="scroll"/>
 </head>
 <body>
 	<section id="twitter-search-results">

diff --git a/test/unit/gr8/examples/forms/AlbumTests.groovy b/test/unit/gr8/examples/forms/AlbumTests.groovy
@@ -0,0 +1,17 @@
+package gr8.examples.forms
+
+import grails.test.*
+
+class AlbumTests extends GrailsUnitTestCase {
+    protected void setUp() {
+        super.setUp()
+    }
+
+    protected void tearDown() {
+        super.tearDown()
+    }
+
+    void testSomething() {
+
+    }
+}
diff --git a/test/unit/gr8/examples/forms/RatingControllerTests.groovy b/test/unit/gr8/examples/forms/RatingControllerTests.groovy
@@ -0,0 +1,17 @@
+package gr8.examples.forms
+
+import grails.test.*
+
+class RatingControllerTests extends ControllerUnitTestCase {
+    protected void setUp() {
+        super.setUp()
+    }
+
+    protected void tearDown() {
+        super.tearDown()
+    }
+
+    void testSomething() {
+
+    }
+}
diff --git a/test/unit/gr8/examples/forms/RatingTests.groovy b/test/unit/gr8/examples/forms/RatingTests.groovy
@@ -0,0 +1,17 @@
+package gr8.examples.forms
+
+import grails.test.*
+
+class RatingTests extends GrailsUnitTestCase {
+    protected void setUp() {
+        super.setUp()
+    }
+
+    protected void tearDown() {
+        super.tearDown()
+    }
+
+    void testSomething() {
+
+    }
+}