J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Using Popup Screens

You can turn any screen into a popup screen that overlays the previous shown screen. This contruct is typically used for alerts or for opening a subset of a current selection.
showing an alert as popup
The above design has been realized with following CSS code:

.mailForm {
	padding: 5;
	padding-left: 5;
	padding-right: 5;
	background {
		type: horizontal-stripes;
		top: title;
		bottom: menubar;
		first-top-color: screenColorTop1;
		first-bottom-color: screenColorBottom1;
		second-top-color: screenColorTop2;
		second-bottom-color: screenColorBottom2;
	}
	layout: horizontal-expand | horizontal-center | top;
}

.mailAlert extends .mailForm {
	margin-right: 10;
	margin-left: 10;
	layout: horizontal-center | bottom | horizontal-shrink | vertical-shrink;
	repaint-previous-screen: true;
	//#if polish.midp2 || polish.api.nokia-ui
		border {
			type: drop-shadow;
			width: 6;
			inner-color: #aff0;
			outer-color: #2002;
			orientation: top-right;
		}
	//#endif
}

Design

Any screen with a margin or a shrink layout becomes a popup screen. When the screen is interactive or when you want to dim the previous screen you should additionally specify the "repaint-previous-screen" attribute.

These CSS attributes finetune your design:

CSS Attribute  DefaultValuesApplies To  Explanation
margin0integerscreen The margin in pixels between the physical screen's border and the painted screen's border. Use margin-left, margin-right, margin-top and margin-bottom to specify different margins for each side.
padding1integerscreen The padding in pixels between a screen's border and the screen's content. Use padding-left, padding-right, padding-top and padding-bottom to specify different paddings for each side.
layouttop | leftlayoutscreen The layout of the screen. By default the screen is extended as far as possible, but you can use horizontal-shrink for mimizing it's width and vertical-shrink for minimizing it's height.
The layout attribute accepts a mix of values:
  • left: move the screen's content to the left
  • right: move the screen's content to the right
  • center (or horizontal-center or h-center): center the content horizontally
  • top: align the screen's content to the top
  • bottom: move the screen's content to the bottom
  • vertical-center (or v-center): center the content vertically
  • shrink(or horizontal-shrink or h-shrink): limit the width of the screen to the height of it's content width plus the screen's padding
  • vertical-shrink(or v-shrink): limit the height of the screen to the height of it's content height plus the screen's padding
Example:
layout: horizontal-center | bottom | horizontal-shrink | vertical-shrink;
repaint-previous-screenfalsebooleanscreen Set repaint-previous-screen to true for drawing the previous screen's content in the background of the popup screen. When set to false the behavior depends on the native platform. On Nokia the previous screen is painted for example, but on Sony-Ericsson phones it is not. The previous screen is dimmed by painting a translucent layer above it. You can specify the color by defining the overlay color within the colors section:
colors {
	overlay: argb( 150, 255, 255, 255 );
}

.mailAlert extends .mailForm {
	layout: horizontal-center | bottom | horizontal-shrink | vertical-shrink;
	repaint-previous-screen: true;
}
back to top