tutoriel+10

=CHAPITRE 10 : Comment insérer une applet Dambo ? =

** Faites un essai sur la page d'essai du Wiki. **
Ce tutoriel est construit, en grande partie, grâce à l'aide proposé sur le site de la ligue de Normandie.  Merci à Alain Bonnamy pour son travail si utile.

Pour pouvoir visualiser une partie ou une combinaison sur Wikidames, vous pouvez insérer une applet **Damweb**, **Dambo** ou **Dambolite** Tutoriel 6 : Comment insérer une applet Damweb ? Tutoriel 13 : Comment insérer une applet Dambolite ?

Ce tutoriel est divisé en 4 parties et nous apprend à insérer une applet Dambo :
 * 1) Télécharger Dambo
 * 2) Importer la ou les parties
 * 3) Générer le fichier .gz
 * 4) Insérer l'applet Dambo dans une page
 * ====**1- Télécharger Dambo** ====

__Remarque__ : Votre ordinateur doit être pourvu de la dernière version de Java.
 * Télécharger le fichier " ** entry2.jnlp ** " sur votre ordinateur disponible **ICI** ||
 * * Ouvrir le fichier "**entry2.jnlp**"
 * * Ouvrir le fichier "**entry2.jnlp**"

__Conseil__ : pour une utilisation ultérieure, vous pouvez enregistrer ce fichier sur votre disque. ||  ||


 * __Remarque__ : le fichier " **entry2.jnlp **" <span style="font-family: Arial,Helvetica,sans-serif; font-size: medium; line-height: 1.5;">est aussi disponible aussi sur le site 10x10.dse.nl

====<span style="color: #800000; font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**<span style="color: #800000; font-family: Arial,Helvetica,sans-serif; font-size: 120%;">2- Importer les parties ** ==== Pour réaliser une applet dambo, il faut générer un fichier .gz (c'est le point 3 de ce tutoriel). Mais pour le faire, il faut entrer la notation de la partie ou de la combinaison à visualiser. A ce stade il y a deux possibilités :
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Se rendre sur le site de l'éditeur : <span style="color: #0000ff; font-family: Arial,Helvetica,sans-serif; font-size: 16px;">@http://www.10x10.dse.nl/index.html
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Cliquer sur menu « dambo » ||
 * * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Dans le paragraphe « **Starting the application** », cliquer sur le lien de couleur bleu clair : **EntryDambo**. || <span style="font-family: Arial,Helvetica,sans-serif;">[[image:dambo1.png]] ||
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Ce lien vous permet d’ouvrir l’éditeur d’applet " **<span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">entry2.jnlp **<span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">" ||
 * importer la partie (ou la position) __à partir d'un fichier pdn__ sur votre disque dur ou sur Wikidames (paragraphe 2-1)
 * entrer la position ou la partie directement __dans l'éditeur d'applet EntryDambo__ (paragraphe 2-2)
 * ====<span style="color: #800000; font-family: Arial,Helvetica,sans-serif; font-size: 120%;"> 2.1- A partir d'un fichier pdn ====


 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Enregistrer le fichier .pdn. Pour savoir comment obtenir un fichier pdn à partir d'une notation et du logiciel dam2.2, voir le @Tutoriel 9
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Si le fichier pdn est présent sur une page de Wikidames :
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Effectuer un clic droit sur le fichier présent sur la page de Wikidames.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Choisir « **Enregistrer sous** ».
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Enregistrer le fichier sur votre disque dur (choisir l’emplacement) ||
 * * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Ouvrir l'éditeur d'applet « **entry2.jnlp** »


 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Dans le menu « **File** » de l’éditeur d’applet, sélectionner **«Import »**.


 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Sélectionner le fichier .pdn précédemment enregistré sur votre disque || <span style="font-family: Arial,Helvetica,sans-serif;">[[image:dambo4.png]] ||
 * * Sur la gauche de la fenêtre, vous voyez l'ensemble des parties présentes dans le fichier pdn
 * Sur la partie centrale, vous voyez le damier et la notation de la partie sélectionnée. Sur l'image ci-contre, seule la première partie est sélectionnée.
 * Sur la partie droite de la fenêtre, vous voyez les informations sur la partie sélectionnée. **Vous remarquez que les formulaires "top" et "bottom" sont vides.** Il va falloir compléter ces deux formulaires pour que le nom des joueurs, le résultat soient indiqués sur l'applet. ||
 * [[image:dambo6.PNG align="center"]] || [[image:dambo7.PNG width="265" height="369" align="center"]] ||
 * * Sélectionner l'ensemble des parties visibles sur la gauche. Pour cela, maintenir le bouton "**shift**" de votre clavier (le bouton avec la flèche, situé au dessus du bouton "**Ctrl**"). Tout en appuyant sur le bouton gauche de la souris, cliquer sur la première partie puis sur la dernière partie. Ainsi toutes les parties sont sélectionnées (surbrillance bleue)
 * Dans la partie de droite, cliquer sur "**all**" comme indiqué sur l'image ci-dessous. Le formulaire "**top**" et "**bottom**" sont ainsi complétés

