How to Swap Rows in FlexTable (GWT)?

Question

I have a FlexTable with many rows

ID - Word - Down - Up
1 - car - Down -
2 - cat - Down - Up
...more rows

FlexTable tb=new FlexTable();
tb.setText(0,0,"ID");
tb.setText(0,1,"Word");
tb.setText(0,2,"Down");
tb.setText(0,3,"Up");
tb.setText(1,0,"1");
tb.setText(1,1,"car");
tb.setText(2,0,"2");
tb.setText(2,1,"cat");
tb.setWidget(1,2,downButton);
tb.setWidget(2,3,upButton);
......

Now I have a button MoveUp & a button MoveDown. I want when user clicks Up (at row ID=2), the FlexTable will become

ID - Word - Down - Up
2 - cat - Down - Up
1 - car - Down
... more rows ...

& then when user click Down (at row ID=2), the FlexTable will become

ID - Word - Down - Up
1 - car - Down -
2 - cat - Down - Up
...more rows

Answer 1

For this type of implementations its better if you can use a Grid instead of FlexTable. But since you want to do it using flex table

This is how i would do it (This is going to be a very loooong answer :-) ). First you need to create a object which holds the row values. Then it would be easy to handle the operation. So first create a object with all the attributes that you need to put for a row.

public class RowWidget
{

    private String name;
    private String id;

    public RowWidget( String name, String id )
    {
        this.name = name;
        this.id = id;
    }

    public String getName()
    {
        return name;
    }

    public void setName( String name )
    {
        this.name = name;
    }

    public String getId()
    {
        return id;
    }

    public void setId( String id )
    {
        this.id = id;
    }
}

Then you can create the data list which you want to add in to the table

List<RowWidget> widgets = new ArrayList<RowWidget>();
        RowWidget r1 = new RowWidget( "car", "1" );
        widgets.add( r1 );
        RowWidget r2 = new RowWidget( "cat", "2" );
        widgets.add( r2 );
        RowWidget r3 = new RowWidget( "dog", "3" );
        widgets.add( r3 );
        RowWidget r4 = new RowWidget( "mouse", "4" );
        widgets.add( r4 );

Then write a method to draw the content in the flex table..

private FlexTable drawTable( final List<RowWidget> widgets )
    {
        FlexTable tb = new FlexTable();
        tb.setText( 0, 0, "ID" );
        tb.setText( 0, 1, "Word" );
        tb.setText( 0, 2, "Down" );
        tb.setText( 0, 3, "Up" );

        for ( int i = 1; i <= widgets.size(); i++ )
        {
            int j = i-1;
            final RowWidget row = widgets.get( j );
            tb.setText( i, 0, row.getId() );
            tb.setText( i, 1, row.getName() );
            if ( i != 1 )
            {
                Anchor upLink = new Anchor( "UP" );
                upLink.addClickHandler( new ClickHandler()
                {

                    @Override
                    public void onClick( ClickEvent event )
                    {
                        changePosition( false, row, widgets );

                    }

                } );
                tb.setWidget( i, 2, upLink );
            }

            Anchor down = new Anchor( "Down" );
            down.addClickHandler( new ClickHandler()
            {

                @Override
                public void onClick( ClickEvent event )
                {
                    changePosition( true, row, widgets );

                }
            } );
            tb.setWidget( i, 3, down );
        }


        return tb;
    }

For this example im rendering this FlexTable into a FlowPanel.

FlowPanel container = new FlowPanel();
container.add( drawTable( widgets ) );

This method do the position change of the row elements.

private void changePosition( boolean isDown, RowWidget row, List<RowWidget> widgets )
    {
        int index = widgets.indexOf( row );
        widgets.remove( index );

        if ( isDown )
        {
            widgets.add( index + 1, row );
        }
        else
        {
            widgets.add( index - 1, row );
        }
        container.clear();
        container.add( drawTable( widgets ) );
    }