HTML Translators

Overview

A translator is library that translates a set of custom HTML tags into a specific display or other functionality.

As an example, the following custom tag ("view-data") specifies a table that displays the dataset sepcified.

<view-data class="view-data" style="height:400px;" type="application/json"> <script type="json"> { "sortable": true, "filterable": true, "altrows": true, "columnsresize": true, "defaultwidth": "160px", "data": "category" } </script> </view-data>

The above table would then be rendered as



In order to be able to render a set of custom tags, a translate tag needs to be included with the HTML. EAch tag specifies a URL from which to retrieve a library that will translate the custom tags into the corresponding functionality.

The following sample translate tag demonstrates linking in a translator library at the given URL.

<translate url="/lib/translate/v1.0.0/layout.mjs"></translate>

For information about coding a translator, see translator code

Integration Visual Studio

The davinci visual studio extension contains utilities for utilizing translators. You can set up a translator tree which contains links that insert custom tags into an open HTML editor. This links, whne clicked, will add a code snippet to your currently open HTML editor, and insert whatever necessary translate tags to process the snippet.

Setting up in Visual Studio

Setting up the translator quick link tree is done within the davinci settings form. Click the settings link in the nav tree.

In the translate text area, enter a list of URL's that specifies a set of code snippets.

/lib/translate/v1.0.0/layout.json /lib/translate/v1.0.0/data.json /lib/translate/v1.0.0/highcharts.json /lib/translate/v1.0.0/table.json /lib/translate/v1.0.0/template.json

Translator JSON

The URLs sepcified in the translate settings (see above) must contain a list of objects, each with the following properties.

  • name:
  • category - a name that the link appears under in the nav tree
  • value - a piece of text that is inserted into the open HTML editor.


[{"name":"two column","category":"layout","value":"\n \n \n\n"}, {"name":"three column","category":"layout","value":"\n\n \n \n \n"}, {"name":"four column","category":"layout","value":"\n\n \n \n \n \n"}, {"name":"full page","category":"layout","value":""}]

Translator Module

For each translator json that you specify, there needs to exist a javascript module which specifies they logic for translating the custom tags. The module should be at the same URL as the json, but with the extension "mjs" rather than "json".