Tutoriel sur les Thèmes

[ Retournez aux thèmes pour Shareaza ]

Créer des thèmes pour la télécommande.

La télécommande est comme un "Mr. Potato head". Vous commencez avec une image de fond (le visage), et ensuite vous affichez toutes les parties média et bande-passante (yeux, bouche, nez) sur le visage. Comme avec un chirurgien plasticien, la télécommande est entièrement sous vôtre contrôle. Vous pouvez ajouter toutes les fonctions que vous voulez.

Dans cette section, il vous sera présenté un tutoriel pour construire pas à pas un thème pour la télécommande. On va présumer une connaissance des éléments manifest et windowskin, mais, si vous voulez rafraîchir vos connaissances sur ces éléments, les textes rouges auront des liens vers les définitions.

Avant d'ajouter les anchors et parts, votre fichier xml sera ainsi :

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://shareaza.sourceforge.net/"
 email="Me@myemail.com"
 version="1.0"
 type="skin"
 language="en"
 />
<windowSkins>
<windowSkin>
</windowSkin>
</windowSkins>
</skin>

A ce point, copiez ceci dans l'élément manifest de votre thème

Voici une petite liste de tous les éléments manifest.

  • Name - Le nom de votre télécommande
  • Author - Le nom de l'auteur
  • Description - Une description des fonctions de votre télécommande (par exemple : un mini-contrôleur de bande passante).
  • Link - Un lien internet pour les informations sur votre télécommande.
  • E-mail - Un lien courriel, pour que l'auteur puisse être contacté par les utilisateurs, pour des informations, ou pour le tenir au courant des bugs.
  • Version - Un nombre version.
  • Type - C'est un skin, pas une traduction
  • Language - Si c'est en français (par exemple, des images et mots seulement en français), entrez "fr".

Ensuite, entrez une image de fond.


<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://shareaza.sourceforge.net/"
 email="Me@my_email.com"
 version="1.0"
 type="skin"
 language="en"
 />
 
<windowSkins>
 
 <windowSkin>
 
 
 <image type="image" path="MyRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 </parts>
 
 
 </windowSkin>
 
        
</windowSkins>
 
</skin>

    

  

  
ANCHORS

  
Après avoir construit l'image du fond, on doit mettre des boutons. Les "anchors" contrôle ou les boutons sont peint, avec l'élément anchor, en spécifiant leurs positions relatives au fond. (x,y,grandeur,hauteur). Voici une liste des parties qu'on peut ancrer :

  

    
 
      Ancres
      Description
    

    
 
      StatusText
      L'endroit où est affiché le titre du fichier média, le temps écoulé, bande-passante, etc.
    

    
 
      History
      L'endroit où sont montrés les niveaux de bande-passante
    

    
 
      FlowTx
      Le niveau d'envois
    

    
 
      FlowRx
      Le niveau de téléchargement
    

    
 
      MediaSeekTrack
      Piste "seek", pour le média
    

    
 
      MediaVolTrack
      Piste pour le volume
    

    
 
      ScalerTrack
      Piste pour le slider, pour limiter la bande-passante
    

    
 
      MediaStatePlaying
      Endroit pour une image 'jouer' quand le média joue
    

    
 
      MediaStatePaused
      Endroit pour une image 'pause', quand le média est est en-pause
    

    
 
      MediaStateStopped
      Endroit pour une image 'stop' quand le média est arrêté
    

    
 
      _ID_TRAY_OPEN
      Ouvre Shareaza quand il est dans la barre des tâches, 
    

    
 
      _ID_MONITOR_CLOSE
      Ferme la télécommande (remote)
    

    
 
      _ID_NETWORK_SEARCH
      Ouvre un onglet de recherche (search)
    

    
 
      _ID_TOOLS_DOWNLOAD
      Ouvre la fenêtre de téléchargement torrent
    

    
 
      _ID_TAB_LIBRARY
      Ouvre la bibliothèque
    

    
 
      _ID_MEDIA_PLAY
      Bouton play (lecture)
    

    
 
      _ID_MEDIA_PAUSE
      Bouton pause
    

    
 
      _ID_MEDIA_STOP
      Bouton media (média)
    

    
 
      _ID_MEDIA_PREVIOUS
      Bouton previous (précédent)
    

    
 
      _ID_MEDIA_NEXT
      Bouton next (suivant)
    

    
 
      _ID_MEDIA_MUTE
      Bouton mute (muet)
    

  

  
