Back

Use Tags

include

You can dynamically include tags, with the include tag:

Dynamically include tags

<include tag="{this.includeTag}" params="{this.tagParams}"> </include>

XML Parameter Syntax

Instead of using the standard syntax:

Standard syntax for tag parameters

<app environment="{ {development:true, debug:true} }" colors="{ {brand:{ color:'#342321',highlight:'342321' }, background:{color:'#342321'}} }"> </app>

You can also use the XML parameter syntax, for better oversight:

XML Syntax for parameters

<app> <environment development="{true}" debug="{true}"></environment> <colors> <brand color="#342321" highlight="#342321"></brand> <background color="#342321"></background> </colors> </app>

To pass arrays, use the array attribute:

Pass arrays (XML Syntax)

<app> <environment development="{true}" debug="{true}"></environment> <configs array=""> <config name="location_service_url" highlight="http://api.google.com/location"></config> <config name="app_title" highlight="My Title"></config> </configs> </app>

Custom tags

Create a new tag

Create a tag file

A tag has three optional elements, a style, a model and a script tag. A model always contains exactly one HTML child element.

A simple tag (HTML tab)

<div class="text"> <label>{this.label}</label> <input type="text" name="{this.name}" value="{this.value}"> </div>

As soon as your tag is being used, the framework will download the component. You don't need to register when you declare dependencies.

Register your tag

Tag.register('text','/tags/components/text.html');

Call your tag

A tag contains everything it needs in a file.

Use your tag

<form.text label="Firstname" name="firstname"></form.text>

Result

Extend your tag with JS / CSS

The script tag should only contain one class which extends the class Tag.

The style should contain all the basic styles, the component needs to render. It is recommoended to apply your brand colors, etc. in a separate stylesheet and use the styles here for functional CSS which is requried by the component to work.

JavaScript tab

<script> class Text extends Tag { init() { this.label += ':'; } submit() { alert('submitted ' + this.input.value); } } </script>

HTML tab

<div class="text"> <label>{this.label}</label> <input element="input" type="text" name="{this.name}" value="{this.value}"> <button (click)="submit()">Ok</button> </div>

CSS tab

<style type="text/css"> .text label { color: blue; } </style>

Set tag parameters

Here we set a static string and a javascript array

Set parameters

<dropdown label="Movie" options="{[{name:'Please choose...'},{name:'test',value:'test'}]}"></dropdown>

Use a local or global variables from your tag. You can also use the this.update('this.countries') method, to update the value when it changed.

Use a local (dynamic) variable

<dropdown label="Countries" options="{this.countries}"></dropdown>

It's also possible to define your parameters in XML.

XML Syntax

<dropdown label="Language"> <options array=""> <option name="German" value="de"></option> <option name="French" value="fr"></option> <option name="English" value="en"></option> </options> </dropdown>

Result

Available methods

Access the HTML element from JavaScript (JavaScript Tab)

class Currency extends Tag { init() { this.message = 'Hi!' } render(browserElement) { this.myinput.value = 'Initial Value'; this.myinput.setAttribute('autocomplete', 'off'); } }

Declare the myinput variable (HTML Tab)

<div class="text"> {this.message} <input element="myinput"> </div>
  • init
    This method is called when your tag is initialized the first time. You have access to all the attributes and parameters.
  • render(browserElement)
    This method is called, when the html element dom for your tag has been rendered, including all child elements. You can access children with the