Installation

Using Command-Line Installer

The easiest way to install the CSS library in your Codename One project is to use the command-line installer, which works on Windows, Mac, and Linux and should be compatible with Netbeans, Eclipse, and IntelliJ projects.

$ cd /path/to/cn1-project
$ npm install -g codenameone-cli
$ cn1 css install

(If you already have codenameone-cli installed, you can skip the npm install …​ command).

Manual Installation

Netbeans Instructions

1. Download latest cn1css-ant-task.jar and copy into your project’s lib directory.

2. Copy the following snippet into you project’s build.xml file:

       <taskdef name="compileCSS"
           classname="com.codename1.ui.css.CN1CSSCompileTask"
           classpath="lib/cn1css-ant-task.jar"/>
   
       <target name="compile-css">
           <compileCSS/>
       </target>

3. Change the following line in your project’s build.xml file:

    <target name="-pre-compile">

   to

    <target name="-pre-compile" depends="compile-css">

Now that you have the build script set up to process CSS files, you can add a CSS file to your project and use it in your project. Check out usage instructions for more.

Eclipse Instructions

1. Download latest cn1css-ant-task.jar and copy into your project’s lib directory.

2. Copy the following snippet into you project’s build.xml file:

       <taskdef name="compileCSS"
           classname="com.codename1.ui.css.CN1CSSCompileTask"
           classpath="lib/cn1css-ant-task.jar"/>
   
       <target name="compile-css">
           <compileCSS/>
       </target>

3. Change the following line in your project’s build.xml file:

    <target name="jar">

   to

    <target name="jar" depends="compile-css">

4. Eclipse doesn’t automatically recognize changes made to files from outside eclipse (like by ANT), so we need to tell it to explicitly synchronize the .res files that will be generated. To that end:

   1. Select the Run > External Tools > External Tools Configuration menu item.

   2. Select the "Refresh" tab.

   3. Check the "Refresh resources upon completion" box.

   4. Select "Specific Resources", then click the "Specify Resources…​" button.

   5. Select the "src" directory in the file dialog.

Now that you have the build script set up to process CSS files, you can add a CSS file to your project and use it in your project. Check out usage instructions for more.