JFXperience.com

Today I finished my first custom component in JavaFX!

For a personal project I’m going to develop, I could use a rectangle that can be manually resized in the horizontal direction. To do things the right way from the start I created the ManualResizableRectangle component.

It’s a normal Rectangle with the following extra features:

• resizable in horizontal and vertical direction
• the resizing can be enabled or disabled in both directions separately
• a maximum and minimum size can be specified so the user can’t make it too large or too small
• the rectangle can be moved around if this feature is enabled
• a stepsize can be specified to make sure the rectangle is resized in certain steps (can be useful if you want to use it in let’s say a calendar component)
• the width of the area used to resize can be configured

You can try it out here.
The source code can be found here.

How did I create it?

As you can see on the image above I added transparent rectangles (yellow) over the areas of the base rectangle (blue) that need to be used to resize or move . These rectangles provide the click behavior and grow or shrink together with the base rectangle.

How to use it?

ManualResizableRectangle {

                fill: Color.BLUE

                width: 200

                height: 200

                layoutY: 100

                layoutX: 100

                arcWidth: 20

                arcHeight: 20

                clickAreaWidth:10

                maxWidth: 250

                maxHeight: 250

                minWidth: 30

                minHeight: 30

                enableHorizontalResize: true;

                enableVerticalResize: true;

                enableMove: true;

                horizontalSteps: 30

                verticalSteps: 30

            }