widget files view html

view.html

Widgets are items that display information and support interaction by user.

A widget has two main parts.

• The header display widget title set by user in configuration and display a toolbar. This toolbar is specified by widget's code.
• The main area where your view will be put in.

The size of widgets are based on blocks. One block size is around 100px. Your widget dimension is constrained on block size (ie: min 1 by 1 and max 2 by 3)

But your view will don't make exactly a multiple of 100 size. You have to take into account different elements. Here is a schematic that show margin information. An additional margin cause a 1 px margin all aournd your view.

The dimensions of the view are computed following formulas:

• With toolbar:

width = (blockSize * 100) - 5

height = (blockSize * 100) - 30

• Without toolbar:

width = (blockSize * 100) - 5

height = (blockSize * 100) - 5

Here is a recapitulative of size applyed on most used dimensions

• With toolbar

	Width of widget
		1 block	2 blocks	3 blocks	4 blocks
Height of widget	1 block	95 x 70	195 x 70	295 x 70	395 x 70
	2 blocks	95 x 170	195 x 170	295 x 170	395 x 170
	3 blocks	95 x 270	195 x 270	295 x 270	395 x 270
	4 blocks	95 x 370	195 x 370	295 x 370	395 x 370

• With toolbar

	Width of widget
		1 block	2 blocks	3 blocks	4 blocks
Height of widget	1 block	95 x 95	195 x 95	295 x 95	395 x 95
	2 blocks	95 x 195	195 x 195	295 x 195	395 x 195
	3 blocks	95 x 295	195 x 295	295 x 295	395 x 295
	4 blocks	95 x 395	195 x 395	295 x 395	395 x 395

This view follows knock out MVVM pattern. So you can use vars in your viewmodel that are directly update into your view.

the following example will display "time" variable into text attribute and set varaible "timeFontSizeCSS" into style attribute of the div

<div class="time-field" data-bind="text: time, style: timeFontSizeCSS"></div>

For more information refer to knockout-js documentation at http://knockoutjs.com/documentation/observables.html

Your view is contained in a

that have following css attributes:

.panel-widget-body {
    padding: 0;
    overflow: hidden;
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

CSS flex has been used to help your to make your widget flexible to resize. Use as much as possible flex and relative size to help your widget to be resized.

To make resize easier, you can use "textfit" class in your text fields. This class indicates that the text font must be changed to fit the container. With that class, your text will grow when your widget will be resized.

<div class="time-field textfit" data-bind="text: time"></div>

If your text field can't be fitted to its parent (ie for a inline element), you can use "textfit textfit-in parent" class to indicate to take the parent height and width and not the current element

<i class="textfit textfit-in-parent" data-bind="css: conditionClass"></i>