---
title: Syntaxe UI
type: docs
weight: 11
---

Cette page couvre la syntaxe complète du langage de balisage UI de Hytale.

## Commentaires

```
// Commentaire sur une ligne

/* Commentaire
   multi-lignes */
```

## Variables

### Variables Locales

Définissez les variables avec le préfixe `@` :

```
@MyNumber = 50;
@MyString = "Bonjour";
@MyColor = #ff5500;
@MyObject = (Key: value, Other: 123);
```

### Types de Variables

| Type | Exemple |
|------|---------|
| Nombre | `@Size = 50;` |
| Chaîne | `@Text = "Bonjour";` |
| Couleur | `@Color = #ff5500;` |
| Objet | `@Obj = (Width: 100, Height: 50);` |
| Tableau | `@List = [item1, item2, item3];` |
| Booléen | `@Visible = true;` |

### Utiliser les Variables

Référencez les variables avec `@` :

```
Group {
  Anchor: (Height: @MyNumber);
  Background: (Color: @MyColor);
}
```

## Imports

### Importer des Fichiers

Utilisez le préfixe `$` pour importer des fichiers externes :

```
$Common = "Common.ui";
$Sounds = "../Sounds.ui";
$ClientCommon = "../../Common.ui";
```

### Référencer les Variables Importées

Accédez aux variables importées avec la notation pointée :

```
$Common.@DefaultButtonStyle
$Sounds.@ButtonsLight
```

### Utiliser les Templates Importés

Instanciez les templates depuis les imports :

```
$Common.@TextButton {
  @Text = "Cliquez-moi";
}
```

## Couleurs

### Hexadécimal

```
@Color1 = #ff5500;          // RGB
@Color2 = #ff5500ff;        // RGBA
```

### Avec Opacité

```
@Color3 = #ff5500(0.5);     // 50% d'opacité
@Color4 = #000000(0.8);     // 80% d'opacité
```

## Objets

### Objet Simple

```
@Style = (
  FontSize: 16,
  TextColor: #ffffff,
  RenderBold: true
);
```

### Objets Imbriqués

```
@ButtonStyle = (
  Default: (
    Background: (TexturePath: "Button.png", Border: 12)
  ),
  Hovered: (
    Background: (TexturePath: "ButtonHovered.png", Border: 12)
  )
);
```

## Opérateur Spread

Utilisez `...` pour étendre/fusionner des objets :

```
@BaseStyle = (
  FontSize: 16,
  TextColor: #ffffff
);

@ExtendedStyle = (
  ...@BaseStyle,          // Hérite de toutes les propriétés de @BaseStyle
  RenderBold: true        // Ajoute/remplace des propriétés
);
```

Le spread fonctionne dans tout contexte d'objet :

```
Style: (
  ...$Common.@DefaultButtonStyle,
  Sounds: (
    ...$Sounds.@ButtonsLight,
    Activate: (Volume: 10)
  )
);
```

## Templates (Macros)

### Définir un Template

Les templates sont des définitions de widgets réutilisables avec paramètres :

```
@MyButton = TextButton {
  @Text = "";                    // Paramètre avec défaut
  @Anchor = Anchor();            // Paramètre avec défaut
  @Sounds = ();                  // Défaut vide

  Style: @DefaultTextButtonStyle;
  Anchor: (...@Anchor, Height: 44);
  Text: @Text;
};
```

### Instancier un Template

```
// Utiliser avec les défauts
@MyButton {}

// Remplacer les paramètres
@MyButton {
  @Text = "Valider";
  @Anchor = (Width: 200);
}

// Depuis un import
$Common.@TextButton {
  @Text = %ui.button.confirm;
}
```

## Déclarations de Widgets

### Widget Simple

```
WidgetType {
  Property: value;
}
```

### Widget avec ID

Les IDs commencent par `#` et permettent le ciblage depuis Java. Les IDs doivent être en format **UpperCamelCase** (pas de tirets ni underscores) :

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

// IDs valides
#MainPanel
#ConfirmButton
#PlayerHealthBar

// IDs invalides (causeront des erreurs)
#main-panel      // Pas de tirets
#confirm_button  // Pas d'underscores
#playerhealthbar // Doit être en UpperCamelCase
```

### Widgets Imbriqués

```
Group #Container {
  Label #Title {
    Text: "En-tête";
  }

  Group #Content {
    Label {
      Text: "Corps du texte";
    }
  }
}
```

### Widgets Anonymes

Les widgets sans ID sont anonymes :

```
Group {
  Label { Text: "Pas d'ID"; }
}
```

## Sélecteurs

Les sélecteurs sont des chaînes commençant par `#` utilisées pour cibler des éléments :

```java
// Dans le code Java
builder.set("#PlayerName", "Steve");
builder.append("#Container", "ui/child_template");
builder.clear("#Content");
```

## Clés de Traduction

Utilisez le préfixe `%` pour les chaînes localisées :

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

TextButton {
  Text: %client.button.confirm;
}
```

## Constructeurs Typés

Certains types complexes utilisent des constructeurs de style fonction :

```
// Constructeurs de styles
@Style = LabelStyle(FontSize: 16, TextColor: #fff);
@BtnStyle = ButtonStyle(Default: (...), Hovered: (...));

// Constructeurs de layout
@Pad = Padding(Full: 10);
@Anch = Anchor(Width: 100, Height: 50);

// Constructeurs visuels
@Bg = PatchStyle(TexturePath: "bg.png", Border: 12);
@Scroll = ScrollbarStyle(Size: 6, Spacing: 8);
```

## Exemple Complet

```
$Common = "Common.ui";
$Sounds = "Sounds.ui";

@PanelWidth = 400;
@PanelHeight = 300;
@TitleColor = #b4c8c9;

@PanelTitle = Label {
  @Text = "";

  Style: (
    FontSize: 20,
    TextColor: @TitleColor,
    RenderBold: true,
    HorizontalAlignment: Center
  );
  Text: @Text;
};

Group #MainPanel {
  Anchor: (Width: @PanelWidth, Height: @PanelHeight);
  Background: (TexturePath: "Panel.png", Border: 20);
  LayoutMode: Top;
  Padding: (Full: 16);

  @PanelTitle {
    @Text = %ui.panel.title;
  }

  Group #Content {
    FlexWeight: 1;
    LayoutMode: TopScrolling;
    ScrollbarStyle: $Common.@DefaultScrollbarStyle;
  }

  $Common.@TextButton #ConfirmButton {
    @Text = %ui.button.confirm;
    @Sounds = $Sounds.@ButtonsLight;
  }
}
```