Changeset 88

Timestamp:

Jan 14, 2010, 3:00:05 PM (14 years ago)

Author:

duh

Message:

• refactored the wizard code a bit

Location:

trunk

Files:

• grails-app/controllers/dbnp/studycapturing/WizardController.groovy (modified) (5 diffs)
• grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy (modified) (2 diffs)
• grails-app/views/wizard/common/_error.gsp (added)
• grails-app/views/wizard/common/_navigation.gsp (moved) (moved from trunk/grails-app/views/wizard/common/_buttons.gsp) (2 diffs)
• grails-app/views/wizard/common/_tabs.gsp (moved) (moved from trunk/grails-app/views/wizard/common/_header.gsp) (1 diff)
• grails-app/views/wizard/common/_wizard.gsp (modified) (2 diffs)
• grails-app/views/wizard/index.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_one.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_three.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_two.gsp (modified) (1 diff)
• web-app/css/default_style.css (modified) (1 diff)
• web-app/css/wizard.css (added)
• web-app/images/spinner.gif (added)

trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

@@ -43 +43 @@
       onStart {
         println "wizard started"
+        
+        // define flow variables
+        flow.page = 0
+        flow.pages = [
+                [title:'Een'],
+                [title:'Twoooo'],
+                [title:'Trois']
+        ]
+        
       }
       onEnd {
@@ -52 +61 @@
             onRender {
                   println "render main page"
+          flow.page = 1
             }
             render(view:"/wizard/index")
@@ -62 +72 @@
             onRender {
                   println "render page one"
+          flow.page = 1
             }
             render(view:"_one")
@@ -73 +84 @@
             onRender {
                   println "render page two"
+          flow.page = 2
             }
         render(view:"_two")
@@ -87 +99 @@
             onRender {
                   println "render page three"
+          flow.page = 3
             }
         render(view:"_three")

trunk/grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy

@@ -18 +18 @@
   static namespace = "wizard"
 
+  // define the AJAX provider to use
+  static ajaxProvider = "jquery"
+  
   /**
    * ajaxButton tag, this is a modified version of the default
@@ -62 +65 @@
 
   /**
-   * render the wizard navigation button
-   * @param map attrs (supports: previous="true/false" and next="true/false"
+   * wizard navigation buttons render wrapper, in order to be able to add
+   * functionality in the future
    */
   def previousNext = { attrs ->
-    def buttons = new LinkedHashMap()
-    buttons.previous  = (attrs.get('previous') == null || (attrs.get('previous') instanceof String && attrs.get('previous') == "true")) ? true : false
-    buttons.next      = (attrs.get('next') == null || (attrs.get('next') instanceof String && attrs.get('next') == "true")) ? true : false
+    // define AJAX provider
+    setProvider([library:ajaxProvider])
 
-    out << render(template:"/wizard/common/buttons", model:[button:buttons])
+    // render navigation buttons
+    out << render(template:"/wizard/common/buttons")
+  }
+
+  def pageContent = { attrs, body ->
+    // define AJAX provider
+    setProvider([library:ajaxProvider])
+
+    // render new body content
+    out << render(template:"/wizard/common/tabs")
+    out << '<div class="content">'
+    out << body()
+    out << '</div>'
+    out << render(template:"/wizard/common/navigation")
   }
 }

trunk/grails-app/views/wizard/common/_navigation.gsp

@@ -6 +6 @@
  * @since   20100113
  * @package wizard
- * @see     dbnp.studycapturing.WizardTagLib::previousNext
  * @see     dbnp.studycapturing.WizardController
  *
@@ -15 +14 @@
  */
 %>
-    <div id="wizardNavigation">
-      <g:if test="${button.previous}">&laquo; <wizard:ajaxButton name="previous" value="prev" url="[controller:'wizard',action:'pages']" update="[success:'wizardContent',failure:'wizardError']" /></g:if>
-      <g:if test="${button.previous && button.next}">|</g:if>
-      <g:if test="${button.next}"><wizard:ajaxButton name="next" value="next" url="[controller:'wizard',action:'pages']" update="[success:'wizardContent',failure:'wizardError']" /> &raquo;</g:if>
+    <div class="navigation">
+      <g:if test="${page>1}"><wizard:ajaxButton name="previous" value="&laquo; prev" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" class="prevnext" /></g:if>
+      <g:if test="${page>1 && page<pages.size}"> | </g:if>
+      <g:if test="${page<pages.size}"><wizard:ajaxButton name="next" value="next &raquo;" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" class="prevnext" /></g:if>
     </div>

trunk/grails-app/views/wizard/common/_tabs.gsp

@@ -15 +15 @@
  */
 %>
-<div class="wizardHeader">
-  tabs go in here
+<div class="tabs">
+  <g:each status="i" var="item" in="${pages}"><div class="element<g:if test="${(i == (page-1))}"> active</g:if>">${i+1}. ${item.title}</div></g:each>
 </div>

