How to add skin effect to MenuItem in JavaFX 8? - javafx

I'm using a custom Button class that implements the effect seen in Android Material Design. I got this from here.
I would like to implement the same thing but in the MenuBar with MenuItem, but in this class I can't override createDefaultSkin(). Is there any other way to create this dynamic background? I have searched and only found how to change the background color or how to make animated transitions of colors but nothing like setting a custom shape like a Circle in this case that it's latter animated.

MenuItems are not controls, so they are not skinnable using the controls architecture methods like createDefaultSkin() - which you have already discovered. You do have a few options though.
JavaFX supplies a CustomMenuItem class which provides a configurable node content property. So you can customize the menu items by creating CustomMenuItem instances.
Standard menu items can also be customized by setting a graphic on them.
Menu items can also be customized quite extensively without Java code by manipulating their CSS, though it would not be possible to achieve the animated effects in the android material design button you refer to.
MenuBars are controls and have a skin implementation, so you provide your own skin implementation for the entire menu bar (in the same way that the link you provided supplies a custom skin implementation for buttons). The custom menu bar skin is then responsible for rendering the GUI of the entire menu and can do so using whatever implementation you decide to provide.
A menu bar is a far more complicated control than a button, so providing a custom menu bar skin is a non-trivial task. To understand the built-in MenuBarSkin implementation, you can search the JavaFX source repository for the MenuBarSkin class. The built-in menu bar can is complicated because it has the ability to use system menu features on a Mac, pop-up menus, scene graph node based menus within an app window, etc. The built-in implementation handles some of the UI functionality for the menu bar itself and in other cases delegates to grabbing custom node content from menu items, various Java helper classes and ultimately the underlying OS windowing toolkit support for menu display and management.

Related

What is the best practice for creating customized UI component in tornadofx?

i am new to JavaFX and tornadofx, and now i need to create some highly customized UI components(including submit button, text input field, password input field, datetime picker, dropdown selector etc) shown as the picture bellow:
so, what is the best practice for creating these components?
my question includes:
which super class my customized UI component should extend?
is there any existing example in tornadofx?
can i use bootstrap in my case? and if yes, how can i use bootstrap?
thanks
(this question also posted here: https://github.com/edvin/tornadofx/issues/498)
There really isn't anything TornadoFX specific to this process, but I have two recommendations:
Don't create a custom control unless you really need to. To add custom functionality to a Button or a TextField, install a custom skin instead.
If you really need a custom control, consider extending the Control class. For more layout centric components you might extend a layout instead, or simply Pane.
To learn more about custom components, consider reading this brilliant book:
https://www.amazon.com/Mastering-JavaFX-Controls-Oracle-Press-ebook/dp/B00L3TF02K
Also check out these videos:
https://www.youtube.com/watch?v=L9xtOhdSx6k
https://www.youtube.com/watch?v=7PPcM0E5yQw

Flex 4 - What is meant by skinning and what is meant by custom components?

I want to know what is skinning and what is custom components? I know this is so chilly question. But I would like know about it. And where we have to use skinning and where we have to use custom components? If it has any similarities , please tell me about it.
I just want the clear explanation about these two things.
Thank you.
Skinning -
For example, dropdownlist open dropdown, which has default hovered color, selected color, etc. which you have to change according to your application, then you can change it by skinning the dropdownlist component...
Custom component -
For example, button component has default events like, click event, mouse evnt, etc. and according to your application you have to remove some of events or modify some then create button with your event...
Please check below links...which will help you more...
Need the example to use custom component in FLEX application
http://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/
Skinning is about the look and feel of the application. What colors to use, drops shadows etc.
Custom component is tweaking an existing widget, combining widgets or creating a new one from scratch to achieve functionality that does not exist in the standard Sdk. Good examples of custom components are charts from 3rd party vendors

Adding dynamic content underneath a qt tree widget item

I'm trying to implement the functionality detailed in this image, but I'm running into some trouble because it seems that tree widget items don't support this kind of content:
As you can see, I would like to be able to add dynamic content underneath a tree widget item...content such as radio buttons and sliders. Any leads?
You could use item delegates to implement such items properly. But I think QTreeWidget is an overkill. You should use something like QToolBox.

Disable pagination animation

I'm trying to disable the Pagination control animation using JavaFX. I could not find any precise info on how to do that. I know some controls have the setAnimated(false) method, but this one doesn't.
Maybe there is a solution via CSS styling or via the Skin interface, but I'm kinda new to JavaFX
Any ideas?
For JavaFX 2.2, the pagination animation is going to be a little tough to disable.
As you note there is no public API to disable the animation (and there isn't anything in CSS). What you will need to is create your own skin and assign that skin to the pagination control.
To do this use the default JavaFX 2.2 pagination skin as a base and edit it so that it doesn't do animations. If you rename your custom pagination skin to another package (e.g. org.acme.javafx.scene.control.skin), then you can specify that new skin via assigning a css stylesheet to your app which includes the following rule:
.pagination {
-fx-skin: "org.acme.javafx.scene.control.skin.PaginationSkin";
}
Apart from the difficulty of initial implementation for a new JavaFX user (which is rather significant) another serious downside to this approach is that in JavaFX 2.2, the skin API is not public, so when JavaFX 8 is released where the skin api is public, your changes probably won't work, so you will need to recode them for JavaFX 8. The reason your changes won't continue to work for JavaFX 8 is that the com.sun.javafx.scene.control.skin.SkinBase class your custom pagination skin needs to derive from will have moved to something like javafx.scene.control.skin.SkinBase to become public API.
So I'd suggest living with the Pagination animation for now unless you really need to get rid of it.
There is currently a a request against the JavaFX runtime issue tracker to allow disabling animation in the Pagination control. See RT-26439 Pagination: Animation of page flip should be deactivatable.

Adding custom widgets to QStackedWidget

I'm having difficulty adding a custom widget to a QStackedWidget. I want to include a widget with a different grid layout in this stacked widget.
If someone could show me how to set up the layout (buttons, etc.) inside the stacked widget, that would be even better. The main dialog containing the stacked widget is really simple, and I don't want to clutter it up with tonnes of grid just for one widget inside the stacked widget.
At the moment I'm trying to make the complex widget as a seperate class and insert an instance of this class into the stacked widget using .addWidget() (this doesn't work).
Maybe I'm thinking about it the wrong way?
I'm using PyQt, but C++ answers are acceptable — I can get an idea of how things work by looking at C++ (well, I've been fine so far =s).
If you're using QtCreator I suggest do it this way:
Design each page/widget as a seperate class (seperate *.cpp, *.h and *.ui files) - press ctrl+n and choose Qt / Qt designer form class.
Add X pages/widgets to the stackedWidget. X is the number of views You created
Promote each widget to be your custom designed page (right click in the objects tree on the right and choose promote widget). In field "promoted class name enter" enter the name of your cutom creacted page.
This should get you starded. I hope it solves Your problem. Ofcourse You have to design each view.

Resources