Quick skim of Pharo Spec UI book

Notes based on The Spec UI framework

Skim reading notes

Small but complete interfaces

Customer satisfaction UI

Allows user to give feedback by clicking on one of three buttons: 'Happy', 'neutral' and 'bad' with little icons in each button.

• Create class of UI and variable accessors
• instantiate and configure subwidgets (ui elements).
• Define a title and window size, open and close the UI

Fun with lists

A list using different background colors and a list that also shows icons.

• Registered colors as item background
• Lists of icons

Ideas

• What can I do to customise these?
• Can I combine both programs into one user interface?

Chapter conclusion

• What are the different steps to building a user interface?
• How to configure existing spec widgets
• All ui are subclasses of ComposableModel - bigger ui can be built of sub uis, and all uis can be opened as stand alone widgets.
• Widget reuse is key superpower behind Spec.

Reusing and composing elements

Widgets are all reusable, this gives significant productivity boost when creating user interfaces.

This chapter shows us how to build new ui using existing ui elements.

First requirements

• Creating a basic UI to be reused as a widget
• Combining two basic widgets into a reusable UI
• Managing three widgets and their interactions
• Changing the layout of a reused widget
• considerations about a public configuration API

The only thing that needs to be taken into account is how a UI can (or should) be customised, and public customization methods should be placed in a api protocol.

Fundamentals of Spec

• User interface building: a composition
• The initializeWidgets method
• Widget instantiation
• Defining UI layouts
• Having multiple layouts for a widget
• specifying a layout when reusing a widget
• The initializePresenter method

There are three fundamental methods of Spec: initializeWidgets, defaultSpec and initializePresenter, which are each responsible for a different aspect of the user interface building process.

Layout Constructions

• Row and column layouts
• Combining rows and columns
• Setting row and column size
• Proportional layout (responsive)
• layouts without rows or columns
• Absolute widget positions
• Relative widget positions
• Relative with offsets

If your user interface has more than one widget, you will need to use one of these strategies. The book covers two broad layout strategies: row and column-based, and absolute and relative layouts (plus a combination).

Ideas

• Find out the advantages and disadvantages of each of these layout strategies (they should be mentioned in the book.
• What is possible styling-wise. Is the UI as free as CSS?

Managing Windows

• Opening a window or a dialog box
• Modal windows and the closing of windows
• Window size and decoration
• Title, icon and about text

Small but important details of the window, it's title, icon and about text.

Advanced Widgets

Some interface elements provide more advanced functionalities, like text input widgets, radio buttons and tabs, toolbars and pop-up menus

• Text model
• Non-editable text field
• Remove yello triangle, perform an action at each edit
• keyboard shortcuts
• Single-line input field extras
• RadioButtonModel
• TabModel
• Toolbars and Pop-up Menus

In some examples, author used dynamic spec, discussed in next chapter

Dynamic Spec

There are some cases where user interfaces need to be more dynamic.

• A file dialogue can have a preview area for the currently selected file. When the file is text, its content is shown in a text field. When it is an image, the image is shown etc.
• Visualising collections of data where we cannot determine at development time how data items will be shown.
• A genealogy application clicking on a parent reveals information on all of the children, each child being presented using a complex, editable widget.

• Dynamically changing an already opened UI
• Changing the UI layout
• Replacing a widget with another one
• Dynamically populating a UI with widgets
• Implementing the widget for showing array contents
• Hacking together a UI in the playground - This one caught my interest a lot.

Discussed dynamic features of spec like changing the layout and content on the fly, determining the UIs widget at opening time. Ended with allowing the complete construction of a UI in one big block of code.

Tips and tricks

Small interesting features that are useful for building user interfaces with Spec.

Integrating different UI frameworks

• Include a Morph in a Spec UI - example given is code that turns CalendarMorph into a plane Spec UI
• Include a Glamour UI in a Spec UI
• Make a Spec presentation for the GT Inspector

Lists, trees and tables

• A scrollable list of widgets
• List items do not update automatically
• Setting the selection in a tree
• Show a table-like view

Using the underlying widget library

• Customising the appearance of the widget
• Get called at periodic intervals

Testing the functionality of a Spec Ui

By programmatically simulating button clicks, without having to open the UI at all.

Best practice is to create an API for testing that exposes the internals that are required to be able to write UI tests.

Final thoughts

Question: Does user have to open Pharo, or be familiar with Pharo to use the programs that have been built in it? How can I set up a project on a non-tech person's computer?

Build a rover project that incorporates all of the widgets discussed in this book.

Let rover be moved with keyboard shortcuts

Rover choose your own adventure game, let him explore obects that are on the screen