UltraLightClient Code Community
[ start | index | login ]
Overview > Relative Layout

Relative Layout

Belongs to following categories: Extension, ULC5.2,

Purpose

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 onjava.com website.

Resources

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.

Compatibility

The described functionality has been developed and tested using JDK 1.3.1_13 and ULC 5.2.1.

Author

>>etienne

2 comments (by Chaiane, Prakash) | post comment
labels
Category:Extension
Category:ULC5.2
attachments
Created by etienne. Last edited by admin, 6 years and 271 days ago. Viewed 13,007 times. #11
[diff] [history] [edit] [rdf]

Icon-Comment Chaiane, one year and 128 days ago. Icon-Permalink

Surely if you iognre a browser issue and this causes user issues then that in itself is something a developer should be concerned about?

Icon-Comment Prakash, one year and 126 days ago. Icon-Permalink

Please ecsxue, the first paragraph of my above comment should have cited Thacker, I must have got my BLOCKQUOTE wrong.
Name
Email:




news




RSS News Feed:

RSS Feed

snipsnap.org | Copyright 2000-2002 Matthias L. Jugel and Stephan J. Schmidt