Init

content/ui-systems/ui-syntax.fr.md

@@ -0,0 +1,331 @@
+---
+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;
+  }
+}
+```