**__Remarque__** : Vous pouvez complétez les indications en bas (ou en haut) de l'applet. Par exemple, si vous voulez ajouter le numéro de la ronde à gauche du conducteur des blancs, compléter la ligne "**bottom**" avec le code R%round /, comme ceci : R%round / %white - %black %result (%date) Ainsi en bas de l'applet il sera écrit : R1 / Baes, Alexandre - Hellequin Vandaele, Pierrick 0-1 (2011.06.04) ||
 * [[image:dambo8.PNG width="176" height="267" align="center"]] || [[image:dambo9.PNG width="352" height="269"]] ||
 * L'étape suivante est plutôt curieuse, mais c'est le seul moyen que j'ai trouvé pour ne pas rencontrer de problème dans la présentation de l'applet. En effet, si à ce stade, vous décidez de générer le fichier .gz (voir point 3), j'ai remarqué que certaines parties affichent les codes suivants en bas et en haut de l'applet :

%white - %black %result (%date) %event %site


 * Il suffit de cliquer sur la première partie puis à l'aide des flèches bas et haut de votre clavier, descendre et remonter la liste des parties... C'est une technique vraiment étrange, mais çà marche ! Si quelqu'un a une solution plus élégante, qu'il me la signale.


 * Vous pouvez à présent générer le fichier .gz (voir point 3) ||

<span style="color: #800000; font-family: Arial,Helvetica,sans-serif; font-size: 120%;">2.2- A partir de l'éditeur d'Applet EntryDambo

 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Ouvrir l'éditeur d'applet « **entry2.jnlp** » . ||  ||
 * Sous le damier visible au milieu de l'écran :
 * Décocher la case " **Read only** "
 * Cliquer sur " **Setup** " || [[image:dambo10.PNG width="244" height="75"]] ||
 * La fenêtre ci-dessous s'ouvre alors. Supposons que nous désirons entrer une combinaison.


 * Retirer tous les pions du damier en cliquant sur "**Empty**". Le damier est désormais vide.


 * Cliquer sur les cases du damier pour entrer la position initiale des pions :
 * un clic, à l'aide du bouton gauche de la souris, positionne le pion.
 * un clic, à l'aide du bouton droit de la souris, change la nature du pion : pion blanc, pion noir, dame blanche, dame noire


 * En cochant la case "**White**" vous choisissez le trait est aux blancs ("**Black**" pour le trait aux noirs)


 * Cliquer sur **OK** pour valider cette position initiale ||
 * [[image:dambo11.PNG width="339" height="304"]] || [[image:dambo12.PNG width="338" height="307"]] ||
 * * Effectuer la combinaison en déplaçant le pion à l'aide de la souris

La notation de la combinaison apparaît alors en haut à droite du damier. || ||
 * * Compléter les données de la partie.

Les formulaires "**top**" et "**bottom**" contiennent les renseignements visibles en haut et en bas de l'applet.

Pour ajouter une autre combinaison dans votre applet, cliquer sur "**add game**" et recommencer toutes les opérations précédentes

En haut à gauche du damier vous voyez alors l'ensemble des parties que vous avez importé.


 * Vous pouvez désormais générer le fichier .gz (voir point 3) || [[image:dambo14.PNG]] ||


 * <span style="color: #800000; font-family: Arial,Helvetica,sans-serif; font-size: 130%;"> **3-** **Générer le fichier .gz**


 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Dans le menu « **File** » de l’éditeur d’applet, sélectionner **« Export html »**.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Choisir l’emplacement sur votre disque où seront enregistrés les fichiers exportés.

**__ATTENTION__ : le nom du fichier que vous allez donner ne doit pas comporter d'accent** || <span style="font-family: Arial,Helvetica,sans-serif;"> || <span style="color: #0000ff; font-family: Arial,Helvetica,sans-serif; font-size: 16px;">__Remarques__ :
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;"><span style="color: #0000ff; font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Trois fichiers sont exportés : un fichier .html, un fichier .gz et un fichier .jar.
 * <span style="color: #0000ff; font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Le fichier .jar est déjà présent sur Wikidames. Dès lors, seul le fichier .gz est utile pour la suite. Supposons qu’il soit nommé : R2AllerJuniors.gz.
 * <span style="color: #0000ff; font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Choisir un nom de fichier facilement identifiable . Les fichiers s’accumulent vite sur Wikidames… il faut pouvoir les identifier facilement par la suite !

<span style="color: #800000; font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**4. Insérer l'applet Dambo dans une** **page**

 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;"> Cliquer sur "**Modifier**" de la page du WIKI où vous voulez insérer l'applet
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Déposer le fichier .gz sur Wikidames. **Voir la méthode grâce au @tutoriel 3.**
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Cliquer sur "**Widget**" dans la barre de traitement qui est apparue en haut de la page.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Cliquer sur "**Autre Html**" et coller le code ci-dessous dans la fenêtre présente :

code format="javascript" <applet code="dambo/ReplayDambo.class" codebase="." archive="http://wikidames.wikispaces.com/file/view/ReplayDambo.jar" width="600" height="450"> <param name="file" value="http://wikidames.wikispaces.com/file/view/R2AllerJuniors.gz" /> code
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Dans le code précédent, remplacer le nom R2AllerJuniors.gz par le nom du fichier .gz déposé sur Wikidames.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Cliquer sur "**Sauvegarder**".
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 16px;">Enregistrer les modifications effectuées sur la page du Wiki. L'applet Dambo, comme celles ci-dessous, est alors visible

<span style="color: #0000ff; font-family: Arial,Helvetica,sans-serif; font-size: 16px;">__Remarque__ : si nécessaire, vous pouvez modifier les dimensions de l’applet : en modifiant la largeur (ici 600) et la hauteur de l’applet (ici 450).

media type="custom" key="10994392"
 * applet Dambo de plusieurs parties || media type="custom" key="10096775" align="center" ||
 * applet Dambo d'une combinaison || media type="custom" key="10104723" ||