preparing for pollockpollock preparing for pollock. preparing for pollock the future of the...

Pollock

PreparingFor Pollock

Preparing For PollockPreparing For Pollock

The Future of theThe Future of theVisualWorks GUIVisualWorks GUI

Copyright © 2002, Cincom Systems, Inc.

Number 1, 1950 (Lavender Mist)

Jackson Pollock 1912-1956


PollockPollock


ÿWhy a new GUI FrameworkÿPollock Philosophy and GoalsÿThe PathÿThe MetaphorÿThe BasicsÿPollock & The Trigger Events FrameworkÿModels & ValueEvents


PollockPollock


ÿPollock & DragDropÿPollock & Edit KeysÿCoding Today With The Future In MindÿPollock ToolsÿBuilding A New Widget – An ExampleÿQ&A


PollockPollock

Why a new GUI FrameworkWhy a new GUI Framework

ÿWhat needs to be obsoleteÿWrappersÿLook Specific WidgetsÿBall Of Mud ControllersÿStatic Edit KeysÿFragile & Noisy Change/Updates in the GutsÿDo Too Much Builder


PollockPollock


ÿWhat needs to be addedÿConfigurable HotkeysÿDynamic Look ChangingÿStupid ControllersÿFull Use of the Trigger Event SystemÿSeparate Builder and Widget InventoryÿE-Z Developer Widget CreationÿE-Z Developer Widget Extension Capability


PollockPollock


ÿWidgets In GeneralÿOut of the box they need

ÿTo Do MoreÿTo Do It FasterÿTo Do It BetterÿWhere Required: To Do It More Platform Faithfully

ÿAnd if not:ÿE-Z To Make Them Do It


PollockPollock

Wrappers Today

MenuBar… ToolBar…

Visual LauncherWindow

ReComp

BoundedW

Composite

SpecW

BoundedW

BorderW

BoundedW

-ScrollW

-Text

BorderedW

Composite

BoundedW

-Button

BoundedW

-Button

BoundedW

-ScrollBar

What needs to be obsolete:What needs to be obsolete:


PollockPollock

What needs to be obsolete:What needs to be obsolete:Wrappers TodayWrappers Today

0102030405060708090

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

EastWestNorth


PollockPollock


ÿWrappersÿSpecWrappers: Hold on to too much runtime

information, waste space with the restÿBounded, Bounding, Bordered… Baloney!ÿScrollbars : The result of composition run

rampantÿMenus : Not much betterÿBounds calculation : The progenitor of

modern C obfuscation contests


PollockPollock


ÿLook Specific WidgetsÿCan’t change their look on the fly without

rebuilding whole windowÿComplex build rules (<widget>:into:)ÿForces duplicated build codeÿCommingled common and look specific code


PollockPollock


ÿBall Of Mud ControllersÿControllers have lost their “MVC” meaningÿThey have become sophomoricÿBecause of wrappers are involved in

downcasting & upcasting eventsÿKnows too much about view


PollockPollock


ÿStatic Edit KeysÿControllers do too muchÿControllers contain too much feel specific

codeÿDispatch tables are code basedÿThe Developer knows best (i.e. least)


PollockPollock


ÿFragile & Noisy Change/Updates in the GutsÿAll dependents get all update information, even

when they don’t care (which in the guts of the GUI,is most of the time)

ÿUpdates fling up and down the wrapper hierarchyÿChanging models and views is fraught with

danger, making existing Widgets fragileÿDebugging is a nightmare


PollockPollock


ÿDo Too Much BuilderÿBuilds then sticks aroundÿ“self builder componentAt:” (‘nuff said!)

ÿCan’t properly get nested components (sub-canvases)

ÿThrows out important build time information


PollockPollock

What needs to be added (redux):What needs to be added (redux):

ÿConfigurable HotkeysÿDynamic Look ChangingÿStupid ControllersÿFull Use of the Trigger Event SystemÿSeparate Builder and Widget InventoryÿE-Z Developer Widget CreationÿE-Z Developer Widget Extension

Capability


PollockPollock

Pollock Philosophy and GoalsPollock Philosophy and GoalsÿGoals

ÿMust be more accessible to both novice andexpert developers

