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
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.
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?
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.