## Modification of Styles while running

### Principles

Styles are defined in the beginning of the program. It will many times be necessary to modify some Style to give a different appearance for one object.

Before modify a Style it is important to understand how it works :

§ Objects are instantiated (new DFrame or DFrame.addButton, DFrame.addMenu etc …) and then created (setURL, show or alert methods for DFrames and when the parent object is created for all other objects)

§ If an object is instantiated with a Style a copy of this Style is done and set to the object. Any modification on the Style will apply when the object will be created.

§ If an object is instantiated without a Style it will only get its Style during the creation, from its parent: default BarStyle, default task BarStyle, title BarStyle, default MenuStyle, default context MenuStyle and default ButtonStyle will be used.

### There are 4 ways to modify a Style after it has been defined:

### 1 - Modify an existing Style.

Example

var dFrameStyle = new DFrameStyle()

… (Style definitions)

var dFrame1 = new DFrame(position, title, dFrameStyle)

…

dFrameStyle.setBackgroundColor('red')

var dFrame2 = new DFrame(position, title, dFrameStyle)

In this case modifications are set to the original Style and will apply to all objects created later with the Style but will not be retroactive: When an object is instantiated it creates its own copy of the Style and this copy is not modified by modifications on the original Style.

Demo

file: setFreezeXXXSide.html

Run the example
See the source code

### 2 - Create a new Style.

It is possible to create a new Style based on another one:

dFrameStyle = new DFrameStyle()

… (Style definitions)

var dFrame1 = new DFrame(position, title, dFrameStyle)

var x = new DFrameStyle(dFrameStyle)

x.setBackgroundColor('red')

var dFrame2 = new DFrame(position, title, x)

The Style used as a model can be a default Style extracted from an object:

var x = new ButtonStyle(dFrameStyle.getDefaultTaskBarStyle().getDefaultButtonStyle())

or

var dFrame = new DFrame(position, title, dFrameStyle)

var x = new ButtonStyle(dFrame.getStyle().getDefaultTaskBarStyle().getDefaultButtonStyle())

are valid syntax.

### 3 - Modify the default Style an object will use

It is possible to access the default Style of the object's future parent:

dFrameStyle = new DFrameStyle()

var dFrame = new DFrame(position, title, dFrameStyle)

dFrame.getStyle().getDefaultBarStyle.setBackgroundColor('red')

var bar = dFrame.adBar()

That will work but will apply to all bars of dFrame.

Demo

file: setMenuIndent.html, lines 16/17

Run the example
See the source code

#### Caution 1: Modify the correct Style

In this code

var dFrameStyle = new DFrameStyle()

var dFrame = new DFrame(position, title, dFrameStyle)

dFrameStyle.setBackGroundColor('red')

the modification of dFrameStyle will have no effect on dFrame because a copy of dFrameStyle has been done with the instantiation of dFrame. As it seems evident for the previous lines it may be less for this example:

var dFrame = new DFrame(position, title, dFrameStyle)

dFrameStyle.getDefaultBarStyle().setBackGroundColor('red')

var bar = dFrame.addBar()

In this case the red color will not be set to the bar because dFrame has its own copy of dFrameStyle and this copy will not be modified if dFrameStyle is modified. The right code is:

var dFrame = new DFrame(position, title, dFrameStyle)

dFrame.getStyle().getDefaultBarStyle().setBackGroundColor('red')

var bar = dFrame.addBar()

Important: See the getStyle method about limitations of this syntax

### 4 - Use shortcuts.

All methods of Styles are available on Objects:

Example: As the setBordersWidth method exist for ButtonStyle it is also available on a Button object:

var button = dFrame.addButton()

button.setBordersWidth(2)

This is a very simple and common method to adjust appearances of objects.

Demo

file: setMenuIndent.html, lines 22/23

Run the example
See the source code

In order to correctly use those Style methods on objects you must understand how they work:

§ When a Style method is applied on an object this object store the value set by the method.

§ Then the object is created (setURL, show or alert methods for a DFrame and creation of the parent DFrame for all other objects):

o Just before the object is created Styles values stored in the object are copied into its Style.

o The Style is then used to create the object.

#### Consequences:

§ Styles methods for object will have no result if the object is already created.

§ Values set with Styles methods to an object become parts of the Style of the object.

#### Exception.

The DFrame.setContentBgColor acts as common Styles methods and can be used to edit the Style of a DFrame but also dynamically modify the appearance of created DFrames.

In the same way all 'events' methods Style (setTextNormal, setTextRoll, setTextSelected etc…) of Buttons dynamically modify the appearance of created Buttons.