/ Flatter / Flatter

Flatter

Hendrik on 2013/09/24 - 17:59 in Flatter, JavaFX

For our JavaOne talk Claudine and I created a new JavaFX skin called Flatter. While AquaFX has it’s main focus on desktop applications running on a Mac, Flatter is made for touch and embedded devices.

Flatter is a skin that is as simple as it can be. There are no gradients or shiny effects in the skin of all the controls. Next to this the controls of flatter have a bigger appearance than all controls in the desktop skins. By doing so, they are prepared for touch. Here is a first screenshot of some of the default JavaFX controls skinned by Flatter:

controls

To take care of a good user experience on touch based devices, Flatter changed the behavior of some default controls. Using a default combobox by touch isn’t always easy. Because of this we changed the behavior and skin of the combobox and added a overlay where the data of the combobox is rendered in a special selection dialog. Here we found a way to provide a good UI and user experience for any combobox data. A developer doesn’t need to change anything. The complete behavior and UI is managed by Flatter:

combobox

Additionally Flatter will include some new controls and specialized skins. One example is the AvatarView. You can use this view in login dialogs for example, to show the picture of a user. AvaterView matches perfectly in the Flatter skin and will show every avatar images in a good way. No matter what ratio the image has, for example. Here is a picture of the new AvatarView:

avatarview

As I mentioned before we created some special skins. This skins can be used for default controls. The one that I will show here is the TagSkin for the Label. If you do some document tagging in your application you can use this skin to have your labels look like tags. The only thing you have to do here, is setting the Skin to your label. To make this even easier, Flatter will provide a facade like the one we introduced for AquaFX. Here is a preview of the tag skin:

tags

Flatter is still in progress, but we will open source it in the next weeks after JavaOne. You can find more information about Flatter in our “Let’s get wet” JavaOne presentation. So if you want a flat user experience stay tuned for this one 😉

16 POST COMMENT

Send Us A Message Here

Your email address will not be published. Required fields are marked *

16 Comments
  • 2013/09/27

    Hey you guys are doing marvellous work here.

    It is very very impressive.

    Cant wait for to see your opensource projects.

    I dont think things have to be perfect before opensourcing. Others might even have more improvement.

    Thanks agreat deal.

    Regards.

    Abdlquadri
    Reply
    • 2013/09/29

      We will open source all the stuff in the next 2 weeks. We didn’t want to show this before JavaOne. So we worked in a private repo 😉

      Reply
  • 2013/10/07

    Hi,when should be visibile the code and where?

    Thanks!

    Daniele
    Reply
    • 2013/10/07

      Hi Daniele,

      thanks for your interest :-)
      It will be available on bitbucket soon.
      We will inform you on GuiGarage when released.

      Cheers,
      Claudine

      Reply
  • 2013/10/11

    Thanks,I hope that it’ll came soon :-) The select box with rounded corner is very nice. Is possibile style the entire stage with that layout?

    Thanks

    Daniele
    Reply
    • 2013/10/12

      Hi Daniele,
      do you want to style a stage with this border instead of using the native frame?

      Reply
  • 2013/10/14

    Yes!

    Daniele
    Reply
  • 2013/11/05

    No more news about Flatter?

    Daniele
    Reply
    • 2013/11/06

      Claudine is preparing a new AquaFX release and I’m working on DataFX and BoxFX at the moment… It’s sad but Flatter has to wait at the moment. Hopefully we will release the first component skins etc. this month.

      Reply
  • 2014/04/22

    Still not published?

    Pat
    Reply
    • 2014/04/23

      No :(
      But it will be released for JavaOne this year.

      Reply
  • 2014/05/06

    I like your selfmade theme. I wanted to do quite the same for one of my custom applications. It would be fine if you could provide the needed files, therefore I don’t need to write my one theme.

    Sven
    Reply
  • 2014/07/16

    It’s really nothing when you compare it with power of WPF and Silverlight. Why on the earth java could not have a tool like Blend of Visual Studio. I love Blend and it’s environment which provides a wonderful visual environment for making custom controls event animating ListBox items with ease of function. I wish one day we could develop java applications as rich as Windows applications or even better.

    Majid
    Reply
  • 2015/04/06

    I wish I knew how to use this theme it looks great. I’ve only started JavaFX recently and I’m loving it. Does anybody know? I tried importing the flatter.jar file into my project and adding flatter.style(); but I guess that didn’t work.

    John
    Reply
  • 2015/05/26

    Hi
    i don’t know how to use this!
    are you can write a simple but full example for me?
    thanks

    Omid
    Reply
  • 2016/05/18

    Hi,
    Thanks for sharing, love this design. Where should I add the dependencies though ? I have created a maven project and added them to the pom.xml file and I had a “cant find the declaration of element project”

    meriem
    Reply