Votre navigateur n'est pas à jour !

Merci de mettre à jour votre navigateur pour utiliser mon blog. Mettre à jour mon navigateur maintenant

×

Java - Customiser votre application Jhipster

Date de publication 12 juin 2017
Maintenant que notre application Jhipster est prête et en ligne il faut faire quelques améliorations pour la customiser.

Commencez par changer les mots de passe par défaut, en vous rendant sur Administration/Gestion des utilisateurs

Gestion des utilisateurs jhipster


Je modifie le mot de passe du login admin, et je supprime aussi le login system et user.

Utilisateur admin dans jhipster


Changez les mots de passe de postgresql dans le fichier postegresql.yml
...
        environment:
            - POSTGRES_USER=newUser
            - POSTGRES_PASSWORD=newPassword

Changer les informations génériques de l'application dans pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>1.4.2.RELEASE</version>
        <relativePath/>
    </parent>

    <groupId>fr.rigaudie.coocotte</groupId>
    <artifactId>coocotte</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>
    <name>Coocotte</name>
...

Placez une nouvelle icône dans l'onglet du navigateur en plaçant le favicon.ico à la racine du projet soit "app\src\main\webapp"

Ajoutez l'image dans la navbar placé dans "app\src\main\webapp\content\images". Changez le nom de l'image dans "app\src\main\webapp\app\layouts\navbar\navbar.html"

Nouveau logo dans le menu


J'ai ajouté un module angular pour faire du material design. On commence par obtenir la librairie JS
bower install angular-material --save
Puis on ajoute le module ngMaterial dans le fichier app.module.js
On ajoute les liens dans la page index.html
gulp build


J'ai voulu aussi utiliser "font awesome" du coup je récupère la librairie
bower install components-font-awesome --save
Et je mets à jour les liens dans index.html
gulp build

Supprimez les messages de traduction. Si vous avez choisi le français il va créer un dossier "fr" dans "app\src\main\webapp\i18n".
Adaptez ce fichier et le fichier html de la page qui contient lui l'anglais entre les balises html.

Aménagez home.html en supprimant ce qui ne sert plus : logo jhipster, messages ne servant plus, ajouter votre pied de page...

Personnalisation de la page d'acceuil


Changez dans "app\src\main\webapp\index.html" le code google analycis

Mettez à jour le pied de page avec votre style comme

Personnalisation du pied de page


On lance un serveur Java sur http://localhost:9000 avec BrowserSync
gulp
Si vous avez une erreur de ce type
Error: connect ECONNREFUSED 127.0.0.1:8080
   at Object.exports._errnoException (util.js:870:11)
   at exports._exceptionWithHostPort (util.js:893:20)
   at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1063:14)
Cela veut dire que le backend n'est pas démarré il faut le lancer avec maven
mvn spring-boot:run

Ensuite pour construire le war nous allons passer par maven. Attention pensez à faire le nettoyage du dépôt
mvn clean package docker:build
blog comments powered by Disqus