---
title: Fichiers UI
type: docs
weight: 10
---

Les fichiers UI (`.ui`) sont le langage de balisage déclaratif de Hytale pour définir les interfaces utilisateur. Ils décrivent la structure, la disposition et le style des éléments UI qui peuvent être chargés par les plugins via `UICommandBuilder.append()`.

## Emplacement des Fichiers

Les fichiers UI sont généralement stockés dans le répertoire Assets :

```
Assets/
  Common/UI/Custom/           # UI personnalisée côté serveur
    Pages/                    # Templates de pages personnalisées
    Hud/                      # Éléments HUD personnalisés
    Common.ui                 # Définitions partagées
    Sounds.ui                 # Définitions de sons
  Client/Interface/           # UI côté client
    InGame/Hud/               # Composants HUD
    Common/                   # Composants communs
    Common.ui                 # Définitions partagées client
```

## Structure de Base

Un fichier `.ui` se compose de définitions de variables et de déclarations de widgets :

```
// Importer des définitions externes
$Common = "../Common.ui";

// Définir des variables locales
@ButtonHeight = 44;
@TextColor = #96a9be;

// Définir un arbre de widgets
Group #Container {
  Anchor: (Width: 400, Height: 300);
  Background: (Color: #000000(0.8));

  Label #Title {
    Text: "Bonjour le monde";
    Style: (FontSize: 24, TextColor: @TextColor);
  }
}
```

## Charger des Fichiers UI depuis les Plugins

Utilisez `UICommandBuilder.append()` pour charger un fichier UI :

```java
@Override
public void build(Ref<EntityStore> ref, UICommandBuilder builder,
                  UIEventBuilder events, Store<EntityStore> store) {
    // Charger le template UI (extension .ui OBLIGATOIRE)
    builder.append("Pages/MyPage.ui");

    // Ajouter à un élément spécifique
    builder.append("#ContentList", "Pages/ListItem.ui");

    // Définir des valeurs dynamiques avec des sélecteurs
    builder.set("#Title", "Bienvenue, " + playerRef.getUsername());
}
```

### Résolution des Chemins

Le chemin est relatif à `Common/UI/Custom/`. L'extension `.ui` est **obligatoire**.

| Chemin dans `append()` | Emplacement Résolu |
|------------------------|-------------------|
| `Pages/MyPage.ui` | `Common/UI/Custom/Pages/MyPage.ui` |
| `Common.ui` | `Common/UI/Custom/Common.ui` |

### Pour les Plugins Java (Mods)

Lors de la création d'un plugin Java avec une UI personnalisée, placez vos fichiers `.ui` dans le dossier resources :

```
your-plugin/
  src/main/
    java/                           # Code source Java
    resources/
      Common/UI/Custom/             # Les fichiers UI vont ici
        Pages/
          MyPage.ui
          MyButton.ui
        Common.ui                   # Vos définitions partagées
      plugin.json                   # Manifeste du plugin
```

Définissez `"IncludesAssetPack": true` dans votre `plugin.json` pour activer le chargement des assets :

```json
{
  "Group": "MyGroup",
  "Name": "MyPlugin",
  "Version": "1.0.0",
  "Main": "com.example.MyPlugin",
  "IncludesAssetPack": true
}
```

{{< callout type="info" >}}
Le serveur cherche automatiquement les fichiers UI dans `Common/UI/Custom/` au sein de l'asset pack de votre plugin. C'est pourquoi des chemins comme `Pages/MyPage.ui` fonctionnent sans spécifier le chemin complet.
{{< /callout >}}

## Concepts Clés

### Variables

Les variables stockent des valeurs réutilisables :

```
@Height = 50;                           // Nombre
@Color = #ff5500;                       // Couleur
@Style = (FontSize: 16, RenderBold: true);  // Objet
```

### Imports

Importer des définitions depuis d'autres fichiers :

```
$Common = "Common.ui";                  // Importer un fichier
$Common.@DefaultButtonStyle             // Référencer une variable importée
```

### IDs de Widget

Utilisez `#` pour assigner des IDs ciblables depuis Java :

```
Label #PlayerName {
  Text: "Inconnu";
}
```

```java
builder.set("#PlayerName", player.getUsername());
```

### Localisation

Utilisez le préfixe `%` pour les clés de traduction :

```
Label {
  Text: %server.ui.welcome.title;
}
```

## Étapes Suivantes

- [Syntaxe UI](ui-syntax) - Référence de syntaxe détaillée
- [Widgets UI](ui-widgets) - Types de widgets disponibles
- [Propriétés UI](ui-properties) - Propriétés communes
- [Styles UI](ui-styles) - Système de styles