The template of Asta4D is inheritable, child template can override, append or insert content to certain place in parent template. Let's see a sample:
Example 2.1. parent.html
<html> <head> <afd:block id="block1"> <link href="parent1.css" rel="stylesheet" type="text/css" /> </afd:block> <afd:block id="block2"> <link href="parent2.css" rel="stylesheet" type="text/css" /> </afd:block> <title>extension sample</title> </head> <body> <afd:block id="content">content</afd:block> </body> </html>
Child template can declare inheritance by "afd:extension" and overriding can be declared by "afd:block":
Example 2.2. child.html
<afd:extension parent="parent.html"> <afd:block append="block1"> <link href="child1.css" rel="stylesheet" type="text/css" /> </afd:block> <afd:block insert="block2"> <link href="child2.css" rel="stylesheet" type="text/css" /> </afd:block> <afd:block override="content "> <div>hello</div> <afd:embed target="/templates/embed.html" ></afd:embed> </afd:block> </afd:extension>
"afd:block" support 3 types action: insert, append and override.
In the Example 2.2, “child.html”, there is an additional declaration of including by "afd:embed" which embed the target file to the current place of the current file. Let's see the embed.html:
Example 2.3. embed.html
<afd:block append="block1">
<link href="embed.css" rel="stylesheet" type="text/css" />
</afd:block>
<div>good embed</div>
The "afd:block" declaration in the embeded target file is available after the content of target file is inserted into the Example 2.2, “child.html”, all "afd:block" tags will be treated as overriding(inserting/appending) to the parent template and the contents out of "afd:blocks" will be inserted at the place where the "afd:embed" is declared.
After all the template files are merged, we will get the following result:
Example 2.4. The result of template merging:
<html> <head> <!-- block1 --> <link href="parent1.css" rel="stylesheet" type="text/css" /> <link href="child1.css" rel="stylesheet" type="text/css" /> <link href="embed.css" rel="stylesheet" type="text/css" /> <!-- block2 --> <link href="child2.css" rel="stylesheet" type="text/css" /> <link href="parent2.css" rel="stylesheet" type="text/css" /> <title>extension sample</title> </head> <body> <!-- content --> <div>hello</div> <!-- embed --> <div>good embed</div> </body> </html>
Extra parameters can be passed to the target embeded file by specifying the DOM attribute of "afd:embed" when we are embeding files.
Example 2.5. Sample of parametrized embeding:
<afd:embed target="/xxx/showList.html" limit="30"></afd:embed>
The "limit" parameter can be accessed by variable injection in the rendering logic of showList.html, by which we can parameterize the embeding. This feature is very useful for creating a page component which encapsulates common html snippets and can be controlled by the passed parameters. Basically, embeding a file in a template file is similar to calling a function with(or without) arguments. Especially, the parameters are not limited to specified static values in the template file, they can be valued dynamicaly at runtime too. Further, the type of parameters is not restricted to the stringizable types such as String or Integer/Long, arbitrary Java type can be specified dynamically at runtime. See the reference of Renering logic to learn more details.
Simply, the idea of Asta4D's template system is akin to the traditional OOP model, the parent and child templates can be regarded as parent/child classes and the block can be viewed as a overridable virtual method. The embed external files can be also treated as funcation calling. As a matter of fact, since arbitrary type of value can be passed to the embed files, there is actually no difference between Asta4D's embeding and common function calling.