Table of Contents<\/h3>\n\n- 1. Grails<\/a><\/dt>\n
- 2. Tools<\/a><\/dt>\n
- 3. Get Started<\/a><\/dt>\n
- \n
\n- 3.1 Grails v3.2.9 Application<\/a><\/dt>\n
- 3.2 Grails v2.4.4 Application<\/a><\/dt>\n
- 3.3 Grails v2.3.9 Application<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 4. That’s a Wrap<\/a><\/dt>\n
- 5. Running the Sample<\/a><\/dt>\n
- 6. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Grails<\/h2>\nGrails is a groovy based web framework which promotes Convention over configuration paradigm. “Convention over Configuration” essentially means that the framework makes many of the decisions for us by using sensible defaults. Only when we need to deviate or implement customized functionality we need to make effort for those changes. For the most part the defaults make sense and we can go along with them thus reducing our workload and increasing productivity manifolds.<\/p>\n
Grails is built on top of existing technologies like Hibernate and Spring MVC using existing codebases to enable quick development and increased developer productivity.<\/p>\n
<\/a>2. Tools<\/h2>\nWe will use the following toolset for this tutorial:<\/p>\n
\n- Grails Framework v3.2.9<\/li>\n
- Grails Framework v2.4.4<\/li>\n
- Grails Framework v2.3.9<\/li>\n
- Bootstrap<\/li>\n
- Notepad++<\/li>\n
- JDK v1.8.0_u31<\/li>\n<\/ul>\n
<\/a>3. Get Started<\/h2>\nFirstly we will create an application using Grails v3.2.9 and take a look at the way Bootstrap is used with it. Next we will generate a sample application using Grails v2.3.9 & v2.4.4. We will use the UI generated with latest version which uses bootstrap and make it work with these versions of grails.
\nNow that we have our work cut out let’s get started.<\/p>\n
<\/a>3.1 Grails v3.2.9 Application<\/h3>\nThis is the latest version of Grails Framework at the time of this article. To create a grails application, we open a command prompt at the root of the folder where we want to place the project. Type in the following command to have an application scaffolded for us.<\/p>\n
grails create-app WCGBootstrapGrails329<\/pre>\nOnce this command is executed we have a starter application ready and placed in the folder WCGBootstrapGrails329. To run this application we type in the following command after switching to this folder.<\/p>\n
grails run-app<\/pre>\nIt might take a while but eventually a message should show to the effect that the application is running at http:\/\/localhost:8080<\/code>. Once we navigate to this address in a browser we should see the following on our screens.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/07\/LandingPage329.jpg\")
<\/a>Landing Page v3.2.9<\/figcaption><\/figure>\nThe Html rendered above is built from two files, namely main.gsp<\/code> and index.gsp<\/code>. Their content is below:<\/p>\nmain.gsp<\/em><\/span><\/p>\n<!doctype html>\r\n<html lang=\"en\" class=\"no-js\">\r\n<head>\r\n <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"\/>\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\/>\r\n <title>\r\n <g:layoutTitle default=\"Grails\"\/>\r\n <\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\/>\r\n\r\n <asset:stylesheet src=\"application.css\"\/>\r\n\r\n <g:layoutHead\/>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"navbar navbar-default navbar-static-top\" role=\"navigation\">\r\n <div class=\"container\">\r\n <div class=\"navbar-header\">\r\n <button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\"\r\ndata-target=\".navbar-collapse\">\r\n <span class=\"sr-only\">Toggle navigation<\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <\/button>\r\n <a class=\"navbar-brand\" href=\"\/#\">\r\n <i class=\"fa grails-icon\">\r\n <asset:image src=\"grails-cupsonly-logo-white.svg\"\/>\r\n <\/i> Grails\r\n <\/a>\r\n <\/div>\r\n <div class=\"navbar-collapse collapse\" aria-expanded=\"false\" style=\"height: 0.8px;\">\r\n <ul class=\"nav navbar-nav navbar-right\">\r\n <g:pageProperty name=\"page.nav\" \/>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <g:layoutBody\/>\r\n\r\n <div class=\"footer\" role=\"contentinfo\"><\/div>\r\n\r\n <div id=\"spinner\" class=\"spinner\" style=\"display:none;\">\r\n <g:message code=\"spinner.alt\" default=\"Loading…\"\/>\r\n <\/div>\r\n\r\n <asset:javascript src=\"application.js\"\/>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nindex.gsp<\/em><\/span><\/p>\n<!doctype html>\r\n<html>\r\n<head>\r\n <meta name=\"layout\" content=\"main\"\/>\r\n <title>Welcome to Grails<\/title>\r\n\r\n <asset:link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-ico\" \/>\r\n<\/head>\r\n<body>\r\n <content tag=\"nav\">\r\n <li class=\"dropdown\">\r\n <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" \r\naria-expanded=\"false\">Application Status <span class=\"caret\"><\/span><\/a>\r\n <ul class=\"dropdown-menu\">\r\n <li><a href=\"#\">Environment: \r\n${grails.util.Environment.current.name}<\/a><\/li>\r\n <li><a href=\"#\">App profile: ${grailsApplication.config.grails?.profile}<\/a><\/li>\r\n <li><a href=\"#\">App version:\r\n<g:meta name=\"info.app.version\"\/><\/a><\/li>\r\n <li role=\"separator\" class=\"divider\"><\/li>\r\n <li><a href=\"#\">Grails version:\r\n<g:meta name=\"info.app.grailsVersion\"\/><\/a><\/li>\r\n <li><a href=\"#\">Groovy version: ${GroovySystem.getVersion()}<\/a><\/li>\r\n<li><a href=\"#\">JVM version: ${System.getProperty('java.version')}<\/a><\/li>\r\n <li role=\"separator\" class=\"divider\"><\/li>\r\n <li><a href=\"#\">Reloading active: ${grails.util.Environment.reloadingAgentEnabled}<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" \r\naria-expanded=\"false\">Artefacts <span class=\"caret\"><\/span><\/a>\r\n <ul class=\"dropdown-menu\">\r\n <li><a href=\"#\">Controllers: ${grailsApplication.controllerClasses.size()}<\/a><\/li>\r\n <li><a href=\"#\">Domains: ${grailsApplication.domainClasses.size()}<\/a><\/li>\r\n <li><a href=\"#\">Services: ${grailsApplication.serviceClasses.size()}<\/a><\/li>\r\n <li><a href=\"#\">Tag Libraries: ${grailsApplication.tagLibClasses.size()}<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" \r\naria-expanded=\"false\">Installed Plugins <span class=\"caret\"><\/span><\/a>\r\n <ul class=\"dropdown-menu\">\r\n <g:each var=\"plugin\" in=\"${applicationContext.getBean('pluginManager').allPlugins}\">\r\n <li><a href=\"#\">${plugin.name} - ${plugin.version}<\/a><\/li>\r\n <\/g:each>\r\n <\/ul>\r\n <\/li>\r\n <\/content>\r\n\r\n <div class=\"svg\" role=\"presentation\">\r\n <div class=\"grails-logo-container\">\r\n <asset:image src=\"grails-cupsonly-logo-white.svg\" class=\"grails-logo\"\/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"content\" role=\"main\">\r\n <section class=\"row colset-2-its\">\r\n <h1>Welcome to Grails<\/h1>\r\n\r\n <p>\r\nCongratulations, you have successfully started your first Grails application! At the moment\r\nthis is the default page, feel free to modify it to either redirect to a controller or display\r\nwhatever content you may choose. Below is a list of controllers that are currently deployed in\r\nthis application, click on each to execute its default action:\r\n <\/p>\r\n\r\n <div id=\"controllers\" role=\"navigation\">\r\n <h2>Available Controllers:<\/h2>\r\n <ul>\r\n <g:each var=\"c\" in=\"${grailsApplication.controllerClasses.sort { it.fullName } }\">\r\n <li class=\"controller\">\r\n <g:link controller=\"${c.logicalPropertyName}\">${c.fullName}<\/g:link>\r\n <\/li>\r\n <\/g:each>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAs we can see from close inspection of css classes, this UI makes extensive use of the Bootstrap Framework. The same framework and its dependencies are included into the page as well. Now let us use this UI for the other Grails applications where the integration requires a bit of work on our part. Our aim is to make this same UI work flawlessly with those other versions of Grails Framework.<\/p>\n
<\/a>3.2 Grails v2.4.4 Application<\/h3>\nTo create a Grails application with version 2.4.4 we need to follow the same course of action. We need to type the following command to generate our scaffolded application.<\/p>\n
grails create-app WCGBootstrapGrails244<\/pre>\nAfter the completion of this command our new application should be ready and seated in the folder “WCGBootstrapGrails244”. Let us navigate to this folder and execute the following command to check if things look right.<\/p>\n
grails run-app<\/pre>\nOnce this is completed, we will see a message that our application is running at http:\/\/localhost:8080\/WCGBootstrapGrails244<\/code>. When we navigate in a browser we will see the following screen.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/07\/LandingPage244-1.jpg\")
<\/a>Landing Page v2.4.4<\/figcaption><\/figure>\n3.2.1 Html Markup Change<\/h4>\n
We will make changes in two files for Html Markup. First up, copy the contents of main.gsp<\/code> in the project WCGBootstrapGrails329 to the main.gsp<\/code> file of this project. Next we do the same for the index.gsp<\/code> file.<\/p>\n3.2.2 Changes to JavaScript Assets<\/h4>\n
Now to make the pages work we need to make changes to the assets<\/code> folder under grails-app<\/code> folder. First we copy the images<\/code> folder from the WCGBootstrapGrails329 project. Next we make changes to the JavaScript and StyleSheets.<\/p>\nThe application.js<\/code> file’s content needs to change from<\/p>\napplication.js<\/em><\/span><\/p>\n\/\/ This is a manifest file that'll be compiled into application.js.\r\n\/\/\r\n\/\/ Any JavaScript file within this directory can be referenced here using a relative path.\r\n\/\/\r\n\/\/ You're free to add application-wide JavaScript to this file, but it's generally better \r\n\/\/ to create separate JavaScript files as needed.\r\n\/\/\r\n\/\/= require jquery\r\n\/\/= require_tree .\r\n\/\/= require_self\r\n\r\nif (typeof jQuery !== 'undefined') {\r\n\t(function($) {\r\n\t\t$('#spinner').ajaxStart(function() {\r\n\t\t\t$(this).fadeIn();\r\n\t\t}).ajaxStop(function() {\r\n\t\t\t$(this).fadeOut();\r\n\t\t});\r\n\t})(jQuery);\r\n}\r\n<\/pre>\nto this<\/p>\n
application.js<\/em><\/span><\/p>\n\/\/ This is a manifest file that'll be compiled into application.js.\r\n\/\/\r\n\/\/ Any JavaScript file within this directory can be referenced here using a relative path.\r\n\/\/\r\n\/\/ You're free to add application-wide JavaScript to this file, but it's generally better\r\n\/\/ to create separate JavaScript files as needed.\r\n\/\/\r\n\/\/= require jquery-2.2.0.min\r\n\/\/= require bootstrap\r\n\/\/= require_tree .\r\n\/\/= require_self\r\n\r\nif (typeof jQuery !== 'undefined') {\r\n (function($) {\r\n $(document).ajaxStart(function() {\r\n $('#spinner').fadeIn();\r\n }).ajaxStop(function() {\r\n $('#spinner').fadeOut();\r\n });\r\n })(jQuery);\r\n}\r\n<\/pre>\nAs you can see we have added to the requires at the top one for bootstrap.js<\/code> and the other for JQuery<\/code> version 2.2.0. We have also replaced the other require for JQuery already in the file. We do need to place these two files referenced in the requires in the same folder to finalize the changes.<\/p>\n3.2.3 Changes to StyleSheet Assets<\/h4>\n
Now it is the turn of the StyleSheet file for changes. We change the contents of application.css<\/code> file from<\/p>\napplication.css<\/em><\/span><\/p>\n\/*\r\n* This is a manifest file that'll be compiled into application.css, which will include all the files\r\n* listed below.\r\n*\r\n* Any CSS file within this directory can be referenced here using a relative path.\r\n*\r\n* You're free to add application-wide styles to this file and they'll appear at the top of the\r\n* compiled file, but it's generally better to create a new file per style scope.\r\n*\r\n*= require main\r\n*= require mobile\r\n*= require_self\r\n*\/\r\n<\/pre>\nto this<\/p>\n
application.css<\/em><\/span><\/p>\n\/*\r\n* This is a manifest file that'll be compiled into application.css, which will include all the files\r\n* listed below.\r\n*\r\n* Any CSS file within this directory can be referenced here using a relative path.\r\n*\r\n* You're free to add application-wide styles to this file and they'll appear at the top of the\r\n* compiled file, but it's generally better to create a new file per style scope.\r\n*\r\n*= require bootstrap\r\n*= require grails\r\n*= require main\r\n*= require mobile\r\n*= require_self\r\n*\/\r\n<\/pre>\nAs you can see we have required the bootstrap<\/code> and grails<\/code> css files in addition to the ones which were already their. Like with JavaScript files we need to place the additional files and replace the older ones with new copies from WCGBootstrapGrails329 project we created in the previous section.<\/p>\nThis wraps up the changes needed to use Bootstrap<\/code> with version 2.4.4 of a grails web application. To verify our changes we will run the following command from the root of the project.<\/p>\ngrails run-app<\/pre>\nWe will see a message to the effect that the application is running at http:\/\/localhost:8080\/WCGBootstrapGrails244<\/code> URL. When we navigate to it using a browser we should see the below screen.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/07\/LandingPage244New-1.jpg\")
<\/a>Landing Page v2.4.4<\/figcaption><\/figure>\n<\/a>3.3 Grails v2.3.9 Application<\/h3>\nIn this section we will attempt to use the Bootstrap Framework with Grails v2.3.9. First off, we need to create an application using Grails v2.3.9 by running the following command at the root of the project folder.<\/p>\n
grails create-app WCGBootstrapGrails239<\/pre>\nOnce this command is completed we should have a folder named WCGBootstrapGrails239 with our newly created application.
\nNext, let us run the application to see how the landing page looks like using the command at the root of the application, i.e., WCGBootstrapGrails239.<\/p>\n
grails run-app<\/pre>\nOnce this command is completed we should get a message to the effect that the application is running at http:\/\/localhost:8080\/WCGBootstrapGrails239<\/code>. Navigating to the address in a browser we should see the below screen.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/07\/LandingPage239-1.jpg\")
<\/a>Landing Page v2.3.9<\/figcaption><\/figure>\n3.3.1 Html Markup Change<\/h4>\n
Now let us replace the existing UI with the one from grails v3.2.9 project.
\nWe need to make the main.gsp<\/code> and index.gsp<\/code> file look exactly like their v3.2.9 counterparts.<\/p>\n3.3.2 Enable Asset Pipeline Plugin<\/h4>\n
We will enable the Asset pipeline which makes the static assets number one citizens like all the other artifacts. To do this we need to edit the BuildConfig.groovy<\/code> file which is located in the WCGBootstrapGrails239\\grail-app\\conf<\/code> folder.
\nWe need to uncomment the following line in the file \/\/compile \":asset-pipeline:1.6.1\"<\/code>. Apart from this, copy over the assets<\/code> folder from the 2.4.4 version project to this one.<\/p>\nAfter making these changes, our application is setup to use the Bootstrap framework. So lets run it to see the output. Navigate to the root of the project in a console and run the following command:<\/p>\n
grails run-app<\/pre>\nA message should appear indicating that the application is running at http:\/\/localhost:8080\/WCGBootstrapGrails239<\/code>. We should see the below screen upon navigating to the address in a browser.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/07\/LandingPage239_New-1.jpg\")
<\/a>Landing Page v2.3.9<\/figcaption><\/figure>\n<\/a>4. That’s a Wrap<\/h2>\nNow that we were able to do the same UI layout based on Bootstrap using 3 different versions of Grails, namely v2.3.9, v2.4.4 and v3.2.9 we can call it a day.<\/p>\n
<\/a>5. Running the Sample<\/h2>\nTo run each of our applications on, in my case Windows 10, we need to change the path<\/code> environment variable to reflect the bin directory of the desired Grails version. That is the only step required to switch. All the other commands remain the same. Lets list the ones we used most often:<\/p>\nCreate a new Application<\/strong><\/p>\ngrails create-app appname<\/pre>\nRun the Application<\/strong><\/p>\ngrails run-app<\/pre>\n<\/a>6. Download the Source Code<\/h2>\n
- \n
- 3.1 Grails v3.2.9 Application<\/a><\/dt>\n
- 3.2 Grails v2.4.4 Application<\/a><\/dt>\n
- 3.3 Grails v2.3.9 Application<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 4. That’s a Wrap<\/a><\/dt>\n
- 5. Running the Sample<\/a><\/dt>\n
- 6. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Grails<\/h2>\n
Grails is a groovy based web framework which promotes Convention over configuration paradigm. “Convention over Configuration” essentially means that the framework makes many of the decisions for us by using sensible defaults. Only when we need to deviate or implement customized functionality we need to make effort for those changes. For the most part the defaults make sense and we can go along with them thus reducing our workload and increasing productivity manifolds.<\/p>\n
Grails is built on top of existing technologies like Hibernate and Spring MVC using existing codebases to enable quick development and increased developer productivity.<\/p>\n
<\/a>2. Tools<\/h2>\n
We will use the following toolset for this tutorial:<\/p>\n
- \n
- Grails Framework v3.2.9<\/li>\n
- Grails Framework v2.4.4<\/li>\n
- Grails Framework v2.3.9<\/li>\n
- Bootstrap<\/li>\n
- Notepad++<\/li>\n
- JDK v1.8.0_u31<\/li>\n<\/ul>\n
<\/a>3. Get Started<\/h2>\n
Firstly we will create an application using Grails v3.2.9 and take a look at the way Bootstrap is used with it. Next we will generate a sample application using Grails v2.3.9 & v2.4.4. We will use the UI generated with latest version which uses bootstrap and make it work with these versions of grails.
\nNow that we have our work cut out let’s get started.<\/p>\n<\/a>3.1 Grails v3.2.9 Application<\/h3>\n
This is the latest version of Grails Framework at the time of this article. To create a grails application, we open a command prompt at the root of the folder where we want to place the project. Type in the following command to have an application scaffolded for us.<\/p>\n
grails create-app WCGBootstrapGrails329<\/pre>\n
Once this command is executed we have a starter application ready and placed in the folder WCGBootstrapGrails329. To run this application we type in the following command after switching to this folder.<\/p>\n
grails run-app<\/pre>\n
It might take a while but eventually a message should show to the effect that the application is running at
http:\/\/localhost:8080<\/code>. Once we navigate to this address in a browser we should see the following on our screens.<\/p>\n<\/a>Landing Page v3.2.9<\/figcaption><\/figure>\n The Html rendered above is built from two files, namely
main.gsp<\/code> andindex.gsp<\/code>. Their content is below:<\/p>\nmain.gsp<\/em><\/span><\/p>\n
<!doctype html>\r\n<html lang=\"en\" class=\"no-js\">\r\n<head>\r\n <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"\/>\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\/>\r\n <title>\r\n <g:layoutTitle default=\"Grails\"\/>\r\n <\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\/>\r\n\r\n <asset:stylesheet src=\"application.css\"\/>\r\n\r\n <g:layoutHead\/>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"navbar navbar-default navbar-static-top\" role=\"navigation\">\r\n <div class=\"container\">\r\n <div class=\"navbar-header\">\r\n <button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\"\r\ndata-target=\".navbar-collapse\">\r\n <span class=\"sr-only\">Toggle navigation<\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <\/button>\r\n <a class=\"navbar-brand\" href=\"\/#\">\r\n <i class=\"fa grails-icon\">\r\n <asset:image src=\"grails-cupsonly-logo-white.svg\"\/>\r\n <\/i> Grails\r\n <\/a>\r\n <\/div>\r\n <div class=\"navbar-collapse collapse\" aria-expanded=\"false\" style=\"height: 0.8px;\">\r\n <ul class=\"nav navbar-nav navbar-right\">\r\n <g:pageProperty name=\"page.nav\" \/>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <g:layoutBody\/>\r\n\r\n <div class=\"footer\" role=\"contentinfo\"><\/div>\r\n\r\n <div id=\"spinner\" class=\"spinner\" style=\"display:none;\">\r\n <g:message code=\"spinner.alt\" default=\"Loading…\"\/>\r\n <\/div>\r\n\r\n <asset:javascript src=\"application.js\"\/>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
index.gsp<\/em><\/span><\/p>\n
<!doctype html>\r\n<html>\r\n<head>\r\n <meta name=\"layout\" content=\"main\"\/>\r\n <title>Welcome to Grails<\/title>\r\n\r\n <asset:link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-ico\" \/>\r\n<\/head>\r\n<body>\r\n <content tag=\"nav\">\r\n <li class=\"dropdown\">\r\n <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" \r\naria-expanded=\"false\">Application Status <span class=\"caret\"><\/span><\/a>\r\n <ul class=\"dropdown-menu\">\r\n <li><a href=\"#\">Environment: \r\n${grails.util.Environment.current.name}<\/a><\/li>\r\n <li><a href=\"#\">App profile: ${grailsApplication.config.grails?.profile}<\/a><\/li>\r\n <li><a href=\"#\">App version:\r\n<g:meta name=\"info.app.version\"\/><\/a><\/li>\r\n <li role=\"separator\" class=\"divider\"><\/li>\r\n <li><a href=\"#\">Grails version:\r\n<g:meta name=\"info.app.grailsVersion\"\/><\/a><\/li>\r\n <li><a href=\"#\">Groovy version: ${GroovySystem.getVersion()}<\/a><\/li>\r\n<li><a href=\"#\">JVM version: ${System.getProperty('java.version')}<\/a><\/li>\r\n <li role=\"separator\" class=\"divider\"><\/li>\r\n <li><a href=\"#\">Reloading active: ${grails.util.Environment.reloadingAgentEnabled}<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" \r\naria-expanded=\"false\">Artefacts <span class=\"caret\"><\/span><\/a>\r\n <ul class=\"dropdown-menu\">\r\n <li><a href=\"#\">Controllers: ${grailsApplication.controllerClasses.size()}<\/a><\/li>\r\n <li><a href=\"#\">Domains: ${grailsApplication.domainClasses.size()}<\/a><\/li>\r\n <li><a href=\"#\">Services: ${grailsApplication.serviceClasses.size()}<\/a><\/li>\r\n <li><a href=\"#\">Tag Libraries: ${grailsApplication.tagLibClasses.size()}<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" \r\naria-expanded=\"false\">Installed Plugins <span class=\"caret\"><\/span><\/a>\r\n <ul class=\"dropdown-menu\">\r\n <g:each var=\"plugin\" in=\"${applicationContext.getBean('pluginManager').allPlugins}\">\r\n <li><a href=\"#\">${plugin.name} - ${plugin.version}<\/a><\/li>\r\n <\/g:each>\r\n <\/ul>\r\n <\/li>\r\n <\/content>\r\n\r\n <div class=\"svg\" role=\"presentation\">\r\n <div class=\"grails-logo-container\">\r\n <asset:image src=\"grails-cupsonly-logo-white.svg\" class=\"grails-logo\"\/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"content\" role=\"main\">\r\n <section class=\"row colset-2-its\">\r\n <h1>Welcome to Grails<\/h1>\r\n\r\n <p>\r\nCongratulations, you have successfully started your first Grails application! At the moment\r\nthis is the default page, feel free to modify it to either redirect to a controller or display\r\nwhatever content you may choose. Below is a list of controllers that are currently deployed in\r\nthis application, click on each to execute its default action:\r\n <\/p>\r\n\r\n <div id=\"controllers\" role=\"navigation\">\r\n <h2>Available Controllers:<\/h2>\r\n <ul>\r\n <g:each var=\"c\" in=\"${grailsApplication.controllerClasses.sort { it.fullName } }\">\r\n <li class=\"controller\">\r\n <g:link controller=\"${c.logicalPropertyName}\">${c.fullName}<\/g:link>\r\n <\/li>\r\n <\/g:each>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAs we can see from close inspection of css classes, this UI makes extensive use of the Bootstrap Framework. The same framework and its dependencies are included into the page as well. Now let us use this UI for the other Grails applications where the integration requires a bit of work on our part. Our aim is to make this same UI work flawlessly with those other versions of Grails Framework.<\/p>\n
<\/a>3.2 Grails v2.4.4 Application<\/h3>\n
To create a Grails application with version 2.4.4 we need to follow the same course of action. We need to type the following command to generate our scaffolded application.<\/p>\n
grails create-app WCGBootstrapGrails244<\/pre>\n
After the completion of this command our new application should be ready and seated in the folder “WCGBootstrapGrails244”. Let us navigate to this folder and execute the following command to check if things look right.<\/p>\n
grails run-app<\/pre>\n
Once this is completed, we will see a message that our application is running at
http:\/\/localhost:8080\/WCGBootstrapGrails244<\/code>. When we navigate in a browser we will see the following screen.<\/p>\n<\/a>Landing Page v2.4.4<\/figcaption><\/figure>\n 3.2.1 Html Markup Change<\/h4>\n
We will make changes in two files for Html Markup. First up, copy the contents of
main.gsp<\/code> in the project WCGBootstrapGrails329 to themain.gsp<\/code> file of this project. Next we do the same for theindex.gsp<\/code> file.<\/p>\n3.2.2 Changes to JavaScript Assets<\/h4>\n
Now to make the pages work we need to make changes to the
assets<\/code> folder undergrails-app<\/code> folder. First we copy theimages<\/code> folder from the WCGBootstrapGrails329 project. Next we make changes to the JavaScript and StyleSheets.<\/p>\nThe
application.js<\/code> file’s content needs to change from<\/p>\napplication.js<\/em><\/span><\/p>\n
\/\/ This is a manifest file that'll be compiled into application.js.\r\n\/\/\r\n\/\/ Any JavaScript file within this directory can be referenced here using a relative path.\r\n\/\/\r\n\/\/ You're free to add application-wide JavaScript to this file, but it's generally better \r\n\/\/ to create separate JavaScript files as needed.\r\n\/\/\r\n\/\/= require jquery\r\n\/\/= require_tree .\r\n\/\/= require_self\r\n\r\nif (typeof jQuery !== 'undefined') {\r\n\t(function($) {\r\n\t\t$('#spinner').ajaxStart(function() {\r\n\t\t\t$(this).fadeIn();\r\n\t\t}).ajaxStop(function() {\r\n\t\t\t$(this).fadeOut();\r\n\t\t});\r\n\t})(jQuery);\r\n}\r\n<\/pre>\nto this<\/p>\n
application.js<\/em><\/span><\/p>\n
\/\/ This is a manifest file that'll be compiled into application.js.\r\n\/\/\r\n\/\/ Any JavaScript file within this directory can be referenced here using a relative path.\r\n\/\/\r\n\/\/ You're free to add application-wide JavaScript to this file, but it's generally better\r\n\/\/ to create separate JavaScript files as needed.\r\n\/\/\r\n\/\/= require jquery-2.2.0.min\r\n\/\/= require bootstrap\r\n\/\/= require_tree .\r\n\/\/= require_self\r\n\r\nif (typeof jQuery !== 'undefined') {\r\n (function($) {\r\n $(document).ajaxStart(function() {\r\n $('#spinner').fadeIn();\r\n }).ajaxStop(function() {\r\n $('#spinner').fadeOut();\r\n });\r\n })(jQuery);\r\n}\r\n<\/pre>\nAs you can see we have added to the requires at the top one for
bootstrap.js<\/code> and the other forJQuery<\/code> version 2.2.0. We have also replaced the other require for JQuery already in the file. We do need to place these two files referenced in the requires in the same folder to finalize the changes.<\/p>\n3.2.3 Changes to StyleSheet Assets<\/h4>\n
Now it is the turn of the StyleSheet file for changes. We change the contents of
application.css<\/code> file from<\/p>\napplication.css<\/em><\/span><\/p>\n
\/*\r\n* This is a manifest file that'll be compiled into application.css, which will include all the files\r\n* listed below.\r\n*\r\n* Any CSS file within this directory can be referenced here using a relative path.\r\n*\r\n* You're free to add application-wide styles to this file and they'll appear at the top of the\r\n* compiled file, but it's generally better to create a new file per style scope.\r\n*\r\n*= require main\r\n*= require mobile\r\n*= require_self\r\n*\/\r\n<\/pre>\n
to this<\/p>\n
application.css<\/em><\/span><\/p>\n
\/*\r\n* This is a manifest file that'll be compiled into application.css, which will include all the files\r\n* listed below.\r\n*\r\n* Any CSS file within this directory can be referenced here using a relative path.\r\n*\r\n* You're free to add application-wide styles to this file and they'll appear at the top of the\r\n* compiled file, but it's generally better to create a new file per style scope.\r\n*\r\n*= require bootstrap\r\n*= require grails\r\n*= require main\r\n*= require mobile\r\n*= require_self\r\n*\/\r\n<\/pre>\n
As you can see we have required the
bootstrap<\/code> andgrails<\/code> css files in addition to the ones which were already their. Like with JavaScript files we need to place the additional files and replace the older ones with new copies from WCGBootstrapGrails329 project we created in the previous section.<\/p>\nThis wraps up the changes needed to use
Bootstrap<\/code> with version 2.4.4 of a grails web application. To verify our changes we will run the following command from the root of the project.<\/p>\ngrails run-app<\/pre>\n
We will see a message to the effect that the application is running at
http:\/\/localhost:8080\/WCGBootstrapGrails244<\/code> URL. When we navigate to it using a browser we should see the below screen.<\/p>\n<\/a>Landing Page v2.4.4<\/figcaption><\/figure>\n <\/a>3.3 Grails v2.3.9 Application<\/h3>\n
In this section we will attempt to use the Bootstrap Framework with Grails v2.3.9. First off, we need to create an application using Grails v2.3.9 by running the following command at the root of the project folder.<\/p>\n
grails create-app WCGBootstrapGrails239<\/pre>\n
Once this command is completed we should have a folder named WCGBootstrapGrails239 with our newly created application.
\nNext, let us run the application to see how the landing page looks like using the command at the root of the application, i.e., WCGBootstrapGrails239.<\/p>\ngrails run-app<\/pre>\n
Once this command is completed we should get a message to the effect that the application is running at
http:\/\/localhost:8080\/WCGBootstrapGrails239<\/code>. Navigating to the address in a browser we should see the below screen.<\/p>\n<\/a>Landing Page v2.3.9<\/figcaption><\/figure>\n 3.3.1 Html Markup Change<\/h4>\n
Now let us replace the existing UI with the one from grails v3.2.9 project.
\nWe need to make themain.gsp<\/code> andindex.gsp<\/code> file look exactly like their v3.2.9 counterparts.<\/p>\n3.3.2 Enable Asset Pipeline Plugin<\/h4>\n
We will enable the Asset pipeline which makes the static assets number one citizens like all the other artifacts. To do this we need to edit the
BuildConfig.groovy<\/code> file which is located in theWCGBootstrapGrails239\\grail-app\\conf<\/code> folder.
\nWe need to uncomment the following line in the file\/\/compile \":asset-pipeline:1.6.1\"<\/code>. Apart from this, copy over theassets<\/code> folder from the 2.4.4 version project to this one.<\/p>\nAfter making these changes, our application is setup to use the Bootstrap framework. So lets run it to see the output. Navigate to the root of the project in a console and run the following command:<\/p>\n
grails run-app<\/pre>\n
A message should appear indicating that the application is running at
http:\/\/localhost:8080\/WCGBootstrapGrails239<\/code>. We should see the below screen upon navigating to the address in a browser.<\/p>\n<\/a>Landing Page v2.3.9<\/figcaption><\/figure>\n <\/a>4. That’s a Wrap<\/h2>\n
Now that we were able to do the same UI layout based on Bootstrap using 3 different versions of Grails, namely v2.3.9, v2.4.4 and v3.2.9 we can call it a day.<\/p>\n
<\/a>5. Running the Sample<\/h2>\n
To run each of our applications on, in my case Windows 10, we need to change the
path<\/code> environment variable to reflect the bin directory of the desired Grails version. That is the only step required to switch. All the other commands remain the same. Lets list the ones we used most often:<\/p>\nCreate a new Application<\/strong><\/p>\n
grails create-app appname<\/pre>\n
Run the Application<\/strong><\/p>\n
grails run-app<\/pre>\n
<\/a>6. Download the Source Code<\/h2>\n
- 3.2 Grails v2.4.4 Application<\/a><\/dt>\n