Question

I am developing an app in which I need to display products in an expandable list. So I have tried an example which was given in stackoverflow… So, it is working good, but my problem is the divider that will not wrap (expand) based on content expanding, like in screen …

as you can see, in the screen the date2 field is not displayed properly ..
for that, is there any scrolling facility or can this expand automatically?

Here is my code

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.FontFamily;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.TouchEvent;
import net.rim.device.api.ui.Touchscreen;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.NullField;
import net.rim.device.api.ui.component.SeparatorField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

class UiMainscreen extends MainScreen implements FieldChangeListener
{
    private CustomListField cu_field[];
    private Bitmap image=null;
    int size=8;
    public UiMainscreen() {
        VerticalFieldManager vmanager=new VerticalFieldManager(VERTICAL_SCROLL|VERTICAL_SCROLLBAR){
            protected void sublayout(int maxWidth, int maxHeight) {

                super.sublayout(Display.getWidth(),Display.getHeight());
                setExtent(Display.getWidth(),Display.getHeight());
            }
        };
        cu_field=new CustomListField[size]; 
        for(int i=0;i<size;i++){
            image=Bitmap.getBitmapResource("sample_"+i+".jpg");
            cu_field[i]=new CustomListField("BlackBerry models that had a built-in mobile phone, were the first models that natively ran Java, and transmitted data over the normal 2G cellular network. RIM began to advertise these devices as email-capable mobile phones rather than as 2-way pagers.", image, "jan2011", 100, 100,Color.LIGHTGREEN);
            cu_field[i].setChangeListener(this);
            vmanager.add(new SeparatorField());
            vmanager.add(cu_field[i]);
        }
        add(vmanager);
    }

    public void fieldChanged(Field field, int context) {
        // TODO Auto-generated method stub
        for(int i=0;i<size;i++){
            if(field==cu_field[i]){
                final int k=i;
                UiApplication.getUiApplication().invokeLater(new Runnable() {
                    public void run() {
                        Dialog.alert("You click on Item No "+k);
                    }
                });
            }
        }
    }
}

class CustomListField extends HorizontalFieldManager{

    private Bitmap scale_image;
    private int width=0;
    private int height=0;
    private int background_color=0;
    private BitmapField bitmap_field;
    private boolean flag=false;
    Bitmap logingBg;
    public CustomListField(String title, Bitmap image, String date,int image_width,int image_height,int background_color){
        super(NO_HORIZONTAL_SCROLL|USE_ALL_WIDTH);
        this.background_color=background_color;
        width=image_width;
        height=image_width;
        if(image!=null){
            scale_image=new Bitmap(image_width, image_height);
            image.scaleInto(scale_image, Bitmap.FILTER_LANCZOS);
            bitmap_field=new BitmapField(scale_image);
            flag=false;
            bitmap_field.setMargin(5, 5, 5, 5);
            add(bitmap_field);
        }


        VerticalFieldManager vmanager=new VerticalFieldManager(USE_ALL_WIDTH|Field.FIELD_VCENTER){
            protected void sublayout(int maxWidth, int maxHeight) {
                super.sublayout(Display.getWidth(), height);
                setExtent(Display.getWidth(), height);
            }
        };
        ///////////////////////////////////////////
       /* Bitmap logingBg = Bitmap.getBitmapResource("myorderdatebackground.png");
        HorizontalFieldManager hfm = new HorizontalFieldManager(USE_ALL_WIDTH);
        HorizontalFieldManager hfm2 = new HorizontalFieldManager(Field.FIELD_HCENTER);
        ButtonField btnext = new ButtonField("btn");
        CustomButtonField btnSignIn = new CustomButtonField(0, "", logingBg,
                logingBg, Field.FOCUSABLE, Color.WHITE);
        hfm2.add(btnext);
        hfm.add(btnSignIn);

        hfm.add(hfm2);
        vmanager.add(hfm);*/
         logingBg = Bitmap.getBitmapResource("myorderdatebackground.png");

        HorizontalFieldManager HFM = new HorizontalFieldManager(USE_ALL_WIDTH) {
            public void paint(Graphics g) {
                //g.setBackgroundColor(Color.BLUE);
                g.clear();
                g.drawBitmap(0, 0, Display.getWidth(),            
                        logingBg.getHeight(), logingBg, 0, 0);  
                super.paint(g);
            }
        };


        HorizontalFieldManager lableRegistHFM = new HorizontalFieldManager(
                FIELD_VCENTER);
        LabelField RegistrationLbl = new LabelField("My Orders",Field.FIELD_HCENTER);
        FontFamily fontFamily[] = FontFamily.getFontFamilies();
        Font font11 = fontFamily[1].getFont(FontFamily.CBTF_FONT, 12);
        font11 = fontFamily[1].getFont(Font.BOLD, 18);
        RegistrationLbl.setFont(font11);
        RegistrationLbl.setMargin(0, 0, 0, (Display.getWidth() / 3));

        lableRegistHFM.add(RegistrationLbl);

        HFM.add(lableRegistHFM);
        vmanager.add(HFM);

        /**************************************************************/

        LabelField title_lbl=new LabelField("Title: "+title,Field.NON_FOCUSABLE|DrawStyle.ELLIPSIS);
        vmanager.add(title_lbl);

        LabelField date_lbl=new LabelField("Date: "+date,Field.NON_FOCUSABLE);
        vmanager.add(date_lbl);

        LabelField date_lbl3=new LabelField("Date2: "+date,Field.NON_FOCUSABLE);
        vmanager.add(date_lbl3);

        LabelField date_lbl4=new LabelField("Date2: "+date,Field.NON_FOCUSABLE);
        vmanager.add(date_lbl4);

        Font fon=title_lbl.getFont();
        int title_height=fon.getHeight();

        Font font=date_lbl.getFont();
        int date_height=font.getHeight();
        int pad=title_height+date_height;
        title_lbl.setPadding((height-pad)/2, 0, 0, 0);
        add(vmanager);
        add(new NullField(FOCUSABLE));
    }

    protected void sublayout(int maxWidth, int maxHeight) {
        super.sublayout(Display.getWidth(), height);
        setExtent(Display.getWidth(), height);
    }
    protected void paint(Graphics graphics) {
        if(flag)
        graphics.setBackgroundColor(background_color);
        graphics.clear();
        super.paint(graphics);
    }
    protected void onFocus(int direction) {
        super.onFocus(direction);
        flag=true;
        invalidate();
    }
    protected void onUnfocus() {
        invalidate();
        flag=false;
    }
    protected boolean navigationClick(int status, int time) {

        if(Touchscreen.isSupported()){
            return false;
        }else{
            fieldChangeNotify(1);
            return true;
        }

    }
    protected boolean touchEvent(TouchEvent message) 
    {
        if (TouchEvent.CLICK == message.getEvent()) 
        {

            FieldChangeListener listener = getChangeListener();
            if (null != listener)
                this.setFocus();
                listener.fieldChanged(this, 1);
        }
        return super.touchEvent(message);
    }
}

Answer 1

The issue is here:

protected void sublayout(int maxWidth, int maxHeight) {
    super.sublayout(Display.getWidth(), height);
    setExtent(Display.getWidth(), height);
}

You’re giving manager height less that it needs for content (only image_width).

Also here is possible error:

width=image_width;
height=image_width;

You should use image_height for the height.

And sure you could use scrolling for VerticalManager – add style VERTICAL_SCROLL to constructor. But as user I will find the User Experience (UX) strange in this case.