How to Re-Arrange ListField in Blackberry

Question

How to re-arrange the items of a ListField? I want to select the item on click on Blackberry (Storm and Torch) Touch Phones. After select I want to (Move and Drag) Scroll item V

Answer 1

i am also working on Custom list field. Just Click on listitem. after click U can move (selected) listItem vertically. if u want to place any where in screen than click again on trackpad. when u click it will be place on that position Checkout. here is my code.

public class ListDemo extends MainScreen implements ListFieldCallback {
private VerticalFieldManager vfm, vfm_List;
private ListField myList;
private Vector vector;
private String[] str_arr;
int Height = Display.getHeight();
int Width = Display.getWidth();
int i ;
boolean bool = true;
int index = 0;
private boolean hasFocus = false;
private boolean b = true;
public static int curSelected ;
Channel obj; 

public ListDemo() {
    vector = new Vector();
    for (i = 0; i < 8; i++) {
        obj = new Channel();
        if (i == 0) {
            obj.setCh_icon("ajtak.jpg");
            obj.setCh_Name("NightSuite");
            obj.setCh_Move("move.png");

        } else if (i == 1) {
            obj.setCh_icon("cnbc.jpg");
            obj.setCh_Name("Shirts");
            obj.setCh_Move("move.png");

        } else if (i == 2) {
            obj.setCh_icon("zee.jpg");
            obj.setCh_Name("Jeans");
            obj.setCh_Move("move.png");

        } else if (i == 3) {
            obj.setCh_icon("astha.jpg");
            obj.setCh_Name("Bags");
            obj.setCh_Move("move.png");

        }else if (i == 4) {
            obj.setCh_icon("fox_news.jpg");
            obj.setCh_Name("Coat");
            obj.setCh_Move("move.png");

        }else if (i == 5) {
            obj.setCh_icon("news.jpg");
            obj.setCh_Name("Coat");
            obj.setCh_Move("move.png");

        } else if (i == 6) {
            obj.setCh_icon("star_news.jpg");
            obj.setCh_Name("Coat");
            obj.setCh_Move("move.png");

        } else {
            obj.setCh_icon("assiant.jpg");
            obj.setCh_Name("Shorts");
            obj.setCh_Move("move.png");
        }
        vector.addElement(obj);
    }
    init();
}

public void init() {

    vfm = new VerticalFieldManager(USE_ALL_HEIGHT | USE_ALL_WIDTH) {

        protected void sublayout(int maxWidth, int maxHeight) {
            super.sublayout(maxWidth, maxHeight);
            setExtent(Width, Height);
        }
    };

    vfm_List = new VerticalFieldManager(VERTICAL_SCROLL
            | VERTICAL_SCROLLBAR) {
        protected void sublayout(int maxHeight, int maxWidth) {
            super.sublayout(maxWidth, maxHeight);
            setExtent(Width, Height);
        }
    };
    myList = new ListField()
    {
        public  void onFocus(int direction){  
          hasFocus = true;

        }
        public void onUnfocus()   
        {
            hasFocus = false;  
            super.onUnfocus();  
            invalidate();  
        }  
         public void paint(Graphics g) {
             if (hasFocus)   
              {  
                   curSelected = getSelectedIndex(); 


              }   
              else   
              {  
                  curSelected = -1;  
              } 
             super.paint(g);

        }
    };
    myList.setCallback(this);
    myList.setRowHeight(50);
    myList.setFocusListener(new FocusChangeListener() {
        public void focusChanged(Field field, int eventType) {

            if (bool == false) {
                index = myList.getSelectedIndex();
                Channel temp = (Channel) vector
                    .elementAt(index);
                vector.removeElementAt(index);
                vector.insertElementAt(temp, curSelected);
                myList.invalidate();

            }

        }

    });
    for (int i = 0; i < vector.size(); i++) {
        myList.insert(i);

    }
    vfm_List.add(myList);
    vfm.add(vfm_List);
    add(vfm);

}
protected boolean navigationClick(int status, int time) {
    if(bool)
    {
        bool = false;
    }
    else
    {
        bool = true;
    }


return true;
} 


public void drawListRow(ListField list, Graphics g, int index, int y, int w) 
{
    String text = ((Channel) vector.elementAt(index)).getCh_Name();
    Bitmap arrow = Bitmap.getBitmapResource(((Channel) vector.elementAt(index)).getCh_icon());
    if(bool == false)
    {
        if (g.isDrawingStyleSet(Graphics.DRAWSTYLE_FOCUS))
        {
            Bitmap move = Bitmap.getBitmapResource(((Channel) vector.elementAt(index)).getCh_Move());
            g.drawBitmap(Width - 40, y + 13, 25, 25, move, 0, 0);

        }
    }
    g.setBackgroundColor(Color.LIGHTBLUE);
    g.setColor(Color.BLACK);
    g.drawBitmap(0, y + 10, 48, 35, arrow, 0, 0);
    g.drawText(text, 50, y + 18, 0, w);
    g.setColor(Color.WHITE);
    invalidate();


}

public Object get(ListField list, int index) {
    return vector.elementAt(index);
}

public int indexOfList(ListField list, String p, int s) {
    return vector.indexOf(p, s);
}

public int getPreferredWidth(ListField list) {
    return Graphics.getScreenWidth();
}

public void insert(String toInsert, int index) {
    vector.addElement(toInsert);
}

public void erase() {
    vector.removeAllElements();
}

}

