Follow sidelabs on Twitter

MM:View:Datagrid/fr

From SIDE-Labs.org

BlueXML Datagrid Framework est un composant qui permet de changer facilement le widget utilisé pour l'affichage de données sous forme de tableaux. On peut ainsi changer de jeu de fonctionnalités. Cette page décrit l'utilisation du framework et en donne une illustration.

Contents

Conventions

  • Le framework est accessible à une URL dépendant de l'installation.
  • La configuration et l'interaction avec le framework se font par le biais de paramètres rajoutés à l'URL, de façon standard: la liste des paramètres est séparée de l'URL par un point d'interrogation chaque paramètre(?) et chaque paramètre est séparé du précédent par un '&'. En outre, un signe d'égalité (=) sépare le paramètre de sa valeur.
  • Les apostrophes et guillemets ne sont pas admis dans la liste de paramètres.
  • Tout widget (composant) rajouté au framework doit fournir un fichier JavaScript contenant les éléments nécessaires à la création et à la configuration du widget. En l'occurrence, une fonction d'initialisation dont le prototype est standardisé doit y être disponible.
  • Le composant rajouté dispose d'une valeur d'appel choisie pour le désigner. Cette valeur est utilisée par le framework pour accéder aux fichiers adéquats. Ainsi, un composant nommé "xxx" définit implicitement un nom de package (ViewDataGrid_xxx) et un nom de fichier JS (ViewDataGrid_xxx.js). Le composant peut également fournir une feuille de style CSS. Dans ce cas, le nom implicite est ViewDataGrid_xxx.css. Ces valeurs par défaut peuvent être changées et spécifiées par les paramètres appropriés.
  • Le nom de package définit également le namespace dans le fichier JavaScript.

Paramétrage

Cette section liste les paramètres (sensibles à la casse) pris en charge. Ils doivent être fournis en zéro ou un exemplaire. L'ordre des paramètres n'a pas d'importance.

Les paramètres disponibles sont:

  • viewType: change le widget d'affichage des données. Valeurs disponibles (sans les guillemets): "dhtmlx", "dojo".
  • dir: indique le chemin d'accès qui sert de racine aux différents fichiers de widget (scripts, styles, etc.). Sa valeur est une URL standard, sans "/" terminal.
  • package: indique la base du nom des fichiers, sans l'extension.
  • jsfile: indique le nom complet du fichier JavaScript (base de nom et extension). Avec dir, ce paramètre permet de définir le chemin d'accès complet au fichier.
  • cssfile: indique le nom complet du fichier de style CSS. Utilisé avec dir, il permet également de définir un chemin d'accès complet. La feuille de style étant facultative, le paramètre peut ne pas être spécifié.

Rajout d'un composant

Le composant additionnel est fourni dans un package comprenant un fichier JavaScript et, éventuellement, un fichier de feuille de style. Les noms de package et de fichiers sont, par défaut, déterminés par le nom choisi pour le composant. Ainsi, à supposer que le DataGrid de Dojo ait été rajouté avec le nom "dojo", on a:

  • nom de package: ViewDataGrid_dojo
  • fichier JavaScript: ViewDataGrid_dojo.js
  • fichier CSS: ViewDataGrid_dojo.css

La procédure de mise en place d'un nouveau composant comprend les étapes ci-dessous:

  • Choisir un nom d'appel pour le nouveau composant, à transmettre via le paramètre viewType.
  • Définir un nom de package à spécifier via le paramètre package. Le paramètre peut être omis si les noms de fichier utilisent le schéma de nommage par défaut indiqué plus haut. Dans le cas contraire, il est obligatoire même si le paramètre jsfile est fourni.
  • Définir un répertoire dans lequel le package est disponible. Ce répertoire est une URL valide, sans "/" terminal. Si le package est dans le répertoire par défaut des packages du framework (dépendant de l'installation), le paramètre peut être omis.
  • Dans le cas où des feuilles de style sont nécessaires, fournir le fichier CSS par le paramètre cssfile. En cas de styles répartis dans plusieurs fichiers, utiliser des directives "@import" dans cssfile. Ce paramètre peut être omis si le fichier est nommé ViewDataGrid_xxx.css ou {nom_du_package}.css, ou si aucun style supplémentaire n'est défini.
  • Si le fichier JavaScript n'est pas nommé ViewDataGrid_xxx.js ou {nom_du_package}.js, le spécifier via le paramètre jsfile.
  • Le fichier désigné par jsfile (ou ViewDataGrid_xxx.js ou {nom_du_package}.js) doit contenir une fonction "initializeFromKerBlueMD" dans le namespace package. Cette fonction reçoit en argument un objet JSON décrivant les données et la source de données. Elle doit retourner une instance du widget géré par le package.
  • Si des scripts sont nécessaires au fonctionnement du package, une modification du fichier de template FreeMarker (dont le nom et l'emplacement dépendent de l'installation) est indispensable. L'inclusion de ces scripts devrait être conditionnée par le nom du widget afin de conserver, pour tous les widgets, l'inclusion des seuls scripts pertinents.

Illustration

Supposons que nous souhaitions rajouter le widget YUI Datatable à BlueXML DataGrid Framework. Le nom de package choisi étant "yui", les fichiers du package sont ViewDataGrid_yui.js et ViewDataGrid_yui.css. Dans l'hypothèse où le package est stocké à l'adresse http://www.wss.com/BDF/yui, le paramètre dir doit référencer cette adresse.

La liste des paramètres est alors:

?viewType=yui&dir=http://www.wss.com/BDF/yui

Étant donné que le rôle du package à inclure est de servir d'adaptateur entre le modèle (fourni au format JSON) et les spécificités du widget, il est a priori nécessaire d'inclure les fichiers du widget (en l'occurrence, des scripts Yahoo UI). On rajoutera donc une section dans le fichier de template, conditionnée par une comparaison avec le nom du widget:

<#if gridtype=="yui">
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
  ...
</#if>