Saturday, October 3, 2015

Grails 3 : add a bootstrap plugin to your application


I started to learn Grails 3 by using Netbeans 8.Today, I wanted to add bootstrap to my Grails 3 project.I decided to use a bootstrap plugin.The ways to do it is a little different than in Grails 2 ...

First, you have to search your plugin.There are located on Bintray.Here is the web page I used to configure the bootstrap plugin for my web application : https://bintray.com/kensiprell/gradle-plugins/bootstrap-framework/view#read


Configure build.gradle


You have to put dependencies in build.gradle :

buildscript {
    ext {
         //bootstrapFramework = [
         //    version             : "3.3.5",
         //    cssPath             : "grails-app/assets/stylesheets",
         //    jsPath              : "grails-app/assets/javascripts",
         //    useIndividualJs     : false,
         //    useLess             : false,
         //    invalidVersionFails : false,
         //    fontAwesome : [
         //       install             : false
         //       version             : "4.3.0",
         //       useLess             : false
         //       invalidVersionFails : false
         //    ]
         //]
    }
    repositories {
        jcenter()
    }
    dependencies {
        classpath "com.siprell.plugins:bootstrap-framework:1.0.3"
    }
}


apply plugin: "com.siprell.plugins.bootstrap-framework"


main.gsp


Then just add the require dependencies jquery, bootstrap in your GSP.
Here is an example with a classic navbar :


<html lang="en" class="no-js">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title><g:layoutTitle default="Grails"/></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <asset:javascript src="jquery-2.1.3.js"/>
        <asset:javascript src="bootstrap-all.js"/>
        <asset:stylesheet src="bootstrap-all.css"/>
        <asset:stylesheet src="font-awesome-all.css"/>
        <g:layoutHead/>
    </head>
    <body>
    <nav class="navbar navbar-default">
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                      <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        <g:layoutBody/>
    </body>

   

Running Gradle task


In NetBeans, I run the clean and assemble Gradle task to download and install your plugin.You have to go in project tab and made right clic then choose task ( clean or assemble ).It will download and install the plugin.Then restart your application.