UI Template Access

[garrynewman]

When designing UI components, you can now access the html template directly.

So for example, we create a new Panel type called Select.. and the html template can look like this.

<select> 
	<option value="#f00">Red</option>
	<option value="#ff0">Yellow</option> 
	<option value="#0f0">Green</option>
</select>

Now in the Select panel class we can inspect and use the html element.

public override bool OnTemplateElement( INode element )
{
	Options.Clear();

	foreach ( var child in element.Children )
	{
		if ( !child.IsElement ) continue;

		if ( child.Name.Equals( "option", StringComparison.OrdinalIgnoreCase ) )
		{
			var o = new Option();

			o.Title = child.InnerHtml;
			o.Value = child.GetAttributeValue( "value", child.InnerHtml );

			Options.Add( o );
		}
				
	}

	return true;
}

By returning true we're telling the template system not to continue creating children, because in this case we're using the children to populate a list of options.

INode looks like this..