Cómo reorganizar ListField en Blackberry

Question

¿Cómo volver a organizar los elementos de un ListField ? Quiero seleccionar el elemento al hacer clic en Teléfonos táctiles Blackberry (Tormenta y soplete). Después de seleccionar Deseo (Mover y arrastrar) Desplazar elemento verticalmente en otro elemento de la lista (los elementos de la lista se desplazan verticalmente en el fondo) o la pantalla. Después de desplazarse, suelte el elemento en cualquier lugar en la pantalla (en el campo de la lista).

Answer 1

También estaba trabajando en ListField personalizado recientemente y espero que el siguiente código lo ayude.

En el siguiente ejemplo, he personalizado un VerticalFieldManager para crear un ListField para dispositivos BB táctiles y no táctiles.

La posición de los elementos ListField se puede cambiar-

- simplemente ARRASTRE un elemento y GOTA sobre otro elemento del ListField (para dispositivos compatibles con el tacto )

o

- presionando BARRA ESPACIADORA en el primer elemento y luego en el segundo elemento ( para dispositivos táctiles y no táctiles ).

Captura de pantalla de ejemplo para (tocar) Arrastrar y soltar a continuación:

Captura de pantalla de ejemplo para (BARRA ESPACIADORA no táctil) presionando a continuación:

En esta muestra he implementado el desplazamiento vertical en ListField y también he creado una barra de desplazamiento tradicional .

Aquí está el código de mi pantalla de muestra para la personalización de ListField :

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);
    }
}

Answer 2

también estoy trabajando en el campo Lista personalizada. Simplemente haga clic en listitem. después de hacer clic U puede mover (seleccionar) listItem verticalmente. si desea colocar en cualquier lugar de la pantalla, haga clic nuevamente en el panel táctil. cuando haces clic se colocará en esa posición Checkout. aquí está mi código

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();
}

}

Aquí hay otra clase de canal

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;
}

}

Verifica que funciona en táctil y no táctil.