Here is another Channel Class

public class Channel {

private String ch_Name;
private String ch_icon;
private String ch_move;

public String getCh_Name() {
    return ch_Name;
}
public void setCh_Name(String ch_Name) {
    this.ch_Name = ch_Name;
}
public String getCh_icon() {
    return ch_icon;
}
public void setCh_icon(String ch_icon) {
    this.ch_icon = ch_icon;
}
public String getCh_Move() {
    return ch_move;
}
public void setCh_Move(String ch_move) {
    this.ch_move = ch_move;
}

}

Checkout its working on both touch and nontouch .

Answer 2

I was also working on custom ListField recently and I hope the following code is going to help you.

In the example below, I've customized a VerticalFieldManager to create a ListField for both touch supported and non-touch BB devices.

Position of the ListField items can be changed-

-- by just DRAG an item and DROP on another item of the ListField (for touch supported devices)

or

-- by pressing SPACE-BAR on the first item and then on the second item (for both touch and non-touch devices).

Sample screenshot for (touch) Drag & Drop below:

Sample screenshot for (non-touch) SPACE-BAR pressing below:

In this sample I've implemented vertical scrolling in the ListField and have also created a traditional scrollbar.

Here is the code of my sample screen for ListField customization:

import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.TouchEvent;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.ListField;
import net.rim.device.api.ui.component.ListFieldCallback;
import net.rim.device.api.ui.component.ObjectListField;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.BackgroundFactory;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;

public class ListTestScreen extends MainScreen {
    private VerticalFieldManager mainManager = new VerticalFieldManager( USE_ALL_WIDTH |FIELD_HCENTER);
    public ListTestScreen() {
        mainManager.setBackground(BackgroundFactory.createSolidBackground(0x808080));
        LabelField lblTitle = new LabelField("FIFA World Cup Country List:",FIELD_HCENTER);
        lblTitle.setBackground(BackgroundFactory.createSolidBackground(0xF0F0F0));
        XYEdges edges = new XYEdges(2, 2, 2, 2);
        lblTitle.setBorder(BorderFactory.createRoundedBorder(edges, 0xB0B0B0, Border.STYLE_FILLED));
        mainManager.add(lblTitle);
        mainManager.add(new MyList());
        LabelField lblOther = new LabelField("Some Other Field",FIELD_HCENTER);
        lblOther.setBackground(BackgroundFactory.createSolidBackground(0xF0F0F0));
        lblOther.setBorder(BorderFactory.createRoundedBorder(edges, 0xB0B0B0, Border.STYLE_FILLED));
        mainManager.add(lblOther);
        add(mainManager);
    }
}