trunk/grails-app/views/wizard/common/_wizard.gsp

@@ -1 +1 @@
 <%
 /**
- * Wizard template
+ * Wizard template with first page rendered
  *
  * @author  Jeroen Wesbeek
@@ -15 +15 @@
  */
 %>
-  <g:setProvider library="jquery"/>
-  <div id="wizard" style="border:1px solid black;">
+  <div id="wizard" class="wizard">
     <h1>Proof of concept AJAXified Grails Webflow Wizard</h1>
     <g:form action="pages" name="_wizard" >
-    <div id="wizardContent" style="border:1px solid blue;">
+    <div id="wizardPage">
       <g:render template="pages/one"/>
     </div>
-    <div id="wizardError" style="border:1px solid red;">errors go in here</div>
+    <g:render template="common/error"/>
     </g:form>
   </div>

trunk/grails-app/views/wizard/index.gsp

@@ -18 +18 @@
  <head>
   <meta name="layout" content="main" />
+  <link rel="stylesheet" href="${resource(dir:'css',file:'wizard.css')}" />
   <g:javascript library="jquery" />
  </head>

trunk/grails-app/views/wizard/pages/_one.gsp

@@ -15 +15 @@
  */
 %>
-<g:setProvider library="jquery"/>
-<g:render template="common/header" />
-<h1>page one</h1>
+<wizard:pageContent>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et elit magna. Maecenas felis tortor, tempus ac condimentum id, cursus ac tellus. Phasellus auctor, ligula vel interdum egestas, tortor justo rutrum ligula, sit amet dictum mi libero a mi. Nam porttitor volutpat nunc in ornare. Cras mi neque, dignissim at vulputate ut, consequat sed eros. Aliquam lobortis lorem nec lorem lobortis in vulputate augue viverra. Nunc mi tellus, elementum id sagittis eu, varius vitae purus. Sed nulla massa, venenatis id tempor nec, consequat suscipit mi. Vivamus erat libero, placerat vitae mollis ut, accumsan vitae augue. Phasellus porta libero quis felis accumsan id congue lectus vestibulum. Etiam aliquam euismod libero, nec feugiat ipsum scelerisque sollicitudin. Duis congue metus quis tellus fermentum cursus. Quisque vel lectus nec felis eleifend blandit. Maecenas sed dolor dolor, eu vulputate quam. Quisque volutpat placerat tortor eget rhoncus.</p>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et elit magna. Maecenas felis tortor, tempus ac condimentum id, cursus ac tellus. Phasellus auctor, ligula vel interdum egestas, tortor justo rutrum ligula, sit amet dictum mi libero a mi. Nam porttitor volutpat nunc in ornare. Cras mi neque, dignissim at vulputate ut, consequat sed eros. Aliquam lobortis lorem nec lorem lobortis in vulputate augue viverra. Nunc mi tellus, elementum id sagittis eu, varius vitae purus. Sed nulla massa, venenatis id tempor nec, consequat suscipit mi. Vivamus erat libero, placerat vitae mollis ut, accumsan vitae augue. Phasellus porta libero quis felis accumsan id congue lectus vestibulum. Etiam aliquam euismod libero, nec feugiat ipsum scelerisque sollicitudin. Duis congue metus quis tellus fermentum cursus. Quisque vel lectus nec felis eleifend blandit. Maecenas sed dolor dolor, eu vulputate quam. Quisque volutpat placerat tortor eget rhoncus.</p>
-
-<p>Donec non nulla at erat malesuada sollicitudin quis eu arcu. In laoreet placerat justo, quis feugiat purus tempus eu. Sed hendrerit euismod lacinia. Sed fringilla sollicitudin magna nec consectetur. Proin arcu libero, varius ac iaculis in, mattis in arcu. Sed vel odio dui. Nam quis lectus diam, eu dictum urna. Proin molestie, augue ut posuere interdum, orci augue accumsan purus, in aliquet erat tellus nec felis. Vivamus pulvinar, leo in bibendum mattis, libero lacus porttitor nisl, vitae mattis augue sem eget arcu. Sed viverra dui eu eros egestas non malesuada dui venenatis. Sed a neque turpis. Cras vitae erat turpis. Mauris neque nisl, blandit vitae tincidunt in, ultrices sed felis. Quisque interdum urna eu est fringilla id tristique tellus consectetur.</p>
-<wizard:previousNext previous="false" />
+  <p>Donec non nulla at erat malesuada sollicitudin quis eu arcu. In laoreet placerat justo, quis feugiat purus tempus eu. Sed hendrerit euismod lacinia. Sed fringilla sollicitudin magna nec consectetur. Proin arcu libero, varius ac iaculis in, mattis in arcu. Sed vel odio dui. Nam quis lectus diam, eu dictum urna. Proin molestie, augue ut posuere interdum, orci augue accumsan purus, in aliquet erat tellus nec felis. Vivamus pulvinar, leo in bibendum mattis, libero lacus porttitor nisl, vitae mattis augue sem eget arcu. Sed viverra dui eu eros egestas non malesuada dui venenatis. Sed a neque turpis. Cras vitae erat turpis. Mauris neque nisl, blandit vitae tincidunt in, ultrices sed felis. Quisque interdum urna eu est fringilla id tristique tellus consectetur.</p>  
+</wizard:pageContent>

