Codename One CSS Support

A library to add support for designing Codename One themes using CSS (Cascading Style Sheets).

NOTE: This library has now been integrated directly into the Codename One plugin. See full details here. The source code is now part of the Codename One Designer project. See the latest sources here. This repository is no longer being maintained. We recommend you use the built-in CSS support if Codename One instead.

Requirements

• Your development machine must have Java 8 installed.

Features

• .css files compiled to native Codename One .res theme files at compile time.
• Support for all style settings that are supported by the CN1 resource editor:
  • Padding
  • Margin
  • Background
  • Colors (foreground, background, transparency)
  • Fonts (system and TTF)
  • Borders (Standard and 9-piece Image borders)
• Automatic 9-piece border generation where borders and backgrounds cannot be achieved efficiently using standard CN1 styles.
  • Rounded borders (via border-radius)
  • Linear Gradients (via linear-gradient)
  • Radial Gradients (via radial-gradient)
  • Opacity
  • Box Shadow (via box-shadow)
• Automatic image imports as Multi-images.
• Automatic TTF font imports via the @font-face directive.

Installation

See the Installation Wiki Page

Usage / How it Works

Once you install the above snippet into your build.xml file, it will activate the CSS compiler to run each time you compile your project. The CSS compiler will look for .css files inside your project's "css" directory (which you'll need to create). It will compiles these CSS files into corresponding .res files which will be placed into your project's src directory. You can then load this theme in your app just as you would load any other theme file.

E.g.

Suppose you add a CSS file into your project css/theme.css. When you compile your project, it will generate the file src/theme.css.res. Then you can load this file in your app as follows:

Resources css = Resources.openLayered("/theme.css");
UIManager.getInstance().addThemeProps(css.getTheme(css.getThemeResourceNames()[0]));

Alternatively, you can use the "OverlayThemes" theme constant in your project's main theme to have your css theme loaded automatically at runtime. Using this approach has the benefit that the designer previews will reflect the styles in your CSS file.

E.g. You could set the OverlayThemes constant in your main project theme to "theme.css" to have your theme automatically included in your app.

Supported CSS Directives

See the Supported CSS Properties Wiki Page

Supported CSS Selectors

See the Supported Selectors Wiki Page

Image Support

See the Images Wiki Page :

• Importing Multiple Images in a Single Selector
• Loading Images Remotely
• Generating 9-Piece Image Borders
• Image Backgrounds
• Image Compression

Font Support

See the Fonts Wiki Page

Examples

• Test CSS File is compiled to this Codename One theme file

Building From Source

$ git clone https://github.com/shannah/cn1-css.git
$ cd cn1-css/CN1CSSCompiler
$ ant jar

If all went well, you'll find the generated cn1css-ant-task.jar inside the cn1-css/CN1CSSCompiler/dist directory.