SwipableContainer seems not responsive in codenameone

Question

I have implemented SwipableContainer and it seems not much responsive at the moment.

When I swipe the component sometimes it stuck or swipe very left. Also sometimes it will not allow to click the Swipe right buttons. see attached snapshots for your reference.

Sometimes it froze the container sliding. As well, when it dragging right side then container button seems not clickable. Once I drag center container little left, then right side container's button getting clickable.

In short overall behavior of swipable container is not upto the mark.

Any change I need to take place in my code? Please suggest.

Form hi = new Form("Hi World");
hi.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
hi.setScrollable(false);
TableLayout tableLayout = new TableLayout(1,5);

Container tableHeaderContainer = new Container(tableLayout);
tableHeaderContainer.setScrollable(false);

for(int col=0;col<=4;col++){

    Button l1 = new Button("Header " + col+1);

    l1.setVerticalAlignment(Label.TOP);
    l1.setUIID("TableHeader");
    l1.addActionListener(new ActionListener() {

    public void actionPerformed(ActionEvent evt) {
        final InteractionDialog dlg = new InteractionDialog("Hello"); 
        dlg.setLayout(new BorderLayout()); 
        dlg.addComponent(BorderLayout.CENTER, new Label("Hello Dialog")); 
        Button close = new Button("Close"); 
        close.addActionListener(new ActionListener() { 
            public void actionPerformed(ActionEvent evt) { 
                dlg.dispose(); 
            } 
        }); 
        dlg.addComponent(BorderLayout.SOUTH, close); 
        Dimension pre = dlg.getContentPane().getPreferredSize(); 
        dlg.showPopupDialog(new Rectangle((evt.getComponent().getX()+(evt.getComponent().getWidth())), (evt.getComponent().getY()+evt.getComponent().getHeight()), 
        evt.getComponent().getWidth(), evt.getComponent().getHeight()));
    }
    });

    TableLayout.Constraint constraint = ((TableLayout)tableHeaderContainer.getLayout()).createConstraint();
    constraint = setTableConstraint(constraint, col);
    tableHeaderContainer.addComponent(constraint,l1);
    } 

    hi.addComponent(tableHeaderContainer);

    Container tableContainerMain = new Container();
    tableContainerMain.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
    tableContainerMain.setScrollableY(true);


    for(int row=0;row<=10;row++){
    Container tableContainer = new Container();
    tableContainer.setLayout(new BoxLayout(BoxLayout.X_AXIS));
    tableContainer.setScrollable(false);

    Button actionButton = new Button();
    tableLayout = new TableLayout(1,5);
    final Container rowContainer = new Container(tableLayout);

    Button editJobButton  = new Button();
    Button editJobButton1  = new Button();
    Button editJobButton2  = new Button();
    Button editJobButton3 = new Button();

    rowContainer.setFocusable(false);
    rowContainer.setLeadComponent(actionButton);

    actionButton.addActionListener(new ActionListener() {

    public void actionPerformed(ActionEvent evt) {
        Dialog.show("actionButton", "actionButton", "OK","");
    }
    });

    for(int col=0;col<=6;col++){

        if(col==5){

            editJobButton = new Button();
            editJobButton.setIcon(theme.getImage("edit.png"));
            editJobButton.setPressedIcon(theme.getImage("edit-lg.png"));
            editJobButton.setDisabledIcon(theme.getImage("edit-gr.png"));
            editJobButton.setUIID("transparent_button_action_new");
            editJobButton.setVerticalAlignment(Label.TOP);
            editJobButton.addActionListener(new ActionListener() {

            public void actionPerformed(ActionEvent evt) {

            }
            });

            editJobButton1 = new Button();
            editJobButton1.setIcon(theme.getImage("synch1.png"));
            editJobButton1.setPressedIcon(theme.getImage("synch-lg.png"));
            editJobButton1.setDisabledIcon(theme.getImage("synch-gr.png"));
            editJobButton1.setUIID("transparent_button_action_new");
            editJobButton1.setVerticalAlignment(Label.TOP);
            editJobButton1.addActionListener(new ActionListener() {

                public void actionPerformed(ActionEvent evt) {

                }
            });

            editJobButton2 = new Button();
            editJobButton2.setIcon(theme.getImage("map1.png"));
            editJobButton2.setPressedIcon(theme.getImage("map-lg.png"));
            editJobButton2.setUIID("transparent_button_action_new");
            editJobButton2.setVerticalAlignment(Label.TOP);
            editJobButton2.addActionListener(new ActionListener() {

                public void actionPerformed(ActionEvent evt) {

                }
            });

            editJobButton3 = new Button();
            editJobButton3.setIcon(theme.getImage("checkin.png"));
            editJobButton3.setPressedIcon(theme.getImage("checkin-lg.png"));
            editJobButton3.setDisabledIcon(theme.getImage("checkin-gr.png"));
            editJobButton3.setUIID("transparent_button_action_new");
            editJobButton3.setVerticalAlignment(Label.TOP);
            editJobButton3.addActionListener(new ActionListener() {

                public void actionPerformed(ActionEvent evt) {

                }
            });
            }
        else{

            SpanLabel l2 = new SpanLabel(“This is testing text, This is testing text , This is testing text This is testing text " + (col+1));
            l2.setTextUIID("login_title");
            l2.setUIID("transparent");

            TableLayout.Constraint constraint1 = ((TableLayout)rowContainer.getLayout()).createConstraint();
            constraint1 = setTableConstraint(constraint1, col);
            rowContainer.addComponent(constraint1,l2);
        }
    } 

    SwipeableContainer swipeableContainer = new SwipeableContainer(null,BoxLayout.encloseX(editJobButton,editJobButton1,editJobButton2,editJobButton3), rowContainer);

    CheckBox c = new CheckBox();
    tableContainer.addComponent(c);
    tableContainer.addComponent(swipeableContainer);
    tableContainerMain.addComponent(tableContainer);



}
hi.addComponent(tableContainerMain);
hi.show();


public static Constraint setTableConstraint(Constraint constraint,int column){

    switch(column){
    case 0:
    constraint.setWidthPercentage(20);//job#
    break;
    case 1:
    constraint.setWidthPercentage(20);//Address
    break;
    case 2:
    constraint.setWidthPercentage(20);//Schedule Date
    break;
    case 3:
    constraint.setWidthPercentage(20);//Type
    break;
    case 4:
    constraint.setWidthPercentage(20);//Status
    break;

    default:
    constraint.setWidthPercentage(20);//else
    break;
    }

return constraint;

}

Answer 1

The problem is the rowContainer that you set to not focusable while having a lead component.

When you use setFocusable(false) on a container, you are asking the container not to respond to a touch event, combining this with setting a lead component to a button that can receive touch event will cause an unusual behaviour.

Also rowContainer doesn't contain actionButton which is the lead component.

Remove rowContainer.setFocusable(false);, leave setLeadComponent, and make sure actionButton is added to the container. Then check if this fix the problem.