S&box Wiki

Home / History for ui binding

Revision Difference

ui_binding#547882

⤶ <cat>Dev.UI</cat>⤶ <title>UI Layout Binding</title>⤶ ⤶ To enable interaction between code and layout, we enable binding.⤶ ⤶ # 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 is different we update the value. This is our compromise between performance and ease of use.</note>⤶ ⤶ # 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.html" );⤶ ⤶ 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>⤶ ```⤶ ⤶ # Special Events⤶ ⤶ Adding `.console` to the event name will run the string as a console command when the event triggers.⤶ ⤶ ```html⤶ <button onclick.console="map de_dust">Play Game</button>⤶ ```

Account Management

Special Pages

Wiki List