I have some cool new stuff for you today. I have been working on porting some of the little tools I wrote for JavaFX 1.X. Also I was inspired by the web css button creator UiParade Button Builder. So I created a simple theming tool for JavaFX. This is something I have wanted to do for ages and is actually the second one I have written. The first started from the point of view of supporting every feature that can be done with CSS in JavaFX, and this turned out to be a huge undertaking as there is an amazing amount of flexibility in styling the JavaFX controls with CSS. So this one was inspired by the UiParade one and tried to give a simple set of controls to adjust the look. Some of them are quite clever that you adjust one slider and it is adjusting dozens of css properties in varying amounts for you. I have also made the source code available for all of these apps along with the custom controls like a color picker. So you can download it and see how its works. Hopefully we will add more tools to it over time as we have ideas or have time to do some.
Tools: Caspian Styler
This lets you customize the look of the default skin for JavaFX (Caspian) to create all kinds of themes. In the end it generates a CSS file that you can attach to your Scene and it will apply to all controls in your application. With a little customization of the selectors in the generated file you could make it apply on only certain named panels or controls. Would you guys like a button only one as well?
Tools: Animation Spline Editor
When you are animating in JavaFX you can apply an interpolator to the animation to control how the animation accelerates and decelerates. There are some preset ones built in like EASE_IN or EASE_OUT, there is also a customizable one created by Interpolator.SPLINE(…). This little tool lets you graphically experiment with the input to that function and see what the resulting animation looks like if applied to a scale, rotate, fade or translate animation. You can then hit the copy button to copy the code that is needed that you can then paste direct into your application.
Tools: Derived Color Calculator
JavaFX CSS has the advanced feature of derived colors. These are colors that are lighter or darker versions of some named color. This is used extensively throughout the default Caspian skin which is how we are able to do color theming with CSS like Caspian Styler above does. When you are working with derived colors you often have a design from a designer with an absolute color in it like #EEEEEE and you want to know what the derivation percentage would be from your chosen base color. This calculator will help work that out for you. It will also show you that you have to be careful choosing your base color as not all colors can be created from all base colors.
Getting the Application
I have packaged the application as a native Mac app bundle and as a Windows installer so it should be simple to get it installed and try it out.
↓ Download Mac DMG ↓ Download Windows Installer
The Code
There is a FX Experience GitHub repo with all the code so you can go grab it and play with it. We will be putting all the code from future blogs in there and slowly adding all the code from old blogs as well.
Simply amazing Jasper! Great job!
Keep up the awesome work.
What did you use to make the Windows binary executable installer?
Thanks!
Excellent, that is a really nice tool. Love the Caspian Styler.
Thanks!
Haha, yesterday i posted a thread at the OTN board about showing off and sharing nice css themes.
Someone suggested an application exactly like yours…nice timing 🙂
Very nice job Jasper.
I really like the textures you put in your apps.
Keep up the great work!
For the textures there is a brilliant site http://subtlepatterns.com/ that has loads of amazing textures. It saves hours in Photoshop creating nice tiling textures.
Awesome work Jasper!!
Like Carl asks, I also wonder what tool did you use to create the installer? I need something like that for an app I’m about to release.
Thanks, cheers
I think jasper used install4j tool for building installer
http://www.ej-technologies.com/products/install4j/overview.html
Yep, you are correct I used Install4j. I had a license for version 3 (2004/5) from back when I had my own start-up. Still just about works on the latest windows. If anyone knows any good free tools for making installers let me know. Have used WiX before but is a real hassle to get setup.
Jasper,
Thanks.. Again!
I hope to see better(FX centric) and free installers for Java/JavaFX making it easy for consumers to download and install.
Carl
+1 for that Carl.
Installers are coming to javafx 2.2 probably. There is an issue on javafx jira for this: http://javafx-jira.kenai.com/browse/RT-19446
Vote on it if you want.
Pedro,
Thanks!
Yes, smoother and polished deployment methods is pretty important to make Java on the client painless as possible. I hope this area becomes seamless.
I just voted.
Carl
Yep my thoughts the same! 🙂
Hi Jaspder try
Izpack
http://izpack.org/
I had success with launch4j.
– Pat
Try Inno Setup (http://jrsoftware.org/isinfo.php). This tool is absolutely free and with the correct Maven setup, you can generate both Windows and Mac (.dmg) installers.
BTW, I tried downloading the insntaller but the links you’ve provided are dead. Any updates?
During installation I get MSVCR71.DLL error and “Could not use bundled JRE” error with a log file too long to post. The installation stops here.
System: WinXP, JavaFX 2.0.2 (the same error if I remove javafx runtime), jre 1.6.0_29
An half of javafx2 samples that I’ve tried so far has a msvcr71.dll problem.
Same problem
Windows 7 64bit + Java 7_03 + JavaFX 2.1.15
Hi i had the same Problems with the Installation and later with the Tool. to fix it you have to download the missing Dll file and put it in the same folder with the install file. Same you have to do with the tool later .. copy the missing dll file into programm folder. After that was done i could install and use the tool without problems.
very very hot! You did a good job Jasper! I love the slide effect when chancing to animatione editor.
Would like to see more Mac OS X or iOS components (like on/off-button, color chooser popup)
Tobi
Love the OS X DMG package… works seamlessly!
Good job. Exactly the tool I needed right now. Keep up the work. A button only styler maybe with a the possibility to set -fx-graphic would be a cool thing too.
Nice app. For windows use Advanced Installer, it’s free, I’ve been using it for 4 years with Bloom and it works great.
For the Mac app did you use jar bundler?
Carl
Install on Windows initially failed with error “you need to be admin” (even though I was already). Succeeded when right-clicked on the installer and selected “Run as admin…”.
Some things to improve:
– allow to specify transparent colors in both CSS and color editor.
– in CSS editorm, the sliders allow to set non-integer values though the textfields display and allows to set only integer value.
– in interpolator allow to move above 1 (for spring effect). Not sure if allowing to set under 0 would produce an interresting/weird effect.
– it would be good to allow to add more control points (for a more complexe spring effect) but this would require a more drastic change in the Interpolator API.
Hm, how did Linux miss this party ? I thought there was some beta support for it…
Ya, you can download the linux beta. Jasper and I don’t use Linux though so not sure the best way to package and app, if you want to help out we’d be happy to produce an app bundle for Linux to for FX Experience tools.
Can’t find the link to this Linux beta anywhere. This is really old, so I doubt anyone will see it, but I was just wondering.
This tool is awesome! Helps a lot with designing a standardized UI.
Everything worked flawless on my Win7, 64Bit, Java Version 1.7.0_03.
Thanks a lot!
I particularly like that sliding effect between the sections.
Do someone has code example to achieve it, without to much hassle?
Thanks.
All the code is available in the github repo here: https://github.com/fxexperience/code
Excellent! Please add the css for the tree control.
Is there a way to load a previously saved css file? I like the tool, built my first css file with it, and now I want to tweak it a little. Can’t figure out how to load my previous file.
A little help please?
Excellent, that is a really nice tool.
I am building a software with JavaFx2.2,which uses the lastest JRE (7u6).But when making it into an installer,I met with a big problem,that is the size of the installer is very large.The reason is I use same JRE two twice!
First,I used FatJar(a Eclipse plugin) to export a jar,and the JRE7u6 is included together with other libabraries.Then I used Install4J to create a JRE bundle which contains the JRE7u6,and create a installer.It did actually work!
But the size of the installer is more than 60MB,too big! Can you help me?
Or can you give me a copy of your install4j project of the FX Experience Tools?
My email is 1158112684@qq.com. Thanks,Jsper!
good jobs.we love it.
Thank you.
Got this error when I tried to install…
—————————
fxetools.exe – System Error
—————————
The program can’t start because MSVCR71.dll is missing from your computer. Try reinstalling the program to fix this problem.
—————————
OK
—————————
The installer continued to run and then I got this error when it attempted to launch the app.
—————————
Error
—————————
The JVM found at .\jre is damaged.
Please reinstall or define EXE4J_JAVA_HOME
to point to an installed JDK or JRE.
—————————
OK
—————————
I managed to launch the app with this:
java -cp FXExperienceTools.jar;FXExperienceControls.jar com.javafx.main.Main
but it dumps a lot of exceptions to the console and some features are broken, such as the Derived Color Calculator not showing the original color.
This is all running on Java 7u7 32-bit JRE on Windows 7 64-bit OS
why there’s no for linux.
WOW Jasper ,
You have done so great!! and it’s very helpful. Amazing work!!
Thanks so much.
This is so good! One detail tho…. we need Linux version!
About linux, grab the sources on github. I managed to make it work by recreating the projects with netbeans and copying src folder.
I still have small problems (it’s complaining about the color picker) but i think it’s due to the newer version of javafx (2.2 in my pc).
Any Linux based version?
Where can I find a version .jar of these tools for Linux?
hi
how can i use FxExperience on linux.
there is no version for linux.
thanks
The code is available at https://github.com/fxexperience/code/tree/master/FXExperienceTools just open that folder as a project in Netbeans and run.
I love this tool. After 31 years as a C programmer, I finally see the value in Java, and especially JavaFX. Your Caspian tool makes theme configuration a breeze and adds the “missing element” to successful app design.
One note – in the “Gradient” Choicebox, “Shiny” only has one “n” :).
Really Nice,
Only missing to load a Style-sheet.
Is this planned in the feature???
Thanks
I downloaded this application for Mac OS X Mavericks. But when I try to launch the app, I get the following error ““FxExperience Tools.app” is damaged and can’t be opened. You should move it to the Trash.”
🙁
Doh, I have had the same problem. I Need to build some new Mac app bundles when I have a chance. For now you can always download the GIT repo and run the IDE project which is what I have been doing recently.
Hello, does this build support JavaFX 8?
ERROR: Could not get DLL-Handle.
ERROR: Could not load functions
ERROR: Could not find another JRE.
может кто нибудь дать установленный вариант этой программы?
Awesome tool, makes css work so much easier and quicker!!!
As mentioned by Kevin Penrose, it’d be nice to have an import function, where you can load an old css File into the Program. Any chance this might be implemented?
It seems that I can’t download it. I get the following message.
“No Results Found
The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.”
Can you please tell me where will I get it?
Well i guess it’s not y lucky day 🙁 seems like all file links on this site are broken
When will you have a version for linux?
Thanks