Help us continue to make it better
HTML templates are based in pure HTML files.
They are logic-less, and they are not required to be XHTML or well formed HTML, any HTML will work if it can be parsed by a browser.
Also no special tags are required, and sub templates (placeholders) are identified using custom data attribute “data-template” which is a standard mechanism.
The idea behind this template aproach is to completely separate both worlds: graphic design and developers world. This decoupled mechanism allows us to get significant productivity improvements.
This is a basic proposed workflow for these roles interaction:
For each element containing data-template attribute, template engine creates an instance of Template class following the same structure of HTML.
<html> <body> <table data-template="parent"> <tr> <td data-template="first-child">first</td> <td data-template="second-child">second</td> </tr> </table> </body> </html>
With this HTML, Template Engine will create a Template instance with name “parent”, containing two children that are also instances of Template called “first-child” and “second-child”:
Template parent= mainTemplate.getChild("parent"); Template firstChild= parent.getChild("first-child"); Template secondChild= parent.getChild("second-child");
In most cases you can create new components just combining existing ones, but in case you need to create a low level component that requires a particular HTML rendering you can access directly to DOM.
For that, “Template.getContent” method will return this associated element, the one marked with “data-template” attribute.
Dragome use standard W3C objects to represent all HTML related stuff.
org.w3c.dom.Element element= parent.getContent(); element.setAttribute("class", "rounded-table");
When you create a new page extending DragomeVisualActivity, it will inherit an already created template called mainTemplate, that is built using the body of current HTML page. This is a particular template creation for simplifying page creation and handling.
Loading an external template, those that are present in other static HTML pages, is possible using templateHandlingStrategy inherit member.
From TreeDemoPage example
Template temp1= templateHandlingStrategy.loadTemplate("tree-demo", "tree-skin");
And you can find subtemplates by path using:
Template rootTemplate= TemplateImpl.getTemplateElementInDepth(temp1, "panel.tree-root");