ÿMust be more modularÿMust be more adaptable to new looks and

feelsÿMust have tools to migrate from old

frameworkÿMust have comprehensive unit testsÿMust be developed “Out In The Open”


PollockPollock

Pollock Philosophy and GoalsPollock Philosophy and GoalsÿPhilosophy : XP (as much as possible)

ÿ Make it work,Make it right,Make it fast(in that order)

ÿYou aren’t going to need itÿThe simplest thing that can possibly workÿLet the code tell me what to doÿTest firstÿContinuous integration


PollockPollock

Visual Launcher under PollockVisual Launcher under Pollock

TextEdit

MenuBar Toolbar

Window


PollockPollock

The PathThe PathÿBeta 1: VW 7

ÿApplicationWindow, Button, Label & ImageÿSimple layouts (OriginExtent, Alignment)ÿWin9x, MacOSX & Motif looksÿBuild, Read & Write from XML and ArrayÿDTD for XMLÿWindow opening stylesÿFull Trigger Event usageÿBuilder, UserInterface, WidgetInventory


PollockPollock

The PathThe Path

ÿBeta 2 : VW 7.1ÿCheckBoxÿRadioÿInputFieldÿListÿTextEdit


PollockPollock

The PathThe Path

ÿBeta 3 : VW 7.2ÿMenu, DropDown (list and menu), Grid (Table

& Dataset combined), Dialog, Toolbar &Toolbar panes, TreeView, TabControl,GroupBox

ÿDragDropÿFractional LayoutsÿUIPainter written in Pollock


PollockPollock

The PathThe PathÿProduction 1 : VW 7.3

ÿSubpaneHolder, Resizer, SpinButton, Divider,ClickWidget, Region, Progress, Slider

ÿUIPainter, MenuEditor, ToolbarEditorÿTranslation & Conversion toolsÿCo-exist in image with existing frameworkÿExisting framework default user interface

creation toolÿLast changes to existing frameworkÿAll widgets have at least basic functionality


PollockPollock

The PathThe Path

ÿProduction 2 : VW “7.4”ÿAll widgets have full capabilityÿWinXP Look & FeelÿSome internal tools use PollockÿCo-exist in image with existing frameworkÿPollock default new user interface creation

toolÿExisting framework “Soft” obsolete


PollockPollock

The PathThe Path

ÿProduction 3 : VW “7.5” or “11”ÿAll tools use PollockÿExisting framework “Hard” obsoleteÿOnly Pollock in imageÿExisting framework fully loadable from

Obsolete parcel


PollockPollock

The MetaphorThe Metaphor

ÿPanes & Frames, Agents & ArtistsÿPane

ÿLike a VisualComponentÿSome Panes have SubpanesÿWindow is a PaneÿScreen is a PaneÿAll subclass from AbstractPane


PollockPollock

The MetaphorThe MetaphorÿPanes & Frames, Agents & Artists (cont.)

ÿFrameÿLike a Layoutÿvisible boundsÿdisplayable boundsÿoriginÿ[alignment]ÿ[fractional positions]ÿ[relation positions]ÿ[viewport]


PollockPollock


ÿPanes & Frames, Agents & ArtistsÿAgent

ÿOffload behavior from controllerÿTell the artist when to drawÿMaintain most state (visibility, enablement,

selected, pushedness, cursor position)ÿBehavior for mouse and keyboard (keyboard

processor, focus, “handler for mouse event”)


PollockPollock


ÿPanes & Frames, Agents & ArtistsÿArtist

ÿDoes all drawingÿInteracts with Agent and Pane to get information

about what to draw, and when


PollockPollock

The BasicsThe BasicsObject

AbstractPane AbstractDraw Frame

AbstractAgent AbstractArtist

ButtonAgent

RadioAgent

ButtonArtist

RadioArtist

……

LayoutFrameCompositePane DisplayLabel

Button

Radio


PollockPollock

The Basics : LooksThe Basics : Looks

ButtonArtist

MacOSXButtonArtist MotifButtonArtist Win95ButtonArtist


PollockPollock

The Basics : FeelsThe Basics : Feels

RadioAgent

MacOSXRadioAgent MotifRadioAgent Win95RadioAgent