N'importe quelle fonction de Shareaza peut être ancrée dans la télécommande, utilisant les fonctions anchor. Ouvrez default-fr.xml dans votre dossier Shareaza/skins/languages/, pour voir des exemples dans la section anchor.

  

    
 
      
<anchors>
 
<anchor name="StatusText" rect="69,46,262,20"/>
 
<anchor name="History" rect="70,27,208,13"/>
 
<anchor name="FlowTx" rect="292,27,12,13"/>
 
<anchor name="FlowRx" rect="319,27,12,13"/>
 
        
<anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
<anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
<anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
<anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
<anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
        
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
<anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
<anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
<anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
        
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
<anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
</anchors>

    

  

  
PARTES

  
Les boutons peut avoir des condition "up", "hover", "down" et "disabled".

  

    
 
      Partes
      Description
    

    
 
      _ID_MEDIA_STOP.Up
      Le bouton "Stop" en mode "Up" (non-cliqué)
    

    
 
      _ID_MEDIA_STOP.Hover
      Le bouton "Stop" en mode "hover" (quand le curseur est au-dessus).
    

    
 
      _ID_MEDIA_STOP.Down
      Le bouton "Stop" en mode appuyé.
    

    
 
      _ID_MEDIA_STOP.Disabled
      Le bouton "Stop" en mode desactivé
    

  

  
Pour tous ces parts vous pouvez avoir ces états. Quand le curseur et là-dessus un bouton, l'état hover est peint, quand le bouton et presser l'état "down" est peint. Mais ces parts sont seulement utilisés s'ils ont des anchors qui les accompagnent. Donc on a besoin des anchors et des parts.

  

    
 
      
<anchors>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
</anchors>
 
<parts>
 
        
  <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
        
  <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
</parts>

    

  

  
Voici des petites astuces :

  
    
    
  • Mettre les anchors "play" et "pause" sur la même région, en exclure l'état désactivé. Un bouton est formé qui va montrer "pause" quand la musique joue, et un bouton "play" quand la musique est en-pause ou arrêtée.
    • 
    
  • Si un état désactivé est exclus pour "play", le bouton "play" va agir comme un bouton "open file" quand le lecteur média est fermé ou sans fichiers dans la liste de lecture.
    • 
    
  • Pour les parts History ou Flow, utiliser "1" pour avoir l'image peinte d'en bas et "2" pour avoir l'image peinte d'en haut. (Par exemple, une apogée dans votre trace de bande-passante envois ou téléchargements.)
    • 
  

  
Voici à quoi votre section parts (états des boutons up, down, disabled, hover) peut ressembler.

  

    
 
      
<parts>
 
<part name="Background" rect="0,0,341,125"/>
 
<part name="HistoryTx1" rect="6,150,208,13"/>
 
<part name="HistoryRx1" rect="6,131,208,13"/>
 
<part name="FlowTx1" rect="228,131,12,13"/>
 
        
<part name="FlowRx1" rect="255,131,12,13"/>
 
<part name="MediaSeekTab" rect="159,210,23,11"/>
 
<part name="MediaSeekBar" rect="209,210,92,10"/>
 
<part name="MediaVolTab" rect="140,210,9,17"/>
 
<part name="MediaVolBar" rect="159,221,58,17"/>
 
<part name="ScalerTab" rect="224,224,9,9"/>
 
        
<part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
<part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
<part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
<part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
<part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
<part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
        
<part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
<part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
        
<part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
<part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
        
<part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
<part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
<part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
        
<part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
        
</parts>

    

  

  
FONTS (Police)

  
Prochainement, on doit spécifier le text-caption. Il contrôle la police et style qui vont apparaître dans le anchor StatusText. Il sera utilisé pour le titre de la chanson, le temps, la bande-passante, etc.

  
    
    
  • Face - Le name (nom) du font face, par exemple "Tahoma".
    • 
    
  • Size - La grandeur de la police, par example "8"
    • 
    
  • Weight - Le "weight" (graisse), un nombre entre 1 et 1000, ou "normal" ou "bold".
    • 
    
  • Colour - la couleur, en style html, du StatusText.
    • 
  

  

    
 
      
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>

    

  

  
REGIONS

  
Pour terminer, on peut spécifier n'importe quelle forme pour la télécommande en utilisant les éléments region. Les régions consistent des "shapes", qui représentent une forme primitive, et qui sont additionnés en utilisant les opérations sur les ensembles mathématiques pour façonner une forme complexe finale.

  
Voici un exemple :

  

    
 
      
<region>
 
 <shape type="rectangle" rect="9,25,-11,-1"/>
 
 <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/>
 
