Relative Layout


This extension provides developers with ULC's complement to Jim Elliott's RelativeLayout. The ULCRelativeLayoutPane is very easy to use if you already have the layout of your view in your mind and now want to express its behaviour in a very intuitive way. Its API is very close to the RelativeLayout and makes migration from Swing GUIs using the RelativeLayout very simple.

The RelativeLayout is very easy to learn and apply, as can be read in an Article from the website.

How to use

Whenever we add a component to the ULCRelativeLayoutPane, we have to assign it a unique name. We can then define the constraints by referencing attributes of other components using these names.

We can define four different constraints on the x-axis and four different constraints on the y-axis. For each axis, only two constraints must be defined in order to calculate the other two, respectively. For details, read the article mentioned above.

In the example below, we define that the title label's top constraint is to be 5 pixel below the top attribute of the surrounding container and its horizontal center is to be the horizontal center of the surrounding container. The description label's top constraint is to be 8 pixel below the bottom attribute of the title component and its left constraint is to be 5 pixel to the right of the left attribute of the surrounding container. The date label's top constraint is to be the same as the top attribute of the description component and its right constraint is to be 5 pixel to the left of the right attribute of the surrounding container. It is really harder to express it in words than it is reading the Java code. Note that positiv numbers mean to the right and below, negative numbers mean to the left and above (the upper left corner being the origin).


ULCRelativeLayoutPane relativeLayoutPane = new ULCRelativeLayoutPane();

ULCLabel title = new ULCLabel("Sample Title"); relativeLayoutPane.add(title, "title"); relativeLayoutPane.addConstraint("title", AttributeType.TOP, new AttributeConstraint(ULCRelativeLayoutPane.ROOT_NAME, AttributeType.TOP, 5)); relativeLayoutPane.addConstraint("title", AttributeType.HORIZONTAL_CENTER, new AttributeConstraint(ULCRelativeLayoutPane.ROOT_NAME, AttributeType.HORIZONTAL_CENTER));

ULCLabel description = new ULCLabel("Sample Description"); relativeLayoutPane.add(description, "desc"); relativeLayoutPane.addConstraint("desc", AttributeType.TOP, new AttributeConstraint("title", AttributeType.BOTTOM, 8)); relativeLayoutPane.addConstraint("desc", AttributeType.LEFT, new AttributeConstraint(ULCRelativeLayoutPane.ROOT_NAME, AttributeType.LEFT, 5));

ULCLabel date = new ULCLabel("Sample Date"); relativeLayoutPane.add(date, "date"); relativeLayoutPane.addConstraint("date", AttributeType.TOP, new AttributeConstraint("desc", AttributeType.TOP)); relativeLayoutPane.addConstraint("date", AttributeType.RIGHT, new AttributeConstraint(ULCRelativeLayoutPane.ROOT_NAME, AttributeType.RIGHT, -5));

ulcFrame.add(pane); ...

How it is implemented

The UIRelativeLayoutPane class serves as a proxy to the ULCRelativeLayoutPane class. It uses James Elliott's RelativeLayout to arrange the components in a JPanel. The client-side and server-side class inherit from UIAbstractLayoutPane and ULCAbstractLayoutPane respectively.