4D Ajax Framework : Construire et intégrer des "Dashboards" et des graphes

4D Ajax Framework : Construire et intégrer des "Dashboards" et des graphes Par Joseph RESUELLO, Technical Support Engineer, 4D Inc Note technique 4D-200904-08-FR Version 1 - Date 1 avril 2009 Résumé Cette note technique se concentre sur la construction et l'intégration des tableaux de bord dans une page personnalisée. Un dashboard et un graphe seront construits et intégrés. 4D Notes techniques Copyright 1985-2009 4D SAS - Tous droits réservés Tous les efforts ont été faits pour que le contenu de cette note technique présente le maximum de fiabilité possible. Néanmoins, les différents éléments composant cette note technique, et le cas échéant, le code, sont fournis sans garantie d'aucune sorte. L'auteur et 4D S.A. déclinent donc toute responsabilité quant à l'utilisation qui pourrait être faite de ces éléments, tant à l'égard de leurs utilisateurs que des tiers. Les informations contenues dans ce document peuvent faire l'objet de modifications sans préavis et ne sauraient en aucune manière engager 4D SA. La fourniture du logiciel décrit dans ce document est régie par un octroi de licence dont les termes sont précisés par ailleurs dans la licence électronique figurant sur le support du Logiciel et de la Documentation afférente. Le logiciel et sa documentation ne peuvent être utilisés, copiés ou reproduits sur quelque support que ce soit et de quelque manière que ce soit, que conformément aux termes de cette licence. Aucune partie de ce document ne peut être reproduite ou recopiée de quelque manière que ce soit, électronique ou mécanique, y compris par photocopie, enregistrement, archivage ou tout autre procédé de stockage, de traitement et de récupération d'informations, pour d'autres buts que l'usage personnel de l'acheteur, et ce exclusivement aux conditions contractuelles, sans la permission explicite de 4D SA. 4D, 4D Calc, 4D Draw, 4D Write, 4D Insider, 4ème Dimension, 4D Server, 4D Compiler ainsi que les logos 4e Dimension, sont des marques enregistrées de 4D SA. Windows,Windows NT,Win 32s et Microsoft sont des marques enregistrées de Microsoft Corporation. Apple, Macintosh, Power Macintosh, LaserWriter, ImageWriter, QuickTime sont des marques enregistrées ou des noms commerciaux de Apple Computer,Inc. Mac2Win Software Copyright 1990-2002 est un produit de Altura Software,Inc. 4D Write contient des éléments de "MacLink Plus file translation", un produit de DataViz, Inc,55 Corporate drive,trumbull,ct,usa. XTND Copyright 1992-2002 4D SA. Tous droits réservés. XTND Technology Copyright 1989-2002 Claris Corporation.. Tous droits réservés ACROBAT Copyright 1987-2002, Secret Commercial Adobe Systems Inc.Tous droits réservés. ACROBAT est une marque enregistrée d'adobe Systems Inc. Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs. 1 / 12

4D Ajax Framework : Construire et intégrer des "Dashboards" et des graphes Résumé Parmi les nouvelles fonctionnalités du 4D Ajax Framework v11, on trouve l'utilisation des Tableaux de bord (Dashboards). Les tableaux de bord sont des "widgets", mini-applications qui fournissent des informations visuelles et numériques en temps réel sur des pages web. Cette note technique se concentre sur la construction et l'intégration des tableaux de bord dans une page personnalisée (déjà fournie). Un dashboard et un graphe seront construits et intégrés. Introduction Un dashboard affiche des informations mises à jour constamment, pour mieux visualiser des performances et des chiffres. Il y a toujours une source de données (dans notre cas, ce sera la base de données 4D) qui met à jour les données du dashboard. En tant que fonctionnalité du Framework 4D Ajax, les tableaux de bord sont faciles à construire avec l'éditeur de dashboard. Les chiffres que les tableaux de bord mettent à jour dépendent entièrement de la base de données. Avec le Web 2.0 Pack v11.2, vous trouverez une base de démo, "Stocks", qui simule toutes les minutes une synchronisation de cours d'actions en bourse. Pour cette note technique, la base exemple fournie simulera plus d'informations générales du chiffre d'affaires d'une société internationale et sur sa performance mensuelle. Les thèmes couverts sont : Construction d'un tableau de bord en utilisant le panneau de configuration ; Intégration du dashboard dans la page web ; Construction du graphe en utilisant l'outil du panneau de configuration ; Intégration du graphe dans la page web. Une connaissance Javascript est recommandée mais pas nécessaire. Avant de commencer... Voici la liste des éléments requis : 2 / 12

