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:
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:
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.
|
1 2 3 4 5 6 7 8 9 10 |
public class JFrameDemo extends JFrame { //Sample 02: Member Variable(s) JViewport jvp; public JFrameDemo(String title) throws HeadlessException { super(title); // Sample 01: Set Size and Position setBounds(100, 100, 550, 500); Container ControlHost = getContentPane(); ControlHost.setLayout(new BorderLayout()); |
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.
|
1 2 3 4 5 6 7 8 9 |
//Sample 03: Create a Button Grid JPanel ButtonGrid = new JPanel(); ButtonGrid.setPreferredSize(new Dimension(500, 7000)); ButtonGrid.setLayout(new FlowLayout()); for (int i = 1; i < 5000; i++ ) { JButton btn = new JButton(i + ""); ButtonGrid.add(btn); } |
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.
|
1 2 3 4 5 6 7 |
//Sample 04: Create Button Controller JPanel CommandPanel = new JPanel(); JButton BtnUp = new JButton("Up"); JButton BtnDown = new JButton("Down"); CommandPanel.add(BtnUp); CommandPanel.add(BtnDown); ControlHost.add(CommandPanel, BorderLayout.SOUTH); |
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.
|
1 2 3 4 |
//Sample 05: Create View Port for the Button Grid jvp = new JViewport(); jvp.setView(ButtonGrid); ControlHost.add(jvp, BorderLayout.CENTER); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Sample 06: Handle Button UP BtnDown.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { //6.1 Get Current View Origin Point ViewOrigin = jvp.getViewPosition(); //6.2 New Origin if (ViewOrigin.y < 7000) ViewOrigin.y = ViewOrigin.y + 500; //6.3 Pan the View jvp.setViewPosition(ViewOrigin); } }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Sample 07: Handle Button Down BtnUp.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { //7.1 Get Current View Origin Point ViewOrigin = jvp.getViewPosition(); //7.2 New Origin if (ViewOrigin.y > 0) ViewOrigin.y = ViewOrigin.y - 500; //7.3 Pan the View jvp.setViewPosition(ViewOrigin); } }); |
8. Watch JViewPort as Youtube Demo
Part 1:
Part 2:
9. Code Reference
9.1 MainEntry.java
|
1 2 3 4 5 6 7 8 9 |
package tube.coding.examples; public class MainEntry { public static void main(String[] args) { //Sample 07: Create Instance of JFrameDemo JViewPortExample frame = new JViewPortExample("JViewport - Scroll Content Example"); frame.setVisible(true); } } |
9.2 JViewPortExample.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
package tube.coding.examples; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.GridLayout; import java.awt.HeadlessException; import java.awt.Point; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.JTextPane; import javax.swing.JViewport; import javax.swing.text.BadLocationException; import javax.swing.text.Document; import javax.swing.text.SimpleAttributeSet; import javax.swing.text.StyleConstants; public class JFrameDemo extends JFrame { //Sample 02: Member Variable(s) JViewport jvp; public JFrameDemo(String title) throws HeadlessException { super(title); // Sample 01: Set Size and Position setBounds(100, 100, 550, 500); Container ControlHost = getContentPane(); ControlHost.setLayout(new BorderLayout()); //Sample 03: Create a Button Grid JPanel ButtonGrid = new JPanel(); ButtonGrid.setPreferredSize(new Dimension(500, 7000)); ButtonGrid.setLayout(new FlowLayout()); for (int i = 1; i < 5000; i++ ) { JButton btn = new JButton(i + ""); ButtonGrid.add(btn); } //ControlHost.add(ButtonGrid, BorderLayout.CENTER); //Sample 04: Create Button Controller //Run 1: Remove Previous Line ControlHost.add(ButtonGrid, BorderLayout.CENTER); JPanel CommandPanel = new JPanel(); JButton BtnUp = new JButton("Up"); JButton BtnDown = new JButton("Down"); CommandPanel.add(BtnUp); CommandPanel.add(BtnDown); ControlHost.add(CommandPanel, BorderLayout.SOUTH); //Sample 05: Create View Port for the Button Grid jvp = new JViewport(); jvp.setView(ButtonGrid); ControlHost.add(jvp, BorderLayout.CENTER); //Sample 06: Handle Button UP BtnDown.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { //6.1 Get Current View Origin Point ViewOrigin = jvp.getViewPosition(); //6.2 New Origin if (ViewOrigin.y < 7000) ViewOrigin.y = ViewOrigin.y + 500; //6.3 Pan the View jvp.setViewPosition(ViewOrigin); } }); //Sample 07: Handle Button Down BtnUp.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { //7.1 Get Current View Origin Point ViewOrigin = jvp.getViewPosition(); //7.2 New Origin if (ViewOrigin.y > 0) ViewOrigin.y = ViewOrigin.y - 500; //7.3 Pan the View jvp.setViewPosition(ViewOrigin); } }); } } |
Categories: Swing
Tags: getViewPosition, JViewport, setView, setViewPosition
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.