Ticker
A ticker scrolls information over a screen and can include images in J2ME Polish.
Design
The above example has been realized with the following CSS code:
colors {
fontColor: #222;
fontShadowColor: #fff;
}
.mailTicker {
ticker-step: 1;
padding-horizontal: 5;
layout: vertical-center;
icon-image: url( sending.png );
font-color: fontColor;
font-size: small;
text-effect: shadow;
text-shadow-color: fontShadowColor;
}
Specific design attributes:
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| ticker-direction | left | left, right | The direction of the ticker - this defaults to 'left' meaning moving from right to left. | 2.1 |
| ticker-position | top | top, bottom | You can specify the position of the ticker on the screen. | 1.3 |
| ticker-step | 2 | integer | The number of pixels by which the ticker is shifted at each update. | 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 |
| icon-filter | - | filter | Specifies an RGB filter for the image of an icon item | 2.1 |
| 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 |
| font | none | object | The font reference for a StringItem, TextField, etc. | 1.0 |
| font-bitmap | - | string | Defines which bitmap (bmf) font should be used. | 1.3 |
| font-color | black | color | The font color of an item or screen element. | 1.0 |
| font-face | medium | system, default, normal, proportional, monospace | The font face of an item or screen element. | 1.0 |
| font-size | medium | small, little, medium, default, normal, large, big | The font size of an item or screen element. | 1.0 |
| font-style | plain | plain, default, normal, bold, italic, cursive, underlined, underline | The font style of an item or screen element. | 1.0 |
| force-lines | - | true, false | forces the StringItem to display the lines stated in max-lines | 2.1 |
| icon-horizontal-adjustment | 0 | integer | Adjusts the icon by the specified number of pixels horizontally. Negative values move the icon-image to the left. | 1.3 |
| icon-image | none | imageurl | The URL of the image. The keyword %INDEX% can be used for adding the position of the icon to the name, e.g."icon-image: url(icon%INDEX%.png);". | 1.0 |
| icon-image-align | left | left, right, top, bottom, center | The position of the image relative to the text. | 1.0 |
| icon-image-align-next | false | true, false | Specifies if a horizontal aligned image should be painted at the border (=default) or next to the content when the item has an expand layout. | 2.0 |
| icon-inactive | false | true, false | Can be used to deactivate a specific ChoiceGroup/List item permanently. This can be useful to integrate explanations, headings etc into an ChoiceGroup/List. | 1.3 |
| icon-padding | 1 | integer | The padding between the image and the text of an icon. | 2.0 |
| icon-vertical-adjustment | 0 | integer | Adjusts the icon by the specified number of pixels vertically. Negative values move the icon-image to the top. | 1.3 |
| 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-lines | - | integer | the maximum lines to show in a stringitem | 2.1 |
| 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 |
| scale-factor | - | integer | The factor in percent by which the image should be scaled, e.g. 200. | 1.3 |
| scale-steps | 5 | integer | The number of intermediate steps that should be used for scaling an image. | 1.3 |
| text-effect | - | Sets a text effect. | 1.3 | |
| text-horizontal-adjustment | 0 | integer | Adjusts the text by the specified number of pixels horizontally. Negative values move the text to the left. | 1.3 |
| text-vertical-adjustment | 0 | integer | Adjusts the text by the specified number of pixels vertically. Negative values move the text to the top. | 1.3 |
| text-visible | true | true, false | Set the text of an IconItem to visible or invisible | 2.1 |
| text-wrap | true | true, false | Determines wether the text should be wrapped or whether it should be kept on a single line, even when it is larger than the available width. | 1.3 |
| text-wrap-animate | true | true, false | You can deactivate animations for texts that should not be wrapped and which are too long for a single line. | 2.0 |
| 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 | - | 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
You can exchange the image of the ticker by calling UiAccess.setTickerImage( Ticker ticker, Image image ).
You can also apply a style to a ticker by calling the screen's setTicker( Ticker ticker ) method
with a #style preprocessing directive:
//#style alarmTicker form.setTicker( ticker );
You can also add Ticker as a normal, yet constantly animated item by calling
UiAccess.appendTicker( Ticker ticker, Form form ).
JavaDoc
