Learning Curve Series Journal 3
February 19th, 2006 by WalterCustomizing the Sample JavaServer Faces Calendar Component
Before I start this week’s journal, I just want to say that I love learning Java technology! The more I learn, the more I realize that it’s going to be a great solution for where I need to go in the future. Last week I got a basic understanding of the technology and so this week I wanted to dive into creating a real-world application.
Contents
- Introduction
- Using and Configuring the Calendar Component in Java Studio Creator
- Behind the Scenes
- References
Introduction
This journal entry demonstrates how to use the calendar component in the Sun Java Studio Creator IDE.
The Project
I briefly introduced components in a past Learning Curve journal. They perform like the building blocks of Java Studio Creator applications. The IDE includes a standard set of components, but other JavaServer Faces components can be added as they are created… and if you’re advanced enough, you can build custom components yourself to work with the IDE. There are already some third-parties working on building components, and so I thought this would be a good time to explore adding and configuring a component in a user interface. I also ended up exploring Cascading Style Sheets (CSS) because I used one to configure the calendar component.
Visual Design Environment: Fear of Flying
First, though, I want to admit my fear in going forward with a visual development environment. It was a bit daunting to think of moving from my type-code-as-you-go environment to a visual one like the Java Studio Creator IDE. As I mentioned in the previous journal, I’ve avoided visual environments like Macromedia Dreamweaver for fear of losing control of my code.
But I also have to say that my coding practices have become a little sloppy. It’s just far too easy to get away with bad habits. For example, most web browsers let you get away with a missing <td> in a table. And given the cut-and-paste approach of hand coding, that can quickly turn into an error of 20-iterations! Web technology is becoming increasingly complex, but the fact that Internet Explorer will render this error-prone page is not adequate reason to accept it because other applications may not render it in search engines, for example, that index pages using a far simpler Lynx browser, may crash on those errors. The same is true as web technology advances. Because of its increasing complexity, valid code syntax becomes more critical to application stability. I have to be increasingly mindful of carelessness in this hand-coding approach.
And this is what impresses me about Java Studio Creator: my code comes out rock-solid. After I’ve finished an application I feel really good about the code and its structure because it conforms to the J2EE platform standard, and the Java platform won’t let me get away with poor syntax or sloppiness. Another reason that this is so important is that if the code I write today crashes tomorrow, I’ll be spending a lot of my future maintaining code. And that is a poor formula for success, because it is basically unproductive, non-billable time. I like to know that the concrete I pour as my foundation is clear of defects, especially as my home takes form above. I don’t want to find problems in its structure six months down the road!
Now, on to using the sample calendar component.
Using and Configuring the Calendar Component in Java Studio Creator
This section describes how to access and configure the Calendar component.
Component Download and Documentation
A couple of sample component libraries are available to experiment with on the xxxx page. You can take a look at them to see how they work before you download.
In addition to the Sample Components library, the page includes documentation and project files. There’s also a tutorial (available to subscribers) on using components.
Installing the Calendar Component
Figure 1: Sample Calendar Component. |
Installing the component was easy. First, I downloaded the component library and saved it on my computer as widgets.complib. Then I opened Java Studio Creator and located the “Added Components” area in the Palette. Right-clicking the Added Components area of the palette opened a dialog box that let me locate and install the component library that I just saved on my computer.
Creator provided some feedback as it decompressed the file and installed the components and a few moments later the components appeared in the palette under the heading “Creator Widget Components”.
Figure 2: The new components are available in the palette. |
Working with the Calendar Component
Adding the calendar to the web page was simply a matter of dragging the “Calendar Month” component onto the design canvas for my project.
To get the calendar working just took a couple of minutes. I won’t repeat the process here, as it is very well documented in its SDN docs that I reference above, but here’s how simple it is:
- Download and install the component.
- Drag the calendar component onto the design canvas.
- Drag text components onto the design canvas so that date selections display at runtime.
- Double-click the calendar component in the design canvas and add a few lines of Java source code to the Page Bean that pops open.
- Add include statements to the Page Bean.
- Build and run the application.
Note that a couple of include statements need to be added to the Page Bean up at the top of the page with the other include statements, (I added them at the same time I was adding the four lines of Java source code.)
Code Sample 1
import java.text.*; import java.util.Calendar;
This allows Java Studio Creator to locate the Calendar, DateFormat and SimpleDateFormat classes. Documentation for DateFormat and SimpleDateFormat is available on java.sun.com.
Behind the Scenes
Now that I had it working, I thought I would take a look at what was going on behind the scenes. (And here’s where I learn a lot about programming for the Java platform). First, I found that once I placed a component onto my design canvas, I could modify it in any of three areas:
- by accessing it through the Properties window
- by clicking on the Source tab below the design canvas and working directly with the JavaServer Page (
Page1.jsp) - by clicking on the Page1.java tab above the design canvas and working with the PageBean
From this point forward I’ll be working with the Properties window whenever possible as this is the easiest and quickest route to creating my applications, and it’s one of the key powers of Java Studio Creator. But I suspect that as I become more proficient in the Java language I may also want to work directly with the JSP pages and PageBeans. So I thought it would good to get a quick overview of how they all relate to each other.
A couple of weeks ago I found that when I click on the Source tab (located below the editor pane) to look at page1.jsp, I could view the JavaServer Page that works with the PageBean (page1.java). Today I looked and, sure enough, a block of code had been added when I dragged the calendar component onto the design canvas. This JavaServer Faces tag sits after the <body> statement. It looks like this:
Code Sample 2
<a:calendar binding="#{Page1.calendar1}" dayHeaderStyleClass=""
height="192" id="calendar1" monthHeaderStyleClass="" width="286"
style="left: 24px; top: 120px; position: absolute" styleClass=""
valueChangeListener="#{Page1.calendar1_processValueChange}"/>
As I worked with the calendar component, I set many of the elements in the tag, like style, id and styleclass directly from the Properties window. Java Studio Creator kept these element values current as I added or changed properties on the design canvas. But I could have also changed them directly in the Java code.
The tag included a “binding” element, and this is what attached it to the PageBean. In this case it was: binding="#{Page1.calendar1}". This told me that I could look in the Page1.java PageBean for the calendar1 class. In addition, the tag had an event handler: this called a method in the class: valueChangeListener="#{Page1.calendar1_processValueChange}".
This is how event handling works in JavaServer Faces; that is, how responses are handled from clicking on buttons and other components. The valueChangeListener method causes an event to be generated when the page is submitted and a change has occurred. In my case, it executed the processValueChange method in the Page1.java PageBean. This told me that I could look in the Page1.java PageBean for the calendar1 <instance of the Calendar> class.
Part of the process of getting the calendar to function was that I had to type in four lines of code into the PageBean (as discussed in the SDN article). Java Studio Creator made that easy to do, because I just needed to double-click on my calendar component (on the design canvas), and Java Studio Creator put me right into the PageBean at the point where I needed to enter this “Event Listener” code.
Adding Some Style
With the calendar working and a bit of an understanding of what was going on, I thought a good next step would be to add some style to the calendar with Cascading Style Sheets (CSS). Again, I found a great article on the SDN, titled Using CSS Style Editor in Sun Java Studio Creator.
I think most developers are sold on style sheets by now — I certainly am. It makes a lot of sense to push as much of the formatting as possible (if not all) into the style sheet so that it can be easily maintained and because it allows for consistent tagging and formatting of text throughout an application. For example, on a travel site I just produced, I needed to create a winter and summer season variation with different color schemes; easily accomplished by creating two style sheets and changing them out twice a year. Although Java Studio Creator would have let me create a new style sheet, or load an existing one, I chose to use the default style sheet that automatically loaded with my new application.
Accessing the style sheet was quite easy. I found it in the “Resources” folder in the Project Navigator. I double-clicked on stylesheet.css and it opened in the design canvas in a tabbed page next to the PageBean and JSP. This allowed me to easily navigate between the style sheet and the visual designer any time I wanted.
Figure 3: The CSS Style Sheet.
The calendar component has several style properties that can be manipulated. These are described in the documentation that comes with the calendar component, and includes dayHeaderStyleClass, a method that let me format the textual day header (where the days of the week are displayed). The styles can also be viewed by clicking on the calendar in the design canvas, and then opening the Properties window. Each style property that can be manipulated is listed there, ready to be assigned to whichever class I created in the style sheet.
For example, I created a new style for the header of the calendar, then switched over to my style sheet and added the following class:
Code Sample 3
.calendar-header {
color: #ffffff;
font-size: 10pt;
font-family: Arial,Helvetica,sans-serif;
font-weight: bolder;
background-color: #80a0c0;
}
Then I saved the style sheet, went back to the design canvas and clicked on the calendar to open the Properties window. When I clicked on the browse button (…) next to the dayHeaderStyleClass property, the window shown below in Figure 4 opened, allowing me to easily make the style assignment.
Figure 4: Assigning a CSS Style to the Calendar Header. |
That’s all it took to modify the header style property. Later I’ll modify other style properties until the calendar looks the way I want it to look. The documentation on the calendar component provides step-by-step instructions on assigning a new look to the calendar component.
Note: It is important to save the style sheet (click on the Save button in the toolbar or choose File > Save from the main menu while viewing the style sheet) after adding or modifying styles, so when you switch back to the designer you will see your changes.
Next Time: Hooking to a Database
The next installment of my Learning Curve Journal will discuss database connectivity.
References
- Sample Components: the component library includes project files, live demonstrations, complete source code, and documentation.
- Tutorial: About Components
- Tech Tip: Working with Composite Components using the Escape Key (by Tor Norbye)
- Theme: Using JavaServer Faces Components: a special collection of technical articles, tips, tutorials, and sample applications, focused on learning how to use JavaServer Faces components.
- Theme: Building JavaServer Faces Components: a special collection of technical articles, tips, tutorials, and sample applications, focused on learning how to build JavaServer Faces components.
Tags: Creator, IDE, Java, Sun, Technology
