9.1: Installation and First Browser

Last updated
Save as PDF

Page ID: 43708

\( \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}}\)

To install Glamour on your Pharo image execute the following code:

Gofer new
    smalltalkhubUser: 'Moose' project: 'Glamour';
    package: 'ConfigurationOfGlamour';
    load.
(Smalltalk at: #ConfigurationOfGlamour) perform: #loadDefault.

Now that Glamour is installed, we are ready to build our first browser by using Glamour’s declarative language. What about building an Apple’s Finder-like file browser? This browser is built using the Miller Columns browsing technique, displaying hierarchical elements in a series of columns. The principle of this browser is that a column always reflects the content of the element selected in the previous column, the first column-content being chosen on opening.

File finder implemented with Glamour. — Figure \(\PageIndex{1}\): File finder as a Glamour implementation.

In our case of navigating through the file systems, the browser displays a list of a particular directory’s entries (each file and directory) in the first column and then, depending on the user selection, appending another column (see Figure \(\PageIndex{1}\)):

if the user selects a directory, the next column will display the entries of that particular directory;
if the user selects a file, the next column will display the content of the file.

This may look complex at first because of the recursion. However, Glamour provides an intuitive way of describing Miller Columns-based browsers. According to the Glamour’s terminology this particular browser is called finder, referring to the Apple’s Finder found on Mac OS X. Glamour offers this behavior with the class GLMFinder. This class has to be instantiated and initialized to properly list our domain of interest, the files:

| browser |
browser := GLMFinder new.
browser show: [:a |
    a list 
    display: #children ].
browser openOn: FileSystem disk root.

Note that at that stage selecting a plain file raises an error. We will understand why and how to fix that situation soon.

From this small piece of code you get a list of all entries (either files or directories) found at the root of your file system, each line representing either a file or a directory. If you click on a directory, you can see the entries of this directory in the next column. The filesystem navigation facilities are provided by the Filesystem framework, thoroughly discussed in Chapter 3.

This code has some problems however. Each line displays the full print string of the entry and this is probably not what you want. A typical user would expect only names of each entry. This can easily be done by customizing the list:

browser show: [:a |
    a list
        display: #children;
        format: #basename ].

This way, the message basename will be sent to each entry to get its name. This makes the files and directores much easier to read by showing the file name instead of its fullname.

Another problem is that the code does not distinguish between files and directories. If you click on a file, you will get an error because the browser will send it the message children that it does not understand. To fix that, we just have to avoid displaying a list of contained entries if the selected element is a file:

browser show: [:a |
    a list
        when: #isDirectory;
        display: #children;
        format: #basename ].

This works well but the user can not distinguish between a line representing a file or a directory. This can be fixed by, for example, adding a slash at the end of the file name if it is a directory:

browser show: [:a |
    a list
        when: #isDirectory;
        display: #children;
        format: #basenameWithIndicator ].

The last thing we might want to do is to display the contents of the entry if it is a file. The following gives the final version of the file browser:

| browser |
browser := GLMFinder new
    variableSizePanes;
    title: 'Find your file';
    yourself.

browser show: [:a |
    a list
        when: #isDirectory;
        display: [:each | [each children ]
                    on: Exception
                    do: [Array new]];
        format: #basenameWithIndicator.
    a text
        when: #isFile;
        display: [:entry | [entry readStream contents]
                on: Exception
                do:['Can''t display the content of this file'] ] ].

browser openOn: FileSystem disk root.

This code extends the previous one with variable-sized panes, a title as well as directory entry, access permission handling and file content reading. The resulting browser is presented in Figure \(\PageIndex{1}\).

This short introduction has just presented how to install Glamour and how to use it to create a simple file browser.