Inspector views

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

Consider the following object:

The inspector offers multiple views, each of which is defined in a method in either the class of the object, or in one of the superclasses.

Views are defined using Phlow.

List view

The list view is a basic view that shows the items of a collection or a stream. An example 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 ] which defines the Contacts list view.

Columned list view

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 ] .

Tree view

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: GtRecentChanges>>#gtTreeFor: gtTreeFor: aView <gtView> ^ aView tree title: 'Change tree'; expandUpTo: 1; priority: 3; items: [ groupedChanges ]; children: #gtChildren; itemText: [ :each | each displayForTree ] .

Columned tree view

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 ]

Mondrian view

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. This specific visualization is implemented in the Mondrian engine for which we have a dedicated view.

Text editor view

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

Explicit view

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: [ (GtCoderElement forObject: self) disablePlayPage beNormalLevel ] . This view embeds a complicated widget (a Coder) in the inspector by means of a so call explicit view.