Creating custom browsers out of GTInspector extensions

The GTInspector empowers objects to display themselves through dedicated presentations. These are then wired together through the pager interface of the inspector. This provides a powerful way to experience and manipulate objects, but this is not the end of the story. Together with these dedicated presentations another opportunity opens up.

While the inspector is nice, it might still not always be desirable to use all the presentations. Let’s consider browsing the file system. Of course, we can use the default inspector, but if we are only interested in browsing files the relevant tabs are the one showing the items in a directory and the one showing the contents of a file. We can simply reuse the existing presentations and wire them up in a custom pager browser:

GLMPager new with: [ :pager |
     pager show: [ :composite :file |
          composite title: file basename.
          file gtInspectorItemsIn: composite.
          file gtInspectorContentsIn: composite ] ];
     openOn: FileSystem disk workingDirectory

The script simply delegates to the gtInspectorItemsIn: and gtInspectorContentsIn: methods already defined in the FileReference class. The result is a browser that looks like this:

Simple-file-pager.png

Quite simple. Now, let’s imagine a more complicated scenario in which you want to work on a Pillar book. As announced recently, the inspector offers dedicated presentations for Pillar.

Once you know that you will spend quite some time working with Pillar projects, you might prefer a dedicated browser that only exposes the presentations that you care about. We can extend the above browser to take these presentations into account.

GLMPager new with: [ :pager |
     pager show: [ :composite :file |
          composite title: file basename.
          file gtInspectorItemsIn: composite.
          file gtInspectorPillarConfigurationIn: composite.
          file gtInspectorPillarIn: composite.
          file gtInspectorPillarProjectIn: composite.
          file gtInspectorPngIn: composite.
          file gtInspectorGifIn: composite.
          file gtInspectorContentsIn: composite ] ];
     openOn: FileSystem disk workingDirectory

Once we were at it, we added also the PNG preview for good measure. What we get is a browser that looks like this.

Pillar-pager-pillar.png

Pillar-pager-png.png

Essentially, with the above, we have created a scoped GTInspector. However, we are not constrained to wire the presentations in a Pager. We can actually use any other Glamour browser we want. Let’s try another variation in which the file tree is shown to the left and the preview is shown to the right.

GLMTabulator new 
     with: [ :t |
          t title: 'File Browser'.
          t column: #directories; column: #preview.
          t transmit to: #directories; andShow: [ :a :root |
               a tree
                    title: root fullName;
                    display: { root };
                    format: #basename;
                    children: [:each | each isFile ifTrue: [{} ] ifFalse: [each children]]].
          t transmit from: #directories; to: #preview; andShow: [ :a :file |
               file gtInspectorPillarConfigurationIn: a.
               file gtInspectorPillarIn: a.
               file gtInspectorPillarProjectIn: a.
               file gtInspectorPngIn: a.
               file gtInspectorItemsIn: a.
               file gtInspectorContentsIn: a ].
          t transmit from: #preview port: #strongSelection; to: #directories port: #selection ];
     openOn: FileSystem disk workingDirectory

The script produces a browser that looks like in the pictures below. Most of the script is straightforward. In the first column we show the file system tree, and in the second column we show the contents of what is selected. Perhaps less obvious is the line at the very end that connects the strong selection port of the preview with the selection port of the directories. This is a little bonus to make it possible to double click on items displayed to the right and have them selected in the tree.

Tree-pillar-items.png

Tree-pillar-pillar.png

Tree-pillar-png.png

The GTInspector implements the philosophy of a moldable development environment in which tools should be customizable easily and extensively. On the one hand, the GTInspector makes it easy to create and expose multiple presentations for an object. On the other hand, these presentations are not captive in the inspector, but can be used in other contexts as well with little effort.

With the right infrastructure, investing in various custom presentations has more benefits than meets the eye at first sight. The interesting thing is that we can now easily imagine creating rather sophisticated tools with little code and that we only use for a very short time (e.g., minutes). This has a rather high disruption potential given that no other environment I know of allows for something like this.

Posted by Tudor Girba at 14 October 2014, 11:19 pm with tags tooling, moose, pharo, analysis link
|