Changeset 107

Timestamp:

Jan 22, 2010, 6:37:01 PM (14 years ago)

Author:

duh

Message:

• worked on the wizard inner workings
• added date field element using a jQuery datepicker
• worked on the XMLHttpRequest issue which turned to be an issue with Firefox 3.6 (and not firebug). Filed a bugreport here: ​http://code.google.com/p/fbug/issues/detail?id=2746

Location:

trunk

Files:

• grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy (modified) (4 diffs)
• grails-app/views/wizard/common/_wizard.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_study.gsp (modified) (1 diff)
• web-app/css/wizard.css (modified) (2 diffs)
• web-app/js/wizard.js (modified) (3 diffs)

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

@@ -156 +156 @@
 
         /**
-         * wizard navigation buttons render wrapper, in order to be able to add
-         * functionality in the future
-         */
-        def previousNext = {attrs ->
-                // define AJAX provider
-                setProvider([library: ajaxProvider])
-
-                // render navigation buttons
-                out << render(template: "/wizard/common/buttons")
-        }
-
-        /**
          * render the content of a particular wizard page
          * @param Map attrs
-         * @param Closure body
+         * @param Closure body  (help text)
          */
         def pageContent = {attrs, body ->
@@ -187 +175 @@
         /**
          * render a textFieldElement
+         * @param Map attrs
+         * @param Closure body  (help text)
          */
         def textFieldElement = {attrs, body ->
@@ -198 +188 @@
                 }
 
+                // work variables
+                def addExampleElement = attrs.remove('addExampleElement')
+                //attrs.remove('addExampleElement')
+
                 // render a text element
                 out << '<div class="element">'
@@ -204 +198 @@
                 out << ' </div>'
                 out << ' <div class="input">'
+
+                // add text input field
                 out << textField(attrs)
+
+                // add a help icon if help information is available
+                if (body()) {
+                        out << '        <div class="helpIcon" />'
+                }
+
+                // add an disabled input box for feedback purposes
+                // @see dateElement(...)
+                if (addExampleElement) {
+                        def exampleAttrs = new LinkedHashMap()
+                        exampleAttrs.name = attrs.get('name')+'Example'
+                        exampleAttrs.class  = 'isExample'
+                        exampleAttrs.disabled = 'disabled'
+                        out << textField(exampleAttrs)
+                }
+
+                // end HTML
                 out << ' </div>'
 
-                // add help icon?
+                // add help content if it is available
                 if (body()) {
-                        out << ' <div class="help">'
-                        out << '  <div class="icon"></div>'
-                        out << '  <div class="content">'
+                        out << '  <div class="helpContent">'
                         out << '    ' + body()
                         out << '  </div>'
-                        out << ' </div>'
                 }
 
                 out << '</div>'
         }
+
+        /**
+         * render a dateElement
+         * @param Map attrs
+         * @param Closure body  (help text)
+         */
+        def dateElement = { attrs, body ->
+                // set some textfield values
+                attrs.maxlength = 10
+                attrs.addExampleElement = true
+                
+                // render a normal text field
+                out << textFieldElement(attrs,body)
+
+                // and attach the jquery-ui datepicker
+                out << '<script type="text/javascript">'
+                out << '$(document).ready(function() {'
+                out << '        $("#' + attrs.get('name') + '").datepicker({altField: \'#' + attrs.get('name') + 'Example\', altFormat: \'DD, d MM, yy\'});'
+                out << '});'
+                out << '</script>'
+        }
 }

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

@@ -16 +16 @@
 %>
 <div id="wizard" class="wizard">
-        <h1>Proof of concept AJAXified Grails Webflow Wizard</h1>
+        <h1>Create a new study</h1>
         <g:form action="pages" name="wizardForm" id="wizardForm">
                 <div id="wizardPage">

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

@@ -16 +16 @@
 %>
 <wizard:pageContent>
-        <wizard:textFieldElement name="studyTitle" description="Title" error="title" value="${study?.title}">
+        <wizard:textFieldElement name="title" description="Title" error="title" value="${study?.title}">
                 The title of the study you are creating
         </wizard:textFieldElement>
-        <wizard:textFieldElement name="studyCode" description="Code" error="code">
+        <wizard:textFieldElement name="code" description="Code" error="code" value="${study?.code}">
                 A code to reference your study by
         </wizard:textFieldElement>
-        <wizard:textFieldElement name="studyResearchQuestion" description="Research Question" error="researchQuestion">
+        <wizard:textFieldElement name="researchQuestion" description="Research Question" error="researchQuestion" value="${study?.researchQuestion}">
                 The research question
         </wizard:textFieldElement>
-        <wizard:textFieldElement name="studyDescription" description="Description" error="description" />
-        <wizard:textFieldElement name="studyEcCode" description="Ethical Committee Code" error="ecCode" />
+        <wizard:textFieldElement name="description" description="Description" error="description" value="${study?.description}" />
+        <wizard:textFieldElement name="ecCode" description="Ethical Committee Code" error="ecCode" value="${study?.ecCode}" />
+        <wizard:dateElement name="startDate" description="Start date" error="startDate" value="${study?.startDate}">
+                The start date of the study     
+        </wizard:dateElement>
 </wizard:pageContent>

trunk/web-app/css/wizard.css

@@ -56 +56 @@
 }
 
+.wizard .element .input .isExample {
+    color: #006DBA;
+    background-color: transparent;
+    border: 0px;
+    input: disabled;
+}
+
+
 .wizard .error {
     display: block;
@@ -87 +95 @@
 }
 
+.wizard .element .helpIcon {
+    display: inline-block;
+    margin-top: 4px;
+    background: url(../images/icons/famfamfam/help.png) no-repeat left top;
+    width: 16px;
+    height: 16px;
+}
+
+.wizard .element .helpContent {
+    display: none;
+}
+
 .wizard .element .help {
     vertical-align: top;

trunk/web-app/js/wizard.js

@@ -18 +18 @@
         // http://code.google.com/p/fbug/issues/detail?id=1899
         var wizard = $('div#wizard')
-        wizard.html('<span style="color:red;font-size:8px;">You are using firefox 3.6, note that firefox 3.6 in combination with firebug (latest 1.6X.0a3) and XMLHttpRequest enabled in the console, break the workings of this wizard... Either disable console XMLHttpRequests, disable firebug altogether or downgrade to Firefox 3.5.7 instead</span>' + wizard.html())
+        wizard.html('<span style="color:red;font-size:8px;">Firefox 3.6 contains <a href="http://code.google.com/p/fbug/issues/detail?id=2746" target="_new">a bug</a> in combination with Firebug\'s XMLHttpRequest spy which causes the wizard to not function anymore. Please make sure you have firebug\'s XMLHttpRequest spy disabled use use Firefox 3.5.7 instead...</span>' + wizard.html())
     }
 
@@ -28 +28 @@
 function attachHelpTooltips() {
     // attach help action on all wizard help icons
-    $('div#wizard').find('div.help').each(function() {
-        $(this).find('div.icon').qtip({
+    $('div#wizard').find('div.helpIcon').each(function() {
+        $(this).qtip({
             content: 'leftMiddle',
             position: {
@@ -44 +44 @@
                 padding: 10,
                 textAlign: 'center',
-                tip: true, // Give it a speech bubble tip with automatic corner detection
-                name: 'blue' // Style it according to the preset 'cream' style
+                tip: true,
+                name: 'blue'
             },
-            content: $(this).find('div.content').html(),
+            content: $(this).parent().parent().find('div.helpContent').html(),
             show: 'mouseover',
             hide: 'mouseout'
         })
-    })
+    });
 }