This post originated from an RSS feed registered with Agile Buzz by James Robertson. Original Post: How To Build A GUI With Pollock - Resizing Splitters 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

Today we're going to add resizing splitters between each of our panes, which will allow us to resize each pane independently. To do this, first we have to give all of our panes IDs. That is because the ResizingSplitter takes an array of pane IDs as arguments to tell it which panes it is going to be in charge of manipulating. The following are our changes (Note, this still uses my ClassHierarchyBrowser work, not Vassili's) :

createInterface
	| pane |
	pane := TreeView new.
	pane frame: (FractionalFrame fractionTop: 0 right: 0.33 bottom: 0.5 left: 0).
	pane frame
		rightOffset: -1;
		bottomOffset: -1.
	pane id: #ClassTree.
	self addComponent: pane.
	pane tree: (Pollock.Tree 
		on: Object
		childrenBlock: [:each | each subclasses]
		hasChildrenBlock: [:each | each subclasses notEmpty]).
	pane expandRootFully.
	pane verticalScrollbar: true.
	pane horizontalScrollbar: true.
	pane showImages: false.
	pane := ListBox new.
	pane beMultiSelect.
	pane frame: (FractionalFrame fractionTop: 0 right: 0.66 bottom: 0.5 left: 0.33).
	pane frame
		rightOffset: -1;
		leftOffset: 1;
		bottomOffset: -1.
	pane id: #ProtocolList.
	self addComponent: pane.
	pane := ListBox new.
	pane frame: (FractionalFrame fractionTop: 0 right: 1 bottom: 0.5 left: 0.66).
	pane frame
		leftOffset: 1;
		bottomOffset: -1.
	pane id: #MethodList.
	self addComponent: pane.
	pane := TextEdit new.
	pane frame: (FractionalFrame fractionTop: 0.5 right: 1 bottom: 1 left: 0).
	pane frame topOffset: 1.
	pane id: #MethodText.
	self addComponent: pane.

- - - -

hookupInterface
	(self paneAt: #ClassTree) when: #selectionChanged send: #fillProtocolList to: self.
	(self paneAt: #ProtocolList) when: #selectionChanged send: #fillMethodList to: self.
	(self paneAt: #MethodList) when: #selectionChanged send: #displayMethodSource to: self
	
- - - -

fillProtocolList
	(self paneAt: #ClassTree) selection ifNotNil: 
		[:value | (self paneAt: #ProtocolList) list: value organization categories]
		
- - - -

fillMethodList
	(self paneAt: #ClassTree) selection ifNotNil: 
		[:classValue | 
		| selections |
		selections := (self paneAt: #ProtocolList) selections asSortedCollection.
		selections notEmpty ifTrue: 
			[(self paneAt: #MethodList) list: (classValue organization listAtCategoriesNamed: selections)]]

- - - -

displayMethodSource
	(self paneAt: #ClassTree) selection ifNotNil: 
		[:classValue | (self paneAt: #MethodList) selection ifNotNil: 
			[:methodValue | (self paneAt: #MethodText) model value: (classValue sourceCodeAt: methodValue)]]

The above is published as version 1.10 in the Package named "PollockBlog" on the Cincom public repository.

As you see, our code really doesn't change except for using actual named panes, instead of the default names.

To add the resizers, we'll add a method to create and add them, name it #addResizingSplitters, and call it from the bottom of our #createInterface method:

	...
	pane id: #MethodText.
	self addComponent: pane.
	self addResizingSplitters

- - - -

addResizingSplitters
	| resizer |
	resizer := ResizingSplitter new.
	resizer beVertical.
	resizer raisedBorder: false.
	resizer frame: (FractionalFrame fractionTop: 0 right: 0.33 bottom: 0.5 left: 0.33).
	resizer frame 
		leftOffset: -1;
		rightOffset: 1.
	resizer aboveLeftWidgets: #(#ClassTree).
	resizer belowRightWidgets: #(#ProtocolList).
	resizer id: #BetweenClassAndProtocol.
	self addComponent: resizer.
	resizer := ResizingSplitter new.
	resizer beVertical.
	resizer raisedBorder: false.
	resizer frame: (FractionalFrame fractionTop: 0 right: 0.66 bottom: 0.5 left: 0.66).
	resizer frame 
		leftOffset: -1;
		rightOffset: 1.
	resizer aboveLeftWidgets: #(#ProtocolList).
	resizer belowRightWidgets: #(#MethodList).
	resizer id: #BetweenProtocolAndMethods.
	self addComponent: resizer.
	resizer := ResizingSplitter new.
	resizer raisedBorder: false.
	resizer frame: (FractionalFrame fractionTop: 0.5 right:1 bottom: 0.5 left: 0).
	resizer frame 
		topOffset: -1;
		bottomOffset: 1.
	resizer aboveLeftWidgets: #(#ClassTree #ProtocolList #MethodList #BetweenClassAndProtocol #BetweenProtocolAndMethods).
	resizer belowRightWidgets: #(#MethodText).
	resizer id: #AboveText.
	self addComponent: resizer.

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

In the above, we basically repeat the same code three times over, with variations for each individual resizer. The first thing we see is the first resizer being told to #beVertical. By default, ResizingSplitters are horizontal. No special reason for that, the default had to be either vertical or horizontal, and I chose vertical. Because Pollock is dynamic, it also has a #beHorizontal method, so you can change a ResizingSplitter from one to the other and back.

Next we see we send the resizer the #raisedBorder: message, passing in false. By default, a resizer will have a platform faithful raised border on all of it's edges. However, in our case, the panes themselves create a raised look, because we set them 2 pixels apart. Telling the resizer not to have the raised border makes it blend into the background.

Next we set the frame. Notice, we still use the fractional frame... it's very handy. For the two vertical resizers, we make the left and right fraction the same within each frame. This makes sure they are between where we laid out our panes. We give them a bit of width, by telling them that their left and right offsets (from the fraction position) is one away from the center.

Next, we have two methods #aboveLeftWidgets: and #belowRightWidgets:. Each of these methods take a collection of symbols that are IDs of widgets the resizer is supposed to manipulate. When the resizer is vertical, you pay attention to the "Left" and "Right" part of the method names. When the resizer is horizontal, you pay attention to the "above" and "below" part of the method names. To be complete, we added IDs to all the resizers... which is important for the final resizer.

The reason this is important for the final, horizontal resizer, is because we not only want to manage the Tree and two ListBoxes above the TextEdit, we also want to manage the resizers which are between them. This way, when we resize up or down, the resizer stays within the area between the upper panes.

Go ahead and try it out....

	ClassHierarchyBrowser open

Except for the flicker (a whole other battle that Pollock will tackle in the following months before it is released as Production 1), it just plain works! By now, you should be getting into the rhythm of Pollock panes. Instantiate one, give it a meaningful frame, send it some configuration messages, and finally add it to the window.

Well, I'm sure eventually Vassili will show us a better way to write the above code on his blog. Next time, we'll add dynamic scrollbars to the two ListBoxes, so that they only show when they're needed... another nice feature of Pollock.