La base exemple "Dashboard" est incluse avec ce document et est fournie en deux versions : - le code source interprété en 4Dv11 SQL - base enginée en 4D 2004. Installez le framework 4D Ajax v11 dans la base en interprété si vous avez acquis le Web 2.0 Pack. Ceci vous permet d'accéder aux Developer Hooks et de mettre en place une personnalisation dans la base de données. Autrement, utilisez la version enginée de la base de donnée. La base enginée possède tous les tableaux de bord déjà créés pour vous. Pour commencer à créer un dashboard : - installez le 4D Ajax Framework pour la base exemple en version 11 ; - après installation, ajoutez la ligne suivante dans la méthode projet Dax_DevHook_Login: $loggedin_b:=($username_t="guest") Connectez-vous à http://localhost:8080/index.html dans votre navigateur. Connectez-vous au framework en tant que "Administrator" (pas de mot de passe). Cliquez sur le bouton "Panneau de configuration" et allez sur l'onglet "Gestionnaire de Dashboard" Maintenant vous pouvez construire votre dashboard. 3 / 12

Construire un tableau de bord en utilisant le panneau de configuration Nous allons construire un tableau de bord qui montrera le revenu mensuel pour janvier 2008 pour la société. Le revenu de janvier 2007 sera aussi affiché, ainsi que la tendance mensuelle (pourcentage de croissance ou de baisse par rapport au mois précédent). Pour commencer, cliquez sur le lien pour créer un nouveau tableau de bord : Choisissez Regional Breakdown comme sélection. Nommez le tableau de bord Regional Revenue Ne sélectionnez pas "Support pour Iphone". Cliquez sur "Démarrez l''éditeur de Dashboard" Note : les dashboards pour le client sont complètement différents des dashboards pour l'iphone, même s'ils sont construits avec le même éditeur. Chacun possède ses propres fonctionnalités et est spécialement optimisé pour sa plateforme respective. Glissez-déposez Region, Current Monthly Revenue, Last Year s Revenue, et Monthly Trend dans l'éditeur. Personnalisez l'entête : Style Nous avons sélectionné un en-tête (dans Entête Détail) puis nous avons chargé l'inspecteur. Voici l'inspecteur. Dans l'onglet "Style", sont affichées les différentes façons dont l'en-tête peut être modifié. Sélectionnez l'entête "Région" : largeur colonne : 85 px Sélectionnez "Current Monthly Revenue" : largeur colonne 110 px, nom : "Janvier 08" 4 / 12

Sélectionnez "Last year's Revenue " : largeur colonne 110 px, nom "Janvier 07". Sélectionnez "Trend", largeur colonne 85 px, nom "Tendance" Choisissez le style CSS "Menthe". Sauvegardez le dashboard : Intégration du dashboard dans la page web Dans la page "sample.html" (que vous trouverez dans le dossier Webfolder ), ajoutez dans la fonction onafterinit() dans l'élément <script> : dashboardrevenue = new dax_dashboardviewer('regional Revenue',$('dashboardRegion')); dashboardrevenue.viewport.showverscrollbar(false); dashboardrevenue.setrefreshinterval(10000); dashboardrevenue.refresh(); le même code en image : Ce code intégrera le dashboard "Regional Revenue" dans le <div> "dashboardregion" de la page HTML. <div style="float: left; margin: 5px; width: 390px; padding-left: 15px"> <div style="width: 390px"> <div class="dashboard_title" style="width: 384px; padding-left: 5px;">Chiffres d'affaires par zone</div> 5 / 12

<div id="dashboardregion" class="border_grey" style="width: 390px; height: 158px;"> </div> Félicitations! vous avez réussi à créer un dashboard et à l'intégrer dans une page HTML personnalisée. Pour plus d'informations sur la façon de personnaliser ces dashboards, voir l'annexe en fin de note. Construire un graphe en utilisant la boîte à outil Nous allons construire un dashboard graphe affichant les chiffres d'affaires du Japon, basés sur les mois précédents. Note : un concept important à comprendre est que les dashboards de type Chart sont construits en utilisant les Developer Hook 4D Dax_DevHook_DefineChart, pas avec l'éditeur de dashboard. La méthode Developer Hook détermine quelles sont les valeurs (xy values, x-axis labels, y-axis labels, etc.) définissant le graphe. Un dashboard factice doit être créé en utilisant l'éditeur, et la boîte à cocher "Ajouter Graph" doit être cochée pour déclencher le Developer Hook : Par dashboard "factice" nous voulons dire qu'il n'a pas d'importance. Il est juste créé comme indicateur pour le Developer Hook. Pour commencer, cliquez sur le lien "Ajouter" dans le dialogue "Gestionnaire de Dashboard". Choisissez la sélection Monthly Revenue. Nommez le dashboard Japon Revenue Ne sélectionnez pas "Support pour iphone". Cliquez sur "Démarrez l'éditeur de dashboard" Rappel : les dashboards pour le client sont totalement différents des dashboards pour iphone, même s'ils sont construits avec le même éditeur. Chaque catégorie possède ses propres fonctionnalités et sont spécifiquement optimisés pour leur plateforme respective. Choisissez "Région" dans l'éditeur. Vérifiez bien que la case à cocher "Ajouter graph" est cochée. 6 / 12

