Style

Protocol behavior

There are some properties of the controls that are designed to give style to the control that is going to be shown in the interface. In WebMAP5, these properties are going to be sent through the JSON protocol.The models will contain a section called Style where only the style properties will be sent. If there is a property of style, the property is added to the Style section:

{
    "id": "GUI",
    "Style" : {
        "BackColor" : "#980921"
    }
}

Pending optimizations

1. In this section only the changes that have occurred in a style property will be sent.

2. The default values and those created in the designer, should not travel through this protocol, since they were created through the CSS.

3. If no property was changed, the style section should not be sent.

Front-end process

When the style section is sent in the JSON, this section is processed by the webmap core and included as a property of the model that is stored in the application buffer on the client side. Since the angular components have access to the model, as a consequence, they will also have access to the style property.

In Angular there is a directive called ngStyle used to modify the style properties of the component. To use this directive, you just need to write [ngStyle]="funtion()" it in the component's html. For example:

<button kendoButton [ngStyle]="setMyStyle()" (click)="click($event)" wmControls>{{text}}</button>

By default, the control class (class usually extended in the components) has a property called style that is of type Style. The Style class have a method called update(). Every change you make, will be processed and saved in the style property through the update function. For example:

style = {
    'background-color': '#980921'
}

The update method is called within the function that was assigned in the ngStyle directive, so whenever the directive is called, it is checked for changes in the style property and the style of the component is updated.

Custom Style class

Sometimes, the style property, which is by default, is not enough for all the components, but a specialization is needed. For example, the button, which in its html, Kendo adds a few styles by default, which avoids that when setting the background-color property, the color is not reflected in the component, so you have to make a special treatment.

In this case, you can write your custom Style class, and use it in your component. You just need to extend the class from baseComponent\controlComponent\style.ts and overwrite or add your specific functionality.

For example, ButtonStyle, is a class used to override the property background-image. When the update method call the setBackgroundImage method, it will verify if the background-color was set before to make a decision.

Style

export class Style {

setBackgroundImage(value: propertyStyle): void {
    if (value !== undefined && value !== this['background-image']) {
      this['background-image'] = value;
    }
  }

/*  some extra code here */

  update(style: any): void {
    this.setBackgroundColor(style.BackColor);
    this.setBackgroundImage(style.BackgroundImage);
    /* some extra code here */
  }

}

ButtonStyle

import { propertyStyle, Style } from '../../baseComponents/controlComponent/style';

export class ButtonStyle extends Style {

  setBackgroundImage(value: propertyStyle): void {
      this['background-image'] =  (value !== undefined) ?
                                  (value !== this['background-image']) ? value : value !== this['background-image']
                                  : (this['background-color'] !== undefined) ?  'none' : undefined;
  }
}

To register the new class and overwrite the inherited control you need to implement the OnInit lifehook, and call the super first, then you can set the Style in this way: this.style = new StyleClass();. For example:

export class ButtonComponent extends ControlComponent implements Button, OnInit {

    /* some extra code here */

    ngOnInit(): void {
    super.ngOnInit();
    this.style = new ButtonStyle();
  }

}

Then when the update method calls SetBackgrounImage it will use the method defined in ButtonStyle class instead of using the one in Style class, for everything else, it will use whatever is in Style class.

Version Information

Available since 5.2