trunk/grails-app/views/wizard/pages/_three.gsp

@@ -15 +15 @@
  */
 %>
-<g:setProvider library="jquery"/>
-<g:render template="common/header" />
-<h1>page three</h1>
+<wizard:pageContent>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut metus nisi, eget tincidunt enim. Vivamus in nulla est, sed viverra odio. Praesent venenatis hendrerit ipsum, id tristique enim fringilla sed. Duis diam magna, accumsan at sodales a, rutrum et leo. Sed non metus non odio tristique malesuada blandit sed velit. Aenean pulvinar nisi eu augue gravida id malesuada velit lobortis. Nulla facilisi. In sit amet urna quis lorem eleifend venenatis. Duis eu sem sed nulla rutrum sodales eu ac lorem. Nam a pellentesque tortor. Pellentesque tincidunt sollicitudin odio, id condimentum leo condimentum aliquam. Aliquam tincidunt faucibus elit, sit amet interdum justo vestibulum quis. Praesent ac sagittis nunc. Nulla eu lacus id mauris laoreet vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut metus nisi, eget tincidunt enim. Vivamus in nulla est, sed viverra odio. Praesent venenatis hendrerit ipsum, id tristique enim fringilla sed. Duis diam magna, accumsan at sodales a, rutrum et leo. Sed non metus non odio tristique malesuada blandit sed velit. Aenean pulvinar nisi eu augue gravida id malesuada velit lobortis. Nulla facilisi. In sit amet urna quis lorem eleifend venenatis. Duis eu sem sed nulla rutrum sodales eu ac lorem. Nam a pellentesque tortor. Pellentesque tincidunt sollicitudin odio, id condimentum leo condimentum aliquam. Aliquam tincidunt faucibus elit, sit amet interdum justo vestibulum quis. Praesent ac sagittis nunc. Nulla eu lacus id mauris laoreet vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  <p>Quisque suscipit dictum velit, tempus pharetra elit cursus eget. Mauris pulvinar libero bibendum tortor tristique ut suscipit ante vestibulum. Integer dignissim sagittis mi, nec tincidunt dui posuere ac. Vivamus risus turpis, blandit at dictum in, scelerisque in nibh. Mauris ac erat vel purus pellentesque ullamcorper et ac nulla. Integer ante arcu, ornare sit amet sodales eget, lacinia vitae dolor. Pellentesque dignissim odio at nisl hendrerit euismod. Duis at eros erat, id congue tortor. Donec commodo, eros at ullamcorper tincidunt, arcu est vehicula mauris, quis imperdiet magna elit sit amet massa. Maecenas suscipit, leo a fermentum mollis, nulla nulla pretium enim, et auctor risus lectus sed tortor.</p>
 
-<p>Quisque suscipit dictum velit, tempus pharetra elit cursus eget. Mauris pulvinar libero bibendum tortor tristique ut suscipit ante vestibulum. Integer dignissim sagittis mi, nec tincidunt dui posuere ac. Vivamus risus turpis, blandit at dictum in, scelerisque in nibh. Mauris ac erat vel purus pellentesque ullamcorper et ac nulla. Integer ante arcu, ornare sit amet sodales eget, lacinia vitae dolor. Pellentesque dignissim odio at nisl hendrerit euismod. Duis at eros erat, id congue tortor. Donec commodo, eros at ullamcorper tincidunt, arcu est vehicula mauris, quis imperdiet magna elit sit amet massa. Maecenas suscipit, leo a fermentum mollis, nulla nulla pretium enim, et auctor risus lectus sed tortor.</p>
-
-<p>Donec tempor feugiat ullamcorper. Sed viverra leo a nisi ornare id posuere urna laoreet. Curabitur a est leo, a luctus libero. Mauris dapibus feugiat sodales. Duis sollicitudin dui eget erat ullamcorper et mattis leo euismod. Aliquam dapibus egestas tortor a vehicula. Proin ut nisi justo, et volutpat orci. Vestibulum elementum eleifend nibh eu blandit. Vivamus at enim id magna iaculis commodo. Integer sagittis malesuada risus, at rutrum elit volutpat in. Morbi faucibus quam vitae arcu pharetra egestas. Pellentesque ac est ornare lacus tempus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
-<wizard:previousNext next="false" />
+  <p>Donec tempor feugiat ullamcorper. Sed viverra leo a nisi ornare id posuere urna laoreet. Curabitur a est leo, a luctus libero. Mauris dapibus feugiat sodales. Duis sollicitudin dui eget erat ullamcorper et mattis leo euismod. Aliquam dapibus egestas tortor a vehicula. Proin ut nisi justo, et volutpat orci. Vestibulum elementum eleifend nibh eu blandit. Vivamus at enim id magna iaculis commodo. Integer sagittis malesuada risus, at rutrum elit volutpat in. Morbi faucibus quam vitae arcu pharetra egestas. Pellentesque ac est ornare lacus tempus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
+</wizard:pageContent>

