Viewing a Calendar with JScrollPane (Part 2)

In my blog yesterday, we created a basic JFrame application. In this frame we added a JScrollPane and a JPanel for our calendar data. Today, the Calendar client will start to look like a traditional calendar client. We will cover first JScrollPane Headers, working with date stamps, and also drawing text on a Swing component.

JScrollPane Headers

One of the issues with the JScrollPane's ViewPort is that you can quickly get lost. One way to keep your orientation on a sheet is to place a header for the column (top) and the row (left) that is always visible. The developers of the JScrollPane realized that this was an issue, so they added two headers into this class: the Column Header and the Row Header.

Jscrollpane-Headers

The above diagram (click to enlarge) shows the headers being added to the JScrollPane. I thought it would be good to have the header on top show the current date for this view. On the left side, I will put a list of hours from Midnight (0:00) to Midnight (0:00). As I scroll down, the hour will move, but the Date will remain on the top of the View Port. As I scroll left or right, both the Hour Header and the Date Header will remain in place.

You create these headers by first creating a JPanel for each, then calling either setColumnHeaderView(Component view) or setRowHeaderView(Component view). If you read the JavaDoc API for JScrollPane, you will notice that there is a setColumnHeader(JViewPort view) and setRowHeader(JViewPort view), but I chose to avoid these for now.

The following code will create a new Java file called DateHeader.java. We will be using this JPanel to create a Date label.

/\* DateHeader.java \*/
import java.awt.\*;
import java.util.Date;

public class DateHeader extends javax.swing.JPanel {
    Date date;
    
    /\*\* Creates new form DateHeader \*/
    public DateHeader() {
      /\* Calls DateHeader(Date date) constructor \*/
        this(new Date());
    }

    public DateHeader(Date date){
        setDate(date);
    }              

    public void setDate(Date date) {
        this.date = date;
        repaint();         /\* we will talk about this later \*/
    }

    public Date getDate() {
        return this.date;
    }
    
}
/\* DateHeader.java \*/

We will now add this Column Header Panel into our Calendar Client.

/\* Replace the method customComponents() in SampleFrame.java \*/

    public void customCompoents() {
        this.setSize(450, 300);
        myDataPane = new JPanel();
        myDataPane.setSize(1200, 1200);
        scrollPane = new JScrollPane(myDataPane);
        scrollPane.setSize(300, 150);
        DateHeader dHeader = new DateHeader(new Date());    /\* Newly added Column Header Instance \*/
        scrollPane.setColumnHeaderView(dHeader);            /\* Adds Column Header to JScrollPane  \*/
        myDataPane.setBackground(new Color(255, 255, 204)); /\* Set the Data Pane to a nice yellow \*/
        this.add( scrollPane);
    } 
 
/\* end changes for SampleFrame.java \*/

Now add two lines in your existing SampleFrame.java which we worked on yesterday. In the above, we added an instance of the DateHeader class from DateHeader.java. We initialize the new instance with a new Date object. This will set the label to today's date. We then call setColumnHeaderView(Component view) to attach the JPanel to the JScrollPane. The final thing we add is to change the Data Pane to a nice yellow color.

That's it. The top header is now in the JScrollPane's View Port.

The next section, we will put more data on the Column Header and add a Row Header.

Writing Text on the DateHeader

In the previous section, we defined a new subclass called DateHeader. In this section, I'll add a date stamp to this header, and I'll add two buttons to allow us to navigate forward and back.


We added a new constructor in DateHeader to set the Date object. This object holds the current information for the Date. In itself, we cannot just print the Date object to a string. Instead, we need to use a new object SimpleDateFormat to format the date into a useful date format. This label will be added by overriding the paintComponent(Graphics g) method of the JPanel. You can modify the initialization of SimpleDateFormat to display the date in a manner you desire. For example, you may want to display the date like "dd-MMM-yyyy".

/\* Add paintComponent() to DateHeader.java \*/ 

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        SimpleDateFormat dateStamp = new SimpleDateFormat("MMMM dd, yyyy"); 
        int x = getWidth() / 2 - 150;  // Center the Text by Width
        int y = getHeight() / 2;       // Center the Text by Height
        g.drawString(dateStamp.format(getDate()), x, y);
    }

/\* DateHeader.java \*/

At this point, you should see a header with a date. 

Tomorrow  lets add a Row header.

Technorati Tags:

Comments:

Post a Comment:
Comments are closed for this entry.
About

I'll be writing about topics that would interest users and developers of Sun Java Communication Suite.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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
   
       
Today