J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Property Functions

Property functions can be used within preprocessing statements in your source code or in your polish.css file, or conditions within your build.xml script. These functions take values and convert them according to your needs.
You access a preprocessing function with this syntax: ${functioname(parameters)}. In the polish.css file you don't need to use the full syntax, it is enough to use functionname(parameters);.

Here are some often used property functions:

  • bytes: converts a memory value into bytes
  • calculate: calculates the given - simple - mathematical term: //#= int w = ${calculate( 3 + imagewidth(icon.png) + 3) };
  • color: the given color value taken from your polish.css settings: //#= int color = ${color(bgFocused)};
  • contains: checks if the given capability contains a specific word: //#if ${contains(polish.JavaPlatform, BlackBerry)}
  • containsIgnoreCase: same as contains but is not case sensitive.
  • exists: checks if the given resource exists: //#if ${exists(smiley.png)
  • imagewidth: Calculates the width of a resource: min-width: imagewidth( icon.png );
  • imageheight: Calculates the height of a resource: min-height: imageheight( icon.png ) + 4;
  • isOS: Checks if the current target device supports the specified operating system: <capability name="polish.TextField.useDirectInput" value="true" unless="isOS(windows)" />
  • time: Converts the given value into milliseconds: //#= public final static long ANIMATION_INTERVAL = ${time(polish.animationInterval)};
  • version: extracts a version number out of a capability or value and makes them comparable: //#if ${ version(polish.JavaPlatform, BlackBerry) } >= ${version(7.1)}.
    Note that the version function is used automatically when comparing non-integer values, so this code works the same: //#if polish.JavaPlatform >= BlackBerry/7.1

In the following example we just add the smiley markup code when there is actually an image called emoticon_cry.png:

//#if ${exists(emoticon_cry.png)}
	addMarkup(new ReplacementMarkup(":-(", "<img src=\"/emoticon_cry.png\"/>"));
//#endif

And in this CSS code we adjust the left padding and minimum height of the title style to the width and height of the titleicon.png image. This results in the title text being rendered next to the image, not on top of it.

backgrounds {
	titleBgIcon {
		type: image;
		image: url( titleicon.png );
		anchor: left | vcenter;
		x-offset: 2px;
		color: transparent;
	}
	titleBgGradient {
		type: vertical-gradient;
		top-color: black;
		bottom-color: #333;
	}
}

title {
	padding-left: ${imagewidth(titleicon.png)} + 4;
	background {
		type: combined;
		foreground: titleBgIcon;
		background: titleBgGradient;
	}
	font-color: #eee;
	layout: expand | vertical-center | left;
	min-height: ${imageheight(titleicon.png)} + 4;
}
back to top