Voici un petit tutoriel pour ajouter le plugin bootstrap à un projet Grails 3.Il y a quelques différences avec Grails 2.x mais pas tant que cela.
La première chose à faire est de chercher son plugin.Ils sont maintenant localisés sur Bintray.
J'ai récupéré le plugin Bootstrap sur le lien suivant : https://bintray.com/kensiprell/gradle-plugins/bootstrap-framework/view#read
Ajout des dépendances : build.gradle
Les dépendances sont maintenant gérées dans le fichier 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"
Utilisation dans une page GSP
Ensuite, une fois la configuration du build.gradle effectuée, il suffit de faire une GSP et d'inclure les dépendances jquery, bootstrap dans votre GSP.
Voici un exemple classique de 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
Pour télécharger et installer le plugin, j'ai exécuté les task Gradle suivante : clean et assemble.Pour cela, dans Netbeans, il faut faire clic droit sur le projet et sélectionner Task puis clean ou Assemble.Ensuite, il faut redémarrer votre application.
Aucun commentaire:
Enregistrer un commentaire