Title here
Summary here
Style
Role
- The style represents all the properties of a view that influence it’s rendering. If a style property changes, the renderer will be aware of it and will redraw the part of the UI that needs to be redrawn following the change.
Expected Use
Declaration
/**
* The view will look like this:
* +------------------+
* | <lcn> <logo> |
* | <name> |
* +------------------+
*/
export default $View.declare("ChannelView", {
properties: {
data: {class:$AbstractChannel, lcn: 1, logo:"./images/mocks/channels/tf1.png", name:"TF1", is3d: false}
},
statics: {
MARGIN: 10,
WIDTH: 200
},
children: {
lcn: {class: $TextPrimitive},
logo: {class:$ImagePrimitive},
name: {class: $TextPrimitive}
},
style: {
width: ({statics}) => statics.WIDTH + 2 * statics.MARGIN,
height: 120,
y: ({theme, height}) => theme.HEIGHT - height,
lcn: {
isAuto_width: true,
height: 20
},
logo: {
x: ({parent}) => parent.lcn.width + parent.statics.MARGINS,
width: 100,
height: 100
},
name: {
width: ({parent}) => parent.statics.WIDTH,
x: ({parent}) => parent.statics.MARGIN,
height: 20
}
}
});Properties
For more details, visit Properties page and its sub-pages.
Advanced use
Style dynamically added children
When you add children, the view’s style is applied by default:
var MyView = View.declare("myView");
var view = new MyView({
style: {
"item": {
height: 100,
width: 300
}
}
});
view.addChildren({ "item": { class: View }});
view.children.item.height; // 100
view.children.item.width; // 300
You can specify the style of children that are added dynamically. Moreover, the specified style is merged with the view one (being the default):
var MyView = View.declare("myView");
var view = new MyView({
style: {
"item": {
height: 0,
width: 300
}
}
});
view.addChildren(
{ "item": { class: View }},
{
"item": {
height: 100
}
}
);
view.children.item.height; // 100
view.children.item.width; // 300