Entity Centre: сustom EGI rendering

01es commented 9 years ago

As part of Entity Centre DSL there will be an API support to provide a server-side logic to customise rendering of entities and their properties as part of EGI. For example, vehicles with inactive statuses should have the background of corresponding rows in EGI as pale red when represented on Vehicle Centre.

The customised rendering information should be send to the client as part of a response to an Entity Centre request, together with the actual data to be rendered. An EGI instance should recognise the provided rendering hints and use it for representing obtained data.

HTML5/CSS3 provides quite flexible customisation options, including pseudo elements :before, :after and property content (see this and this for more details). Therefore, the rendering hints should be in a form of a set of CSS properties associated with the relevant entity instances and their properties.

Here is an example of a complete textual content replacement with an SVG image using CSS:

<!DOCTYPE html>
<html>
<head>
    <style> 
      .content-replacement span {
          display:none;
      }

      .content-replacement:after {
         content: url(image.svg);
      }
    </style>
</head>

    <body>
       <div class="content-replacement"><span>Original text</span></div>
    </body>
</html>

oleh-maikovych commented 9 years ago

This issue was reopened because the content replacement wasn't yet implemented.

01es commented 9 years ago

Currently, custom rendering supports anything that can be expressed via inline style for elements.

01es commented 9 years ago

As was discussed recently, pseudo elements cannot be specified in the inline style for elements, which is the currently implemented approach for customising rendering (e.g. colouring EGI). Pseudo elements provide more comprehensive way for rendering customisation, including content replacement (e.g. some string values can be replaced and represented as an icon). The only place where pseudo elements can be declared is CSS classes.

This means that ad-hoc creation of CSS classes is required to support that level of sophistication for rendering customisation. Here is a good example how this could ad-hoc CSS class creation can be done.

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

The referenced above post references an interesting JS library, which already does what we need. Please evaluate as part of this issue development.

fieldenms / tg

Entity Centre: сustom EGI rendering #145