class MyList extends VerticalFieldManager implements ListFieldCallback {
    private int  mouseDownY, mouseUpY;
    private static int listRowHeight = 30;
    private int mouseDownRowIndex, mouseUpRowIndex;
    int firstSelectedRow=-1, secondSelectedRow=-1;
    private int touchX;
    private int touchY;
    private int listVisibleHeight = 250;
    private int listVisibleWidth = 200;

    private boolean showShadow = false;

    private ObjectListField list;
    private Object[] listData = new Object[] { "South Africa", "Argentina", "Germany",
            "Australia","Nigeria","Greece","England","Italy","Brazil","Spain","Paraguay","France","Uruguay",
            "Mexico","Cameroon","Denmark","Portugal","Netherlands","Ghana","Chile",
            "South Korea","USA","Algeria","Slovenia","Japan","Switzerland","Honduras"};

    public MyList() {
        super(VERTICAL_SCROLL|FIELD_HCENTER);
        init();
        setBackground(BackgroundFactory.createSolidBackground(0xF0F0F0));
        XYEdges edges = new XYEdges(6, 6, 6, 6);
        setBorder(BorderFactory.createRoundedBorder(edges, 0xB0B0B0, Border.STYLE_FILLED));
    }

    private void init() {
        list = new ObjectListField(FOCUSABLE|Field.FIELD_HCENTER);
        list.setRowHeight(listRowHeight);
        list.setCallback(this);
        list.set(listData);
        add(list);
    }

    private void changeRowPosition(int fromRow, int toRow) {
        Object temp = listData[fromRow];
        int increment = (fromRow<toRow)?1:-1, i;
        for(i = fromRow+increment; i != toRow+increment ; i=i+increment) {
            listData[i-increment] = listData[i];
        }
        listData[toRow] = temp;
        invalidate();
    }

    public void drawListRow(ListField listField, Graphics graphics, int index,
            int y, int width) {
        graphics.setFont(Font.getDefault().derive(Font.PLAIN, listRowHeight-8));
        graphics.drawText(listData[index].toString(), 25, y + 4);

    }

    public Object get(ListField listField, int index) {
        return listData[index];
    }

    public int getPreferredWidth(ListField listField) {
        return getPreferredWidth();
    }

    public int indexOfList(ListField listField, String prefix, int start) {
        return 0;
    }

    public int indexOfRowAt(int posY) {
        int index =(int) Math.floor(posY / listRowHeight * 1.0); 
        return index;
    }

    protected void sublayout(int maxWidth, int maxHeight) {     
        super.sublayout(listVisibleWidth, listVisibleHeight);
        setExtent(listVisibleWidth, listVisibleHeight);
    }


    protected boolean keyChar(char ch, int status, int time) {
        if(ch==Characters.SPACE) {
            if(firstSelectedRow ==-1) {
                firstSelectedRow = list.getSelectedIndex();
                return true;
            } else {
                secondSelectedRow = list.getSelectedIndex();
                if(firstSelectedRow == secondSelectedRow) {
                    firstSelectedRow = secondSelectedRow = -1;
                    invalidate();
                    return true;
                } else {
                    changeRowPosition(firstSelectedRow, secondSelectedRow);
                    firstSelectedRow = secondSelectedRow = -1;
                    return true;
                }
            }
        }
        return super.keyChar(ch, status, time);
    }

    protected boolean navigationMovement(int dx, int dy, int status, int time) {
        invalidate();
        return super.navigationMovement(dx, dy, status, time);
    }

