Chapitre 3 Découverte de Dynacase Document UIs

3.1 Qu'est-ce que Dynacase Document UIs

Dynacase Document UIs est un module Dynacase permettant de générer une représensation des documents au moyen des technologies HTML5.

Le rendu des documents sans ce module est fait par le serveur, sous la forme d'une page HTML4 monolithique. Dynacase Document UIs permet à la génération de se faire côté client au moyen de Javascript, HTML5 et CSS.

Cela apporte les avantages suivants :

• Répartition de la charge entre les clients

  Puisque le serveur n'envoie plus que les données, et ne construit plus la page, cela allège la charge du serveur.

• Souplesse

  Puisque le rendu est fait en javascript au dernier moment, il est facile de prendre en compte des éléments de contexte, et de faire un rendu extrêmement personnalisé.

• Comportement surchargeable

  De par cette souplesse, il devient très facile de surcharger le comportement du document pour implémenter des fonctionnalités avancées (telles que le wizard que nous verrons dans un prochain chapitre, ou encore le fonctionnement en mode déconnecté).

Pour une présentation plus détaillée de Dynacase Document UIs, se reporter au manuel de référence

3.2 L'application de gestion des contacts

Au cours de ce tutoriel, nous allons construire une application de gestion des contacts.

Figure 2. Application de gestion des contacts

Cette application sera composée des éléments Dynacase suivants :

• La famille Contact
  • soumise à un workflow à 2 étapes
    • À jour
    • À mettre à jour
  • pilotée par un wizard (chaque étape permettra de mettre à jour une partie de la fiche)
  • avec une mise ne page responsive
• Une interface de navigation, permettant de
  • afficher la liste des contacts
  • rechercher parmi les fiches contact
  • afficher plusieurs fiches au moyen d'onglets

3.3 Mise en œuvre de Dynacase Document UIs

3.3.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-20-00.

3.3.2 Code

L'étape de départ de ce tutoriel contient déjà la famille (avec son workflow), ainsi que le contact John Doe. Dans un premier temps, nous allons travailler directement sur le document.

Il suffit donc de déployer les sources.

3.3.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-20-00

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation) :

• pour linux :

  php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

• pour windows :

  dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

3.3.4 Le résultat

Il est possible de consulter le document

• dans sa représentation standard à l'adresse http://localhost:8080/?app=FDL&action=FDL_CARD&latest=Y&id=CONTACT_JOHN_DOE
• dans sa représentation HTML5 à l'adresse http://localhost:8080/api/v1/documents/CONTACT_JOHN_DOE.html

Pour plus d'explications sur l'application DOCUMENT, voir le manuel de référence ddui

3.4 Comparaisons entre la représentation traditionnelle et la représentation HTML5

Figure 3. Comparaison des rendus

Si vous connaissiez Dynacase avant la sortie de Dynacase Document UIs, voici les éléments clés différenciant la représentation traditionnelle et la représentation HTML5.

• La représentation HTML5 utilise Bootstrap pour sa mise en page.

  Cela amène une présentation plus moderne, et plus espacée.

  De plus, les documents sont responsive par défaut : en dessous de 480px, les libellés passent au dessus des attributs.

• Les menus ont été revus

• Le changement d'état se fait depuis un menu sur l'état courant (à droite de la barre de menus)

• En modification, les attributs sont construits au moyen de la version open source de la librairie Kendo UI.

  Cela amène une meilleure homogénéité des différents types d'attributs, ainsi qu'une plus grande souplesse.

Au-delà de ces aspects visuels, chaque attribut a été construit de manière à ce que ses éléments soient facilement adressables par CSS, facilement surchargeables au moyen de JavaScript. Nous allons exploiter cette nouvelle souplesse dans les chapitres suivants.