"Mashups" avec 4D Ajax Framework

Création de "Mashups" avec 4D Ajax Framework
Par Jason T. SLACK, Technical Support Engineer, 4D Inc.
Note technique 4D-200701-03-FR
Version 1 - Date 1 janvier 2007
Résumé
Le Web 2.0 effectue de rapides avancées dans le monde des applications Client Riche internet.
Les sites Web interactifs sont devenus une partie essentielle du web, que beaucoup d'utilisateurs souhaitent
avoir. Le Framework 4D Ajax fournit la meilleure plate-forme pour construire des applications internet
riches dans 4D. Cette note technique met l'accent sur la création de "Mashups" en utilisant le Framework 4D
Ajax.
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/8
Création de "Mashups" avec 4D Ajax Framework
Résumé
Le Web 2.0 effectue de rapides avancées dans le monde des applications Client Riche internet.
Les sites Web interactifs sont devenus une partie essentielle du web, que beaucoup d'utilisateurs souhaitent
avoir. Le Framework 4D Ajax fournit la meilleure plate-forme pour construire des applications internet
riches dans 4D. Cette note technique met l'accent sur la création de "Mashups" en utilisant le Framework 4D
Ajax.
Installation et documentation développeur
Cette note technique ne couvre pas l'installation du composant 4D Ajax Framework ni la documentation
développeur. Si vous souhaitez lire la documentation Installation ou Développement, vous pouvez
télécharger les documents ici :
http://www.4d.fr/support/docs/4thdimensionmanuals.html#w20p
Un "Mashup" est...
Un "Mashup" est un site Web ou une application qui combine plus d'une source en une solution intégrée. Le
contenu des "Mashups" trouve typiquement leur origine dans une interface publique ou des API. Beaucoup
de sociétés fournissent des APIs que les développeurs Internet peuvent intégrer à leurs applications. Les
sociétés qui font cela sont Google, eBay et Yahoo, etc. pour en nommer quelques-unes.
Un Mashup Google Maps...
Cette section explique comment construire un Mashup Google Maps dans le client 4D Ajax Framework.
Etape 1 – Créez une nouvelle base de données
Créez une nouvelle base vide.
Etape 2 – Utilisez la [Table 1] en Structure
Renommez la [Table 1] par défaut par [Informations Adresse]
Ajoutez 4 champs :
Champ
Nom
Type
Rue
Alpha
40
Ville
Alpha
20
Etat
Alpha
2
CodePostal
Alpha
5
Etape 3 – Générez les formulaires par défaut
2/8
Passez en Mode Utilisation et créez les formulaires par défaut. Saisissez quelques enregistrements de façons
à avoir des données à utiliser.
Note : les adresses doivent être valides pour être utilisées par Google Map.
Etape 4 – Installez le composant 4D Ajax Framework
Référez-vous pour cela au guide d'installation si nécessaire.
Etape 5 – Testez l'installation de 4D Ajax Framework
Lorsque vous avez installé 4D Ajax Framework, testez l'installation en choisissant Tester le serveur Web à
partir du Menu Exécuter. Si tout se passe bien, vous devriez avoir le résultat suivant :
Cliquez sur Sign In pour vous connecter et saisissez :
En Username : "Administrateur", Password : ""
(il n'y a pas de mot de passe).
Après connexion, vous devriez arriver à cet écran :
3/8
Nous sommes prêts pour créer notre Mashup Google Maps.
Note : si vous cliquez sur le Portlet "Informations Adresse" dans Portal, notez que vous pouvez voir vos
données dans la fenêtre. Si vous double-cliquez sur un enregistrement, vous pouvez l'éditer :
Toutes ces fonctionnalités sont disponibles sans écrire une seule ligne de code dans 4D !
Etape 6 – Créez une DDW (Developer Defined Window)
4/8
L'étape suivante est la création d'une DDW. Les Developer Defined Windows permettent aux développeurs
d'ajouter une fenêtre avec n'importe quel contenu HTML. Le développeur peut avoir une fenêtre qui affiche
un blob HTML ou le contenu de n'importe quel URL valide. Une DDW peut afficher tout ce que vous
affichez dans un navigateur.
Nous devons d'abord définir notre DDW dans les paramètrages de 4D Ajax Framework. Le bouton Settings
se trouve en bas à gauche :
Notez que vous devez être connecté en tant qu'Administrateur pour voir ce bouton.
Cliquez sur ce bouton et vous afficherez le dialogue des paramètres :
Choisissez l'onglet "DDW Manager" pour créer une nouvelle DDW.
Cliquez sur "Create"
Voici les champs à renseigner :
Title
Content
Type
Associated to
GoogleMaps
GoogleMaps
New Window – Link
Other
Puis cliquez sur le bouton "Create". Vous devriez obtenir ceci :
5/8
Après la création de la "DDW", cliquez sur l'onglet "Access Control" dans le dialogue "Settings". C'est ici
que vous mettrez en place l'utilisation de votre nouvelle fenêtre DDW. Vous pouvez grouper quelques
champs ou tous les champs dans la vue Address Info. Pour que le MashUp soit assigné au champ
[Informations Adresse]Rue, sélectionnez-le dans le pop-up :
Une fois que vous l'avez assigné, vous pouvez quitter le dialogue "Settings". Si vous ouvrez la fenêtre de la
sélection, vous pouvez voir que le champ "Rue" apparaît en hyperlien :
6/8
Etape 7 – Ajoutez du code pour enrichir votre DDW
Vous pouvez écrire du code pour enrichir les fenêtres DDW GoogleMaps que vous avez créées. Créez une
nouvelle Méthode projet appelée GoogleMaps. Editez la méthode et collez le code ci-dessous :
TABLEAU ENTIER LONG($Recordnumber_al;0)
C_POINTEUR($TablePointer_p)
$TablePointer_p:=DAX_Dev_DDW_GetAttributes ("TablePointer")
DAX_Dev_DDW_GetAttributes ("RecordNumbers";->$Recordnumber_al)
Si (Taille tableau($Recordnumber_al)>0)
ALLER A ENREGISTREMENT($TablePointer_p->;$Recordnumber_al{1})
Si (Numero dans selection($TablePointer_p->)>0)
$url:="http://maps.google.fr/maps?f=q&"
$url:=$url+"hl=fr&"
$adresse:=[Informations Adresse]Rue+",+"+[Informations Adresse]Ville+",+"
Si ([Informations Adresse]Etat#"")
$adresse:=$adresse+[Informations Adresse]Etat
Fin de si
$adresse:=$adresse+",+"+[Informations Adresse]Code postal
$adresse:=Remplacer chaine($adresse;" ";"+")
$url:=$url+"q="+$adresse+"&ie=UTF8&z"
$url:=$url+"&iwloc=addr"
$0:=$url
Fin de si
Fin de si
Cette méthode tire avantage de l'API GoogleMaps et génère une carte qui correspond à l'adresse sélectionnée.
Fermez l'éditeur de méthode, retournez dans le navigateur, et cliquez sur un lien. Vous devriez voir ceci :
7/8
Vous venez de créer un Mashup avec 4D Ajax Framework !
Conclusion
Avec 4D Web 2.0 Pack, vous avez la possibilité de construire des applications internet riches, combinées
avec la facilité de développement de 4D. Comme vous pouvez le voir avec cette note technique, construire
un Mashup Web 2.0 avec un client 4D Ajax Framework est très facile. Le 4D Ajax Framework est un atout
puissant dans n'importe quel projet 4D.
Ressources annexes :
Guide d'installation et guide de développement de 4D Ajax Framework :
http://www.4d.fr/support/docs/
4D Web 2.0 Pack Wiki:
http://daxipedia.4d.com
8/8