    protected boolean touchEvent(TouchEvent message) {
        int eventCode = message.getEvent();

        // Get the screen coordinates of the touch event
        touchX = message.getX(1);
        touchY = message.getY(1)+getVerticalScroll();


        if(eventCode == TouchEvent.DOWN) {
            mouseDownY = touchY;
            mouseDownRowIndex = indexOfRowAt(mouseDownY);
            showShadow = true;

            invalidate();
            return true;
        }        
        else if(eventCode == TouchEvent.UP) {
            showShadow = false;
            mouseUpY = touchY;
            mouseUpRowIndex = indexOfRowAt(mouseUpY);
            if(mouseDownRowIndex != mouseUpRowIndex) {
                changeRowPosition(mouseDownRowIndex, mouseUpRowIndex);
                mouseDownRowIndex = mouseUpRowIndex = -1;
                invalidate();
                return true;
            }
            mouseDownRowIndex = mouseUpRowIndex = -1;
            invalidate();
            return true;
        } else if(eventCode == TouchEvent.MOVE) {
            int index = indexOfRowAt(touchY-listRowHeight/2);
            if(touchY-getVerticalScroll()<5) {
                if(index > 0) {
                    index--;
                }
            } else if(touchY> (getPreferredHeight()-5)) {
                if(index<listData.length-1) {
                    index++;
                }
            }

            if(list.getSelectedIndex()!=index)
                list.setSelectedIndex(index);
            invalidate();
            return true;
        }
        return super.touchEvent(message);
    }

    protected void paint(Graphics graphics) {
        // Save the original color and transparency values for the graphics
        int preColor = graphics.getColor();
        int preAlpha = graphics.getGlobalAlpha();

        if(firstSelectedRow!=-1) {
            int y = firstSelectedRow*listRowHeight;
            graphics.setColor(0x808080);
            graphics.fillRect(0, y, getWidth(), listRowHeight);
        }

        // Reset the previous color and transparency values for this graphics
        graphics.setColor(preColor);
        graphics.setGlobalAlpha(preAlpha) ;

        super.paint(graphics);

        if(firstSelectedRow != -1) {
            int index = list.getSelectedIndex();            
            int y = index*listRowHeight;
            String shadowText = listData[firstSelectedRow].toString();
            Font preFont = graphics.getFont();
            Font smallFont = preFont.derive(Font.BOLD, preFont.getHeight()-5);
            y += (listRowHeight-smallFont.getHeight())/2;
            graphics.setFont(smallFont);
            int shadowTextLength = smallFont.getAdvance(shadowText);
            graphics.setColor(0xE0E0E0);
            graphics.setGlobalAlpha(100) ;
            graphics.fillRoundRect(getWidth()/2-2, y, shadowTextLength+4, smallFont.getHeight(), 10, 10);
            graphics.setColor(0x303030);
            graphics.setGlobalAlpha(170) ;
            graphics.drawText(shadowText, getWidth()/2, y);
            graphics.setFont(preFont);
        }

        // Drawing the first selected SHADOW TEXT
        if(showShadow && mouseDownRowIndex != -1) {
            String shadowText = listData[mouseDownRowIndex].toString();
            Font preFont = graphics.getFont();
            Font smallFont = preFont.derive(Font.BOLD, preFont.getHeight()-5);
            graphics.setFont(smallFont);
            int shadowTextLength = smallFont.getAdvance(shadowText);
            graphics.setColor(0xE0E0E0);
            graphics.setGlobalAlpha(100) ;
            graphics.fillRoundRect(touchX+10, touchY-smallFont.getHeight()/2, shadowTextLength, smallFont.getHeight(), 10, 10);
            graphics.setColor(0x303030);
            graphics.setGlobalAlpha(170) ;
            graphics.drawText(shadowText, touchX+10, touchY-smallFont.getHeight()/2);
            graphics.setFont(preFont);
        }

        // Drawing the VERTICAL SCROLLBAR
        graphics.setColor(0x606060);
        graphics.drawLine(getWidth()-18, getVerticalScroll(), getWidth()-18,getVerticalScroll()+getHeight());
        graphics.drawLine(getWidth()-17, getVerticalScroll(), getWidth()-17,getVerticalScroll()+getHeight());
        graphics.drawLine(getWidth()-16, getVerticalScroll(), getWidth()-16,getVerticalScroll()+getHeight());
        int listTotalHeight = listRowHeight * (listData.length+5);
        int y = list.getSelectedIndex()*listRowHeight ;
        int yScrollPosition = (int)Math.floor(((y*getHeight()*1.0)/listTotalHeight*1.0));
        graphics.fillRoundRect((getWidth()-17)-4, getVerticalScroll()+yScrollPosition, 8, listRowHeight, 2, 2);
    }
}