11.8: Popup View

Last updated
Save as PDF

Page ID: 45938

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Let’s jump back on the abstract class example. The following script indicates abstract classes and how many abstract methods they define:

view shape rectangle
    size: [ :cls | (cls methods select: #isAbstract ) size * 5 ] ;
    if: #hasAbstractMethods fillColor: Color lightRed;
    if: [:cls | cls methods anySatisfy: #isAbstract ] fillColor: Color red.
view nodes: Collection withAllSubclasses.
view edgesFrom: #superclass.
view treeLayout.

The colored, labeled visualization. — Figure \(\PageIndex{1}\): Boxes are classes and links are inheritance relationships. The amount of abstract method is indicated by the size of the class. A red class defines abstract methods and a pink class solely inherits from an abstract methods defined.

Figure \(\PageIndex{1}\) indicates classes that are abstract either by inheritance or by defining abstract methods. Class size indicates the amount of abstract methods defined.

The popup message can be enhanced to list abstract methods. Putting the mouse above a class does not only give its name, but also the list of abstract methods defined in the class. The following piece of code has to be added at the beginning:

view interaction popupText: [ :aClass |
    | stream |
    stream := WriteStream on: String new.
    (aClass methods select: #isAbstract thenCollect: #selector)
        do: [:sel | stream nextPutAll: sel; nextPut: $ ; cr].
    aClass name printString, ' => ', stream contents ].
...

So far, we have seen that an element has a shape to describe its graphical representation. It also contains an interaction that contains event handlers. The message popupText: takes a block as argument. This block is evaluated with the domain object as argument. The block has to return the popup text content. In our case, it is simply a list of the methods.

In addition to a textual content, Mondrian allows a view to be popped up. We will enhance the previous example to illustrate this point. When the mouse enters a node, a new view is defined and displayed next to the node.

view interaction popupView: [ :element :secondView |
    secondView node: element forIt: [
        secondView shape rectangle
            if: #isAbstract fillColor: Color red;
            size: 10.
        secondView nodes: (element methods sortedAs: #isAbstract).
        secondView gridLayout gapSize: 2
    ] ].

view shape rectangle
    size: [ :cls | (cls methods select: #isAbstract ) size * 5 ] ;
    if: #hasAbstractMethods fillColor: Color lightRed;
    if: [:cls | cls methods anySatisfy: #isAbstract ] fillColor: Color red.
view nodes: Collection withAllSubclasses.
view edgesFrom: #superclass.
view treeLayout.

The argument of popupView: is a two argument block. The first parameter of the block is the element represented by the node located below the mouse. The second argument is a new view that will be opened.

In the example, we used sortedAs: to order the nodes representing methods. This method is defined on Collection and belongs to Mondrian. To see example usages of sortedAs:, browse its corresponding unit test.

This last example uses the message node:forIt: in the popup view to define a subview.