PollockPollock

The BasicsThe Basics

ÿCreating, configuring and opening a window

| window |

window := Pollock.ScheduledWindow new.

window frame: ((WindowFrame new)

maximumSize: 400 @ 400;

openingPosition: 100 @ 100;

yourself).

window border: #etched.

window open


PollockPollock


ÿCreating, configuring and adding a Pane

| window radio |

window := self openWindow.

radio := Radio new.

radio frame: (OriginExtentFrame origin: 10 @ 10 extent: 30 @ 30).

window addComponent: radio.


PollockPollock

The BasicsThe BasicsÿLabels are NOT part of panes, but can be

subpanes| window radio displayLabel labelModel |

window := self openWindow.

radio := self createRadio.

displayLabel := Pollock.DisplayLabel new.

labelModel := Pollock.Label string: 'Hi&Ho'.

displayLabel label: labelModel.

displayLabel frame origin: 0 @ 0.

radio addComponent: displayLabel.

window addComponent: radio


PollockPollock


ÿCompositePanesÿAny subclass can have subpanesÿCan have any number of subpanesÿCan have any kind of subpanes

ÿCommon subpanesÿButtons : Labels and DisplayImagesÿRadios : Labels


PollockPollock


ÿControllers are much more dumbÿControllers and Trackers still existÿNew hierarchyÿForward all events to the Agent

ÿThe Agent holds the Keyboard ProcessorÿBecause of compatibility, controller passes it

to the Agent


PollockPollock

The BasicsThe BasicsÿDecorations and Borders

ÿDecorations : Things inside a paneÿScrollbars in an Advanced Text paneÿThe “3D Look / Raised” portion of a ButtonÿClip the drawable bounds

ÿBorders : Things that surround a paneÿEffectively clip the visible bounds

ÿMost panes have bordersÿSome panes have decorationsÿBorders and Decorations have Artists


PollockPollock


ÿA Button with aBorder (ridged) and adecoration:

ÿA Button with aBorder (ridged) – Nodecoration:


PollockPollock


ÿActionDisplay pane

Action Part Display Part

ÿExamples:

Action Part Display Part“Display Left”“Display Right”

Display Right

Display Left

Spin Button

Drop Down


PollockPollock


ÿAgents, Artists and Frames are pluggable atruntime

ÿUpdate/Change behavior is banned from thePollock internals

ÿWidgetPolicy, BorderPolicy, LookPolicyÿFeelPolicy replaced by KeyboardPolicyÿNew Controller hierarchyÿNew ScheduledWindow hierarchy


PollockPollock

New Controller HierarchyNew Controller Hierarchy

Object

PaneController

KeyboardController

LabelController ToggleController

ButtonController ActionDisplayController


PollockPollock

NewNew ScheduledWindowScheduledWindow hierarchyhierarchy

UI.Window

Pollock.ScheduledWindow

Pollock.ApplicationWindow Pollock.DialogWindow


PollockPollock

The BasicsThe Basics –– Widget ChangesWidget Changes

ÿGridÿCombines Dataset & TableÿWill support Dataset models, as well as Table

modelsÿWill provide Multi-Column list mode


PollockPollock

The BasicsThe Basics –– Widget ChangesWidget Changes

ÿDropDownÿCombines DropDown, Combo and

MenuButtonÿWill support Lists as well as Menus as models


PollockPollock

The BasicsThe Basics –– Unsure FutureUnsure Future

ÿTabControlÿWill existÿShould it add “Minor” tabs (right and/or

bottom)?ÿShould it add “Stacked” tabs?

ÿNotebookÿNot scheduled to exist (should it?)


PollockPollock

Pollock & The Trigger Events FrameworkPollock & The Trigger Events Framework

ÿThe Trigger Events FrameworkÿFully fleshed out in VW 7ÿAll events ultimately triggered by “views”

ÿEvent CheckingÿAmbivalent vs. StrictÿObject – Default is AmbivalentÿViews & Panes – Default is Strict

ÿUsing it nowÿIn GeneralÿApplicationModel


PollockPollock

Trigger EventsTrigger Events –– Using it nowUsing it now

