4D Ajax Framework Video Player

Transcription

Par Joseph RESUELLO, Technical Support Engineer, 4D Inc
Note technique 4D-200704-12-FR
Version 1 - Date 1 avril 2007
Résumé
Cette note technique montre comment intégrer des objets 4D Ajax Framework dans une page HTML
permettant une interface utilisateur personnalisée. Une page HTML est créée pour jouer les vidéos de 4D
TechTips et les démos 4D Web 2.0 Pack.
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 / 15
Résumé
Cette note technique montre comment intégrer des objets 4D Ajax Framework dans une page HTML
permettant une interface utilisateur personnalisée. Une page HTML est créée pour jouer les vidéos de 4D
TechTips et les démos 4D Web 2.0 Pack.
Cette note technique fournit aux développeurs 4D des instructions pour construire des pages HTML
personnalisées incluant des objets 4D Ajax Framework en utilisant un minimum de javascript et de code
HTML.
Une base exemple est incluse.
Note à propos de 4D Web 2.0 Pack
Les produits dans 4D Web 2.0 Pack sont le point de départ de beaucoup d'autres produits 4D.
Comme 4D Web 2.0 Pack est un produit basé sur la souscription il est attendu une nouvelle version.
Cette note technique est basée sur 4D Ajax Framework 1.1. Comme de nouvelles fonctionnalités sont
implémentées, cette note technique peut devenir obsolète.
Pour plus d'informations sur 4D Ajax 2.0 Framework, consultez la dernière documentation et vérifiez le wiki
:
http://daxipedia.4d.com
Pour les dernières nouveautés à propos de 4D Web 2.0 Pack, regardez :
http://www.4d.com/products/4dweb20pack.html
Introduction
Note : cette note technique comprend une base exemple 4D AF Video player en compilé et en code source.
Ceux qui préfèrent voir le produit fini ou qui n'ont pas de licence peuvent utiliser la version compilée.
L'interface créée pour cette note technique est une implémentation personnelle basée sur les librairies 4D
Ajax Framework. Le Client 4D Ajax Framework est seulement utilisé dans un but de configuration.
Examinons les différentes couches de 4D Ajax Framework :
2 / 15
Notez que le 4D Ajax Framework Client est lui-même une implémentation personnalisée des librairies.
Cette note technique décrit comment construire la base finale étape par étape. Voici un aperçu des étapes à
exécuter (elles seront détaillées plus loin) :
•
•
•
•
•
Installation (installation de 4D Ajax Framework, création des fichiers nécessaires, etc.)
Mise en place d'une grille d'images dans une page HTML
ajout des données ("DataFiller") dans une page HTML
utilisation d'un "IFrame" pour voir les vidéos (les URLs des vidéos sont issues de la base de données).
touches finales.
Installation
4D Ajax Framework Installation
Installez le 4D AF dans la base source : le fichier de structure est "Movies.4DB". Le document d'installation
de 4D Ajax Framework peut être téléchargé ici :
http://www.4d.fr/support/docs/
Note :
3 / 15
La base de données et les méthodes projets mentionnées dans le guide d'installation ont déjà été implémentée
dans la base source. Vous n'avez rien à changer.
Créer une sélection pour grille d'images
Le composant 4D Ajax Framework installé, sur la page d'accueil, connextez-vous en tant qu'administrateur :
Connectez-vous en tant qu'administrateur (Utilisateur : "Administrator", pas de mot de passe).
Une fois le portail affiché, cliquez sur le bouton "Panneau de configuration" en bas, puis choisissez l'onglet
"Contrôles accès".
Choisissez une sélection (dans notre cas une table) et choisissez Grille d'images.
Ces étapes mises en place, vous verrez l'implémentation par défaut d'une grille d'image en cliquant sur la
table "Movies" au niveau du portail. Voici une copie d'écran de la grille d'images :
4 / 15
Dans cette note technique, une grille d'image personnalisée sera créée plus tard.
Création du fichier HTML
L'étape suivante est la création du fichier HTML (en utilisant n'importe quel éditeur HTML de votre choix).
Dans notre exemple, le fichier devra être nommé "index_movies.html".
Voici le code source du fichier "index_movies.html" à sa création :
<html>
<head>
<title>4D Movies</title>
<script language="javascript" type="text/javascript" charset="utf-8"
src="dax/js/localization/resources_en.js"></script>
<script language="javascript" type="text/javascript" charset="ISO-8859-1"
src="dax/js/compile_gz.js"></script>

