Question

I have a List , and in its ListCellRenderer class I put Labels to display "Labels" and data values.

The problem is that when there are more than one elements in the List then the Labels are not aligned , they do not have the same width. Although I used the following code but it does not do anything :

public CListCell(boolean displayPhoto, String[] libelles)
    {
        showPhoto = displayPhoto;
        if (displayPhoto)
        {
            setLayout(new BorderLayout());
            addComponent(BorderLayout.WEST, pic);
        }
        else
            setLayout(new GridLayout(1,1));

        labels = new Label[libelles.length];
        lData = new Label[libelles.length+1];

        for (int i=0;i<libelles.length+1;i++)
        {
            lData[i] = new Label("");
            lData[i].setAlignment(Label.LEFT);
            lData[i].getStyle().setMargin(Component.TOP, 1);
            lData[i].getStyle().setMargin(Component.BOTTOM, 1);
            lData[i].getStyle().setPadding(0, 0, 0, 0);
            if (i == libelles.length)
                break;
            labels[i] = new Label(libelles[i]);
            labels[i].setAlignment(Label.LEFT);
            labels[i].getStyle().setMargin(Component.TOP, 1);
            labels[i].getStyle().setMargin(Component.BOTTOM, 1);
            labels[i].getStyle().setPadding(0, 0, 0, 0);
        }
        
        cRow21.addComponent(labels[0]);
        cRow21.addComponent(lData[1]);
        cRow22.addComponent(labels[1]);
        cRow22.addComponent(lData[2]);
        cRow2.addComponent(BorderLayout.WEST, cRow21);
        cRow2.addComponent(BorderLayout.EAST, cRow22);
        cRow1AndRow2.addComponent(lData[0]);
        cRow1AndRow2.addComponent(cRow2);

        if (displayPhoto)
            addComponent(BorderLayout.CENTER, cRow1AndRow2);
        else
            addComponent(cRow1AndRow2);

        focus.setUIID("bandeau_selection_list");

        this.getStyle().setBgPainter(new LigneHorizontalPainter(this, 0));
    }

public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
    {
        Content entry = null;
        Image thumb;
        int[] tLibImpayesLength = new int[list.size()];
        int maxDataLength;
        if (value instanceof Content)
            entry = (Content)value;
        if (entry != null)
        {
            if (showPhoto)
            {
                thumb = createThumbnail(entry.getPhoto(), entry.getColumn(4));
                pic.setIcon(thumb);
            }
            lData[0].setText(Formatage.nvl(entry.getColumn(1),"-"));
            lData[1].setText(Formatage.nvl(entry.getColumn(2),"-"));
            lData[2].setText(Formatage.nvl(entry.getColumn(3),"-")); // lData[2] is the Label which displays value at the right side of the Container , the others are at the above,left and do not cause any problem

            tLibImpayesLength[index] = lData[2].getText().length();
        }
        maxDataLength = Formatage.max(tLibImpayesLength);
        if (lData[2].getText().length() < maxDataLength)
        {
            lData[2].setPreferredW(maxDataLength);
        }
        list.repaint();
        return this;
    }

Here is the captured image in runtime :

When we look at the image then we see that the Impayé (Ar) Labels and the remaining value at their right are not aligned. So how to make them vertically aligned , or have the same width ?

Answer 1

You didn’t include the way you laid out the components in the code you posted, you also invoked setPreferredW() which effectively sabotages layout so that’s obviously a mistake.

Generally to implement something like that place both of the left labels in a box layout Y and place it within the CENTER of a border layout. Place the right hand label in the EAST side of that border layout.