The names of the actual JavaScript files can be different, but the
header templates must be the same Nimble allows the developer to choose the JavaScript library it uses. Currently nimble supports JQuery (default), Mootools, and prototype.js. Nimble uses a series of taglib tags, template directories, and two Nimble JavaScript scripts to provide this capability. It also has some capabilities added to ease the development of the JavaScript in the Nimble project. They are covered in the "JavaScript Development" section. Configure The JavaScript Library Changing the default library is fairly easy. Just set the JavaScript at the top of your NimbleConfig.groovy. Look at the example below: grails.views.javascript.library='mootools' nimble { ... resources { jslibrary = grails.views.javascript.library } ... } Notice the nimble.resources.jslibrary property. This is actually what tells Nimble what JavaScript library to use. The grails.views.javascript.library tails grails which JavaScript library provider to use. Nimble has providers for JQuery and Mootools. And of course Grails has a prototype.js provider built in. The grails.views.javascript.library and the nimble.resources.jslibrary properties do not have to be the same. It is suggested however, because of the extra cost of making the browser download two different JavaScript libraries. That is why Nimble be default uses the value of grails.views.javascript.library property to initialize itself. Valid values for grails.views.javascript.library or nimble.resources.jslibrary are 'jquery', 'mootools', or 'prototype'. Linked JavaScript Scripts Nimble uses the NimbleHeaderTagLib.groovy taglib to output references to JavaScript files that are needed on different pages. Below is a list of tags and their mappings to header templates that inserted into the page that references the tag. The templates and the JavaScript for each library are stored inside the Nimble project.
{Nimble} = path to the nimble plugin {nimble.resources.jslibrary} = the name of the JavaScript library being used. Inline JavaScriptEach JavaScript library has its own folder for the header templates. The names of the actual JavaScript files can be different, but the header templates must be the same. A good example of this it the difference in the Growl libraries for JQuery and Mootools. JQuery references the following CSS and JavaScript in its _growl.gsp. <n:css src='jquery/jgrowl.css'/> <n:javascript src='jquery/jquery.jgrowl.js'/> <n:javascript src='jquery/nimbleui.growl.js'/> Mootools references the following CSS and JavaScript in its _growl.gsp. <n:css src='mootools/notimoo-v1.2.1.css'/> <n:javascript src='mootools/notimoo-v1.2.1.js'/> <n:javascript src='mootools/nimbleui.growl.js'/> Notice the Nimble tags used to reference the CSS and JavaScript. They are <n:css ...> and <n:javascript ...>. They help when developing the JavaScript for nimble. Look in the "JavaScript Development" section for description of their uses. Nimble uses the NimbleInlineJSTagLib.groovy taglib to inject inline JavaScript into the various pages that need it. Below is a list of tags and their
mappings to header templates that inserted into the page that references
the tag. The templates and the JavaScript for each library are stored
inside the Nimble project.
{Nimble} = path to the nimble plugin {nimble.resources.jslibrary} = the name of the JavaScript library being used. Just like the linked JavaScript each JavaScript library has its own folder for the inlinejs templates, and the names of the actual JavaScript files can be different. And as before the inlinejs templates must be the same. This section attempts to tell you how to add support for another JavaScript library. Even if you do not want to add support for another library, it may provide you with additional en-site as to how this feature works. The first step is to create the following directories in the Nimble project: /grails-app/views/templates/header/{new library name} - used for linked JavaScript scripts /grails-app/views/templates/inlinejs/{new library name} - used for inline JavaScript /src/css/{new library name} - used for css specific to library /src/js/{new library name} - used for js specific to library Now choose a similar JavaScript libraries' header and inline templates. See the previous two tables above for a list of the templates that need to be copied. A good rule of thumb is to copy JQuery or prototype.js templates if the new JavaScript library is not class based, and to copy the Mootools templates if the new library is class based (object oriented). The next step is to copy nimblecore.js, nimbleui.js, and nimbleui.growl.js from one of the existing libraries. No css files need to be copied at this point. They are all specific to the libraries with exception of /src/js/jquery/jquery-ui-1.7.2.custom.css. It is assumed that this css file used by all of the libraries. Now you need to edit all of the templates you copied into the /grails-app/views/templates/header. It is suggested that you keep the following templates with these references in them. These are the suggested minimums. It is expected for you to add any additional references specific to your new JavaScript library. ../header/_setup.gsp - this file is where you would include the main script references to your new library <n:css src='{new library name}/jquery-ui-1.7.2.custom.css'/> <!--[if IE]><n:javascript src='excanvas.min.js'/></script><![endif]--> ../header/_growl.gsp - this file creates the references to a growl announcement code <n:javascript src=''{new library name}/nimbleui.growl.js'/> ../header/_loginsetup.gsp - this file is used by the log in screen. No major script reference changes are expected here, but it does include some inline JavaScript that may need to be rewritten to work with your new library. ../header/_nimblecore.gsp - references JavaScript code that does the call backs to the nimble controllers on the website. <nh:jsetup /> <nh:basecss/> <n:javascript src="{new library name}/nimblecore.js'/> ../header/_nimbleui.gsp - this code represents most of the JavaScript used for the interaction with the Nimble UI. Most if the template should remain intact. <n:javascript src='{new library name}/nimbleui.js'/> <script type="text/javascript"> window.nimble = window.nimble || {}; var nimble = window.nimble; nimble.endpoints = nimble.endpoints || {}; </script> ../header/_pstrength.gsp - this template is used whenever the user is creating a password. It references a pstrength.js file. This code will have to be converted to the new JavaScript library. The templates you copied into /grails-app/views/templates/inlinejs folders. Will all have to be customized to work with the new JavaScript library. All Nimble functions should be in the Nimble namespace. This is done like this: window.nimble = window.nimble || {}; var nimble = window.nimble; nimble.foo = function() { .... } nimble.foo2 = function() { } Your new JavaScript library will have to provide functions for: tooltips/balloon tips growl notifications modal dialog windows password strength utility hide/show for elements nimblecore.js, nimbleui.js, and nimbleui.growl.js will need to be modified to link into the before mentioned functions. |