Introduction
Dans un blog précédent, j’ai expliqué comment utiliser une application Polymer se trouvant dans un plug-in Nuxeo en tant que widget JSF via Nuxeo Studio. Aujourd’hui, nous allons voir comment créer une application Polymer personnalisée en utilisant seulement Nuxeo Studio.
Ce plug-in est idéal pour gérer des cas d’utilisation complexes et pour proposer une expérience agréable, personnalisée et moderne aux utilisateurs par l’intermédiaire de Nuxeo Studio. Mais je n’étais cependant pas satisfait par la complexité de l’ensemble. Pour un utilisateur de Studio ou un développeur Web, une maîtrise minimum de Java est nécessaire pour concevoir un package Nuxeo, même pour une application Polymer. Cela représente néanmoins une phase d’apprentissage supplémentaire. Notre outil de création de code aide beaucoup, mais ça reste cependant trop complexe pour des cas d’utilisation basiques. Je voulais quelque chose de vraiment plus simple.
Veuillez noter que pour rester le plus concis possible, je ferai référence aux widgets ou aux tableaux de bord Polymer avec le terme « applications Polymer ». C’est techniquement juste car les éléments que je vais décrire ici restent encapsulés dans une application Polymer, même s’ils sont affichés sous forme de widgets ou de tableaux de bord.
Les clés du royaume
S’il est possible de définir du contenu Polymer personnalisé dans Nuxeo Studio, c’est parce que Nuxeo Content Services Platform inclut déjà certaines applications Polymer prêtes à l’emploi. Plus précisément, il y a deux applications intégrées.
Permissions
L’onglet Permissions est une application Polymer intégrée :
Analytique
Les onglets d’analytique sont également des applications Polymer intégrées :
Ressources réutilisables
La clé pour bénéficier de ces fonctionnalités est d’importer les fichiers nécessaires à partir de l’une de ces applications via votre modèle XHTML. Par exemple, pour utiliser les dépendances de l’onglet Permissions, il faut importer :
<h:outputscript src="/bower_components/webcomponentsjs/webcomponents-lite.js" target=""><h:outputscript src="/bower_components/moment/min/moment-with-locales.min.js" target=""><nxr:import src="/permissions/elements/elements.vulcanized.html" target="">
Pour utiliser les dépendances des onglets d’analytique, la dernière ligne doit être modifiée en :
<nxr:import src="/analytics/elements/elements.vulcanized.html" target="">
Ces imports établissent un modèle de widget ou d’organisation avec le framework nécessaire pour concevoir des applications Polymer en passant par Nuxeo Studio.
La différence entre les deux imports se trouve dans la liste des éléments Polymer disponibles. Les deux applications fournissent le framework nécessaire, mais chaque application dispose d’un ensemble unique d’éléments (définis dans le fichier “elements.vulcanized.html”). Si vous souhaitez analyser en détail la liste des éléments, je vous conseille de jeter un œil au fichier “elements.html” de chaque application. Ils se trouvent dans le répertoire “nuxeo.war” de votre serveur et sont également disponibles sur GitHub :
Connecter tous les éléments
La principale différence entre la solution basée sur des plug-ins et celle-ci réside dans le fait que le modèle XHTML doit contenir tout ce dont l’application Polymer a besoin (par ex. CSS, HTML et JavaScript dans un même fichier). Voici un graphique qui explique la répartition du contenu dans la base documentaire :
` <h:panelgroup layout=”block” xmlns=”http://www.w3.org/1999/xhtml" xmlns:h=”http://java.sun.com/jsf/html" xmlns:nxr=”http://nuxeo.org/nxweb/resources" style=”overflow: hidden”><h:outputscript src=”/bower_components/webcomponentsjs/webcomponents-lite.js” target=””><h:outputscript src=”/bower_components/moment/min/moment-with-locales.min.js” target=””><nxr:import src=”/analytics/elements/elements.vulcanized.html” target=””>
</nxr:import></h:outputscript></h:outputscript></h:panelgroup>
Comme vous pouvez le voir, ce modèle HTML contient de la CSS pour contrôler l'apparence de l'application, du HTML pour relier le contenu Polymer et du JavaScript pour traiter les données renvoyées par les appels vers l'élément nuxeo-repository-data.
Un exemple plus détaillé est disponible [ici](https://github.com/nuxeo-sandbox/nuxeo-labs-studio/tree/master/home-tab-analytics). Celui-ci contient en plus un tableau de bord et un nouvel onglet dans l'accueil.
## Conseils
### Quels sont les widgets disponibles ?
Je vous conseille de jeter un œil au fichier "elements.html" pour chaque application. Ils se trouvent dans le répertoire "nuxeo.war" de votre serveur et sont également disponibles sur GitHub :
- [Analytique](https://github.com/nuxeo/nuxeo/blob/master/nuxeo-features/nuxeo-admin-center/nuxeo-admin-center-analytics/src/main/elements/elements.html) - [Permissions](https://github.com/nuxeo/nuxeo-ui-elements/blob/master/nuxeo-ui-elements.html)
### Désactiver les onglets Ajax
L'intégration d'applications Polymer avec JSF peut poser problème car, lorsque le support Ajax est activé, JSF effectue des modifications irréversibles de l'arbre DOM. Il vaut mieux donc désactiver le support Ajax pour tous les onglets qui contiennent du contenu Polymer. Par exemple, pour un onglet nommé "DomainSummary", cette extension XML désactivera le support Ajax :
``` <extension target="org.nuxeo.ecm.platform.actions.ActionService" point="actions"><action id="DomainSummary"><properties><property name="ajaxSupport">false</property></properties></action></extension>
Et si ça ne suffit pas ?
Jetez un œil à nuxeo-labs-studio-elements. Ce plug-in contient une bibliothèque plus importante d’éléments Polymer (dont Google Chart). Pour l’utiliser, il vous suffit simplement de faire quelques ajustements :
- Installez le plug-in sur votre serveur. - Changez l’import du fichier “elements.vulcanized.html” pour qu’il pointe vers “/nuxeo-labs-studio-elements/elements”.
Conclusion
La plupart de mes blogs cette année traitent, de près ou de loin, de Polymer et aux composants Web, ce qui peut laisser penser que c’est mon principal intérêt. Et c’est vrai. Travailler avec Polymer a été l’une des expériences les plus enrichissantes de ma carrière.
Je suis vraiment content que Nuxeo Studio puisse s’appuyer sur cette technologie afin de donner à l’application Nuxeo un nouveau souffle avec du contenu plus moderne et réactif et une plus grande flexibilité.
Un autre avantage indéniable de ce type de projet est que les compétences Polymer développées ici vous seront utiles si vous devez travailler avec la nouvelle UI Web Nuxeo, qui est basée sur des composants Web utilisant également Polymer. C’est définitivement une période excitante pour Nuxeo.</nxr:import></nxr:import></h:outputscript></h:outputscript>