Code-Behind

To make it easy to interact with HTML elements in your web application from code, Elements offers a Code-behind model, similar to .NET's XAML, where the compiler generates a partial class with strongly typed members representing your HTML.

This model is enabled by default in the "Web Module w/ Code-Behind" template, or you can enable it manually by setting the build action of your .html files to "Html" and manually adding a code file with a partial class to your project.

Any HTML element marked with an id attribute will get represented in the generated object model – where available with a the concrete DOM type, otherwise as the HtmlElement base type.

The head and body elements, will always be exposed, if present. An optional id attribute will override the name they are exposed under.

<input type="button" id="okBbutton">Click Me</button>

From your code in the partial class representing the HTML file, you can then access the button as a local property, call its methods, and react to its events:

okButton.disabled := true;

okButton.disabled = true;

okButton.disabled = true

okButton.disabled = true;

okButton.disabled = true

okButton.disabled = True

Events

In addition to accessing, modifying and calling a DOM object's properties and methods, you can also subscribe to callback events, if the element was marked with events="true" in the HTML.

Events use the standard events mechanism available in all Elements languages, and work similar to how events work on the .NET platform.

Just like on .NET (and the other platforms, although less common there), you can assign any Block, including an instance method, an Anonymous Method or, where available, a Lambda Expression.

okButton.onClick += (sender, ea) -> begin 
  ...
end;

okButton.onClick += (sender, ea) => {
    ...
};

okButton.onClick += {sender, ea in
    ...
}

okButton.onClick += (sender, ea) -> {
    ...
}

okButton.onClick += func(sender, ea) { 
    ...
}

AddHandler okButton.onClick, Sub (sender As HtmlElement, ea As Dynamic) 
  ...
End Sub

For Mercury, the exposed HTML elements are adorned with the WithEvents feature, so that event handlers can optionally use the Handles syntax:

Sub OkClicked(sender, e) Handles okButton.onclick
  ...
End Sub

Once subscribed, your callback will be called whenever the Browser or DOM triggers the particular event.

Behind the Scenes

Behind the scenes this functionality is supported by a second code file that is generated as part of the build process, and injected to the compile. In Fire and Water, you can access this file via the "Generated Source Files" folder shown for your project in the jump bar. You can also use "Go to Defintion" on a local reference to one of your HTML elements to jump to irt, in all IDEs.

Since this file is generated by the build, it (and Code Completion for the members) is only available after the forst successful build of the project.

The generated file will be have the same name as your .html file, with an added .vb extension. It will always be generated in Mercury, regardless of the language of your project, so that it can enable support for the Handles syntax in Mercury.