J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Label

Most Items support labels which are drawn in front or on top of the actual content of an item. In J2ME Polish a label is internally a StringItem, so you can apply all text attributes like font-color, text-effect etc.

By default labels are designed using the predefined label style:

label {
	font-color: silver;
	font-size: small;
	layout: newline-after;
}

A label

You can, however, apply your own specific label styles using the label-style CSS attribute in your item's style:

.myItem {
	background-type: round-rect;
	background-color: white;
	label-style: .myItemLabel;
}
.myItemLabel {
	font-color: white;
	font-style: italic | bold;
}

A label

Last but not least you should know that a background and a border usually does not include the label of an Item. In case you want to extend the reach of the background and/or border to the label as well, you need to set the include-label CSS attribute to true:

.myItem {
	background-type: round-rect;
	background-color: white;
	include-label: true;
	label-style: .myItemLabel;
}
.myItemLabel {
	font-color: gray;
	font-style: bold | italic;
}

A label with include-label

You can also have two backgrounds/borders for an item - one for the actual content and one that covers both the content and the label area of the item. To realize this you have to specify the complete-background CSS attribute that has to refer to a background defined in the backgrounds section of your polish.css file. If you have defined a normal background for the item as well, both backgrounds will end at the same border. To make a complete-background visible under a normal item background, you can specify the complete-background-padding.
You can also specify complete-border with a reference to a border defined in the borders section for adding a second border around the item and the label in the same way.
The size and padding of the complete-background do not influence the size calculation of an item.
In this example we specify a complete-background for a focused ChoiceGroup:

backgrounds {
	completeBg {
		type: round-rect;
		color: #ccc;
	}
}

.horizontalChoice {
	label-style: choiceGroupLabel;
	background-type: round-rect;
	background-color: focusedBgColor;
	layout: expand;
	view-type: horizontal-choice;
	horizontalview-left-arrow: url( arrow-left.png );
	horizontalview-right-arrow: url( arrow-right.png );
}

.horizontalChoice:hover {
	background-color: white;
	complete-background: completeBg;
	complete-background-padding: 3;
}

.choiceGroupLabel {
	font-style: italic;
	font-size: small;
	layout: newline-after;
}

.choiceItem {
	font-color: gray;
	font-style: bold;
	text-wrap: false;
}

.choiceItem:hover {
	font-color: black;
}

A choice group with complete-background

back to top