Vous regardez une version antérieure (v. /confluence/display/BM35/Modifier+la+page+d%27accueil+de+BlueMind) de cette page.

afficher les différences afficher l'historique de la page

Vous regardez la version actuelle de cette page. (v. 1) afficher la version suivante »

Présentation

Par défaut, BlueMind permet de personnaliser le logo de la page d'accueil.

Afin de remplacer la page d'accueil par défaut par une page personnalisée, il est nécessaire d'écrire une extension au service HPS.

Cette méthode est fournie à titre d'exemple.

Lors des mises à jour, il se peut que l'extension nécessite d'être adaptée à la nouvelle version de BlueMind.

Si une telle extension est présente sur votre installation, nous vous conseillons fortement de tester son comportement sur une plate-forme de pré-production utilisant la version de BlueMind que vous vous apprêtez à mettre en production.

Pré-requis

Une installation de test de BlueMind en version 3.5.7 minimum.

Principe

La modification de la page d'accueil de BlueMind se fait via l'écriture d'une extension HPS qui va surcharger le modèle et les ressources de la page d'accueil officielle afin de définir votre propre page d'accueil.

Initialiser l'extension

Définition du nom de l'extension

Vous devez définir un nom pour votre extension. Ce nom peut-être composé des caractères [a-z] et . (point).

Dans la suite de cette documentation, nous avons choisi le nom my.sample.loginpage, pensez à remplacer celui-ci par le nom choisi pour votre extension.

Création de la structure de l'extension

Se connecter en tant qu'utilisateur root sur l'installation de test de BlueMind, puis :

  1. exécuter les commandes :

    mkdir /root/my.sample.loginpage
cd /root/my.sample.loginpage
mkdir META-INF templates web-resources

  2. créer le fichier /root/my.sample.loginpage/META-INF/MANIFEST.MF, avec le contenu :

    Manifest-Version: 1.0
Bundle-ManifestVersion: 2
Bundle-Name: my.sample.loginpage
Bundle-SymbolicName: my.sample.loginpage
Bundle-Version: 1.0.0
Bundle-Vendor: bluemind.net
Fragment-Host: net.bluemind.webmodules.loginapp
Bundle-RequiredExecutionEnvironment: JavaSE-1.8

    Pensez à adapter les lignes Bundle-Name et Bundle-SymbolicName en fonction du nom choisi pour votre extension

Définir votre page d'accueil

La page d'accueil se compose de 2 grand types de données :

  • le code HTML de la page sous forme de modèle
  • les ressources référencées par votre page (images, css...)

HTML

Le code HTML de la page doit être placé dans le fichier templates/login.xml. Ce fichier modèle sera analysé par BlueMind qui y placera des données dynamiquement.

À cette fin, ce modèle doit contenir dans la section <body> le code du formulaire d'authentification suivant :

<#if authErrorMsg??>
 <div id="error">${authErrorMsg}</div>
</#if>

<form action="/login/${actionPath}" method="post">
 <label for="login">${msg('login.login')}</label>
 <#if defaultDomain??>
  <div class="default-domain">
  <input type="text" name="login" value="${userLogin?html}" autofocus="true" autocapitalize="none" autocorrect="off" placeholder="${msg('login.login')}" />
  <div title="@{defaultDomain}">@${defaultDomain}</div>
  <input type="hidden" name="domain" value="${defaultDomain?html}"/>
  </div>
 <#else>
  <input type="text" name="login" id="login" value="${userLogin?html}" autofocus="true" autocapitalize="none" autocorrect="off" placeholder="${msg('login.login')}" />
 </#if>

 <label for="password">${msg('login.password')}</label>
 <input type="password" name="password" autocomplete="off" />
 <div class='privacy'>
  <input type="radio" name="priv" value="priv" id="private" <#if priv = "true">checked="checked"</#if> />
  <label title="${msg('login.privateTitle')}" for="private"></label>
  <label title="${msg('login.privateTitle')}" for="private">${msg('login.private')}</label>
  <br />
  <input type="radio" name="priv" value="public" id="public" <#if priv = "false">checked="checked"</#if> />
  <label title="${msg('login.publicTitle')}" for="public"></label>
  <label title="${msg('login.publicTitle')}" for="public">${msg('login.public')}</label>
 </div>

 <input type="hidden" name="askedUri" value="${askedUri?html}" />
 <input type="hidden" name="csrfToken" value="${csrfToken}"/>
 <input type="submit" name="submit" id="submit" value="${msg("login.connect")}" />
</form>

La balise </body> du modèle templates/login.xml doit être précédée par :

${jsRuntime}

Ressources

Les ressources de votre page d'accueil -  telles que les images, les feuilles CSS... - doivent-être placées dans le dossier web-resources.

Vous pouvez référencer les ressources directement à partir de ce répertoire dans le code HTML. Par exemple pour insérer la ressource web-resources/sample.jpg depuis le modèle templates/login.xml :

<img src="sample.jpg>Sample image</img>

Si vous créez une arborescence de dossiers, utilisez la notation relative pour les référencer en considérant toujours web-resources comme répertoire racine. Par exemple, pour une feuille CSS placée dans /web-ressources/css/style.css :

<link rel="stylesheet" href="css/style.css" />

NB : notez que l'arborescence ne commence pas par '/', qui pointerait vers la racine du site web

Générer et installer l'extension

Se connecter en tant qu'utilisateur root sur l'installation de test de BlueMind, puis :

  1. générer l'extension :

    cd /root/my.sample.loginpage
/usr/lib/jvm/bm-jdk/bin/jar cvfm /root/my.sample.loginpage_1.0.0.jar META-INF/MANIFEST.MF .

  2. installer l'extension :

    cd /usr/share/bm-hps/extensions
mkdir my.sample.loginpage
mv /root/my.sample.loginpage_1.0.0.jar my.sample.loginpage/

  3. re-démarrer le service HPS :

    /etc/init.d/bm-hps stop
rm -rf /var/lib/bm-hps
/etc/init.d/bm-hps start

Connectez-vous ensuite à BlueMind, votre page doit s'afficher à la place de la page standard de BlueMind.

Si la page ne s'affiche pas, forcez un rafraîchissement en maintenant la touche shift appuyée tout en rechargeant la page.

Vous pouvez utiliser un navigateur en mode de navigation privée pour éviter les éventuels effets de cache.

Notes

Page par défaut de BlueMind

Vous pouvez visualiser le modèle de la page par défaut de BlueMind sur notre git : http://git.blue-mind.net/bluemind/blob/master/ui/webmodules/net.bluemind.webmodules.loginapp/templates/login.xml

De même, les ressources de la page par défaut y sont visibles : http://git.blue-mind.net/bluemind/tree/master/ui/webmodules/net.bluemind.webmodules.loginapp/web-resources/

Exemple

Le code du plugin my.sample.loginpage décrit dans cette documentation est accessible sur ce site : https://github.com/bluemind-net/loginapp-plugin-sample/tree/master/my.sample.loginpage

Pour la tester:

  1. télécharger l'extension générée depuis ce lien : https://github.com/bluemind-net/loginapp-plugin-sample/raw/master/build/my.sample.loginpage_1.0.0.jar
  2. se référer aux étapes 2 et 3 du paragraphe Générer et installer l'extension

Le contenu de l'extension générée peut-être modifié directement depuis un logiciel supportant le format de compression zip (winzip par exemple).

Vous pouvez remplacer le fichier modèle templates/login.xml, ainsi qu'ajouter ou supprimer des resources dans le dossier web-resources.

  • Aucune étiquette