ÿGeneralÿeventTableÿcanTriggerEvent: anEventNameSymbolÿhasActionForEvent: anEventNameSymbolÿactionListForEvent: anEventNameSymbol


PollockPollock

Trigger EventsTrigger Events –– Using it nowUsing it nowÿGeneral

ÿwhen: anEventNameSymbol do: aBlockÿwhen: anEventNameSymbol evaluate: anActionÿwhen: anEventNameSymbol send: aSelectorSymbol

to: anObjectÿwhen: anEventNameSymbol send: aSelectorSymbol

to: anObject with: anArgumentObjectÿwhen: anEventNameSymbol send: aSelectorSymbol

to: anObject with: firstArgumentObject with:secondArgumentObject

ÿwhen: anEventNameSymbol send: aSelectorSymbolto: anObject withArguments: anArgumentCollection

ÿwhenAny:…


PollockPollock


ÿGeneralÿremoveAction: anAction forEvent:

anEventNameSymbolÿremoveActionsForEvent:

anEventNameSymbol


PollockPollock

Trigger EventsTrigger Events –– Using it nowUsing it nowÿApplicationModel

ÿwidget: aWidgetIDSymbol when: anEventSymbol do: aBlockÿwidget: aWidgetIDSymbol when: anEventSymbol evaluate:

anActionÿwidget: aWidgetIDSymbol when: anEventSymbol send: anAction

to: anObjectÿwidget: aWidgetIDSymbol when: anEventSymbol send: anAction

to: anObject with: anArgumentÿwidget: aWidgetIDSymbol when: anEventSymbol send: anAction

to: anObject with: firstArgument with: secondArgumentÿwidget: aWidgetIDSymbol when: anEventSymbol send: anAction

to: anObject withArguments: aCollection


PollockPollock


ÿNew behavior in Object>>changed:with:

changed: anAspectSymbol with: aParameter

"The receiver changed. The change is denoted by the argumentanAspectSymbol. Usually the argument is a Symbol that is part of the dependent'schange protocol, that is, some aspect of the object's behavior, and aParameter isadditional information. Inform all of the dependents."

self myDependents update: anAspectSymbol with: aParameter from: self.

anAspectSymbol isSymbol ifTrue: [self triggerEvent: anAspectSymbol]


PollockPollock

Models & ValueEventsModels & ValueEvents

ÿThe Model Hierarchy will not be usedÿReplaced by the EventModel Hierarchy

Object

EventModel

ValueEvent

local eventHandlers

Events Triggered:#changing#changed

“Global” EventHandlers

ÿþýýüûúùø÷ûöýûõôóôòõôòñðïî


PollockPollock

PollockPollock –– New DragDrop SystemNew DragDrop SystemÿState driven engine

For single select lists, the following are the rule states.

1) If you click on an unselected item, and you do NOT move the mouse more than 2@2 whileyou have the mouse down, nothing happens until you release the mouse, at which time thetarget item is selected.

2) If you click on an unselected item, and you DO move the mouse more than 2@2, thetarget item is selected, and you are put into Drag mode for that item if it is turned on, if not,the selection changes as you drag the mouse over successive unselected items.

3) If you click on a selected item and do NOT move the mouse more than 2@2, nothinghappens until you release the mouse, at which time the target item is unselected.

4) If you click on a selected item and DO move the mouse more than 2@2, you are put intoDrag mode for that item if it is turned on, if not, the selection changes as you drag the mouseover successive unselected items (as in rule #2)


PollockPollock

PollockPollock –– New DragDrop SystemNew DragDrop SystemÿState driven engine (continued)

For multi select lists, the following are the rule states.

1) If you click on an unselected item, and you do NOT move the mouse more than 2@2 whileyou have the mouse down, nothing happens until you release the mouse, at which time thetarget item is selected. (Rules of Shift & Ctrl apply to "items" selected)

