Sélection des fichiers

On sélectionne les fichiers dans le dossier voulu, puis bouton droit et Convertir.

Choix du codec

On choisit le codec désiré, ici Real Audio.

Paramètres de conversion

Puis les différents paramètres de conversion des fichiers, la fréquence, le type de serveur, le type d’audience désiré, le dossier de conversion, etc…

On clique sur Convertir.

Conversion des fichiers

On peut suivre la procédure de conversion grâce à la barre de progression.

1. Installer un serveur PHP-MySql sous Windows
2. Création d’une base de données MySql
3. Définition du site dans Dreamweaver
4. Définition de la connexion à la base MySql
5. Insertion des données
6. Modification des données
7. Suppression des données

Il est vivement conseillé aux débutant de suivre le tutorial étape par étape

Pour tester les fichiers PHP en local il faut installer un serveur permettant d’interpréter ce langage, pour ce faire il existe différentes méthodes, l’une des plus simples étant d’installer un package

• Apache (serveur web)
• PHP (langage dynamique)
• MySql (serveur de base de données).

Il existe de nombreux packages tout fait, l’un des plus connus en langue française étant sans doute EasyPHP, pour les autres je vous invite à visiter cette page très complète sur PHPInfo.

Installation du serveur

Après avoir télécharger EasyPHP on clique sur le setup du fichier, ce qui lances l’installation.
L’installation se passe de manière tout à fait classique sous Windows, avec une suite de différentes fenêtres permettant de choisir le dossier de destination, la création des différents raccourcis dans le « Menu Démarrer », etc…
La dernière fenêtre permet d’ouvrir la page d’accueil et de lancer le serveur, en cliquant sur Terminer.

Configuration

Une icône clignotant en rouge est venu se greffer dans la barre des taches près de l’horloge, indiquant que le serveur est démarré.

En faisant un clic droit sur l’icône d’EasyPHP on accède à un menu contextuel qui permets de configurer le serveur et les différents logiciels.

On clique sur Configuration> EasyPHP, ce qui ouvre une nouvelle fenêtre.

• Démarrer EasyPHP en même temps que Windows : pas de commentaire…
• Démarrer en tant que service : valable pour Windows NT, Windows 2000 et Windows XP, permet de démarrer Apache, PHP et MySql en tant que service, on pourra dès lors se passer de lancer EasyPHP.
• Lancement automatique des serveurs au démarrage de l’application : démarre Apache, PHP et MySql en lancement d’EasyPHP, si le mode Service n’est pas coché.
• Mode expert : permets d’accéder à certaines fonctions cachées du logiciel.
• Vérifier les nouvelles versions au démarrage : pas de commentaires non plus…
• Prise en compte automatique des modifications des serveurs : relance les serveurs de manière automatique à chaque changement de configuration, comme par exemple une modification d’Apache.

Administration

Toujours grâce au bouton droit, on accède à l’administration d’EasyPHP, notamment pour configurer l’emplacement des bases de données et les alias de sites web.
Grâce à phpMyAdmin on peut ajouter des bases de données, modifier les tables, ajouter des infos, etc…
En dernière partie, vous avez accès aux infos relatives à PHP ainsi qu’aux différentes extensions installées et paramètres du serveur.

À noter que vous pouvez trouver différentes ressources, ainsi qu’une F.A.Q et un forum sur le site d’EasyPHP et sur Manucorp (concepteur d’EasyPHP).

L’extension n’exporte que les fragments de code créés par l’utilisateur. Dreamweaver les stocke dans le profil utilisateur.
(Par exemple : sur Vista : C:\Users\PROFIL\AppData\Roaming\Adobe\Dreamweaver CS4\fr_FR\Configuration\Snippets)

• Tout le dossier Snippets est exporté (copier sur une autre destination). Il n’est pas possible de sélectionner un fragment de code ou un dossier de fragments de code en particulier.
• Tous les fragments de code natifs à Dreamweaver sont ignorés.
• Pour importer les snippets sur une autre machine, ou après une réinstallation, il faut sélectionner non pas le dossier Snippets mais son dossier parent. L’extension cherche exclusivement la présence d’un dossier "Snippets". Il ne doit donc bien sûr pas être renommé.

Télécharger l’extension

Pour créer cet effet sur l’événement onClick une extension est nécessaire, Apply N4 Return False Fix, disponible sur le site Project Seven.

Vous pouvez télécharger la base de données ainsi que les images utilisées dans ce tutorial.

• La base de données :db_video.zip (3.04 KB)
• Les images : images.zip (62.88 KB)

Création du jeu d’enregistrement

On crée tout d’abord un jeu d’enregistrement, en sélectionnant les informations qui nous intéresse, en triant le résultat dans l’ordre voulu.

Insertion de l’image

Via le menu Insertion > Commun ou le raccourci clavier CTRL+Alt+I on insère l’image dynamique de taille réduite.

On sélectionne la source de l’image, en cochant la case Source de données puis en cliquant sur le champ de l’image, à savoir jaquette.

Il nous faut ensuite spécifier le dossier où se trouvent les images, on ajoute dans l’URL le nom de ce dossier, ici images, en rajoutant le préfixe « tn_ » (pour thumbnail) devant le champ jaquette, ce qui nous permet de différencier les différentes images, tout en ayant un seul nom de ces mêmes images dans la base de données.

