Inheriting from a Base UI

  • Article

UI descriptions have an inheritance model that allows you to take advantage of common functionality across multiple UIs. When you create one UI, you can inherit all of the properties, rules, and content blocks from another UI, the base UI. This feature enables you to reuse state and behavior without having to re-implement it.

  • Properties: A derived UI can simply override the inherited properties of the base UI by setting other default values.

  • Rules: Any rules specified in the derived UI are appended to the rules that were inherited from the base UI. Because rules frequently access Locals and Content blocks, be careful when adding rules because the base UI owns its own named Locals and Content blocks. Typically, you add rules to a derived UI in simple situations—for example, when accessing objects only in the derived UI. You can design your derived UI rules to access content in the base UI if you are familiar with the design of the base UI.

  • Content: Any content specified in the derived UI replaces that of the base UI. Use this feature with caution—the base UI is designed assuming its content exists. You should only override Content values when you are familiar with the base UI design.

    Named Content blocks in the UI are used by Repeater elements. A derived UI can override a named Content block, or add a named Content block that the base UI is expecting to override.

The following example demonstrates property overrides. The Main UI uses the properties from a base UI MyBaseUI. However, the one property that is defined in Main, BackgroundColor, overrides the property that is set in MyBaseUI.

  <UI Name="Main" BaseUI="me:MyBaseUI">
    <Properties>
      <Color Name="BackgroundColor" Color="DarkGreen" />
    </Properties>
    
    <Content>
      <Text Content="The background color from the base UI is overridden." 
            Color="[TextColor]" BackColor="[BackgroundColor]" Font="[BasicFont]" />
    </Content>
  </UI>

  <UI Name="MyBaseUI" >
    <Properties>
      <Color Name="BackgroundColor" Color="DarkRed" />
      <Color Name="TextColor" Color="PaleGoldenrod" />
      <Font  Name="BasicFont" FontName="Verdana" FontSize="16" FontStyle="Italic" />
    </Properties>
  </UI>

Sample Explorer

  • Markup > BaseUI

See Also