Fork us on GitHub

Live CSS Update

CSS Support is now Builtin with Great new Features
Live CSS Update

Live CSS Update

Up until last Friday CSS support has been a second class citizen, with the release of Codename One 4.2 we’re making CSS a core feature. We also improved the builtin CSS support extensively!
Changes you make to a CSS file will instantly reflect in the simulator. You don’t need to compile or do anything special. When you launch the simulator we open a CSS watcher thread that automatically recompiles & deploys the CSS whenever you save.

Installation is also much simpler. You can click the CSS entry in Codename One Settings & activate CSS. That’s it!

Migration doesn’t migrate your theme! You would need to redo the theme in CSS
Disabling CSS after enabling it might have some issues, if you experience that remove the entry codename1.cssTheme from codenameone_settings.properties

If you have a project that uses the older CSS support the settings app is smart enough to recognize that and offer to migrate to the new CSS support.

The CSS Option in Codename One Settings
Figure 1. The CSS Option in Codename One Settings
These changes might need an update to the build.xml file. Make sure to update it when you save the file

Other Improvements in CSS

Other than these great new features CSS has improved by leaps and bounds. One of the biggest benefits of the new CSS processing logic is speed. It’s much faster. The trick behind that is simplification of the process for resource file generation.

The CSS plugin occasionally uses the webkit browser from JavaFX to generate an image of the CSS style. E.g. if a complex gradient is used the CSS processor just fires up webkit and grabs a multi-image screenshot of this style.

This is powerful as it allows for complex CSS styling, but it has many pitfalls such as slower compilation, lower fidelity & larger resources.

The newer CSS version works with some of our new border types such as round border. But the bigger improvement is that it doesn’t launch the browser window unless you actually need it. This results in faster compilation times for the CSS.

What’s Still Missing

The biggest piece we need to do is migrate the documentation to the developer guide and update this everywhere.

Another big missing piece with CSS support is localization. It’s not a CSS feature but rather something we would expect to have within the generated resource file. So java properties files would be implicitly added to the resource file during CSS compile. Personally I think we can make localization much easier by detecting unlocalized strings in the simulator & automatically adding them to the resource bundle.

We need some more demos & tutorials that cover CSS and ideally we would want this exposed in the "new project wizard".

If we could automate the conversion of res files to CSS it would be great for things like this as we could instantly make all of our demos work both ways.

The Big Picture

The obvious question here is: are we replacing the designer tool with CSS?

Not yet.

Though this is something I’m personally conflicted with. The designer tool is showing its age so it makes sense to minimize its usage. I don’t think we’ll deprecate the designer soon as it’s still convenient to work with.

Personally I find the designer more convenient probably due to habit. However, CSS has a few big advantages, for me personally the biggest advantages is documentation. I did the Uber clone app using the designer tool and while that was pretty easy to implement, the tutorial became untenable…​
I had to grab screenshots of every UI setting and if I wanted to revise something later I had to redo the screenshots. This was sometimes complicated as it required reverting existing changes to make the shots real. Since CSS is based on code it’s far easier to walk through the CSS changes I made like I would do with any other block of source code. That’s why the Facebook Clone uses CSS and it’s indeed far more convenient in that sense.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.