mardi 7 janvier 2014

Comment ajouter un sitemap à son application Grails ?

Aujourd'hui, je vais ajouter une sitemap à mon nouveau site web fait avec Grails.
La première des chose à faire est d'en générer une.Pour cela, il y a des sites en ligne qui le font pour vous. Par exemple :http://www.xml-sitemaps.com . Il vous suffit de mettre l'url de votre site web et cela va vous générer une sitemap avec différents formats (xml, zip ... ). Voici un exemple de sitemap généré :
<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->

<url>
  <loc>http://opendoowap-totalprog.rhcloud.com/</loc>
</url>
<url>
  <loc>http://opendoowap-totalprog.rhcloud.com/page/training</loc>
</url>
<url>
  <loc>http://opendoowap-totalprog.rhcloud.com/page/about</loc>
</url>
<url>
  <loc>http://opendoowap-totalprog.rhcloud.com/page/under</loc>
</url>
<url>
  <loc>http://opendoowap-totalprog.rhcloud.com/page/website</loc>
</url>
</urlset> 

Ensuite, il faut télécharger le fichier sitemap.xml et le mettre dans le répertoire web-app de votre application Grails. Il faut ensuite modifier le fichier BuildConfig.groovy  :

grails.war.copyToWebApp = { args ->
    fileset(dir:"web-app") {
        include(name: "js/**")
        include(name: "css/**")
        include(name: "fonts/**")
        include(name: "images/**")
        include(name: "WEB-INF/**")
        include(name: "sitemap.xml")
    }
}
Pour finir, vous n'avez plus qu'à exécuter  grails war et le déployer dans Tomcat.
Maintenant votre sitemap est accessible à l'url suivante : http://your.app.com/sitemap.xml et vous pouvez l'intégrer à Google webmaster tools.




jeudi 2 janvier 2014

Grails balise meta et internationalisation

Si vous utilisez l'internationalisation avec Grails, vous avez surement l'habitude d'utiliser les balises <g:message ...>.
Mais comment utiliser cette balise pour par exemple remplir content de la balise Meta ?
Voici comment :

<meta name="description" content="${message(code:'index.goal')}" />




jeudi 26 décembre 2013

Problème avec le déploiement de ROOT.war dans Tomcat sur le cloud Openshift

J'ai rencontré un problème lorsque j'ai voulu déployer mon fichier ROOT.war dans Tomcat sur le cloud OpenShift.Il ne prenait pas en compte mon fichier mais seulement le ROOT.war d'Openshift.
En fait, lorsque on exécute git push, il exécute automatiquement la commande mvn qui génère le ROOT.war d'OpenShift.

Pour résoudre ce problème, il faut :
- Effacer src/ directory
- Effacer pom.xml

lundi 23 décembre 2013

Bitbucket vs Github


Bitbucket est un concurrent de GitHub qui mérite d'être connu. En effet, il est possible de créer des repositories privés (autant que l'on veut) ayant pour seul limite le nombre d'utilisateur. C'est très pratique si vous souhaitez vous faire quelques projets perso.
Voici ci-dessous un article très bien fait qui compare GitHub et Bitbucket : http://hypedrivendev.wordpress.com/2013/11/29/bitbucket-vs-github/




jeudi 19 décembre 2013

Bootstrap ajout de la classe active class to li

Dans l'exemple ci-dessous, nous avons un menu classique Bootstrap. Il faut noter qu'aucune class active n'est présente :
    <div class="navbar navbar-default span12" role="navigation">
            <...>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/fjLearning/"><g:message code="menu.home" /></a></li>
                    <li><a href="/fjLearning/page/training"><g:message code="menu.training" /></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><g:message code="menu.about" /> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/fjLearning/page/about"><g:message code="menu.about.perso" /></a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header"><g:message code="menu.about.site" /></li>
                            <li><a href="/fjLearning/page/under"><g:message code="menu.underTheHood" /></a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </div>

Pour que cela fonctionne, j'ai juste ajouté dans chaque page :
<body>
<script>
    $(document).ready(function() {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });
</script>
...

A présent, lorsque je clique sur un des éléments de mon menu, il est automatiquement sélectionné.
Si vous voulez voir un exemple pratique, vous pouvez voir mon projet Grails sur GitHub : https://github.com/drieu/fjLearning

Voici les deux fichiers utiles :
https://github.com/drieu/fjLearning/blob/master/grails-app/views/layouts/_menu.gsp
https://github.com/drieu/fjLearning/blob/master/grails-app/views/page/training.gsp

dimanche 15 décembre 2013

Bootstrap : span ne fonctionne pas

J'ai essayé de faire fonctionner une simple row avec Bootsrap mais sans succès :

<div class="row" style="border: 1px solid green">
        <div class="span2" style="border: 1px solid red">Foo!</div>
        <div class="span2" style="border: 1px solid red">Bar!</div>
        <div class="span2" style="border: 1px solid red">Baz!</div>
        <div class="span2" style="border: 1px solid red">Foo!</div>
        <div class="span2" style="border: 1px solid red">Bar!</div>
        <div class="span2" style="border: 1px solid red">Baz!</div>
</div>

En faite, j'utilise Bootstrap 3.x qui contient des balises différentes de Bootstrap 2.x.Par exemple, span-* a été remplacé par col-md-*.
Donc pour l'exemple ci-dessus, la solution est  :

<div class="row" style="border: 1px solid green">        <div class="col-md-2" style="border: 1px solid red">Foo!</div>        <div class="col-md-2" style="border: 1px solid red">Bar!</div>        <div class="col-md-2" style="border: 1px solid red">Baz!</div>        <div class="col-md-2" style="border: 1px solid red">Foo!</div>        <div class="col-md-2" style="border: 1px solid red">Bar!</div>        <div class="col-md-2" style="border: 1px solid red">Baz!</div></div>

Pour plus de détails :
http://getbootstrap.com/getting-started/#migration
http://stackoverflow.com/questions/18527466/twitter-bootstrap-span-columns-not-displaying-correctly/18527554#18527554

jeudi 12 décembre 2013

Ajout de bouton de réseaux sociaux avec Grails



Voici un moyen simple et sans problème de performance pour ajouter un bouton Tweeter à votre application :
            <a target="_blank" title="Twitter" href="https://twitter.com/share?url=<g:createLink action="${params.action}" absolute="true"/>&text=<g:message code="training.title" /> sur <g:createLink action="${params.action}" absolute="true"/>" class="tweet-button" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="/fjLearning/images/twitter_icon.png" width="32" height="32"/></a>


L'avantage de cette méthode, c'est que vous ne rencontrez pas de problème de temps de chargement pour vos pages à cause des javascripts.
Autre remarque, nous utilisons <g:createLink action="${params.action}" absolute="true"/> pour générer le lien complet vers votre page.La variable params.action permet de récupérer l'action en cours.

Si vous cherchez d'autres exemples de boutons pour des réseaux sociaux (Facebook, Google+ ...), vous pouvez voir ce lien : http://korben.info/bouton-partage-twitter-facebook-sans-tracking.html