Bien sûr vous devez tenir compte de l’arborescence du dossier images, dans l’exemple celui-ci se trouve en racine du serveur.

Puis on insère la seconde image de taille normale, à un autre endroit du document, en nommant cette image defaut dans le panneau Propriétés.

Si vous ne voulez pas que cette image soit visible par défaut il vous suffit de la créer en gif ou en png transparent, dans votre éditeur d’images.

Ajout d’informations

Il peut être nécessaire d’ajouter des informations concernant notre image de taille réduite, comme sa taille ou l’attribut alt (permet d’afficher un texte alternatif en cas de non-affichage de l’image) par exemple, pour ce faire il faut passer en mode source et taper ce code à la main :

1

<img src=”http://www.flashxpress.net/images/tn_<?php echo $row_rsVideo['jaquette']; ?>” name=”tn<?php echo $row_rsVideo['id_video']; ?>” id=”tn<?php echo $row_rsVideo['id_video']; ?>” alt=”<?php echo $row_rsVideo['titre']; ?>” width=”100″ height=”137″ />

Le champ id_video étant un champ numérique, l’utiliser pour l’attribut id ou name rend la page non conforme en XHTML, pour contourner le problème il suffit d’ajouter devant le champ un préfixe, ici « tn« .

Permuter l’image

Le comportement Permuter l’image est accessible à partir de l’onglet Fenêtre > Comportements ou via le raccourci clavier Maj+F3, il faut d’abord sélectionner l’image de taille réduite avant de pouvoir l’utiliser.

On sélectionne image defaut, puis on décoche Précharger les images et par contre on coche Restaurer les images onMouseOut, cette fonction permettant de restaurer l’image initiale une fois que la souris a quitté l’image (événement onMouseOut).

Cliquer sur Parcourir nous permet de choisir la source des images sur lesquelles l’action va être appliqué.

On choisit le champ contenant le nom de l’image jaquette, on ajoute le chemin du dossier images dans l’URL, on clique sur OK.

Evénement onclick

Pour modifier le comportement avec l’événement onMouseOver par défaut à l’événement onClick, il faut supprimer l’événement onMouseOut ou le modifier pour onDoubleClick par exemple, puis modifier l’événement onMouseOver.

On applique ensuite la commande Apply N4 Return False Fix, ce qui ajoute une fonction JavaScript à notre comportement.

Région répétée

Si on veut afficher plusieurs images il nous faut faire une région répétée, qui lira les enregistrements présents dans la base de données en boucle, suivant le nombre d’enregistrements spécifiés à afficher.
Afin de garder le comportement JavaScript, on doit bien sûr sélectionner celui-ci en même temps que l’image afin de l’inclure dans la région répétée.

Vous pouvez accéder à cette fonction via la fenêtre Application > Comportements de serveur ou via le menu Insertion > Applications dynamique.

Puis on choisit le nombre d’enregistrements à afficher.

Préchargement des images

Il peut être utile de précharger les images, afin qu’il n’y ait pas de temps d’attente sur l’évémement onMouseOver, pour ce faire on doit combiner JavaScript et PHP/MySql.
Pourquoi ne pas utiliser le premier jeu d’enregistrement déjà créé ? Tout simplement parce que Dreamweaver ne gère pas plusieurs régions répétée du même jeu d’enregistrement dans le même document.

On passe en mode source dans la partie <head> du document et on tape ce code juste avant la balise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* connection à MySql
$dbname = mysql_connect('nom_du_serveur_sql', 'votre_login', 'votre_password');
*/
$dbname = mysql_connect('localhost', 'root', '');
 
// sélection de la base
mysql_select_db('flashxpress', $dbname);
 
/* création de la requête
on limite le nombre d'enregistrement au même nombre que la région répétée (rsVideo) affichant les images
*/
$query_rsPreload = 'SELECT id_video,jaquette FROM video LIMIT 4 ';
 