Dans la méthode Developer Hook Dax_DevHook_DefineChar, ajoutez le Au cas ou suivant : Au cas ou : ($SelectionName_t="Monthly Revenue") & ($ReportName_t="Japon Revenue") & ($ReportOwner_t="public") ` déclaration des tableaux TABLEAU REEL(value_ar;5) `tableau contenant les valeurs (doit utiliser un tableau process, type REEL) C_REEL($minYvalue_r;$maxYvalue_r) TABLEAU TEXTE(xlabel_at;4) `étiquette sur l'axe des X (doit être une variable tableau texte process) TABLEAU TEXTE(ylabel_at;5) `*** étiquette sur l'axe des Y (doit être une variable tableau `texte process, et doit avoir 5 éléments) CHERCHER([Monthly Revenue];[Monthly Revenue]Month="Septembre";*) CHERCHER([Monthly Revenue]; & ;[Monthly Revenue]Year="2007") value_ar{1}:=([monthly Revenue]Spending Total) CHERCHER([Monthly Revenue];[Monthly Revenue]Month="Octobre";*) CHERCHER([Monthly Revenue]; & ;[Monthly Revenue]Year="2007") value_ar{2}:=([monthly Revenue]Spending Total) CHERCHER([Monthly Revenue];[Monthly Revenue]Month="Novembre";*) CHERCHER([Monthly Revenue]; & ;[Monthly Revenue]Year="2007") value_ar{3}:=([monthly Revenue]Spending Total) CHERCHER([Monthly Revenue];[Monthly Revenue]Month="Décembre";*) CHERCHER([Monthly Revenue]; & ;[Monthly Revenue]Year="2007") value_ar{4}:=([monthly Revenue]Spending Total) CHERCHER([Monthly Revenue];[Monthly Revenue]Month="Janvier";*) CHERCHER([Monthly Revenue]; & ;[Monthly Revenue]Year="2008") value_ar{5}:=([monthly Revenue]Spending Total) vmax:=max([monthly Revenue]Spending Total) xlabel_at{1}:="oct '07"s xlabel_at{2}:="nov '07" xlabel_at{3}:="déc '07" xlabel_at{4}:="jan '08" ylabel_at{1}:="0" ylabel_at{2}:=chaine(ent(vmax*25)) ylabel_at{3}:=chaine(ent(vmax*5)) ylabel_at{4}:=chaine(ent(vmax*75)) ylabel_at{5}:=chaine(vmax) ` *** les variables qui suivent seront passées à la méthode `DAX_Dev_SetDashboardChart comme ` *** 5ème et 6ème paramètres (Optionnel). `Si omis, DAX_Dev_SetDashboardChart ` *** calculera automatiquement les valeurs mini et maxi `en se basant sur les valeurs du tableau ylabel_at $minyvalue_r:=0 `*** doit correspondre à la valeur minimum dans ylabel_at 7 / 12

