Creating Custom Extensions for Views
Custom extensions can be defined directly in the code editor, making it easier to form the language in a way that closely models your problem domain. At its simplest, a custom extension can be defined by assigning a new tag name to a collection of tags.
<vdl-extension name="my-banner">
<vdl-template>
<div class="banner">
<h1>
<vdl-contents>
</vdl-contents>
</h1>
</div>
</vdl-template>
</vdl-extension>
Once defined like this, you can subsequently use markup such as:
<vdl version="4.7">
<vdl-extension name="my-banner">
<vdl-template>
<div class="banner">
<h1><vdl-contents></vdl-contents></h1></div>
</vdl-template>
</vdl-extension>
<vdl-page>
<vdl-section heading="Using Custom Extensions">
<vdl-row>
<vdl-column size="12">
<my-banner>Welcome</my-banner>
</vdl-column>
</vdl-row>
<vdl-row>
<vdl-column size="12"></vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
</vdl> Resulting in generated HTML such as:
<div class="banner">
<h1>Welcome</h1>
</div> In this example, the
<vdl-extension> element takes a single attribute,
name, that defines the new tag name.
|
Important All VDL tags must be namespaced, which takes the form of two words separated by a hyphen. Any attempt to define a custom extension without a namespace will result in an error. Namespaces help to minimize collisions between sets of tags and you are encouraged to define your own prefix(es) for grouping and identification purposes.
|
The <vdl-extension> element supports a range of possible markup but two tags in particular are important at this stage: <vdl-template> and <vdl-contents>.
<vdl-template>
This element tells the parent <vdl-extension> element what markup to augment your extension with when it is used later in the view. In the previous example, the <vdl-template> element included a <div> element and a <h1> element which were placed into the generated view when the <my-banner> element was used.
<vdl-contents>
Within a <vdl-template> element, you use a <vdl-contents> element to inform VDL that any contents of the later usage of our custom extension should be inserted at runtime at this point. The word Welcome in <my-banner>Welcome</my-banner> replaced the <vdl-contents> element for the generated markup. The contents can be any combination of text, VDL, and HTML tags.
While this takes a little time to set up, the <my-banner> element is now part of the VDL language for your current view and can be used exactly the same way as any other VDL or HTML element. It can be used to store an updatable instance of an element that can be used in several views, and have any change reflected through the application.