ClockItem
Use the ClockItem for showing the current time.
Design
The above design has been realized with these CSS settings:
.clock {
border-type: round-rect;
border-color: gray;
min-height: 15;
}
ClockItem CSS Attributes
Use following attributes to design ClockItems:
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| clock-format | hh:mm:ss | string | The time format for the DigitalClockItem with the following identifiers: hh=hours, mm=minutes, ss=seconds, am|pm=for using the 12 hour system instead of the 24 hour one. Examples: "hh:mm am", "hh/mm/ss". | 1.3 |
| Further CSS Attribute | Default | Values | Explanation | Since |
| after | - | imageurl | The URL of the image that should be shown after the item in question. | 1.3 |
| always-include | false | true, false | Defines if a style should always be included, even if not used. This is useful for programmatically accessed and for HTML browser styles. | 2.0 |
| background | - | background definition | The background of an item or screen. The default background for items is "none", the default background for screens is a simple white background. | 1.0 |
| background-anchor | left | top | left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom | The orientation of the background in case either it's width or height is different from the item's dimensions. | 2.1 |
| background-height | 0px | dimension (px, %), e.g. 3.5% | The height of the background in pixel or percent, if it should differ from the the item's width. | 2.1 |
| background-width | 0px | dimension (px, %), e.g. 3.5% | The width of the background in pixel or percent, if it should differ from the the item's width. | 2.1 |
| before | - | imageurl | The URL of the image that should be shown before the item in question. | 1.3 |
| bgborder | - | border | The border of an item which is painted before the background. This needs to be a reference to a border defined in the borders section. | 2.1 |
| complete-border | - | border | A border reference from the borders section. The border includes the label of the item and is independent of the item's normal border. | 2.0 |
| border | - | border definition | The border of an item or screen. The default border is "none". | 1.0 |
| colspan | 1 | integer | The number of columns wich are used by the item within a table. | 1.3 |
| complete-background | - | background | A background name from the backgrounds section. The background includes the label of the item and is independent of the item's normal background. | 1.3 |
| complete-background-padding | - | integer | The padding that is added to the complete-background and/or complete-border. Note that this does not change the size of the item, so you might need to adapt margins or normal paddings for your design. | 2.0 |
| content-visible | true | true, false | Activates or deactives the visibility of the item's contents. When the content is not visible, only the label as well as before and after attributes are visible. | 2.1 |
| content-x-adjust | 0px | dimension (px, %), e.g. 3.5% | The horizontal position adjustment of an item's content, use a negative value to move it to the left. | 2.1 |
| content-y-adjust | 0px | dimension (px, %), e.g. 3.5% | The vertical position adjustment of an item's content, use a negative value to move it to the top. | 1.3 |
| customitem-inactive | false | true, false | Can be used to deactivate a specific CustomItem permanently. Use this for creating a custom item that cannot be selected by the user. | 1.3 |
| filter | - | Defines a filter for the specified UI element. | 2.1 | |
| focused-style | focused | style | The name of the style for the currently focused item, usually applied with a [style-name]:hover construct. | 1.0 |
| include-label | false | true, false | Usually the label of an item is rendered separately of the item's content. You can expand the background and border over the label as well using this attribute. | 1.3 |
| inherit | true | true, false | Defines if a style that extends this style should inherit all attributes. | 1.3 |
| inline-label | false | true, false | Inlines the label of an item, so that the content will be on the same row (or at least start on the same row). The label can only occupy 90% or less of the available width, otherwise this setting is ignored. | 2.1 |
| label-style | label | style | The name of the style for the label of the corresponding Item. | 1.0 |
| max-height | - | dimension (px, %), e.g. 3.5% | The maximum height of an item. | 1.3 |
| max-width | - | dimension (px, %), e.g. 3.5% | The maximum width of an item. | 1.3 |
| min-height | - | dimension (px, %), e.g. 3.5% | The minimum height of an item. | 1.3 |
| min-width | - | dimension (px, %), e.g. 3.5% | The minimum width of an item. | 1.3 |
| text-layout | left | top | left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom, horizontal-expand, h-expand, hexpand, expand, vertical-expand, v-expand, vexpand, horizontal-shrink, h-shrink, hshrink, vertical-shrink, v-shrink, vshrink, newline-after, newline-before | The layout of the text, this is useful in combination with min-width or max-width and an item layout that differs from the desired text layout. | 2.1 |
| opacity | 100% | dimension (px, %), e.g. 3.5% | The opacity of an item between 0 (fully transparent) and 100% / 255 (fully opaque). | 1.3 |
| pressed-style | - | style | The style which indicates that an item is being pressed, usually applied with a [style-name]:pressed construct. | 2.0 |
| skip-set-clip | false | true, false | Use this to deactivate the setting of the clipping for CustomItems. Usually the clip will be set for the exact content dimensions of the item. Deactivating it can be useful if you need to paint over the content area as well. | 1.3 |
| text-wrap-animation-direction | both | both, left, right | The direction of the animation when the text is too wide and wrapping is deactivated. | 2.0 |
| text-wrap-animation-speed | 1 | integer | The speed of the animation when the text is too wide and wrapping is deactivated. | 2.0 |
| view-type | - | clock-binary-text, clock-hex-text, fade-in, fade-out, particle, size-decrease, size-increase | Defines another visualization for an Item or a Screen. | 1.3 |
| visible | true | true, false | Toggles the visibility of an item. When an item is invisible, it will not occupy any space. | 2.0 |
| x-adjust | 0px | dimension (px, %), e.g. 3.5% | The horizontal position adjustment of an item, use a negative value to move it to the left. | 2.1 |
| y-adjust | 0px | dimension (px, %), e.g. 3.5% | The vertical position adjustment of an item, use a negative value to move it to the top. | 2.1 |
Programming
Programming the ClockItem is trivial as you can only specify a label:
//#style clock
ClockItem item = new ClockItem("time: ");
this.form.append( item );
JavaDoc
