Convert CSS to JavaFx CSS

Question

I have a web application and for that we have CSS. We are porting the UI to JavaFX and intend to style it exactly the same way as it there on the web application. I tried loading the CSS which is used in the web project for this, but the style does not get reflected. After a bit of searching i figured out that Oracle has created something called JavaFX CSS which is similar to CSS but not exactly CSS.

What I wanted to find out: is there some easy way to convert my (web) CSS to JavaFX CSS?

Answer 1

some easy way to convert my (web) CSS to JavaFx CSS

There is no automated convertor for this task. I advise you to take a little bit of your CSS and try to manually convert it by hand.

You, may be able to use analysis tools such as the CSS Analyzer in SceneBuilder to help with this task.

Refer to the JavaFX CSS Reference whilst performing your conversion.

If you have specific issues on converting elements or attributes between your JavaFX and HTML css files, then post new questions regarding those conversion difficulties.

We are porting the UI to JavaFx and intend to style it exactly the same way as it there on the Web Application.

That's going to be a little tricky if you have a lot of CSS. JavaFX CSS is not the same as web based HTML css. JavaFX CSS files share a common syntactic format with HTML CSS, but all of the css attributes in JavaFX differ from those found in HTML CSS.

HTML CSS can specify layout properties to be rendered by an HTML rendering engine. The JavaFX layout and rendering engine works differently from HTML, so HTML CSS based layout specifiers won't have direct equivalents in any of JavaFX CSS, JavaFX code or FXML defined layout managers.

Still, JavaFX CSS is very flexible. Many things are similar to HTML css (like region background and color specifiers), so it is possible to convert the gist of the HTML CSS to JavaFX CSS with acceptable accuracy in a reasonable amount of time, provided you are pretty skilled in both CSS forms. Just don't expect your JavaFX application and your web application to look or behave exactly the same.

Oracle has created something call JavaFX CSS which is similar to CSS but not exactly CSS.

JavaFX CSS is really just CSS in terms of its syntax and file format. CSS as used in JavaFX follows all of the basic syntax and data types of W3C CSS.

W3C CSS is what you term in your question as plain CSS or (web) CSS. There are many extensions and proposed extensions to W3C CSS and many of these extensions aren't even well supported across major browsers.

Consider using WebView for some parts of your application

Rather than port your entire application from HTML to JavaFX, you may want to keep some of the application in HTML and port other parts of the application to JavaFX controls.

JavaFX includes a WebView component which can be easily embedded in a JavaFX application. WebView can accurately render HTML, and it can parse and understand W3C CSS. You could use some of your existing CSS and HTML to style and render parts of your JavaFX application.

Because JavaFX CSS and W3C CSS share a common file format, you could even place both JavaFX CSS styles and W3C CSS styles in the same CSS file and the JavaFX and WebView runtimes would be clever enough to apply the appropriate styles when rendering their specific components.

See Also

• JavaFX CSS Reference Guide
• Learning CSS (JavaFx style)