Skip to content

How to : create a view

this is a first draft on a tutorial on how to create a view :

============

How to develop a View This document details how to create a view and how to use it.

============

Prerequisites

The explanation provided here assumes that you are familiar with web components, shadow DOM and have some knowledge on Javascript. Additionnaly, the examples will rely on the library d3.js. Any javascript graphic library can be used, although, I strongly urge you to use an open-source one. You will need to import that library.

#include links to learn about those concepts

============

Firstly, let's retrace all the steps needed to create a view.

  1. Create a Javascript web component

The web component allows the view to be used in various application. In the constructor, you will need to initialize the attributes (maybe define what an attribute is?).

Class ViewName extends HTMElement{ 
            constructor() { 
            //initialization of attributes 
            super(); 
            this.data = {}; 
            this.settings = {}; 
}}

In this example, I am setting up a view that consist of two attributes data and settings.

=============

2. Manage the attributes

You'll need to put in place a system to keep track of your attributes, I suggest using two functions. The first one will return an array of attributes observed by the browser. The second one will check for changes in the value of the attributes and render the changes when needed.

Here is a simple example : static get observedAttributes() { return ['data', 'settings']; }

attributeChangedCallback(property, old, now) {
    if (old === now) return;  // don't bother to render if there is nothing new
    this[property] = now;
  }

============== 3. Using ConnectedCallBack

ConnectedCallback is a method invoked each time the web component element is added to the document. The specification recommends that developers implement custom element setup in the connectedCallback rather than in the constructor whenever possible. The reason for that is because the constructor is called when the element is first created, which may happen before it is connected to the DOM, potentially limiting access to certain resources or dependencies. With that being said, this method will be central for a series of other functions. Why? it'll be easier to maintain and test each function individually.

Said functions will depend on the view you are implementing. However, there are many reocurring step to setting up a view:

  • createShadowDom() : creates one or multiple HTML elements and appends them to the root of the shadowDOM. This prevents potential conflicts between the component's internal code and the global styles or scripts on the page, as you have effectively encapsulated the elements you've just created, thereby isolating them from the rest of the page. This ensures that the component behaves consistently regardless of the surrounding environment. This is particurlarly important considering that we want to use views in different web settings.
  • create scene : creates a svg element, defines its width and height, can add some margins etc
  • retrieve data : a function to retrieve and parse the data from a JSON string.
  • prepare data : a function that does any preliminary treatment to the data(sort, convert types etc).
  • displaychart : does the final display, when everything is set and ready.