Controls follow the classic MVC design pattern. The Control is the "model". It contains both the state and the functions which manipulate that state. The Control class itself does not know how it is rendered or what the user interaction is. These tasks are delegated to the Skin ("view"), which may internally separate out the view and controller functionality into separate classes, although at present there is no public API for the "controller" aspect.
All Controls extend from the Control class, which is in turn a Region, which is a Node. Every Control has a reference to a single Skin, which is the view implementation for the Control. The Control delegates to the Skin the responsibility of computing the min, max, and pref sizes of the Control, the baseline offset, and hit testing (containment and intersection). It is also the responsibility of the Skin, or a delegate of the Skin, to implement and respond to all relevant key events which occur on the Control when it contains the focus.
Control
Control extends from Region, and as such, is not a leaf node. From the perspective of a developer or designer the Control can be thought of as if it were a leaf node in many cases. For example, the developer or designer can consider a Button as if it were a Rectangle or other simple leaf node.
Since a Control is resizable, a Control will be auto-sized to its preferred size on each scenegraph pulse. Setting the width and height of the Control does not affect its preferred size. When used in a layout container, the layout constraints imposed upon the Control (or manually specified on the Control) will determine how it is positioned and sized.
The Skin of a Control can be changed at any time. Doing so will mark the Control as needing to be laid out since changing the Skin likely has changed the preferred size of the Control. If no Skin is specified at the time that the Control is created, then a default CSS-based skin will be provided for all of the built-in Controls.
Each Control may have an optional tooltip specified. The Tooltip is a Control which displays some (usually textual) information about the control to the user when the mouse hovers over the Control from some period of time. It can be styled from CSS the same as with other Controls.
focusTraversable is overridden in Control to be true by default, whereas with Node it is false by default. Controls which should not be focusable by default (such as Label) override this to be false.
The getMinWidth, getMinHeight, getPrefWidth, getPrefHeight, getMaxWidth, and getMaxHeight functions are delegated directly to the Skin. The baselineOffset method is delegated to the node of the skin. It is not recommended that subclasses alter these delegations.
Skin
In releases of JavaFX prior to JavaFX 8.0, the only public API related to the concept of the control skin was the Skin interface, which is a very simple interface offering very little API and absolutely no convenience. This, of course, drove developers to instead depend on non-public API, namely the com.sun.javafx.scene.control.skin.SkinBase class. The SkinBase class implemented the Skin interface, but offered a lot more convenience, in particular the concept of a Behavior (for mouse and keyboard input event handling), as well as layout management and 'ownership' of the children nodes of the control. In JavaFX 8.0 we've made the SkinBase class public API, and it is therefore now the recommended approach for developers of custom UI controls. However, it is important to note that there have been a number of changes to SkinBase in JavaFX 8.0, compared to what it was in 2.x.
Changes to SkinBase in JavaFX 8.x
There are a number of changes in SkinBase between JavaFX 2.x and 8.x, so I will try to outline them here:
Change #1: Inheritance hierarchy
In JavaFX 2.x, SkinBase extended from Region. In JavaFX 8.0, SkinBase does not extend from anything (or, to be pedantic, now only extends from Object). It of course continues to implement the Skin interface however. Relatedly, in JavaFX 2.x, Control extended from Parent, whereas in JavaFX 8.0 Control extends from Region.
The motivator for this change was to remove the confusion where both the Control and the SkinBase instances for a single control were both Nodes, which have an unavoidable memory cost. With the refactoring detailed above, now only Control is a Node, and Skin is simply the controls delegate for managing the layout of the controls children. In terms of implementation changes, there is very little changed and SkinBase has a number of convenience methods that will forward on to the control. In fact, previous code that would add children to the SkinBase.getChildren() list still continues to work, this is simply forwarded on to the children list of the Control instead.
The other benefit of this change is that it reduces the mental gymnastics required to understand how Control and SkinBase are related to each other. Previously, with both Control and SkinBase being nodes, and SkinBase having the same style, styleClass, and ID as the Control, there was a weird mirroring going on. With the new approach it is very clear that the Control is the node and everything else is just there to support the Control node.
Change #2: Referencing (and instantiating) default skins
In JavaFX 2.x, the recommended approach to developers of custom controls was to override the Control.getUserAgentStylesheet() method to return a reference to a stylesheet that outlines the default styles of the control. It was then expected that the CSS file would reference the skin via code along the lines of the following:
.custom-control { -fx-skin: com.javafx.customControl.skin.CustomControlSkin; }
This approach is still totally valid, but as an added convenience to developers who have no desire to use CSS there is now a new API that you can override in your control class. This method is defined in Control, and is specified as such:
/** * Create a new instance of the default skin for this control. This is called to create a skin for the control if * no skin is provided via CSS {@code -fx-skin} or set explicitly in a sub-class with {@code setSkin(...)}. * * @return new instance of default skin for this control. If null then the control will have no skin unless one * is provided by css. */ protected Skin<?> createDefaultSkin() { return null; }
In your custom controls, you can now simply do the following:
/** {@inheritDoc} */ @Override protected Skin<?> createDefaultSkin() { return new ButtonSkin(this); }
Change #3: SkinBase layoutChildren method now takes arguments for x, y, width and height
It was observed when looking at the old layoutChildren code for both Oracle-built and 3rd party UI controls that there were common mistakes being made in calculating the correct values for the x, y, width and height values, or that they were being calculated repeatedly (which costs CPU time unnecessarily). For these reasons, it was decided to pass in these values as arguments to the layoutChildren method. Developers can choose whether to use them or not, but it is suggested that these values be used rather than recalculating them.
Change #4: SkinBase no longer has any public reference to Behavior API
Whilst we were ready to make SkinBase public API in JavaFX 8.0 we had to unfortunately backtrack from our intentions to also provide an API to allow for easy handling of mouse and key events in JavaFX 8.0. The primary reason was that this becomes increasingly complex the more you look into it, especially if you start to think of behaviors as more than just internal control mappings but rather internal and external mappings between inputs and actions. Additionally, there is a need to consider exposing API that can read these mappings and to know what mappings are available for a given control (for Scene Builder to expose this functionality to developers, for example). The Jira issue tracking this feature can be found at RT-21598.