Need help with cgrid

Byte-Welt - Projekte / Projects DockingFrames
1

Hi everyone,

I am trying to create a certain layout using cgrid, and I must just be too dumb to get the relative ratios right

What I want:

What I got:

What I did:


grid.add(0, 0,  1, 1, left1);
grid.add(0, 0,  1, 1.5, left2);
grid.add(1, 0,  1, 4, center1, center2);
grid.add(0, 1,  1, 1, bottom1, bottom2);

Can you help me?

Jakob

2

left1 and left2 both have y coordinate 0, that is certainly not correct. Put left2.y to 1. Also since left1 and left2 have the same height (in the image), they should have the same height in the CGrid (left2 should not have height 1.5).

Since bottom1 and bottom2 should be below left1 and left2, their y coordinate must be at least the sum of the heights of left1 and left2 (that is at least 2).

Finally the width of center1,2 and bottom1,2 must be greater than the width of left1,2, that means greater than one.

My suggestion (and that is what I do sometimes): take a sheet of squared paper, draw the layout you want onto the paper, and start counting the squares to find the boundaries.

3

Thank you for these clarifications. These constraints that you mentioned (x/y and width/height are interdependent via sums) : are they described in the docs somewhere? I was looking for something like this and neither the javadoc nor the PDFs contained this information. Or did I miss something?

I really commend you on this framework, but I wish there was a more intuitive way to layout the dockables. Before using the grid, I attempted this layout using CLocations, but I couldn’t get the center dockables to stack (it worked with the bottom ones by specifying the same location).

Anyhow, this does it now:


grid.add(0, 0, 1, 1, left1);
grid.add(0, 1, 1, 1, left2);
grid.add(1, 0, 5, 2, center1, center2);
grid.add(0, 3, 5, 0.2, bottom1, bottom2);
4

Well you can see them as coordinates just like the “setBounds” method of “java.awt.Component” works (since I always have this “picture” in my mind, I really did not see that someone could view these parameters in another way).

As for the layout: I’m not really happy with building up layouts either. Any suggestion how to improve this thing is highly appreciated.

5

the x/y coordinates are clear, of course, but I think the correlation between position (x/y) and width/height is unfortunate. I would not expect the width of an element to have an effect on its position in the grid.

As for suggestions, just look at the modern layout managers. I use FormLayout from jgoodies quite extensively, for example. I have also heard good things about MigLayout.

Here is a demo that creates the layout I wanted using FormLayout with colored JPanels:


import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Frame;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;

import com.jgoodies.forms.builder.DefaultFormBuilder;
import com.jgoodies.forms.layout.CellConstraints;
import com.jgoodies.forms.layout.FormLayout;

public class LayoutDemo extends JFrame {
    
    public LayoutDemo() {
        setSize(800,600);
        setExtendedState(Frame.MAXIMIZED_BOTH);
        setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        setLayout(new BorderLayout());
        JPanel contentPanel = new JPanel();
        add(contentPanel, BorderLayout.CENTER);
        
        FormLayout layout = new FormLayout(
                "fill:pref:grow(0.2), fill:pref:grow(0.8)", // columns
                "fill:pref:grow(0.5), fill:pref:grow(0.5), fill:pref:grow(0.2)" // rows
                );
        DefaultFormBuilder builder = new DefaultFormBuilder(layout, contentPanel);
        CellConstraints cc = new CellConstraints();
        builder.add(createPanel(Color.red), cc.rc(1,1));
        builder.add(createPanel(Color.cyan), cc.rc(2,1));
        builder.add(createPanel(Color.green), cc.rchw(1,2,2,1));
        builder.add(createPanel(Color.BLUE), cc.rcw(3,1,2));
    }

    private JPanel createPanel(Color color) {
        JPanel panel = new JPanel();
        panel.setBackground(color);
        return panel;
    }
    
    public static void main(String[] args) {
        new LayoutDemo().setVisible(true);
    }
    
}
6

That was me.

Jakob

7

Sorry to respond so late.

I disagree with some things you said. I think it is not too hard to imagine that x/y/width/height describe a rectangle, and that these rectangles should not intersect. The width does not have a direct effect on the position of an element, but on its “wheight” compared to others. This might push others away, put that’s just the grid trying to enforce the “no intersection” rule.

As for the layouts. I have to think a bit, but it might be possible to incorporate some of them. They normally move around rectangles (java.awt.Component), so they should be capable of laying out some other rectangles (Dockable) as well.

8

I would like to echo @jmagiera’s concerns. It would be great if there was some documentation/examples about how the width and height work in relation to the x and y co-ordinates. Since they are more “weights” than actual dimensions, it would be very useful to see how the weights behave differently in different situations.

9

Let me add one comment to this statement. Yes, it is „not too hard“, but I would argue that one of the most central functions of using this great docking framework should be an absolute no-brainer. In fact, it should be a fun and creative act. There is still some ways to go until then. :wink:

10

Alright, the next time I work on the documentation I add some example.

(currently I don’t find the time to work at DF at all :frowning: )