# Styles

## Principles

There are 4 styles corresponding to the 4 objects:

DFrameStyle
BarStyle
ButtonStyle
MenuStyle

The instantiation of a Style object is done with the 'new' constructor:

var dFrameStyle = new DFrameStyle()

In this case of instantiation without parameter the properties of the object are all initialized by default, some with the null value (colors for instance) and others with an arbitrary value allowing the object using the style to be visible (borders with a value set to 1 and the color set to black for instance).

It is possible to instantiate a style by using another style as a model:

var baseDFrameStyle = new DFrameStyle()

baseDFrameStyle.setBackgroundColor('green')

…

var specificDFrameStyle = new DFrameStyle(baseDFrameStyle)

specificDFrameStyle.setBackgroundColor('yellow')

## Default Styles

The method used before to create a Button was the following one:

var dFrame = new DFrame(parameters)
var bar = dFrame.addBar(position, title, barStyle)
var button = bar.addButton('Close', 'thisDFrame.closeFrame()', buttonStyle);

It is possible to add Buttons or Menus directly to DFrames without using Bars:

var button = dFrame.addButton('Close', 'thisDFrame.closeFrame()', buttonStyle);

In this case a default Bar (Bar object) is automatically created.

The style used for the creation of this default Bar is defined by the setDefaultBarStyle method of the DFrameStyle object:

// Instanciation of a BarStyle
var barStyle = new BarStyle();

barStyle.setBackgroundColor('red')
//Instanciation of dFrameStyle
var dFrameStyle = new DFrameStyle();
//Set the defaultBarStyle of dFrameStyle
dFrameStyle.setDefaultBarStyle(barStyle)

//Instantiate a DFrame
var dFrame = new DFrame(position, 'Home Page', dFrameStyle);

// Instantiation of a ButtonStyle
var buttonStyle = new ButtonStyle();

buttonStyle.setBordersWidth(2);

//Add a Button on the DFrame

var button = dFrame.addButton('Close', 'thisDFrame.closeFrame()', buttonStyle);

The default Bar will be create with the dFrameStyle.defaultBarStyle and thus will have a red background color.

In the same way if a Button is added to a Bar without ButtonStyle parameter the default ButtonStyle of the Bar Style is used:

// Instantiation of a ButtonStyle
var buttonStyle = new ButtonStyle();

buttonStyle.setBordersWidth(2);

// Instanciation of a BarStyle
var barStyle = new BarStyle();
//Set the defaultButtonStyle of barStyle
barStyle.setDefaultButtonStyle(buttonStyle)

//Instanciation of dFrameStyle
var dFrameStyle = new DFrameStyle();
//Set the defaultBarStyle of dFrameStyle
dFrameStyle.setDefaultBarStyle(barStyle)

//Instantiate a DFrame and add a Button
var dFrame = new DFrame(position, 'Home Page', dFrameStyle);
var button = dFrame.addButton('Close', 'thisDFrame.closeFrame()');

The button will be created with the dFrameStyle.defaultBarStyle.defaultButtonStyle.