Introduction

L'interface graphique de MediaPortal est une solution modulaire qui emploie des skin pour séparer le design de l’application. Le fonctionnement de l’application MediaPortal repose sur des fenêtres d'interface utilisateur (GUIWindow) contenant beaucoup de commandes graphiques (GUIControl). Cependant, sans dossier skin, aucune interface n’est visible.
Les utilisateurs accèdent aux fonctionnalités apparentes de l’application au travers de skins qui sont définit en XML. L'application chargera le fichier skin XML approprié lors de l'initialisation. Par exemple, quand MediaPortal demarre, le premier skin à charger généralement sera le fichier skin home.xml.
L'utilisation de XML fournit simplement une manière structurée de dire à MediaPortal la disposition, le type de la commande et les coordonnées de chaque article sur l'écran tel que la couleur du texte, la transparence des graphismes etc... En changeant le fichier XML dans un skin le design peut-être entièrement modifié. Bien que les termes soient très différents, l'idée est identique que de réaliser une page Web cependant un XML est sensible à la case.

Les répertoires Skin

Les fichiers skin sont contenus dans le répertoire skin dans le répertoire principal de l’application MediaPortal. Dans le répertoire skin racine, il y a des sous-répertoires pour chaque skin (BlueTwo, ECM, MetalMedia, Projet X et Razor tous fonctionnent avec MediaPortal) et ces répertoires contiennent les différents fichiers skin (par exemple home.xml). Il y a également des sous-répertoires pour les polices, les médias et les sons. Le répertoire de médias a toutes les textures que le dossier skin emploie (normalement dans le format png pour la meilleure qualité).

Les fichiers spécifiques XML

Il y a deux fichiers spécifiques XML dans chaque répertoire de skin : fonts.xml et references.xml

Les polices (fonts.xml)

Les polices qui sont disponibles dans le skin sont définies dans le fichier fonts.xml. Les polices réelles sont stockées dans le sous-répertoire fonts. Format du fichier fonts.xml

Entête :

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<fonts>

Déclaration de chaque police :

        <font>
                <name>font10</name>
                <filename>Franklin Gothic Medium</filename>
                <height>10</height>
                <bold>[yes|no]</bold>
                <italic>[yes|no]</italic>
                <start>0</start>
                <end>1536</end>
        </font>

Pied de fichier :

</fonts>

Références (references.xml)

Le fichier references.xml contient au minimum les informations sur la version et la résolution du skin (largeur et hauteur). Il peut également inclure des valeurs par défaut pour n'importe laquelle des commandes (employant la balise <control>) qui sont employées dans le skin ainsi vous ne devez pas définir, par exemple, les tailles des boutons chaque fois que vous l’employez dans vos autres fichiers skin XML. Elle peut définit également les modèles qui peuvent être appliqués à n'importe quelle commande bien que ce dispositif ne soit pas couvert dans ce document.
Voici un exemple partiel décrivant les buts d'un fichier references.xml. Il prouve que ce skin est conçu pour un affichage de 720x576 Pixel (MediaPortal le mesurera automatiquement) et une version 0.1.0.15. Il contient également les valeurs par défaut qui seront employées pour n'importe quelle commande de bouton dans n'importe quel autre fichier skin XML dans ce répertoire Skin :

<controls>
        <skin>
                <width>720</width>
                <height>576</height>
                <version>0.1.0.15</version>
        </skin>
        <control>
                <description>default button</description>
                <type>button</type>
                <id>1</id>
                <posX>300</posX>
                <posY>200</posY>
                <width>190</width>
                <height>32</height>
                <textXOff>10</textXOff>
                <textYOff>5</textYOff>
                <textureFocus>menu_list_focus.png</textureFocus>
                <textureNoFocus>menu_list_nofocus.png</textureNoFocus>
                <font>font13</font>
                <textcolor>ffffffff</textcolor>
                <colordiffuse>ffffffff</colordiffuse>
                <disabledcolor>60ffffff</disabledcolor>
        </control>
        ...
        ...

Les informations sur les controls sont décrit dans le chapitre "Les types de Control".

Les répertoires Media et Sound

Le répertoire "Sound" contiennent des fichiers WAV employés par l'application et les plugins de MediaPortal.
Les sons suivants sont inclus par défaut dans les skins. Ils peuvent être ajustés dans l'application de configuration en employant le mappeur d'entrée.

• back.wav
• click.wav
• cursor.wav
• photo.wav

Les sons suivants sont employés par les plugins :

