Today we'll design the Calendar popup and start implementing it..
The Design
Text is a bad design platform, but we'll try. We have a square box. In that box, we have, along the top, a line of widgets. A "Year Back" button, a "Month Back" button, a label with the Month and Year as text, a "Month Forward" button, and finally a "Year Forward" button. It should look something like:
<< < MONTH YYYY > >>
Under that should be a line of 7 Labels, one for each day of the week:
S M T W T F S
Under that should be a Grid of the weeks/days, comprising 6 rows. This will show the month calendar. For dates beyond or after this month, we'll show those days, but instead of being in black, they'll be in gray. So, October 2004 would look like this (Here we'll use blue to show those days not in October 2004)"
Today we'll just concern ourselves with the first row of information, what I'll call the Navigation row. Of that, today we'll just work on the Month and Year string.
But first, a design decision. We could just add all of our widgets directly into the popup window, but I'd rather use a Form. Why? Because Forms are reusable. So let's create a method to build our form... We'll call it #calendarForm
CalendarAgent>>calendarForm
| form |
form := Form new.
form frame: (FractionalFrame fractionLeft: 0 right: 1 top: 0 bottom: 1).
^form
Now, we'll modify our #openCalendarWindow method, and add the form to the popup window:
We can open our tester (CalendarTest new openWindowWithCalendar), and click on the popup button, but nothing much exciting happens. The form, as it sits now, doesn't do much but act as a holder.
Let's start off by adding the Month Year text label:
CalendarAgent>>calendarForm
| form label |
form := Form new.
form frame: (FractionalFrame fractionLeft: 0 right: 1 top: 0 bottom: 1).
label := DisplayLabel string: self currentMonthYear.
^form
That means we have to create a method named #currentMonthYear to get the string for the label:
CalendarAgent>>currentMonthYear
"Answer a string with the Current month and the Year as a string"
| today |
today := Date today.
^'<1s> <2s>'
expandMacrosWith: (Locale current timePolicy longMonthNames at: today monthIndex)
with: today year printString
There are a couple of things going on here... but none have anything to do with Pollock, and are general VisualWorks capabilities. First, I decided to be gentle to our non US users, and use our I18N support, Locale, to get the month names. Then, I used the expand macros capability (in the AppDevGuide.pdf page 442) to build the string with a space between the two values.
Now we have to give our label a frame and with it a location on the screen, and finally add it to our form.
CalendarAgent>>calendarForm
| form label |
form := Form new.
form frame: (FractionalFrame fractionLeft: 0 right: 1 top: 0 bottom: 1).
label := DisplayLabel string: self currentMonthYear.
label frame: AlignmentFrame topCentered.
form addComponent: label.
^form
AlignmentFrames lay themselves out relative to their containing pane. In this case, the form. They are really mostly only used for DisplayLabels or DisplayImages. In this case, we want our label to be top and center. If we open our drop down now (we're working interactively, so you don't have to close down the tester between changes here), we'll see that the drop down has the month name and year across the center at the top. Just like we told it!
However, if you're like me that text almost fills the whole drop down window. So, we'll go back to our #openCalendarWindow and for now, give it a BIG drop down size. We can change it later to make it "just right" once we get all our widgets going.
Previous Topic
