This post originated from an RSS feed registered with Agile Buzz by James Robertson. Original Post: How To Create A Custom Widget - Drop Down - Navigation Buttons Feed Title: Pollock Feed URL: http://www.cincomsmalltalk.com/rssBlog/pollock-rss.xml Feed Description: Pollock - the next VW GUI Latest Agile Buzz Posts Latest Agile Buzz Posts by James Robertson Latest Posts From Pollock

Lots of little methods this week

Navigation Buttons

We need two navigation buttons, one each on either side of the month/year label at the top of our popup. We'll start by presenting the arrow images that we'll use for these buttons. They are a double left and single left pointing arrow head (and their accompanying masks):

	CalendarArtist class>>leftArrow
		"Tools.UIMaskEditor new openOnClass: self andSelector: #leftArrow"

		
		^CachedImage on: (Image 
			extent: 4 @ 8
			depth: 1
			bitsPerPixel: 1
			palette: MonoMappedPalette blackWhite
			usingBits: #[224 0 0 0 192 0 0 0 128 0 0 0 0 0 0 0 128 0 0 0 192 0 0 0 224 0 0 0 240 0 0 0])

-+-+-

	CalendarArtist class>>leftArrowMask
		"Tools.UIMaskEditor new openOnClass: self andSelector: #leftArrowMask"

		
		^CachedImage on: (Image 
			extent: 4 @ 8
			depth: 1
			bitsPerPixel: 1
			palette: CoveragePalette monoMaskPalette
			usingBits: #[16 0 0 0 48 0 0 0 112 0 0 0 240 0 0 0 112 0 0 0 48 0 0 0 16 0 0 0 0 0 0 0])

-+-+-

	CalendarArtist class>>leftArrows
		"Tools.UIMaskEditor new openOnClass: self andSelector: #leftArrows"

		
		^CachedImage on: (Image 
			extent: 8 @ 8
			depth: 1
			bitsPerPixel: 1
			palette: MonoMappedPalette blackWhite
			usingBits: #[238 0 0 0 204 0 0 0 136 0 0 0 0 0 0 0 136 0 0 0 204 0 0 0 238 0 0 0 255 0 0 0])

-+-+-

	CalendarArtist class>>leftArrowsMask
		"Tools.UIMaskEditor new openOnClass: self andSelector: #leftArrowsMask"

		
		^CachedImage on: (Image 
			extent: 8 @ 8
			depth: 1
			bitsPerPixel: 1
			palette: CoveragePalette monoMaskPalette
			usingBits: #[17 0 0 0 51 0 0 0 119 0 0 0 255 0 0 0 119 0 0 0 51 0 0 0 17 0 0 0 0 0 0 0])

The images here are simple enough that even an artistic deficient like myself was able to create them with Image Editor in Wrapper's UIPainter. The only thing of interest in these methods are that they are on the CalendarArtist class. This is just a convention we use in Pollock. Image resources are always on the Artist. As before with the image on the Calendar action button, I don't expect you to really hand code these... They are here for completeness, and are published in today's updated "Pollock-Calendar" package on the Cincom public repository

To use these images in a button, we have to bundle them in a Pollock DisplayImage. We'll create an accessor for each DisplayImage for each of the buttons:

	CalendarAgent>>previousYearButtonIcon

		| image |
		image := DisplayImage
			image: (CalendarArtist leftArrows)
			mask: (CalendarArtist leftArrowsMask).
		image frame: AlignmentFrame new.
		^image

-+-+-

	CalendarAgent>>previousMonthButtonIcon

		| image |
		image := DisplayImage
			image: (CalendarArtist leftArrow)
			mask: (CalendarArtist leftArrowMask).
		image frame: AlignmentFrame new.
		^image

-+-+-

	CalendarAgent>>nextMonthButtonIcon

		| image |
		image := DisplayImage
			image: (CalendarArtist leftArrow image reflectedInX)
			mask: (CalendarArtist leftArrowMask image reflectedInX).
		image frame: AlignmentFrame new.
		^image

-+-+-

	CalendarAgent>>nextYearButtonIcon

		| image |
		image := DisplayImage
			image: (CalendarArtist leftArrows image reflectedInX)
			mask: (CalendarArtist leftArrowsMask image reflectedInX).
		image frame: AlignmentFrame new.
		^image

Only little bits of interesting code here. We take a DisplayImage, and give it an image and a mask, then give it an AlignmentFrame. A DisplayImage is the Pollock Pane that holds Images (or CachedImages or Pixmaps or Masks) and displays them. It has the ability to hold an image and a mask, as well as a disabledImage and a disabledMask. Thus, they can be shown enabled and disabled. Thus the DisplayImage plays the role that both an OpaqueImage and OpaqueImageWithEnablement play in the Wrapper framework.

A final note is how we just "flipped" the images, using reflectedInX. To do so, we had to get our hands on the Image inside the CachedImage that is defined in the left and right arrow(s) methods.

Next we'll write a method that adds the navigation buttons to the form:

	CalendarAgent>>addNavigationButtonsTo: aForm 
		| button |
		button := Button new.
		button frame: self leftButtonsFrame.
		(button frame)
			rightOffset: 18;
			bottomOffset: 18.
		button addComponent: self previousYearButtonIcon.
		aForm addComponent: button.
		button := Button new.
		button frame: self leftButtonsFrame.
		(button frame)
			leftOffset: 19;
			rightOffset: 37;
			bottomOffset: 18.
		button addComponent: self previousMonthButtonIcon.
		aForm addComponent: button.
		button := Button new.
		button frame: self rightButtonsFrame.
		(button frame)
			leftOffset: -18;
			bottomOffset: 18.
		button addComponent: self nextYearButtonIcon.
		aForm addComponent: button.
		button := Button new.
		button frame: self rightButtonsFrame.
		(button frame)
			rightOffset: -19;
			leftOffset: -37;
			bottomOffset: 18.
		button addComponent: self nextMonthButtonIcon.
		aForm addComponent: button

Again, there isn't a lot going on here. We create a button, give it a frame, give the button an image/icon and add it to the form. You will note that I factored out the "left" and "right" base frames for the buttons, here is the code for those:

	CalendarAgent>>leftButtonsFrame
		^FractionalFrame 
			fractionLeft: 0
			right: 0
			top: 0
			bottom: 0

-+-+-

	CalendarAgent>>rightButtonsFrame
		^FractionalFrame 
			fractionLeft: 1
			right: 1
			top: 0
			bottom: 0

One might note in the #addNavigationButtonsTo: method I basically gave these buttons a size of 18x18. Why? I could come up with some complex answer that says I calculated the sizes of the buttons and their internal decorations and then added some padding. But in fact, I just played with it a bit till I found a size I liked. One small note is that I place the inner buttons one pixel further inset from the outside of the outer buttons.

The Last Detail

Now that we have all the setup work done, let's finally add the buttons to the code that creates 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.
		self addNavigationButtonsTo: form.
		^form

If we open our tester now (CalendarTest new openWindowWithCalendar), we have our calendar popup with the four buttons, right where we want them, and today's month/year.

The above is published as version 1.11 in the Package named "Pollock-Calendar" on the Cincom public repository.

Well, today was mostly a lot of boring code. Next time we'll be more interesting and add a working object to hold on to the date we'll be manipulating with the popup, as well as write the code to increment or decrement the month or year with our buttons, and also update the month/year display label.