<link rel="stylesheet" href="/dax/themes/basic/basic_gz.css" media="all"
type="text/css" title="XPress" />
<script type="text/javascript">
<!-</script>
</head>
<body onload="Login('Guest','');" onunload="dax_bridge.logout();">
</body>
</html>
Copiez ce code dans un fichier HTML. Pour que tout fonctionne, vérifiez bien que le fichier s'appelle
"index_movies.html".
Le fichier maintenant inclut des librairies et une feuille de style de 4D Ajax FrameWork. Vous trouverez
plus d'informations et de recommandations sur ce que l'on peut inclure à cette adresse :
http://daxipedia.4d.com/index.php/4DAF_Object_Integration_Guidelines
Pour cette note technique, le développeur 4D a seulement besoin de s'occuper du contenu à ajouter à
l'intérieur des balises <script> et <body>.
Vérifiez bien que vous placez ce fichier dans le dossier HTML racine par défaut.
5 / 15
Astuce : si 4D Ajax Framework a été installé en suivant les instructions du guide d'installation : le dossier
racine HTML s'appelle "DAX" et se trouve à côté du fichier de structure.
Les attributs "onload" et "onunload"
Dans le fichier HTML ci-dessus, notez les attributs "onload" et "onunload" dans l'élément <body>. Ces
attributs correspondent aux événements de la page et sont utilisés de façon à éviter les Login et Logout de
4D Ajax Framework. Ils sont utilisés comme ci-dessous :
1) onload : se produit quand l'utilisateur se connecte à la page web
2) onunload : se produit quand l'utilisateur quitte la page web.
Comme défini dans le code, sur "onload", l'utilisateur est automatiquement connecté en tant que "Guest"
(invité). Pour que cet utilisateur soit valide, allez dans la méthode projet 4D DAX_DevHook_Login et
ajoutez le code suivant à la ligne 62 :
$loggedIn_b:=($userName_t="Guest")
Maintenant, lorsque les utilisateurs se connectent à la page web, ils seront automatiquement connectés à 4D
Ajax Framework en tant que "Guest". Le code dans l'événement "onunload" s'occupe de la déconnexion du
4D Ajax Framework quand l'utilisateur quitte la page.
Installation de la page HTML par défaut
Personnaliser les objets 4D Ajax Framework dans une page HTML signifie essentiellement que le
développeur 4D évite l'obligation pour l'utilisateur de se connecter au client 4D Ajax Framework via la page
par défaut "index.html". Ainsi quand les utilisateurs se connectent au serveur web (c'est-à-dire via
http://localhost:8080 ou http://localhost:8081), il serait préférable qu'ils soient redirigés vers la page
personnalisée (dans notre cas "index_movies.html")
Pour cela, allez dans les préférences 4D -> Web, et saisissez le nom de la page dans la zone "Chemin d'accès
HTML par défaut" :
Intégrer une grille d'images dans une page HTML
Du code doit être ajouté dans les éléments <script> et <body>pour intégrer une grille d'image dans la page.
6 / 15
Code dans l'élément <script>
Voici le code à ajouter dans l'élément <script> (en gras) :
<html>
<head>
<link rel="stylesheet" href="/dax/themes/basic/basic_gz.css" media="all" type="text/css" title="XPress" />
// After successful login
onAfterInit = function () {
var myHeader = '<td style="color: #7D053F; background-color: #FFFFFF;">';
myHeader = myHeader + '[Movies]Title<\/td>';
var myContent = '<table><tr><td style="color: #000000; font-size:10px;">';
myContent = myContent + '[Movies]Description<\/td><\/tr><\/table>';
ImageMatrix = new dataMatrix ($('ThumbDiv'), 'Movies', myHeader,
'[Movies]Screenshot', myContent,
'[Movies]LongDescription', 'left',
4, 'auto', 'vert', 5, 2, false);
ImageMatrix.customize(false, false, false, false, true, false, false, false);
};
</script>
</head>
</body>
</html>
Ce code javascript définit la fonction "onAfterInit" pour notre page HTML. Cette fonction sert à toutes les
actions ou événements qui interviennent une fois la connexion établie.
Notez également que la grille d'images est créée ici. Pour plus d'information sur l'objet Grille d'images et ses
paramètres, allez à :
http://daxipedia.4d.com/index.php/Image_Browser
Note : le paramètre 6 (zoomContents) est défini pour un objet grille d'images. Cependant, l'événement
zoomCell pour appeler ce paramètre ne sera pas exécuté dans notre exemple.
Nous vous encourageons à jouer avec l'événement zoomCell ainsi qu'avec les autres événements quand vous
serez plus à l'aise avec 4D Ajax Framework.
Code dans l'élément <body>
Voici le code à ajouter dans la partie <body> (en gras) :
<html>
<head>
7 / 15
};
</script>
</head>
<div id="ThumbDiv" style="position:absolute; top:10px; left:10px; width:350px;
height:480px; “></div>
</body>
</html>
Un <div> est un bloc de contenu sur une page web. Ici, un <div> nommé "ThumbDiv" est créé. Regardez
dans le bloc <script> où la grille d'images a été créée. Le premier paramètre détermine la zone où la grille
d'image doit être insérée. Dans notre exemple, la grille d'image est insérée dans le zone "ThumbDiv".
Résultats
Connectez-vous au server web (via http://localhost:8080). Voici la copie d'écran de ce qui s'affiche :
8 / 15
Note : ne vous préoccupez pas des fonds gris pour l'instant. Ces zones seront remplacées par d'autres <div>
ajoutés dans la page.
Utilisation du "Data Filler" pour Divs
Le "Data Filler" permet au développeur de remplir des zones sur une page web avec les contenus d'un
enregistrement. Pour plus d'information à propos du Data Filler, voir :
http://daxipedia.4d.com/index.php/Data_Filler
Pour cette note technique, le Data Filler a été utilisé pour remplir une zone <div> avec une description de la
vidéo sur laquelle l'utilisateur a cliqué.
Code dans l'élément <script> :
Voici le code à rajouter dans l'élément <script> (en gras) :
<html>
<head>
9 / 15
Note: Never mind the gray background for now. The color will supplement other
<divs> added to the page later on.
ImageMatrix.onCellClick = function (cellReference) {
placeRecordData($('main'), cellReference);
};
};
</script>
</head>
</body>
</html>
L'événement onCellClick est généré lorsque l'utilisateur clique sur un enregistrement dans la grille d'images.
Voici le code à ajouter dans l'élément <body> (en gras) :
<html>
<head>
10 / 15
};
};
</script>
</head>
<body id="main" onload="Login('Guest','');" onunload="dax_bridge.logout();">
<div id="DescDiv" style="position:absolute; top:495px; left:10px; width:310px;
height:81px; background-color: #E3E4FA; font-size:15px; padding-top:5px; paddingleft:
5px; padding-right:5px; padding-bottom:5px; color: #302226;">
<span class="4daf_[Movies]LongDescription"></span>
</div>
</body>
</html>
Comme mentionné dans la documentation "Data Filler" sur Daxipedia, une zone HTML doit être identifiée
(dans notre cas : id="main") et doit correspondre au code dans <script> pour une bonne exécution.
Résultats
Lorsque l'utilisateur clique sur un enregistrement de la grille d'images, le Div <DescDiv> récupère les
informations du champ [Movies]LongDescription.
Charger les vidéos dans une balise <IFrame>
Un <IFrame> est un frame dans une page HTML qui contient ce qui sera chargé à partir d'un autre
document HTML. Dans cette note technique, un <IFrame> sera créé et chargé avec une URL vers une page
web qui joue des vidéos. La technique de chargement du <IFrame> est préférable à l'exemple précédent où
le Data Filler était utilisé. La différence, subtile, est que dans ce scénario, l'information saisie de
l'enregistrement n'est pas affichée en tant que texte dans le <div> - elle est utilisée en tant qu'URL pour
charger le contenu dans un <IFrame>.
Maintenant, il est temps de créer le document HTML auquel cet <IFrame> se réfère.
11 / 15
Nous l'appelons "st.html" et la plaçons dans le dossier racine HTML par défaut (à côté de
"index_movies.html"). Voici le code source :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<title>Video</title>
<head>
<body>
</body>
</html>
Nous allons maintenant ajouter plus de code dans "index_movies.html".
Code dans l'élément <script>
Code à rajouter dans l'éléments <script> (en gras) :
<html>
<head>
};
ImageMatrix.onCellDblClick = function (cellReference) {
$('myIframe').src = $('movpath').value;
};
};
</script>
</head>
</div>
12 / 15
</body>
</html>
L'attribut SRC du <Iframe> est l'URL de la vidéo. L'objet "movpath" contient le chemin d'accès contenu
dans le champ [Movies]Path dans la base.
Voici le code ajouté dans l'élément <body>(en gras):
<html>
<head>
};
};
};
</script>
</head>
</div>
<input id="movpath" type="hidden" value="" class="4daf_[Movies]Path"/>
<iframe src="/st.html" style="position:absolute; top:90px; left:350px; width:
720px; height: 496px; background-color: #E3E4FA;" scrolling="auto" frameborder="0"
id="myIframe">
</iframe>
</body>
</html>
Movpath et la zone Iframe sont définis ici. "/st.html" est ici une page HTML vide à laquelle le Iframe se
réfère. Ce fichier devrait être localisé près de "index_movies.html".
13 / 15
Résultats
Connectez-vous au serveur web. Double-cliquez sur un des enregistrements de la grille d'images et vous
devriez charger la vidéo dans la zone IFrame à droite.
Touches finales
Avec du code additionnel, dans un but purement esthétique, voici l'application web finale. Voici le code
source final pour index_movies.html (changement en gras) :
<html>
<head>
};
};
};
</script>
</head>
<table >
<div id="background" style="position:absolute; top:8; left:9; width:1062px;
height:579px; background-color:#616D7E;" >
<tr>
</div>
<input id="movpath" type="hidden" value="" class="4daf_[Movies]Path"/>
<iframe src="/st.html" style="position:absolute; top:90px; left:350px; width:
14 / 15
720px; height: 496px; background-color: #E3E4FA;" scrolling="auto" frameborder="0"
id="myIframe">
</iframe>
<div id="stripe" style="position:absolute; top:90px; left:331px; width:18px;
height:496px; background-color:#98AFC7;" ></div>
</tr>
<img src="4DVTN3.jpg" alt="Welcome to demo.4D.com" width="1060" height="80"
style="position:absolute; top:9px; left:10px;" />
</div>
</table>
</body>
</html>
En ce qui concerne l'image (“4DVTN3.jpg”), vérifiez bien qu'elle soit placée à l'endroit référencé (à côté de
"index_movies.html").
Conclusion
Cette note technique a guidé le développeur 4D au travers du processus de construction d'une page HTML
personnalisée incluant les objets 4D Ajax Framework utilisant un minimum de Javascript et de code HTML.
Le développeur devrait maintenant s'être familiarisé avec les ressources Daxipedia et être encouragé à
approfondir l'utilisation des fonctionnalités de 4D Ajax Framework.
Ses connaissances HTML ont également dû s'approfondir et il est encouragé à inspecter les attributs
personnalisés appliqués à index_movies.html et aux autres pages HTML.
15 / 15

4D Ajax Framework Video Player

Transcription

Documents pareils

Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16

Paramètres (arguments)

[Films] 30 Slasher movies

TD TD –– Javascript

Jeu de devinette Consignes du TP Consignes du jeu

Programmation de scripts pour la simulation de scénarios

PROFESSIONNEL

Erreurs JavaScript (bogues) :

02.18.2011 Actu en vrac

TP Javascript