Personnalisation applications web - AtlasOfLivingAustralia/Documentation-en-francais Wiki

Aperçu

Cette page couvrira le processus de création de style personnalisé pour l'application Web generic-hub Grails. Vous devriez avoir un bon niveau de connaissance en HTML et CSS ainsi qu'une compréhension de base de Grails et Bootstrap.

Liens utiles:

Les étapes de base sont:

Fork et renommer

Créer un fichier de disposition personnalisé

cd votreOrganisation-hub/grails-app/views/layout
cp genric.gsp votreOrganisation.gsp

Modifier le fichier de configuration

Il existe deux mécanismes pour configurer l'application Web:

Les valeurs de configuration externes auront la priorité sur celles de Config.groovy. ala-demo utilise le fichier de configuration externe et c'est la manière recommandée de définir les valeurs de configuration.

Modifiez les variables suivantes (dans un fichier externe ou interne):

skin.layout = 'generic'
skin.orgNameLong = 'Generic Data Portal'

à

skin.layout = 'votreOrganisation'
skin.orgNameLong = 'le nom de votre organisation'

Vous pouvez pointer l'application vers une version locale de biocache-service en ajoutant/éditant la ligne:

biocache.baseUrl = "http://votreOrganisation.org/biocache-service"

Note : si vous utilisez un fichier de propriétés externe, omettez les caractères de citation autour des chaînes de caractères.

Modifier la disposition

Le fichier de disposition est un fichier GSP, qui est similaire au format de fichier Java JSP, avec quelques différences mineures (voir les documents Grails). Grails utilise la bibliothèque SiteMesh pour fournir un composant HTML commun aux pages. Le hub générique (~ plugin biocache-hubs) utilise le framework CSS Bootstrap, il faut donc que certains éléments HTML soient présents pour que toutes les pages soient correctement affichées.

Ajouter des fichiers CSS et JS personnalisés

Grails fournit un mécanisme pour gérer les ressources statiques (CSS, JS et images), appelé le Resources plugin, et nous vous recommandons d'utiliser cette fonctionnalité.

Les ressources sont déclarées dans le fichier votreOrganisation-hub/grails-app/conf/ApplicationResources.groovy, les fichiers associés étant gérés comme modules. Les modules peuvent dépendrent (dependOn) d'autres modules, ce qui permet de s'assurer que les fichiers dépendants apparaissent avant le fichier appelant (par exemple, un plugin jQuery" dépend de (dependOn) "jQuery et ainsi jQuery sera appliquer sur la page avant le plugin).

Le fichier de disposition contient une balise 'require' qui indique les modules requis pour toutes les pages utilisant ce fichier de mise en page particulier. Par exemple.

 <r:require modules="bootstrap2, hubCore" />

Pour ajouter un nouveau module, ajoutez simplement une référence au module:

<r:require modules="bootstrap2, hubCore, votreOrganisation" />

puis ajoutez ce module à ApplicationResources.groovy:

votreOrganisation{
    dependsOn 'bootstrap2', 'hubCore' //
    resource url: [dir:'css', file:'votreOrganisation.css']
    resource url: [dir:'js', file:'votreOrganisation.js']
}

Balise Grails

Format: <g:tag_name option=”valeur_de_l_option” />

La documentation du nom d'une balise : http://docs.grails.org/latest/ref/Tags/nom_de_la_balise.html

Voici une liste non-exhaustive des balises Grails avec les explications fournies :


message

Utilisez pour l'internationalisation, les propriétés du code seront dans le fichier message.properties:

http://docs.grails.org/latest/ref/Tags/message.html


link

Ancre qui crée un lien HTML. Plus d'informations sur cette page:

http://docs.grails.org/latest/ref/Tags/link.html


if/else

La balise logique if/else:

http://docs.grails.org/latest/ref/Tags/if.html http://docs.grails.org/latest/ref/Tags/else.html


actionSubmitImage

Génère une action de soumission/d'envoi avec une entrée de type = "image":

http://docs.grails.org/latest/ref/Tags/actionSubmitImage.html


actionSubmit

Ancre qui créera un bouton avec une action de soumission/d'envoi. Dans la partie action, vous pourrez changer l'action du bouton (ex: delete, sumbit, etc.) et vous pouvez avoir plusieurs actions de soumission en une seule forme:

http://docs.grails.org/latest/ref/Tags/actionSubmit.html


select

Génère un champ select dans un formulaire:

http://docs.grails.org/latest/ref/Tags/select.html


checkbox

Crée un champ de case à cocher dans un formulaire:

http://docs.grails.org/latest/ref/Tags/checkBox.html


hiddenField

Ajoute un champ caché sur votre formulaire:

http://docs.grails.org/latest/ref/Tags/hiddenField.html


textArea

Crée et remplit un champ de zone de texte sur un formulaire:

http://docs.grails.org/latest/ref/Tags/textField.html


form

Ancre qui crée et gère un formulaire qui soumet/envoi à un contrôleur:

http://docs.grails.org/latest/ref/Tags/form.html


textField

Crée et remplit un champ de texte d'un formulaire:

http://docs.grails.org/latest/ref/Tags/textField.html


Bootstrap 3: conseils

Ajoutez le module bootstrap3 dans votre fichier applicationRessource.groovy en utilisant les commandes suivantes:

bootstrap3 {
	resource url: [dir: 'bootstrap3/js', file: 'bootstrap.js', disposition: 'head']
	resource url: [dir: 'bootstrap3/css', file: 'bootstrap.css', attrs: [media: 'screen, projection, print']]
	resource url: [dir: 'bootstrap3/css', file: 'bootstrap-theme.css', attrs: [media: 'screen, projection, print']]
}

Télécharger Bootstrap3 : http://getbootstrap.com/getting-started/#download

Ajouter ce dossier dans le dossier web-app

Ajoutez bootstrap3 à votre balise require module dans votre fichier de mise en page

Vous devez mettre à niveau JQuery 1.8 vers JQuery 1.11

Attention: Certaines fonctions sont dépréciées.

Par exemple: .live() doit être changé en .on()

Dans le fichier de configuration, vous devez ajouter le dossier /bootstrap3/ pour avoir accès à l'image

    grails.resources.adhoc.patterns = ['/img/**', '/images/*', '/data/*', '/css/*', '/js/**', '/plugins/**', '/bootstrap3/css/**', '/bootstrap3/js/**', '/bootstrap3/fonts/**']

    grails.resources.adhoc.includes = ['/img/**', '/images/*', '/data/*', '/css/*', '/js/**', '/plugins/**', '/bootstrap3/css/**', '/bootstrap3/js/**', '/bootstrap3/fonts/**']

Internationalisation personnalisée (i18n)

Voir la page sur wiki dédié : Internationalization (i18n)

Exemples

Il existe un certain nombre d'applications Web personnalisées dans le dépôt AtlasOfLivingAustralia Github que vous pouvez consulter pour obtenir des idées/de l'aide pour l'habillage de votre copie de generic-hub :