trunk/grails-app/views/wizard/pages/_two.gsp

@@ -15 +15 @@
  */
 %>
-<g:setProvider library="jquery"/>
-<g:render template="common/header" />
-<h1>page two</h1>
+<wizard:pageContent>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales porta enim, sed ornare sapien molestie mollis. Maecenas at pretium turpis. Duis fermentum lectus vitae nisl venenatis id hendrerit sapien dictum. Duis blandit ornare augue nec porttitor. Quisque at tortor sapien, ac volutpat sem. Nullam venenatis placerat risus a euismod. Donec massa dui, porttitor sed fermentum eu, ornare ac velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In id odio nisl, non semper neque. Vivamus facilisis, neque sed lacinia blandit, odio nisi sagittis turpis, accumsan iaculis tellus magna at velit. In sed turpis metus. Phasellus id sem eget dui sollicitudin ultrices. Duis cursus vehicula diam vel pharetra. Donec mattis libero eget tortor venenatis at cursus felis scelerisque. Nunc hendrerit metus quis leo sollicitudin sodales. In urna quam, aliquet in eleifend eget, rutrum tempor elit.</p>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales porta enim, sed ornare sapien molestie mollis. Maecenas at pretium turpis. Duis fermentum lectus vitae nisl venenatis id hendrerit sapien dictum. Duis blandit ornare augue nec porttitor. Quisque at tortor sapien, ac volutpat sem. Nullam venenatis placerat risus a euismod. Donec massa dui, porttitor sed fermentum eu, ornare ac velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In id odio nisl, non semper neque. Vivamus facilisis, neque sed lacinia blandit, odio nisi sagittis turpis, accumsan iaculis tellus magna at velit. In sed turpis metus. Phasellus id sem eget dui sollicitudin ultrices. Duis cursus vehicula diam vel pharetra. Donec mattis libero eget tortor venenatis at cursus felis scelerisque. Nunc hendrerit metus quis leo sollicitudin sodales. In urna quam, aliquet in eleifend eget, rutrum tempor elit.</p>
-
-<p>Suspendisse magna mauris, pretium eget elementum sed, aliquam nec neque. Nam et lorem lacus. Phasellus dapibus, erat nec tristique commodo, turpis tellus tempor est, tincidunt dignissim urna tortor at dui. Nulla faucibus, velit in lobortis venenatis, neque sapien lobortis neque, ut varius sem tortor id purus. Duis posuere condimentum ante, quis mattis arcu fringilla quis. Vivamus in augue tellus, posuere mattis nisl. Praesent sit amet ligula a turpis ullamcorper elementum non quis felis. Nulla elit ipsum, viverra ut cursus at, pharetra eget nibh. Vivamus mauris velit, elementum eu ornare vitae, imperdiet id velit. Phasellus sit amet mi vel est lobortis sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
-<wizard:previousNext />
+  <p>Suspendisse magna mauris, pretium eget elementum sed, aliquam nec neque. Nam et lorem lacus. Phasellus dapibus, erat nec tristique commodo, turpis tellus tempor est, tincidunt dignissim urna tortor at dui. Nulla faucibus, velit in lobortis venenatis, neque sapien lobortis neque, ut varius sem tortor id purus. Duis posuere condimentum ante, quis mattis arcu fringilla quis. Vivamus in augue tellus, posuere mattis nisl. Praesent sit amet ligula a turpis ullamcorper elementum non quis felis. Nulla elit ipsum, viverra ut cursus at, pharetra eget nibh. Vivamus mauris velit, elementum eu ornare vitae, imperdiet id velit. Phasellus sit amet mi vel est lobortis sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
+</wizard:pageContent>

trunk/web-app/css/default_style.css

@@ -2 +2 @@
         margin: 0; padding: 0;
         font: 10px normal Arial, Helvetica, sans-serif;
-        background: #ddd url(../images/default_style/body_bg.gif) repeat-x;
+        background: #fff url(../images/default_style/body_bg.gif) repeat-x;
 }
 /*a:link, a:visited, a:hover {