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.

score 0 · Answer 1 · answered Jan 19 '12 at 12:12

0

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.

answered Jan 19 '12 at 12:12

bharath

14,283
16
57
95

I didn't put down vote? How to apply the width to label and images. I used int width = Display.getInstance().getDisplayWidth(); dateLabel.setWidth(width); – selladurai Jan 19 '12 at 13:00
Use setPreferredW(...) for `Label`. Set the image into `Button` and set the preferredW as you want. – bharath Jan 19 '12 at 13:12

UI alignments in LWUIT?

1 Answers1