Swipe horizontal Listview

[Hùng Phạm]

I want to make a horizontal listview looks like the list in Tipster sample. It only shows 3 items at the time and swipe left/ right to show the others.

But i dont use GUI Buidler, so i wonder is there anyway to make a list from code (just like JList in Swing).

How can i design for my items. i saw that the author of Tipster sample designed the list with renderer in .res file.

Could you give me a suggestion ?

[Shai Almog]

Sure, everything done in the GUI builder can be done in code.
Use the List class which is very similar to JList, it has a horizontal mode and a cyclic mode.

[Hùng Phạm]

 Dear Shai.

I can get a simple horizontal list now. My purpose is design the MainView like the below picture.

But i can't make the chart fit to the SOUTH. It shows with full screen. I am thinking to use GridbagLayout - is that the good way?

Could you give me some suggestion?

Code MainView.java

public class MainView extends Container {

    private HomeInfoReponse homeInfo;

    private Resources resource;

    private Container north, center, south;

    private ChartView chartView;

    private List lst = new List();

    public MainView(HomeInfoReponse h) {

        super(new BorderLayout());

        this.homeInfo = h;

    }

    @Override

    protected void initComponent() {

        this.removeAll();

        north = new Container(new FlowLayout());

        center = new Container(new BorderLayout());

        south = new Container(new BorderLayout());

        // init a Chart

        ChartBuilder b = new ChartBuilder();

        final Chart chart = b.newBarChart(

                new double[][]{

                    {4, 19, 21, 15},

                    {3, 18, 26, 47},

                    {37, 24, 11, 16},

                    {21, 32, 24, 41}

                },

                new String[]{"BC", "Alberta", "Ontario", "Saskatchewan"},

                new String[]{"June", "July", "August", "Sept"}

        );

        chartView = new ChartView(chart);

        chartView.setScrollable(false);

        chartView.initLater();

        //        chartView.update();

        this.removeComponent(chartView);

        this.removeComponent(lst);

        south.addComponent(BorderLayout.CENTER, chartView);

        south.setSize(new Dimension(500, 500));

        // init a horizontal list

        String items[] = {"Jan", "Feb", "Mar", "Apr", "May"};

        lst.setModel(new DefaultListModel(items));

        lst.setOrientation(List.HORIZONTAL);

        lst.setFixedSelection(List.FIXED_NONE_CYCLIC);

        center.addComponent(BorderLayout.CENTER, lst);

     

        this.addComponent(BorderLayout.SOUTH, south);

        this.addComponent(BorderLayout.CENTER, center);

        this.addComponent(BorderLayout.NORTH, north);

    }

}

[Shai Almog]

Hi,
the chart provides a preferred size that is too big thus growing too much. You can do one of the following:

1. Derive the chart and override calcPreferredSize() to return a reasonable number.
2. Use setPreferredSize which is deprecated since this will not take device orientation into consideration unlike overriding calcPreferredSize.
3. Use table layout or some other layout. In table layout you can constrain the height of the row to a percentage of available space.

[Hùng Phạm]

Hj Shai.

I just follow to your suggestion. it's work.

But the content of chart looks very silly with scroll. How can i make it scale to it's area ?

Thanks.

[Shai Almog]

Hi,
that depends on whether its a scroll from the chart or from us.
Did you invoke setScrollable(false) on the form?

[Hùng Phạm]

Hj 

I checked both of chartView and the Container contains the chartView.

I set chartView.setScrollable(false) and the container (south in this case) also scrollable false.

But it still happen this issue for the first time. If i press to show sidemenuBar then go back. It works fine.

Could you give a suggestion?

[Shai Almog]

Hi,
I didn't see the scroll in your initial post (google hid it in the "more" section).
Its a scroll from the HTML internal logic, this is something that needs to be fixed/worked around in the library.

[Hùng Phạm]

Hj Shai.

I add a picture to describe more details about my situation.

In my code, i just set: 

                         south.setScrollable(false); and chartView.setScrollable(false);

If i click twice in Humburger menu to reload form, it works fine.

Does this chartView base on WebView? Could you give me suggestion to solve this problem.

Thanks

[Shai Almog]

Read my answer, its a problem with the chart library. We can't fix that since the scroll isn't from us.