• notify.wav (MyMail plugin)
• MyTetris.Block.wav (MyTetris plugin)
• MyTetris.Knock.wav (MyTetris plugin)
• MyTetris.Level.wav (MyTetris plugin)
• MyTetris.Line.wav (MyTetris plugin)

Les fichiers package Graphique

Les packages graphiques sont produits lors de l'execution et sont utilisé pour garder le rendu de l'application aussi efficace que possible. Ils sont seulement créés quand les packages graphiques n'existe pas déjà. Ils sont identifiable par packedgfx au début du nom des fichiers et avec pour extensions bxml (xml binaire) ou png.
Quand les différents fichiers graphiques d'un skin sont modifiés les fichiers de package graphique doivent être supprimés sans quoi les modifications ne seront pas visible lors du lancement de l'application Médiaportal.

Les fichiers Skin

Cette section couvre les définitions de disposition et de balise pour les fichiers skin. À la différence des pages Web, les fichiers XML ne pardonnent aucune erreur et il est important de faire attention à utiliser les syntaxes correctes.

Les fichiers <import>

Les fichiers skin permettent d'inclure des fichiers import ou include dans les sections dédier a cela ( entre les balise <import></import> ou <include></include>). Le but est de pouvoir utiliser les mêmes ressources dans plusieurs fichier skin XML. Cela permet de réduire la taille des fichiers et de gérer plus facilement les modifications.
Afin de profiter des avantages des fichiers d'import/include il existe les balises <define>. Elles permettent le passage de valeur entre le fichiers skin appelant et les fichiers d'import/include.
Ce qui suit serait un exemple typique de la façon dont ce nouveau dispositif pourrait être employé :

<window> <br>
        <!-- include the common window features here --> <br>
        <define>#header.label:134</define> <bR>
        <define>#header.image:videos_logo.png</define><br> 
        <define>#header.hover:hover_my videos.png</define> <br>
        <controls> <br>
                <!-- include the header logo, text and other common elements --> <br>
                <import>common.window.xml</import> <br>
                <control> <br>
                ...<br>
                ...<br>

Ce qui suit est un exemple de la façon dont un fichier import ou include pourrait être ecrit :

<window> <br>
        <control> <br>
                <type>image</type> <br>
                <id>1</id> <br>
                <posX>60</posX> <br>
                <posY>20</posY> <br>
                <texture>#header.image</texture> <br>
        </control> <br>
        <control> <br>
                <type>label</type> <br>
                <id>1</id> <br>
                <posX>250</posX> <br>
                <posY>70</posY> <br>
                <label>#header.label</label> <br>
                <font>font16</font> <br>
                <textcolor>ffffffff</textcolor> <br>
        </control> <br>
        ...<br>

Les éléments <window>

Le premier élément dans un fichier de Skin doit être le tag <window> qui contient l'information qui s'applique à la fenêtre entière. Voici un exemple partiel d'un fichier skin.xml . Chacun des tags est définie ci-dessous :

<window> <br>
        <id>1234</id> <br>
        <defaultcontrol>2</defaultcontrol> <br>
        <allowoverlay>yes</allowoverlay> <br>
        <autohidetopbar>no</autohidetopbar> <br>
        <define>#header.label:5900</define> <br>
        <define>#header.image:trailers_logo.png</define> <br>
        <define>#header.hover:hover_my trailers.png</define> <br>
        <controls> <br>
                <import>common.window.xml</import> <br>
                <control> <br>
                ... <br>

Les éléments <controls>

L'élément <controls> est un bloc contenant tous les commandes d'une page.

Les éléments <control>

Toutes les commandes de l'interface sont mises entre la balise <controls> et </controls> et chacun est contenu dans une balise <control>. Certaines commandes (par exemple groupe) peuvent vous permettre de gérer des sous-commandes dans une commande ainsi vous pouvez avoir des balises <control> dans une balise <control> parent.

<window> <bR>
        ... <bR>
        <controls> <br>
                ... <br>
                <control> <bR>
                        <id>1</id> <br>
                        <description>default button</description> <br>
                        <type>button</type> <br>
                        ... <br>

Voici l'ensemble des paramètres a définir dans les balises :

Les types de commande

Selon le type de la commande définit dans l'élément de commande ci-dessus il y aura des balises additionnelles spécifiques à ce type de commande. La liste ci-dessous contient tous les types de commande avec leur nom interne de classe dans le code de MediaPortal et une description courte :

La Commande "button"

GUIButtonControl (button)

Image Bouton 1