// envoi de la requete
$rsPreload = mysql_query($query_rsPreload) or die('Erreur SQL !
'.$query_rsPreload.'
'.mysql_error());
 
// boucle pour lire chaque enregistrement
while ($row_rsPreload = mysql_fetch_array($rsPreload)) {
 
// affichage du JavaScript
echo '<script type="text/javascript"><!--
';
      echo "n"; // saut de ligne
      echo 'i'.$row_rsPreload['id_video'].' = new Image;'; // identifiant unique
      echo "n"; // saut de ligne
      echo 'i'.$row_rsPreload['id_video'].'.src = "http://www.flashxpress.net/images/'.$row_rsPreload['jaquette'].'";'; // source de l'image avec le prefixe ton_
      echo "n"; // saut de ligne
      echo '
// --></script>';
}
// fermeture de la connection à MySql
mysql_close();

Le but est de donner un identifiant unique à chaque image (i suivi du N° de l’id_video) ainsi que le dossier source de l’image, ces images seront chargés avant le reste de la page, permettant la permutation des images de manière fluide.

Gardez à l’esprit que les images sont chargées avant l’affichage de la page, il faut donc limiter le nombre d’images totales et/ou les optimiser le plus possible, au risque de rendre la page très lourde à charger.

En voici un qui permet de supprimer non pas un mais plusieurs enregistrements à la fois : utile quand on a besoin de faire du ménage rapidement dans une table…

Exemple d’utilisation

Supposons que nous avons une table actualite, qui sert à stocker et présenter des actus sur un site. Afin de garder cette table de dimension raisonnable, on décide de supprimer sélectivement de temps à autre des actualités qui ont plus de 3 mois.

Voici la structure et le contenu de la table. Elle a été simplifiée et réduite pour plus de clarté :

#
# Structure de la table `actu`
#

DROP TABLE IF EXISTS actu;
CREATE TABLE actu (
idActu tinyint(3) unsigned NOT NULL auto_increment,
titre varchar(150) NOT NULL default  »,
date date NOT NULL default ’0000-00-00′,
PRIMARY KEY (idActu),
UNIQUE KEY date (date)
);

#
# Contenu de la table `actu`
#

INSERT INTO actu VALUES (1, ‘Viva Cuba!’, ’2004-01-28′),
(2, ‘Jacques Brel : le coffret du 25e anniversaire’, ’2003-08-27′),
(3, ‘David Bowie, Reality’, ’2003-07-25′),
(4, ‘Le violon dans tous ses états’, ’2004-02-03′),
(5, ‘Je ne suis qu’une chanson’, ’2003-04-28′),
(6, ‘Herbie Hancock, My Point Of View’, ’2003-12-08′);

Si vous souhaitez suivre ce tutorial, vous pouvez télécharger le fichier SQL qui crée la table et insère quelques enregistrements.

actu.zip (672 bytes)

Le jeu d’enregistrements

Créez un jeu d’enregistrements portant sur les données que nous voulons détruire, à savoir toutes les actus qui ont plus de 3 mois, et de trier ces données par ordre décroissant.:

SELECT *
FROM actu
WHERE date < DATE_SUB(NOW(), INTERVAL 90 DAY)
ORDER BY date DESC

Brève explication sur la clause WHERE utilisée ici :
Nous prenons la date d’aujourd’hui (NOW) à laquelle nous soustrayons (DATE_SUB) 90 jours (INTERVAL 90 DAY) et le résultat est comparé avec la colonne date de la table.

Le formulaire

Iinsérez un formulaire dans votre document, puis créez une région répétée dans ce formulaire de façon à afficher les données :

Rajoutez une colonne à droite du tableau, insérez une case à cocher, nommez-la et donnez lui une valeur dynamique qui correspondra à la valeur de la clé primaire idActu. Pour cela, sélectionnez la case à cocher, allez dans le panneau Applications > onglet Liaisons, déroulez le jeu d’enregistrements et glissez/déposez le texte dynamique idActu sur la case.

<input name= »supp » type= »checkbox » id= »supp » value= »<?php echo $row_rsActus3mois['idActu']; ?> »>

Puis ajoutez un bouton Supprimer. Attention : ce bouton ne doit pas être dans la région répétée! (Ici j’e l’ai simplement mis dans un autre tableau, sous le premier mais en dehors de la région répétée)

Le comportement

Appliquez le comportement. Sélectionnez les différents paramètres demandés, rentrez le nom de la case à cocher ainsi que l’URL de redirection quand la suppression est terminée.

Une fois appliqué, ce comportement a effectué deux opérations : outre le code PHP qui a été inséré en début de fichier, il a également renommé la case à cocher en lui rajoutant à la fin deux crochets : supp[].
Cette notation est nécessaire : elle signifie pour PHP qu’il est en présence d’une variable de type tableau, ce qui permett de stocker les différentes valeurs que peut prendre la clé primaire, selon les actualités affichées. En l’absence de ces crochets, supp serait une simple variable dont la valeur serait écrasée à chaque fois par la précédente.

Le code PHP tient en quelques lignes :

• Ligne 12 : on vérifie que le tableau supp n’est pas vide.
• Ligne 13 : on parcourt le tableau avec une boucle foreach
• Ligne 15 : on exécute la requête autant de fois qu’il y a d’éléments dans le tableau .
• Ligne 17 : redirection quand les suppressions sont terminées.

SuppMultEnr.mxp (6.97 KB)

Dans les bases de données un peu complexe, il est souvent nécessaire de faire des jointures de table quand on se retrouve avec une relation de 1 à n. Ce système permet de relier plusieurs tables par leurs id afin d’éviter d’alourdir inutilement la base de données.

Nous allons voir comment Dreamweaver permet de créer une jointure de tables très facilement, pratiquement sans taper de code.

Principe des jointures de tables

Prenons le cas d’un catalogue de livres où l’on veut rentrer les renseignements suivants : titre du livre, nom et prénom de l’auteur, collection à laquelle appartient le livre

Le premier réflexe quand on ne connait pas les bases de données serait de créer une seule table contenant toutes ces informations :

CE N’EST PAS LA BONNE SOLUTION !

En effet, on voit que les informations concernant les auteurs et la collection sont dupliquées et alourdissent inutilement la base. Pour 5 livres du même auteur, on rentre 5 fois les informations concernant son nom et son prénom, avec tous les risques de faute de frappe que cela représente…

Avec la méthode Merise, on crée 3 tables :

• une table pour les collections,
• une table pour les auteurs,
• une table livres dans laquelle on ajoute seulement l’identifiant correspondant à l’auteur et celui correspondant à la collection.

TABLE AUTEURS

TABLE COLLECTIONS

TABLE LIVRES

Création des tables

On crée une base « bouquins » et on crée la structure de ces 3 tables avec phpMyAdmin.

#

# Structure de la table `auteurs`

#

CREATE TABLE auteurs (

id_auteur int(11) NOT NULL auto_increment,

nom_auteur varchar(255) NOT NULL default  »,

prenom_auteur varchar(255) NOT NULL default  »,

PRIMARY KEY (id_auteur)

) TYPE=MyISAM;

# ——————————————————–

#

# Structure de la table `collections`

#

CREATE TABLE collections (

id_collection int(11) NOT NULL auto_increment,

collection varchar(255) NOT NULL default  »,

PRIMARY KEY (id_collection)

) TYPE=MyISAM;

# ——————————————————–

#

# Structure de la table `livres`

#

CREATE TABLE livres (

id_livre int(11) NOT NULL auto_increment,

titre_livre varchar(255) NOT NULL default  »,

id_auteur int(11) NOT NULL default ’0′,

id_collection int(11) NOT NULL default ’0′,

PRIMARY KEY (id_livre)

) TYPE=MyISAM;

On insère les noms et prénoms de nos trois auteurs et les noms des collections dans leurs tables respectives (On verra ensuite comment utiliser un formulaire d’insertion pour insérer d’autres enregistrements).

Par contre, on laisse la table livres totalement vide. On remplira cette table directement avec un formulaire d’insertion.{mospagebreak }

Formulaires d’insertion

Après avoir créé la structure des tables, on revient dans Dreamweaver MX. On définit un site, on configure le serveur d’évaluation, puis on crée une page insertion_livres.php et on établit une connexion MySQL avec la base de données (voir le tutorial Application dynamique avec Dreamweaver MX).

On crée deux jeux d’enregistrements : jeu_auteurs et jeu_collections qui sélectionnent tous les enregistrements triés par ordre alphabétique par rapport au nom des auteurs et à l’intitulé des collections.

Dans la page insertion_livre.php, on insère ensuite un formulaire d’insertion d’enregistrement un peu particulier, comme suit :

On met le champ id_livre en champ masqué sans indiquer de valeur puisqu’il s’auto-incrémente (on aurait pu d’ailleurs le supprimer tout simplement, cela revient au même).

On laisse le champ titre_livre en champ de texte.

Pour le champ id_auteur, on demande Afficher en tant que menu et on clique sur Propriétés.

On coche Charger les éléments du menu depuis la base de données, et on précise les options ci-dessous :

On procède de même avec le champ id_collection. (On demande Afficher en tant que menu, on clique sur Propriétés, Charger les éléments du menu depuis la base de données, et on demande d’afficher le nom de la collection dans l’étiquette et l’id de la collection dans les valeurs).

On déplace ensuite le champ titre_livre en dernière position avec la flèche noire Déplacer l’élément vers le bas de la liste.

Tester la page. On doit voir dans les menus déroulants la liste des auteurs et la liste des collections.

Insérer le nom des 6 livres de la table. Vérifier en affichant ensuite la table dans phpMyAdmin qu’elle correspond à ce qui était indiqué dans la rubrique « Principe des jointures de table ».

Il nous reste à régler le cas où l’auteur ou la collection n’existe pas encore dans la table correspondante. La solution la plus simple est de créer deux pages « insertion_auteur.php » et « insertion_collection.php » dans lesquelles on va insérer des formulaires d’insertion simples avec un retour sur la page « insertion_livre.php ».

Ensuite dans la page insertion_livre.php, on crée deux liens hypertextes vers ces deux pages à côté des deux menus déroulants.

Changer le texte HTML généré automatiquement par Dreamweaver (id_auteur, id_collection et titre_livre) par des appellations plus lisibles. Par exemple, renommer « id_auteur » en « auteur », « id_collection » en « collection » et « titre_livre » en » titre du livre ».

Tester en ajoutant un livre avec un nouvel auteur et une nouvelle collection (ex : Un merveilleux malheur de Boris Cyrulnik aux éditions odile jacob).{mospagebreak }

Création d’un jeu d’enregistrement « avancé »

Il va falloir maintenant créer une page affichant un tableau avec la liste des livres, leurs auteurs et leur collection (page « liste_livres.php »).

Pour cela, il faut créer un jeu d’enregistrements en utilisant l’option Avancé, pour lancer une requête SQL faisant la jointure des 3 tables.

pour créer la ligne « FROM auteurs,collections,livres », il faut cliquer sur chacune des tables puis sur SELECT.

Pour créer la ligne « WHERE auteurs.id_auteur », il faut cliquer sur l’id_auteur dans la table auteurs puis sur WHERE.

Pour créer la ligne « ORDER BY livres.titre_livre », il faut cliquer sur le champ qui va vous servir à trier les enregistrements puis sur ORDER BY.

Cliquer sur ok après avoir tapé (ou généré) le code suivant :

SELECT * FROM auteurs, collections, livres WHERE auteurs.id_auteur=livres.id_auteur AND collections.id_collection=livres.id_collection ORDER BY livres.titre_livre

Vous devez obtenir un jeu d’enregistrement comprenant tous les champs des 3 tables.

Affichage d’une liste.

Il nous reste maintenant à créer une page affichant un tableau avec la liste des livres, leurs auteurs et leur collection (page « liste_livres.php »).

Insérer un tableau de 3 colonnes et 2 rangées et transformer la première rangée en cellules d’entête. Faire un cliquer/glisser dans les cellules du tableau pour insérer les éléments correspondant du jeu d’enregistrement :

Sélectionner ensuite la deuxième rangée (de <tr> à </tr>) et demander une Région répétée en affichant tous les enregistrements.

Vos livres sont désormais affichés par ordre alphabétique. N’oubliez pas d’ajouter une feuille de style pour améliorer la présentation.

Liste des départements : value = le nom du département : SelectDepartementsAvecNoms.mxp

Liste des départements : value = numéro du département : SelectDepartementsAvecNumeros.mxp

Liste des pays : value = un simple numéro : SelectPays.mxp

Liste des pays : value = code à 2 lettres : SelectPaysAlpha2.mxp
Code pays alpha-2 (A2)
Le code ISO 3166-1 « alpha-2″ (ou A2) associe un code à deux caractères à chaque entité. Ces deux caractères sont choisis de manière à être facilement associables au pays qu’ils désignent (par exemple « FR » pour la France). Très utilisé, ce code est recommandé par de nombreux organismes de normalisation et notamment par le W3C pour l’identification des pays et des langues sur le Web.

Liste des pays : value = code à 3 lettres : SelectPaysAlpha3.mxp

Liste des régions françaises : SelectRegions.mxp

Télécharger le package complet

Vous pouvez modifier à votre guise cette interface, qui n’est rien d’autre qu’un fichier HTML.
Mais ATTENTION : si vous commencez à modifier l’interface, à l’embellir, à tout régler au pixel près, puis que vous constatez que quelque chose ne fonctionne pas dans le code lui-même, il vous faudra repasser par Modifier un comportement serveur pour corriger le ou les blocs de codes fautifs, et faisant cela, Dreamweaver va écraser le fichier HTM que vous aurez mis tant de temps à peaufiner…

Donc le principe est simple : assurez-vous d’abord que tout fonctionne parfaitement, comme vous le souhaitez, au niveau du code. Faites et refaites des tests!
Selon ce que doit faire votre comportement, rentrez des valeurs absurdes dans les champs de l’interface, essayez de prévoir ce que vont faire d’autres utilisateurs, poussez le bouchon au maximum, de façon à couvrir tous les cas de figures, surtout si vous pensez partager votre extension avec la communauté Dreamweaver.
Dans le pire des cas, si vous avez déjà travaillé sur le fichier HTML, pensez à le sauvegarder avant de modifier le comportement, ceci afin de pouvoir récupérer des éléments de l’interface par copier/coller.

Pour aller plus loin

Quand un comportement a été créé, Dreamweaver génère 3 fichiers ou plus, mais toujours 3 au minimum (cela dépend du nombre de Blocs de Code que l’on a demandé):

• Un fichier HTML qui contient l’interface, ainsi que le Javascript nécessaire au fonctionnement du comportement.
• Un fichier EDML qu’on appelle Fichier de groupe, qui contient les informations sur le comportement comme un tout.
• Un fichier EDML pour chaque Bloc de Code, qu’on appelle Fichier participant, qui contient le informations propres au bloc de code en question.

Les fichiers EDML (Extension Data Markup Language) sont des fichiers XML. Ils contiennent le code d’exécution du comportement.
Dans le cas de notre comportement,  nous avons quatre fichiers :

Figure 1.

Pour les systèmes d’exploitation multi-utilisateurs Window XP, Windows 2000, NT et Macintosh OS X, Dreamweaver MX crée un dossier de configuration distinct pour chaque utilisateur (en complément du dossier ConfigurationDreamweaver disponible dans Program Files).

• Sur Windows, les fichiers seront donc accessibles par ce chemin :
  Lecteur:Documents and SettingsPROFILApplication DataMacromediaDreamweaver MX 2004ConfigurationServerBehaviors + Modèle de serveur
• Sur Mac OS X:
  Lecteur:Users:USERNAME:Library:Application Support:Macromedia:Dreamweaver MX 2004:Configuration:ServerBehaviors + Modèle de serveur

Note : par défaut dans Windows, ces dossiers sont cachés. Pour en activer l’affichage sous Win XP :
- Dans l’explorateur > menu Outils > Options des dossiers > Affichage > Fichiers et dossiers cachés > Afficher les dossiers et fichiers cachés.

Tout ce qui va  suivre à présent est valable pour TOUTES les extensions. Donc outre les comportements serveurs, sont concernés également les objets, commandes, comportements, panneaux (floater).

Modifier l’interface

Vous pouvez donc ouvrir ce fichier ConvertirDate.htm directement dans Dreamweaver.
Ce qu’on trouve dans ce fichier :

• Tout d’abord le formulaire correspondant à l’interface du comportement, avec deux champs de type <SELECT> (Voir la section Types de champs) :
  

  Figure 2.

  Les valeurs de ces champs ont été placé par Dreamweaver. Puisque ce sont des valeurs fournies par un jeu d’enregistrements, nous n’avons pas à y toucher. Lors de l’utilisation du comportement, DW détectera automatiquement la présence ou non d’un ou plusieurs jeux d’enregistrement et affectera à nos champs les valeurs adéquates.

• On constate également que les boutons OK et Annuler n’apparaissent pas. Ils sont en effet fournis directement par Dreamweaver via son API et nous n’avons donc aucun contrôle sur eux. Nous pourrons par contre plus tard rajouter nous-même un bouton Aide .
• Si vous passez en mode Code, vous voyez en début de fichier des lignes générées par Dream :
  

  <!– auto-generated=true –>
  <!DOCTYPE HTML SYSTEM « -//Macromedia//DWExtension layout-engine 5.0//dialog »>

  C’est cette ligne qui fait appel au moteur interne de Dreamweaver pour donner cette apparence  à la page, et donc à la boite de dialogue du comportement.

• Puis vous trouvez les appels aux Javascripts externes nécessaires au fonctionnement du comportement :
  

  <script src= »../../Shared/Common/Scripts/dwscripts.js »></script>
  <script src= »../../Shared/Common/Scripts/dwscriptsServer.js »></script>
  etc…

• Par défaut, DW a créé et placé les fichiers HTML et EDML, dans le dossier PHP_MYSQL. Vous pouvez très bien les placer dans un sous-dossier de votre choix, mais dans ce cas il faudra impérativement penser à modifier les chemins d’accès à ces scripts.

Concernant notre comportement, voici les modifications que nous avons apportées :

• Remplacer l’étiquette Recordset par Jeu d’enregistrement
• Formater proprement l’étiquette du champ Date
• Réduire la taille des champs du formulaire. Pour cela, faites un clic doit sur le champ Jeu d’enregistrement par exemple, sélectionnez l’option Modifier la balise <select>

Figure 3.

et dans l’éditeur de balises, catégorie Feuille de style, remplacer la valeur 300px dans le champ Style par 150px. Il se peut que les valeurs affichées chez vous soient différentes, tout dépend de la version de Dreamweaver que vous utilisez (MX ou MX 2004). Répétez l’opération pour le champ Date.

Recharger l’extension

Quand toutes vos modifications sont terminées, vous devez recharger l’extension pour que ces changements soient pris en compte par DMX.
Il n’est pas nécessaire de redémarrer Dreamweaver pour cela : il existe un menu « caché » qui permet d’effectuer l’opération sans fermer et réouvrir le logiciel.

Pour DMX :
Dans le panneau Insertion , en haut à droite, vous avez le bouton des Options . Cliquez dessus en maintenant la touche CONTROLE enfoncée.

Figure 4.

Note : Pour DMX 2004 ce menu n’est accessible que si le panneau Insertion est affiché sous forme d’onglets, et non pas comme Menu.

Pour DMX 2004 :
Si la barre Insertion est affichée sous forme de menus, maintenez la touche CONTROLE enfoncée en cliquant sur n’importe quelle catégorie.

Figure 5.

Ce menu sert uniquement à recharger des extensions déjà créées. Si vous le lancez quand vous créez votre extension pour la première fois, Dreamweaver risque d’avoir des comportements imprévisibles. De même, selon les modifications que vous avez apportées à une extension, il peut être bon de temps à autre de fermer complètement Dreamweaver et de le réouvrir.

Figure 6.

Notre interface a meilleure mine…

{mospagebreak}

Ajouter un bouton d’aide

Il y a plusieurs possibiltés pour insérer des textes d’aide au sein d’une extension.

La première est de l’insérer directement dans la boite de dialogue, sous les champs de formulaire, à condition qu’elle soit courte, deux ou trois lignes maximum.
Tout dépendra donc en fait de la complexité de l’extension, des différentes options qu’elle propose, qui peuvent demander des explications plus ou moins longues, le but étant de ne pas noyer les informations principales de l’interface dans un flot de texte parasite.

La deuxième est d’ajouter un bouton d’aide à l’interface.
Le bouton d’aide est un simple bouton de formulaire, mais nous ne pouvons pas l’insérer nous même. Il faut passer par une fonction spéciale de l’API de DW.

Bien que faisant partie de l’API des extensions, cette fonction doit être insérée manuellement. Elle n’est pas propre aux comportements serveur. Quelque soit le type d’extension que vous créez (objets, commandes etc), c’est par cette fonction que vous pourrez apporter une aide à une extension.
A la fin du code Javascript du fichier HTM, rajoutez les lignes suivantes :

function displayHelp() {
var theHelpFile;
theHelpFile = dw.getConfigurationPath() + ‘/ExtensionsHelp/FlashXpress/ConvertirDate.htm’;
dreamweaver.browseDocument(theHelpFile);
}

L’insertion de la fonction displayHelp() provoque automatiquement l’apparition d’un bouton Aide, situé sous les boutons OK et Annuler .

Il s’agit ici de récupérer dans une variable (theHelpFile) le chemin d’accès au dossier Configuration de Dreamweaver grâce à dw.getConfigurationPath() puis de lui rajouter le chemin vers le dossier ExtensionsHelp avec éventuellement un sous-dossier dans lequel on stocke nos fichiers d’aide.
Le dossier ExtensionsHelp a été créé par MM dans votre profil utilisateur. Il est destiné justement à regrouper tous les fichiers d’aide que chaque extension est susceptible d’installer. Ces fichiers d’aide sont de simples fichiers HTML et il est de coutume de les stocker dans un sous-dossier approprié pour éviter une accumulation de fichiers dans le dossier principal, comme ici où je ai créé un dossier FXP : /ExtensionsHelp/FlashXpress. Sachant de plus que de nombreuses extensions installent des fichiers d’aide (avec leurs propres images), l’utilisateur peut s’y perdre facilement si on ne s’impose pas un mimimum de rigueur.

Dans le cas que nous venons d’exposer, le fichier d’aide est directement accessible sur le disque dur de l’utilsateur, en local. C’est à notre avis la meilleure solution car plutôt qu’un fichier en local, on aurait pu aussi préciser une URL sur un site distant, mais cette méthode oblige l’utilisateur a avoir une connexion ouverte (tout le monde – et loin de là d’ailleurs – n’a pas de connexion permanente, cable, ADSL..) et peut être pénalisante si le réseau est encombré.

Ici pour illustrer nos propos, nous avons ajouté un texte d’aide directement dans l’interface et ajouter aussi le bouton Aide .
Pour le texte d’aide, nous avons inséré un simple tableau sous le tableau principal. Notez que nous avons donné une couleur de fond différente au texte.
L’aide est le seul élément de l’interface qui puisse contenir une autre couleur que la couleur par défaut affectée par Dreamweaver. Macromedia recommande d’utiliser la couleur #D3D3D3, à savoir un gris plus sombre que le reste de la boite de dialogue. Notez aussi que nous en avons aussi profité pour glisser le logo ainsi que le nom de l’auteur
Cela aussi, c’est le seul élément « externe » au comportement, que Macromedia permet de mettre en avant sur l’interface. L’image du logo a été incorporé non pas comme image simple (balise <IMG>) mais comme champ d’image (balise <INPUT>).

Figure 7.

Le logo peut avoir un lien amenant directement à votre site (ou même sur une page particulière dans votre site, pourquoi pas), mais vous ne pouvez pas utiliser de lien HTML classique :
<a href= »http://www.monsite.com »>Logo</a> ne fonctionnera pas dans l’environnement Dreamweaver.  Il nous faudra utiliser une fonction interne de l’API de Dream, destinée à de multiples usages, avec entre autres celui de permettre l’accès à une URL.

• Sélectionnez l’image, faites un clic droit, choisissez Modifier la balise <input>.
• Dans l’éditeur de balises, sélectionnez Evénements > onClick et rentrez la syntaxe suivante :
  

  onClick=’dreamweaver.browseDocument(« http://www.flashxpress.net »)’

Figure 8.

Bien sur remplacez flashxpress.net par autre chose…

Les conseils de Macromedia pour l’interface

Les conseils qui suivent sont des lignes de conduite, en aucun cas obligatoires, mais que Macromedia recommande de suivre.
(Notamment si vous souhaitez plus tard soumettre votre extension sur le site Macromedia Exchange). Ces conseils sont d’ailleurs valables pour toutes les extensions que vous créez (objets, commandes, etc.).
L’objectif principal est de respecter l’environnement Dreamweaver afin de ne pas dérouter l’utilisateur. Votre extension doit s’intégrer harmonieusement au reste du logiciel.
L’utilisateur est habitué au design des autres comportements, il s’attend à trouver des interfaces semblables, des façons de présenter plus ou moins identiques.

• Pour régler la longueur des champs n’utilisez pas des syntaxes telles que size= »40″, utilisez des styles en ligne comme :
  <select style= »width:150px » name= »Recordset »>
  ceci en raison de problèmes d’affichage sur les Mac.
  Vous pouvez même faire des styles internes.
• Si vous avez des champs de type boutons-radio, ou cases à cocher, au moins un devrait être coché par défaut. C’est un cas de figure qui peut revenir très souvent, quelque soit le type de champ : il s’agit simplement de proposer des valeurs par défaut à l’utilisateur.
• La taille globale de la boite de dialoque du comportement est déterminé par DMX, en fonction des objets qu’il y trouve. On peut contraindre les dimensions de cette fenêtre à l’aide de la fonction JS windowDimensions(), mais Macromedia déconseille de l’utiliser et conseille de laisser Dreamweaver gérer cela.
• Dreamweaver a généré un tableau HTML automatiquement pour le rendu du formulaire et des champs de formulaire. Il est déconseillé de forcer des valeurs pour ce tableau: hauteur, largeur, espacement des cellules, remplissage des cellules.  C’est DW qui doit le gérer (ceci dit il ne le fait pas touojurs correctement, dans ce cas vous pouvez faire vous-même les ajustements nécessaires).
• Ne pas utiliser de couleur de fond pour le tableau ou la page, à l’exception des tableaux contenant les textes d’aide. Pour que ces textes se distinguent clairement du reste de l’UI, Macromedia propose d’utiliser la couleur #D3D3D3.
• Les étiquettes des champs de formulaire doivent apparaitre à gauche du champ de formulaire, alignés à droite dans leur cellule et ne pas comporter de retour à la ligne. Chaque mot des étiquettes doit commencer par une majuscule (mais cette recommandation vient du fait que ce système de majuscule en début de mot est courant aux Etats-Unis, alors que ça n’existe pas dans nos standards européens).

ConvertirDate.mxp (5.96 KB)

Choisir son type de fichier

Une fois Real Producer lancé on choisit la source du fichier à encoder :

« Record From File » : à partir du disque dur
« Record From Media device » : à partir d’un média externe, comme un micro, une chaîne hi-fi, etc…
« Live Broadcast » : à partir d’une source en live (exige un serveur Real).

On cherche le fichier sur le disque dur :

Informations sur le fichier généré

On peut entrer quelques informations concernant le fichier généré, informations qui seront diffusées par le player.
Les « Keywords » permettent de faire des recherches dans les moteurs, à l’instar des « Meta Tags » en HTML.

Choisir le type de serveur

« Multi-rate SureStream for RealServer G2″ : si votre provider utilise un serveur Real, celui-ci détecte la vitesse de connection de l’internaute et adapte le débit en fonction de celle-ci.
« Single-rate for Web Servers » : pour tout type de serveurs web.

Choisir le type d’audience

Si vous avez choisi « Single-rate for Web Servers », vous devez déterminer pour quel type de vitesse de connexion vous allez diffuser votre fichier, en général « 56K Modem ».
A noter : cela joue sur la compression du fichier, autant en poids qu’en qualité.

Choisir la qualité du fichier

Suivant le type de média vous avez le choix d’une qualité d’encodage :

« Voice Only » : pour de la voix seule, comme une interview.
« Voice with Background Music » : pour de la voix avec une musique de fond.
« Music » : pour de la musique et des voix, comme une chanson par exemple.
« Stereo Music » : seulement pour un fichier utilisant la stéréo.

Enregistrement du fichier

On choisit l’emplacement et le nom du fichier à enregistrer, comme en html, sans espaces ni caractères spéciaux.

Informations d’encodage

Avant encodage une fenêtre regroupe toutes les informations concernant le fichier qui va être encodé.

Encodage du fichier

On appuies sur « Start », ce qui lances l’encodage du fichier.

En général ce n’est pas le fichier image qui est inséré dans la base de données mais le chemin de cette image sur le serveur web ou simplement son nom, ce qui est bien moins lourd et surtout plus rapide à traiter pour le serveur de base de données. Il est alors possible de traiter ces images de manière dynamique, comme par exemple créer des imagettes, etc…

Vous pouvez télécharger la base de données ainsi que les images utilisées dans ce tutorial.

• La base de données :db_video.zip (3.04 KB)
• Les images :images.zip (62.88 KB)

Création du jeu d’enregistrement

On crée tout d’abord un jeu d’enregistrement, en sélectionnant les informations qui nous intéresse, en triant le résultat dans l’ordre voulu.

Insertion de l’image

Via le menu Insertion > Commun ou le raccourci clavier CTRL+Alt+I on insère l’image dynamique.

On sélectionne la source de l’image, en cochant la case Source de données puis en cliquant sur le champ de l’image, à savoir jaquette.

Il nous faut ensuite spécifier le dossier où se trouvent les images, on ajoute dans l’URL le nom de ce dossier, ici images.

Bien sûr, vous devez tenir compte de l’arborescence du dossier images, dans l’exemple celui-ci se trouve en racine du serveur.

Ajout d’informations

Il peut être nécessaire d’ajouter des informations concernant notre image, comme sa taille ou l’attribut alt (permet d’afficher un texte alternatif en cas de non-affichage de l’image) par exemple, pour ce faire il faut passer en mode source et taper ce code à la main :
[cc lang="php" lines="2"]
” alt=”” width=”200? height=”278? />
[/cc]

Conditions d’affichage

Si le champ jaquette de la base de données est renseigné et si l’image existe dans le dossier spécifié (/images) alors l’image sera affiché, dans le cas contraire c’est une croix rouge inesthétique qui apparaîtra, effet non voulu, il est donc nécessaire de faire une condition afin de palier aux différentes erreurs possibles.

Nous allons encapsuler notre image à l&#8217;intérieur d’une condition avant de l’afficher, pour ce faire on passe en mode source :
[cc lang="php" lines="8"]
if (file_exists(‘/images/’.$row_rsVideo['jaquette'])) { ?>

” alt=”” width=”200? height=”278? />

// fin show if file exist
?>
[/cc]

On peut ajouter une seconde condition plus bas, qui elle va nous permettre d’afficher un message si l’image n’existe pas :
[cc lang="php" lines="8"]
if (!file_exists(‘/images/’.$row_rsVideo['jaquette'])) { ?>

Pas d’image dans la base.

// fin show if file not exist
?>
[/cc]

Région répétée

Si on veut afficher plusieurs images il nous faut faire une région répétée, qui lira les enregistrements présents dans la base de données en boucle, suivant le nombre d’enregistrements spécifiés à afficher.
Afin de garder les conditions d’affichage, on doit bien sûr sélectionner celles-ci en même temps que l’image afin de les inclure dans la région répétée.

Vous pouvez accéder à cette fonction via la fenêtre Application > Comportements de serveur ou via le menu Insertion > Applications dynamique.

Puis on choisit le nombre d’enregistrements à afficher.