Designing the Pressed Element

• Related Topics:
• Focused Style
• GUI Concepts
• CSS Basics

The user can select items like buttons, commands, and so on by pressing fire on the keyboard. In J2ME Polish you can give your user a visual feedback by defining a [style-name]:pressed style:

menuItem {
	padding: 2;
	font-color: black;
}

menuItem:hover {
	background-color: #222;
	font-color: white;
}

menuItem:pressed {
	background-color: #9f9;
	font-color: #222;
}

You are not limited in the design, typically you will use a different background or a different border for the pressed state of an item, but depending on the item you can also exchange icon-images, font-styles, effects, animations and so on. Please refer to the visual guide for details on the design possibilities for each item.

The following example uses the particle view-type for giving visual feedback while the user holds down the fire key:

.mainCommand {
	padding: 0;
	padding-vertical: 0;
	icon-image: url( iconlarge%INDEX%.png );
	icon-image-align: top;
	layout: center;
}

.mainCommand:hover {
	font-style: bold;
	font-size: small;
	font-color: white;
	text-effect: shadow;
}

.mainCommand:pressed {
	view-type: particle;
}