Vous avez
une question ?
Un projet ?

Contactez nous !
 

Contactez-nous

Vous avez une question ? un projet ? 
Vous souhaitez plus d'informations sur un produit ? sur notre offre ? 
Contactez-nous, on vous répond sous 4H.

Bonita BPM 7 : exploration technique du UI designer

Bonita fait l’excellent choix de ne pas réinventer la roue et de répondre aux attentes de ses utilisateurs !

Pour le CSS, la nouvelle version utilise le designer Bootstrap qui est LE framework CSS du moment. Pour le JS, c’est massivement Angular, LE framework JS qui est mis en avant. Pour les aspects techniques des projets, une excellente nouvelle donc : fini les frameworks maisons difficilement maintenables !

Le choix de Boostrap est un choix logique et appréciable. C’est un framework CSS réputé et répandu, de nombreux thèmes existent déjà. Au besoin, l’écriture d’un nouveau thème est une tâche usuelle.

Nouveauté importante de Bonita 7 : le "UI designer", il permet de réaliser des interfaces de formulaire de façon beaucoup plus fine qu’avant. La génération du process est bien dé-corrélée de l’affichage des formulaires. Le designer est l’éditeur de page et de formulaire, il embarque donc toute la partie visible des processus.

Des assistants permettent la configuration des formulaires sans nécessiter de connaissance Angular, une sensibilité est tout de même un plus lorsqu’on commence à exploiter les validations avancées, par exemple. La création de widgets personnalisés nécessite elle une connaissance du framework JS (définition de directive). C’est ce qui marque lorsqu’on découvre le designer, Angular est utilisé directement, sans surcouche ; le designer accompagne le développeur sans le gêner avec des surcouches obscures. Notons qu’il est possible de réaliser des validations simples, sans connaissance technique. Avec les compétences adéquates, c’est toute la puissance d’Angular qui est disponible.

Le meilleur des 2 mondes donc !

L’UI designer est une application web.

L’éditeur de page est un éditeur assez classique :

  • Palette de composants
  • Canevas de travail
  • Propriété du composant sélectionné
  • Déclaration de variable
  • Déclaration des assets

L’éditeur de widgets permet d’accéder à la directive Angular sous-jacente :

  • Propriété / signature du composant
  • Contrôle
  • Template

Le designer est disponible en 2 éditions : "communautaire" et "souscription". Cette dernière propose, en plus de la première, la notion de "fragment". C’est-à-dire de groupes de widgets isolés et packagés. Cette fonctionnalité permet de simplifier la maintenance et d’assurer le découplage des composants.

Le designer génère des interfaces compatibles Bootstrap. Ce framework propose une grille de 1 à 12 colonnes. Comme tout bon framework CSS actuel, c’est un framework responsive. Sans effort particulier, les formulaires générés seront responsives ! De plus, Bootstrap propose beaucoup de composants d’interaction évolués et d’icônes.

Il est agréable de voir que l’éditeur s’oriente vers des solutions "standards" / "habituelles" du marché. Cela lui permet de se concentrer sur son cœur de métier, mais cela permet aussi aux utilisateurs du studio d’utiliser leurs connaissances de ces frameworks courants.

Autres bonnes nouvelles, la contingence entre widgets est maintenant disponible dans la version communautaire. Cette fonctionnalité était jusque là réservée à la version "souscription".

Certaines questions pourraient être creusées :

  • Quelle est la structure de données stockant la meta-modélisation des formulaires ?
  • Pourra-t-on éditer rapidement un métamodèle avec un éditeur texte basique ?
  • Pourra-t-on versionner le travail effectué dans le designer (Git, SVN, ...) ?
  • Est-ce que la construction des éléments à partir du métamodèle peut être industrialisée ?

 

La vidéo du webinar est disponible en ligne :

 
Romain Gonord
Auteur de l’article

Romain Gonord

Expert technique

Avis des internautes

comments powered by Disqus