</region>

    

  

  
Chaque "shape" consécutif est combiné avec la région en-formation pour finalement former la forme finale de la fenêtre. Chaque shape contient :

  
    
    
  • type - Le type du shape (expliqué ci-dessous)
    • 
    
  • rect - Le rectangle qui forme la bordure de ce shape, dans la forme x1,y1,x2,y2. Les nombres négatifs sont en relation avec le droit et bas de la fenêtre, donc "0,0,-1,-1" va couvrir la fenêtre entière.
    • 
    
  • combine - Comment combiner ce shape avec le précédent. Le premier shape ne doit avoir un attribut "combine".
    • 
  

  
Les méthodes de composition sont :

  
    
    
  • or - Additionner le shape au précédent ("OR")
    • 
    
  • and - Prendre les régions en-commun de ce shape et tous les  précédents ("AND")
    • 
    
  • xor - Additionner la région de ce shape avec les précédents, en exclure les régions en commun ("XOR")
    • 
    
  • diff - Soustraire ce shape des précédents
    • 
  

  
Les types shape sont :

  
    
    
  • rectangle - Un rectangle
    • 
    
  • ellipse - Une ellipse
    • 
    
  • roundRect - Un rectangle avec des coins arrondis. Les shapes de ce type doivent avoir un attribut de plus : size, avec deux paramètres qui représentent la longueur et hauteur des courbes, par exemple size="16,20"
    • 
  

  
Vous avez FINI. Il faut maintenant le tester ...

  

    
 
      
<?xml version="1.0" encoding="UTF-8"?>
 
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
 
<manifest name="My Remote"
 
 author="My name"
 
 description="A remote"
 
        
 link="http://www.shareaza.com/"
 
 email="Me@myemail.com"
 
 version="1.0"
 
 type="skin"
 
 language="en"
 
 />
 
        
<windowSkins>
 <windowSkin> 
 <image type="image" path="WMPRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
 <anchors>
 
 <anchor name="StatusText" rect="69,46,262,20"/>
 
        
 <anchor name="History" rect="70,27,208,13"/>
 
 <anchor name="FlowTx" rect="292,27,12,13"/>
 
 <anchor name="FlowRx" rect="319,27,12,13"/>
 
 <anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
 <anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
        
 <anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
 <anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
 <anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
 <anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
 <anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
        
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
 <anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
 <anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
 </anchors>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 <part name="HistoryTx1" rect="6,150,208,13"/>
 
 <part name="HistoryRx1" rect="6,131,208,13"/>
 
 <part name="FlowTx1" rect="228,131,12,13"/>
 
 <part name="FlowRx1" rect="255,131,12,13"/>
 
        
 <part name="MediaSeekTab" rect="159,210,23,11"/>
 
 <part name="MediaSeekBar" rect="209,210,92,10"/>
 
 <part name="MediaVolTab" rect="140,210,9,17"/>
 
 <part name="MediaVolBar" rect="159,221,58,17"/>
 
 <part name="ScalerTab" rect="224,224,9,9"/>
 
 <part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
        
 <part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
 <part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
 <part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
 <part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
        
 <part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
        
 <part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
        
 <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
        
 <part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
 <part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
  <part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
 </parts>
 
        
 <caption fontFace="Small Fonts" fontSize="8" fontWeight="normal" colour="FFB000"/>
 
 <region>
 
  <shape type="rectangle"  rect="1,15,341,83"/>
 
  <shape type="roundrectangle" rect="319,0,332,1" combine="or" />
 
 </region>
 
 </windowSkin>
 
        
</windowSkins>
</skin>

    

  

  
Bonne chance ! Si vous avez des questions, ou des suggestions et corrections, veuillez participer aux discussions sur le forum skin. =)
  

  

 
[ 
    Retournez aux thèmes pour Shareaza ]





      

    

    



  

    
    
      
  • en
    • 
      
  • es
    • 
      
  • fr
    • 
      
  • de
    • 
      
  • hr
    • 
      
  • it
    • 
      
  • lt
    • 
      
  • nl
    • 
      
  • nb
    • 
      
  • pl
    • 
      
  • pt
    • 
      
  • sl
    • 
      
  • tr
    • 
      
  • el
    • 
      
  • he
    • 
      
  • ja
    • 
      
  • zh-tw
    • 
      
  • en
    • 
      
  • ca
    • 
      
  • fa
    • 
      
  • ru
    • 
    

  



  




Beaucoup de personnes aident Shareaza de leur temps et leurs efforts. Merci de voir notre page de remerciements.


Visit Shareaza's Project Page at SourceForge.net



  < Haut de la page | Contactez-nous >