Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JViewport & Scroll View

1. JViewport & Document

The JViewport is like a porthole through which we can see a different position of the landscape. Using JViewport, one can change view position to see different portions of the document. It looks like document is moving, but java moves the view port to view view various document parts.

Now have a look at the below picture:

JViewPort and Scrolling
JViewPort and Scrolling

Here, Java Swing Window JFrame cannot display the full document. Because the document is bigger than the size of the Swing window. The yellow highlight is the JViewPort which we can move to see through other portions of the document.

2. About JViewport Example

In the below screenshot, you can see the example of JViewPort:

JViewPort and Button Grid
JViewPort and Button Grid

Here the document is the button grid. We almost display 5000 buttons on this grid. In the above screen, it is evident that the JFrame can show only first 130 buttons. The buttons, up and down in the bottom, perform upward and downward movement of the JViewPort there by viewing the other buttons in the Grid.

3. Setup JFrame

We create a JFrame window with a border layout. In the middle of the border layout, we will add our button grid and in the border layout buttom side, we will add the panel with Up, Down buttons. Our JFrame class has a JViewPort instance declared.

4. Panel of Buttons

Next, we create the button grid for the example. First, we create a panel and then add all the buttons into it. At line 3, one can notice that the height is 7000 pixels! This means it is not possible to view the entire height of the panel in the JFrame. A FlowLayout manager takes care control arrangement in the Panel. The for loop runs for 5000 times and creates these buttons, adds it to the Panel. Note, we are not adding this button grid panel to the JFrame right now.

5. Panel for Moving JViewport

Next, we create a JPanel and then two JButtons named Up and Down. The panel will house these buttons and gets added to the JFrame window. Note, the up and down button will move the JViewPort up and down there by changing the vision to view various portions of the document.

6. Assign JViewport to Button Grid Panel

The setView function of the JViewPort accepts a component that needs to be viewed via the post-hole. In our case, we set the button grid panel to the JViewPort. Then we add this viewport to the centre part of the border layout of the JFrame.

7. JViewPort & View Position

Refer to the very first picture in this example. The Top-Left corner of the yellow window is the origin of the Viewport. The method getViewPosition will return the Point object, which denotes origin of the view port. In the below code, we are handling the button click for the down button. Here, we increment the y co-ordinate value so that the view port moves downward. When it moves downward, we will see a different portion of the button grid. Of course, we need to set this new point to the viewport using the setViewPosition method call.

One can implement the button up in the same way. Instead of the incrementing the y co-ordinate value, we must reduce it. Rest of the implementation goes same as in the past button handler.

8. Watch JViewPort as Youtube Demo

Part 1:

Part 2:

9. Code Reference



Categories: Swing

Tags: , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.