Fin de cas $maxyvalue_r:=vmax `*** doit correspondre à la valeur maxi dans ylabel_at DAX_Dev_SetDashboardChart (->xlabel_at;->ylabel_at;->value_ar; $minyvalue_r;$maxyvalue_r) Note : Nous insistons : la sélection et les contenus du dashboard n'ont pas d'effets sur le graphe que nous construisons. Le point le plus important à garder à l'esprit est de valider le nom du dashboard (dans notre exemple "Japon Revenue"), pour que le code puisse prendre effet. Intégrer le graphe dans la page web Ajoutez le code suivant dans la page "sample.html" (que vous trouverez dans le dossier "'Webfolder"- dans la fonction onafterinit() dans l'élément <script> : mychart = new dax_chartviewer('japon Revenue',$('chartJapan')); mychart.setrefreshinterval(180000); mychart.refresh(); Ce code intégrera le graphe dashboard "Japon Revenue" dans la page HTML, dans le <div> "chartjapan". Conclusion Cette note technique met en avant la construction des dashboards en utilisant le gestionnaire de dashboard et en les intégrant dans une page personnalisée avec quelques lignes de JavaScript. Ces dashboards peuvent fonctionner sur n'importe quel navigateur, sur Mac ou PC. Vous devriez maintenant être plus à l'aise en utilisant l'éditeur de dashboards. Vous devriez aussi avoir une meilleure compréhension de la structure des documents HTML lorsque vous y insérez du code JavaScript pour intégrer les dashboards. Pour plus d'informations sur le langage JavaScript pour modifier les dashboards et les graphes, référez-vous au Daxipedia (http://daxipedia.4d.com ). 8 / 12

Note à propos de 4D Web 2.0 Pack Les produits contenus dans 4D web 2.0 Pack sont le point de départ de beaucoup d'autres produits 4D. Comme le 4D Web 2.0 pack est un produit basé sur une souscription, il est prévu que de nouvelles versions sortent régulièrement. Notez que cette note technique est basée sur 4D Ajax Framework v11 release 2 (11.2). De nouvelles fonctionnalités étant susceptibles d'être implémentées, cette note technique peut devenir obsolète. (plus rapidement qu'avec d'autres produits 4D). Ressources Pour des informations récentes sur 4D Ajax Framework, consultez la documentation la plus à jour : http://www.4d.fr/support/docs/4thdimensionmanuals.html#w20p Vérifiez aussi le wiki 4D Web 2.0 Pack : http://daxipedia.4d.com Pour les informations les plus récentes ou pour trouver comment vous procurer le framework, voir : http://www.4d.fr/products/4dweb20pack.html Annexe Cette annexe vous donne les instructions pour personnaliser les dashboards. Elle sert aussi à fournir plus d'explications sur les concepts clefs. 9 / 12

La page HTML "sample.html" qui vous est fournie possède déjà quelques étapes mises en place et déjà complété pour vous. Pour ceux que ça intéresse de créer complètement leur application, vous pouvez suivre ces étapes : 1) Fichiers liés : si vous construisez votre page, vérifiez bien que vous ajoutez les appels suivants de façon à ce que les objets 4D Ajax Framework sur votre page se comportent comme ils doivent le faire. <link rel="stylesheet" href="dax/themes/basic/basic.css" media="all" type="text/css" title="xpress" /> <link rel="stylesheet" href="dax/themes/dash/dash.css" media="all" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript" src="dax/dev/callbacks.js"></script> <script language="javascript" type="text/javascript" src="dax/js/framework.js"></script> <script language="javascript" type="text/javascript" src="dax/js/dax.js"></script> 2) Information de connexion : deux blocs de code doivent être ajoutés pour que les objets du Framework 4D Ajax sur la page puissent avoir accès aux données. Premièrement, ajoutez le code JavaScript dans la balise <head> : <script language="javascript" type="text/javascript"> function dax_load() { Login("Guest", "a"); } </script> Puis modifiez la balise <body> pour qu'elle ressemble à ceci : <body onload="dax_load();""> Note : Souvenez-vous que lorsque vous utilisez cette technique, l'utilisateur et le mot de passe (dans ce cas, l'utilisateur est "Guest" et le mot de passe est "a", doivent être validés dans la méthode-projet Developer Hook Dax_DevHook_Login : Notes à propos du graphe : 10 / 12

1) Même si le dashboard facture n'a pas d'effet sur le graphe, il est préférable de choisir un dashboard simple (c'est-à-dire quelques colonnes, avec le moins d'informations possibles). Les informations censées remplir le tableau de bord sont toujours envoyées avec le graphe au navigateur, ainsi il est préférable de garder un trafic léger en étant sûr que la sélection est la plus petite possible. 2) Les graphes sont limités à 500 valeurs. Ainsi seuls 500 points peuvent être tracés sur un graphe. En envoyant plus d'informations, vous risquez de compromettre l'intégrité du graphe. Pour personnaliser le dashboard "Regional Revenue" Voici comment vous pouvez personnaliser ce dashboard : 1) Format : vous pouvez formater, dans la zone "Détail", les nombres qui représentent les chiffres d'affaires ( ) et la tendance (%). Sélectionnez les colonnes "current monthly revenue" et "last year's revenue"(dans la zone "Détail"). Vous chargez ainsi la palette "Property Inspector". En choisissant "Formattage" vous pourrez choisir le format cidessous : Faites de même pour la colonne "monthly trend" et choisissez le formatage "%" : Sauvez le dashboard : 11 / 12

Rechargez la page "sample.html" et visualisez le dashboard qui devrait ressembler à ceci : 12 / 12