XPages – Migrer une vue

XPages_Logo

Dans cet article nous allons étudier comment migrer en XPages l'un des éléments le plus utilisé dans les applications IBM Notes : Les vues.

2 méthodes vont être utilisées :

  1. Le composant de base "View Panel "
  2. Le composant "Dynamic View Panel"

Exemple : Supposons qu'on ait une vue complexe contenant des icônes, des colonnes calculées, etc... (ce qui correspond à la majorité des vues utilisées).

XPages_ArtViewPanel_Picture_101

Le "View Panel"

La première façon de créer une vue est d'utiliser le composant "View Panel" dans la vue "Controls" du client Domino Designer :

Par Drag & Drop, on ajoute le composant ViewPanel dans le conteneur (ici notre XPage).

L'assistant nous permet dès le départ de configurer notre ViewPanel, en sélectionnant :

1 - Notre vue de départ

2 - Les colonnes à afficher

XPages_ArtViewPanel_Picture_102

Note: En déclarant notre vue via cette boîte de dialogue, la source de données du ViewPanel sera locale au ViewPanel. Elle ne sera donc pas accessible en dehors de celui-ci (parfois nous avons besoin d'utiliser les informations de la vue en dehors du ViewPanel).

On choisit donc la vue et automatiquement l'assistant affiche les colonnes avec leur nom de programmation et leur titre

XPages_ArtViewPanel_Picture_103

La prévisualisation de la vue donne alors ceci :

XPages_ArtViewPanel_Picture_104

On voit que tous les éléments ne sont pas repris comme dans la version d'origine (la colonne icône, le format des nombres)

Il faut donc les modifier manuellement.

Par exemple, la colonne $11 affiche le code de l'icône à la place de l'icône.  Pour afficher l'image associée, on peut utiliser une fonction qui est peu documentée : @ViewIconUrl()

<xp:viewColumn id="viewColumn2" iconSrc="#{javascript:@ViewIconUrl(@TextToNumber(rowData.getColumnValue('$11')))}">            
      <xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value><xp:viewColumnHeader id="viewColumnHeader2"></xp:viewColumnHeader>
</xp:viewColumn>

Le rendu devient alors :

XPages_ArtViewPanel_Picture_105

Ensuite il faut mettre à niveau les colonnes de données numériques, etc... Si l'on a un grand nombre de vues à transformer il est difficile d'industrialiser le développement

L'utilisation d'un composant des Extensions librairies permet un réel gain de productivité : Le Dynamic View Panel (ou Panneau de vue dynamique)

 

Le Dynamic View Panel

Cet outil se caractérise par un rendu automatiquement calculé sans que le développeur ait beaucoup de paramètres à définir.

Les paramètres de bases sont les mêmes

XPages_ArtViewPanel_Picture_201

Le composant se présente comme suit:

XPages_ArtViewPanel_Picture_202

et sans configuration complémentaire, le rendu affiché est le suivant:

XPages_ArtViewPanel_Picture_203

Les colonnes de type icônes sont affichées comme dans le client, les colonnes numériques sont également affichées correctement.

La puissance d'un tel contrôle se fait lorsqu'on a multitude de vues à migrer, il permet alors d'afficher tout type de vues sans à avoir à les migrer une par une.  Il suffit de "calculer" la vue à afficher :

Supposons que l'on passe en paramètres (ou dans une variable session ou autre) le nom de la vue à afficher

L'url de la page est alors du type https://serveur/base/xpage?idVue=ListDB

Pour calculer la vue à afficher on utilise alors le code suivant:

XPages_ArtViewPanel_Picture_303

Ce qui donne :

Pour la vue par défaut :

XPages_ArtViewPanel_Picture_301

Pour une vue spécifique :

XPages_ArtViewPanel_Picture_302
Si on souhaite afficher une XPage spécifique, le code de la XPage devient alors :

(au préalable on a défini le nom de variable 'rowData' qui est associée au View Panel)

XPages_ArtViewPanel_Picture_304

Le composant offre la possibilité d'ajouter un entête et un pied de page (pour ajouter par exemple, un pager, une toolbar, etc ....).

Il reste une dernière personnalisation à effectuer:

Par nature, le composant Dynamique View Panel ouvre les documents affichés en mode édition. Cela peut s'avérer problématique si les droits ne sont pas gérés de manière suffisamment précise.

Pour forcer le Dynamic View Panel à ouvrir les documents en mode lecture, il est nécessaire d'ajouter du code dans l'événement onColumnClick:

 

L'utilisation du Dynamic View Panel permet d'industrialiser à grande échelle les vues (souvent nombreuses) qui ont été créées dans la version originelle des applications.

Associé au composant "Computed XPage", on peut limiter le nombre de composants à créer pour migrer les applications.

 

Enregistrer

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.