Inspector phlow views by example

Every object can be shown multiple ways in the Inspector. This ability is made possible through views that are based on Phlow.

The list view is a basic view that shows the items of a collection or a stream. A Contacts list view can be seen in GtABAddressBook>>#gtViewContactsListOn: gtViewContactsListOn: aView <gtView> ^ aView list title: 'Contacts list' translated; priority: 8; items: [ self contacts ]; itemText: [ :aContact | aContact fullName asRopedText ]

The columned list is, like the name says, a list that can display multiple columns. An example is showin the Contacts with details view implemented in GtABAddressBook>>#gtViewContactsOn: gtViewContactsOn: aView <gtView> ^ aView columnedList title: 'Contacts with details' translated; priority: 5; items: [ self contacts ]; column: 'Avatar' icon: [ :aContact | aContact avatar asElement asScalableElement size: 32 @ 32 ] width: 75; column: 'Name' text: [ :aContact | aContact fullName ]; column: 'Phone' text: [ :aContact | aContact telephone ]

The tree is similar to the list view. It still allows you to define the items of the roots, but it also allows you to specify the children in a block executed for each item. An example can be seen here: BrActor>>#gtChildrenFor: gtChildrenFor: aView <gtView> self children ifEmpty: [ ^ aView empty ]. ^ aView tree title: 'Children'; priority: 80; items: [ self children ]; children: #children

The columned tree is similar to the columned list only it's not just a list, but a tree that allows to define children for each item. An example in GtPrefixTree>>#gtViewChildrenFor: gtViewChildrenFor: aView <gtView> ^ aView columnedTree title: 'Children trees' translated; items: [ {self} ]; children: [ :each | each children ifNil: [ #() ] ]; column: 'Prefix' text: [ :aPrefixTree | aPrefixTree prefix ]; column: 'Tree' text: [ :aPrefixTree | aPrefixTree ]

Views can also host visualizations. For example, the Circular view defined in GtABAddressBook>>#gtViewContactsIconsCircularOn: gtViewContactsIconsCircularOn: aView <gtView> self contacts size > 2 ifFalse: [ ^ aView empty]. ^ aView mondrian title: 'Circular' translated; priority: 50; painting: [ :view | view nodes stencil: [ :aContact | (aContact avatar scaledToSize: 124@124) asElement ]; with: self contacts. view layout circle radius: 200 ] shows a basic visualization of the avatars of the contacts arranged in a circular layout. The specific visualization is implemented in the Mondrian visualization engine.

The Print view is defined in Object>>#gtPrintFor: gtPrintFor: aView <gtView> ^ aView textEditor title: 'Print'; priority: 110; aptitude: BrGlamorousCodeEditorAptitude; text: [ self printString asRopedText ]; actionUpdateButton . This view is available for all objects because every object knows how to print itself.

Another view that is available for all objects is the Meta view which is defined in ProtoObject>>#gtMetaFor: gtMetaFor: aView <gtView> ^ aView explicit title: 'Meta'; priority: 200; stencil: [ BrVerticalPane new matchParent; background: BrGlamorousColors backdropColor; addChild: ((GtCoderElement forObject: self) disablePlayPage "beNormalLevel" margin: (BlInsets all: 10); background: Color white; addAptitude: BrShadowAptitude) ] . This view embeds a complicated Bloc element in the inspector.