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 GUI uses some basic concepts:

  • Develop your GUI with the normal javax.microedition.lcdui classes like Form, List or TextField.
  • 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.
  • Configure additional GUI options in your build.xml script.

A Quick Glance at CSS

All design settings and files are stored in the "resources" directory of the project, unless another directory has been specified. 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 GUI 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-color: black;
}

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 "Designing Specific Devices and Device-Groups" section.

You can specify styles directly for GUI items with the #style preprocessing directive in the source code. Alternatively you can use the dynamic names of the GUI items, e.g. "p" for text-items, "a" for hyperlinks or "form p" for all text-items which are embedded in a form. The possible combinations as well as the predefined style-names are discussed in the section "Dynamic, Static and Predefined Styles".

Styles can extend other styles with the "extends" keyword, e.g. ".myStyle extends baseStyle {}". This process is described in the section "Extending Styles".

J2ME Polish supports the CSS box model with margins, paddings and content. Other common design settings include the background, the border and font-settings. These common settings are described in the section "Common Design Attributes".

Attributes for specific GUI items as well as the details of the different background and border types are discussed in the section "Specific Design Attributes".