S&box Wiki

Revision Difference

ui_binding#527217

<title>UI Layout Binding</title> To enable interaction between code and layout, we enable binding. # Binding Variables # Variables Create a property on your component's code. ```csharp public string MyVariable { get; set; } ``` Bind it to any property by adding @ before the property name. ```html <text @text="MyVariable"></text> ``` The property will be updated when your variable changes. <note>The properties are polled at regular intervals. If the value if different we update the value. This is our comprimise between performance and ease of use.</note> # Binding Elements # Elements You can create a reference to an element. ```csharp public Label GameTitle { get; set; } ``` ```html <text @ref="GameTitle"></text> ``` This variable will be available immediately after the layout is loaded. ```csharp LoadLayout( "/ui/mainmenu/mainmenu.htm" ); GameTitle.Text = "s&box"; GameTitle.Class.Add( "game_title" ); ``` # Events You can call events from elements ```html <button class="option" onclick="PlayGame()">Play Game</button> ``` ```csharp public void PlayGame() { // Do stuff } ``` The method is called on the panel which loaded the layout. # Panel Events Similar to events, you can wire up Panel Events that don't need any code. In this example clicking on the Options button toggles the game_title class on it. ```html <button class="option" onclick="this.ClassToggle( 'game_title' )">Options</button> ``` You can also target this towards other panels by name ```html <button name="MyPanel">Watch me</button> <button onclick="MyPanel.ClassToggle( 'hidden' )">Click Me</button> ```