2) If you click on an unselected item, and you DO move the mouse more than 2@2, the currentitem is selected and any additional items you drag the mouse over get added to the currentselections. (Rules of Shift & Ctrl apply to "items“ selected).

3) If you click on a selected item, and you do NOT move the mouse more than 2@2 while youhave the mouse down, nothing happens until you release the mouse, at which time the item isunselected. (Rules of Shift & Ctrl apply to "items“ selected/unselected)

4) If you click on a selected item, and you DO move the mouse more than 2@2, you are now inDrag mode if it is turned on (Rules of Ctrl & Shift apply to move/copy mode of Drag, and notto selection modes), if not, rule #2 kicks in.


PollockPollock

PollockPollock –– New DragDrop SystemNew DragDrop System

ÿTrigger Event communication (based onVSE design)

ÿ“Select When Down” dies a miserabledeath

ÿConfigurableÿDefault – Right ButtonÿOptions : Left Button. Modifier Key


PollockPollock

PollockPollock –– Edit KeysEdit Keysÿ“FeelPolicy” and the dispatch table as we know

it, goes the way of the dodoÿKeyboardPolicy

ÿBased on MagicKeys from Roel Wuyts (Thank You!)ÿAssignable by “Application”:

ÿTranscript – EditPolicy

ÿRefactoring Brrowser – CodePolicyÿMyApplication – MyApplicationPolicy

ÿCan have “Platform” versionsÿWindowsEditPolicy, WindowsCodePolicy

ÿMacEditPolicy, MacMyApplicationPolicy


PollockPollock

Coding with the future in mindCoding with the future in mind

ÿApplicationModelÿDon’t write “self builder componentAt:”ÿUse new (VW 7) protocols

ÿ#mainWindowÿ#windowMenuBarÿ#controllerAt: aWidgetIDSymbolÿ#widgetAt: aWidgetIDSymbolÿ#wrapperAt: aWidgetIDSymbol


PollockPollock

Coding with the future in mindCoding with the future in mind

ÿUse the Trigger Event system instead ofupdate/change

ÿStay away from the Smalltalk (“Default”)look

ÿStay away from the GUI guts, but if youmust: SUBCLASS!


PollockPollock

Pollock ToolsPollock Tools

ÿApplicationModel conversion toolÿWindowSpec conversion toolÿEnhanced MenuEditorÿCoolImage replaces ImageEditor (Thank

You Travis Griggs!)ÿToolbar Editor


PollockPollock

Pollock ToolsPollock ToolsÿEnhanced UIPainter

What is gone:-More than 3 tabs-Special tabs for color-Special tabs for layout-Apply & Cancel buttons

What is added:-Event configuring in Painter-Event coding in Painter-Save to XML external file-”Unlimited” Undo/Redo-Undo/Redo list-Widget Morphing-The Kitchen Sink


PollockPollock

Building A New WidgetBuilding A New Widget

ÿ Our Example : The Region Paneÿ What we have to do

1. Write a Test2. Create the Pane subclass3. Write a Test4. Create the Agent subclass5. Write a Test6. Create the Artist subclass


PollockPollock

PanePane –– Required MethodsRequired Methods

ÿagentClassÿartistClassÿdefaultControllerClassÿframeClassÿgetController

(because defaultControllerClass is nil)ÿouterExtentChanged: aPoint


PollockPollock

First UsesFirst UsesopenWindowWithRegion

self openWindow.

region := Region new.

region frame: (OriginExtentFrame origin: 10 @ 10 extent: 100 @ 100).

window addComponent: region

openWindowWithRegionWithBorder

self openWindow.

region := Region new.

region frame: (OriginExtentFrame origin: 10 @ 10 extent: 100 @ 100).

region border: #ridged.

window addComponent: region


PollockPollock

Fleshing It OutFleshing It Out

ÿrectangle instance variable (Pane)ÿdrawOn: (Artist)ÿbackground (Artist & Pane)ÿlineSize, lineColor, fillColor (Aritist &

Pane)ÿvisible, beVisible: (Agent & Pane)


PollockPollock

On your ownOn your own

ÿPlatform looks (if any)ÿAdditional shapes


PollockPollock

Pollock

2002 Cincom Systems, Inc.All Rights Reserved

Developed in the U.S.A.CINCOM, , and The Smart Choice are trademarks or registered trademarks of Cincom Systems, Inc

All other trademarks belong to their respective companies.

preparing for pollockpollock preparing for pollock. preparing for pollock the future of the...

Documents