J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Designing Your Mobile Applications

J2ME Polish combines the power of the mobile Java world with the flexibility of webdesigns by separating the design settings from the application's source code. By using the web-standard Cascading Style Sheets (CSS), customizing and designing of applications becomes very easy and flexible. With J2ME Polish any web-designer can now design mobile applications, while the programmers can concentrate on the business logic!

Concepts

The J2ME Polish "Lush UI" uses some basic concepts:

  • Develop your UI with the normal javax.microedition.lcdui classes like Form, List or TextField (alternatively import de.enough.polish.ui classes directly).
  • Use additionally J2ME Polish custom components like TabbedForm, TreeItem, ChoiceTextField and so on.
  • If you need further control over standard javax.microedition.lcdui components like setting the input mode of an TextField, use de.enough.polish.ui.UiAccess.
  • Add #style directives to your applications source code for connecting your code with the design
  • Design and customize your application by using simple CSS texfiles, by default resources/polish.css.
  • Configure additional UI options in your build.xml script.

A Quick Glance at CSS

All design settings and files are stored by default in the resources directory of the project, unless another directory has been specified in your build.xml script. The most important file is polish.css in that directory. All design definitions can be found here. The design definitions are grouped in "styles". A style can be assigned to any UI item like a title, a paragraph or an input field. Within a style several attributes and its values are defined:

.myStyle {
	font-color: white;
	font-style: bold;
	font-size: large;
	font-face: proportional;
	background {
		type: vertical-gradient;
		top-color: #333;
		bottom-color: #000;
	}
}

In this example the style called "myStyle" defines some font values and the color of the background. Every style contains a selector as well as a number of attributes and its values:

Each attribute-value pair must be trailed by a semicolon. All attribute-value pairs needs to be enclosed by curly brackets. The selector or name of style is case-insensitive, so ".MySTYle" is the same as ".myStyle". Apart from the polish.css file, you can put images and other contents into the resources folder. Subfolders are used for styles and content for specific devices and groups. You can put all resources for Nokia devices into the "Nokia" folder and resources for Samsung's E700 into the "Samsung/E700" folder. This is described in more detail in the "Customization" section.

You can specify styles directly for UI items with the #style preprocessing directive in the source code. Alternatively you can use the dynamic names of the UI items, e.g. "p" for text-items, "a" for hyperlinks or "form p" for all text-items which are embedded in a form.

Styles can extend other styles with the extends keyword, e.g..myStyle extends baseStyle {}. Pseudo style such as myItem:hover automatically inherit attributes from their base style.

J2ME Polish supports the CSS box model with margins, paddings and content. Other common design settings include the background, the border and font-settings.

All these basic concepts are described in the "CSS basics" section.

Attributes for specific UI items as well as the details of the different backgrounds, borders, text-effects, screen transitions, item views and RGB filters are detailed in the "visual guide".

back to top