UI alignments in LWUIT?

Question

I'm using LWUIT to create J2ME application. I used GridLayout to add the controls but they are not aligned.

Code:

flowLayout = new FlowLayout();
        roundsPage.setLayout(flowLayout);


    try {
        image = image.createImage("/11.png"); // All image 40 x 40
        starImage = Image.createImage("/j1.png");
        smileImage = Image.createImage("/j2.png");
        imgClock = Image.createImage("/clock.jpg");
        imageTeam = Image.createImage("/name.png");         

    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }           

    dateLabel=new Label("14-02-2012, Round1          ");
    dateLabel.getStyle().setBgColor(0x8b8989);
    dateLabel.getStyle().setFgColor(0xffffff);
    roundsPage.addComponent(dateLabel);

    //int screenWidth = Display.getInstance().getDisplayWidth();

    Container tabContainer1 = new Container(new BoxLayout(BoxLayout.Y_AXIS));
        tabContainer1.addComponent(new Button("Click"));
        tabContainer1.addComponent(new Button("Click"));
        tabContainer1.addComponent(new Button("Click"));
        tabContainer1.addComponent(new Button("Click"));        


    Container tabContainer2 = new Container(new BoxLayout(BoxLayout.X_AXIS));
        team1=new Label(starImage);
        team1.setText("Villarreal");
        team1.setTextPosition(Component.BOTTOM);
        //team1.setWidth(10);
        //team1.getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN ,Font.SIZE_SMALL));
        tabContainer2.addComponent(team1);  
        tabContainer2.setWidth(100);

        clockLabel=new Label(imgClock);
        clockLabel.setText("18:00");
        clockLabel.setTextPosition(Component.RIGHT);            
        tabContainer2.addComponent(clockLabel);

        teamLabel=new Label(imageTeam);
        teamLabel.setText("El Madrigal");
        teamLabel.setTextPosition(Component.RIGHT);
        tabContainer2.addComponent(teamLabel);

        team2=new Label(smileImage);
        team2.setText("Betis");
        team2.setTextPosition(Component.BOTTOM);
        team2.setFocusable(true);
        tabContainer2.addComponent(team2);

    Container tabContainer3 = new Container(new BoxLayout(BoxLayout.Y_AXIS));           
        tabContainer3.addComponent(new Button("Click"));
        tabContainer3.addComponent(new Button("Click"));
        tabContainer3.addComponent(new Button("Click"));
        tabContainer3.addComponent(new Button("Click"));        

    TabbedPane tabbbed = new TabbedPane();
    tabbbed.addTab(null, image, tabContainer1 ); 
    tabbbed.addTab(null, image, tabContainer2);
    tabbbed.addTab(null, image, tabContainer3);
    roundsPage.addComponent(tabbbed);   

Thanks in advance.

Answer 1

Don't use like this "14-02-2012, Round1 ". Get the width of the display and set the preferredW on dateLabel. For getting screen width use this,

int width = Display.getInstance().getDisplayWidth();.

Also Don't use TabbedPane. Use Tabs. Add the button in to addTab and set the width of the button. Because each tab having same width and height when you use TabbedPane. Thats an issue.