What's the correct way of using JScrollPane?

100 Views Asked by At

I have a JFrame in which I should display a list of 30 reviews. Each review is a custom panel named ReviewPanel, and I am using an absolute layout. Using this code, I would expect to be able to scroll the p panel in order to view all of the reviews:

    public TestFrame() {
    
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setBounds(100, 100, 934, 1103);
        contentPane = new JPanel();
        contentPane.setLayout(null);
        setContentPane(contentPane);
    
        JScrollPane scrollPane = new JScrollPane();
        scrollPane.setBounds(0, 0, 916, 1056);
        contentPane.add(scrollPane);
    
        JPanel p = new JPanel();
        scrollPane.setViewportView(p);
        p.setLayout(null);
    
        for (int i = 0; i <= 30; i++) {
            ReviewPanel review_panel = new ReviewPanel();
            review_panel.setLocation(0, i * review_panel.getHeight());
            p.add(review_panel);
        }
    
    } 

The output, instead, is the following. I can see the first 3 reviews because of the size of the panel, but cannot scroll down to see the rest.

enter image description here

What can I do to fix this? I have also tried many alternatives but with no success.

1

There are 1 best solutions below

4
gthanop On

Supposing you made the ReviewPanel yourself, seems like you already know how to use LayoutManagers (such as BorderLayout, GridLayout, etc...). So, in order to go along with the suggestions of more experienced members in the comments of your question, I am not going to give all the code for this, but just detailed directions on how you could, in my opinion, improve the user experience.

Here is the mockup I would implement if I were you:

Suggested mockup

That is:

  1. A scrollable JTable on the left part of the container panel. It contains the reviews' author label, title label, like and dislike buttons, date label, etc...
  2. Two JTextAreas in the right part of the container panel. One for the review's text and another for the review's feedback.

This way, the user would select a line from the JTable which would correspond to the review he/she wants to read (determined by author, title, date, whether he/she liked it or not, etc...). By selecting a line from the JTable then the upper JTextArea would be filled with the selected review's text and the lower one with the review's feedback. Either JTextArea may be editable or not, whether it is supposed to be or not. Also, sorting the reviews in the table by a specific column becomes more natural now (ie it is more obvious to the user that he may sort by author name for example, and is also easier to implement because of the RowSorter facility supported by JTable and other related methods such as JTable's setAutoCreateRowSorter etc...).

I would also suggest:

  1. The JTextAreas inside a JScrollPane each, in the case you don't know beforehand the maximum size the reviews' text and feedback can occupy.
  2. A JSplitPane divider splitting the JScrollPane of each JTextArea, mainly because of letting the user adjust them to their needs and also because it seems like the review's feedback part size is not equal to the review's text part size.
  3. The like and dislike function could be composed by 3 JRadioButtons in the same ButtonGroup. One button for like, one for dislike and one for unspecified (which would be the default value and the middle button). I guess we need an unspecified button to exist, in order to let the user undo their selection (if for example they select the like button, then it should be possible to return to the initial state of unspecified).

In case the feedback is the preference (like, dislike, etc...), so that there is only one JTextArea, then the mockup still stands, but this time with the two JTextAreas combined to one.

In case you wan't to learn more there are Oracle's corresponding tutorials (besides documentation):

  1. Lesson: Laying Out Components Within a Container (take a look at the table of contents of this page for more focused tutorials about each LayoutManager).
  2. How to Use Tables.
  3. How to Use Split Panes.