I work a lot with Swing and one of the more common tasks is creating a custom component. This usually involves some custom drawing.
Here is a quick example of a component that displays a black circle. Very basic, but it will re-size if the panels bounds change.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | public class SwingClock extends JPanel{ @Override public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D)g.create(); Dimension size = getSize(); int w = size.width; int h = size.height; int r = w; if(h < r) r = h; int x = 0; int y = 0; g2d.setColor(Color.BLACK); g2d.fillOval(x, y, r, r); g2d.dispose(); } public static void main(String[] args) throws Exception { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); SwingClock clock = new SwingClock(); frame.getContentPane().setLayout(new BorderLayout()); frame.getContentPane().add(clock,BorderLayout.CENTER); frame.setSize(200,200); frame.setVisible(true); } } |
Now how is this done in JavaFX 2..0? Well it’s a bit more work.
You will need three classes 1. The Control, 2. The Control Skin, and 3. The stage.
First up is the Control, this will contain the model for our control. Because it does not really do anything the we only need to set the skin and define the max width and height. This is so the control will grow along with the frame.
1 2 3 4 5 6 7 8 9 | public class Clock extends Control implements Skinnable { public Clock() { setSkin(new ClockSkin(this)); setMaxHeight(Double.MAX_VALUE); setMaxWidth(Double.MAX_VALUE); } } |
Next up is the Skin. The skin provides the Node used to display this control. It’s important to use the StackPane as the returned node as it will allow you to add overlapping nodes if you want.
getNode is only called when the parent had changed. So it’s ok to do some adjustments here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | public class ClockSkin implements Skin { private Clock skinable; private StackPane root; private Circle cirlce; public ClockSkin(Clock clock) { skinable = clock; root = new StackPane(); cirlce = new Circle(); cirlce.setFill(Color.BLACK); root.getChildren().add(cirlce); } @Override public void dispose() { } @Override public Node getNode() { double w = skinable.getWidth(); double h = skinable.getHeight(); cirlce.setCenterX(w/2); cirlce.setCenterY(h/2); double r = w; if(h < r) r = h; cirlce.setRadius(r/3); return root; } @Override public Clock getSkinnable() { return skinable; }} |
This is just a basic JavaFX startup code that every applications needs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | public class FirstComponent extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("First Component"); Clock clock = new Clock(); StackPane root = new StackPane(); root.getChildren().add(clock); primaryStage.setScene(new Scene(root, 300, 250)); primaryStage.show(); } } |
That should be it! Now you have a very basic control on which to build something more advanced.
