de Hondt / Ducasse Building Application with Spec 2.0

1. Auflage 2024
ISBN: 978-2-322-62000-5
Verlag: BoD - Books on Demand
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Englisch, 252 Seiten

Spec is the default UI building framework for Pharo. With Spec, developers focus on user interaction and widget layout. Spec is built around the Model View Presenter pattern. Presenters are responsible for defining the interaction logic of the application. They enforce the interaction of their subelements as well as domain objects. With Spec, existing presenters or even complete UIs are reused and configured to form a new user interface. Spec is widget framework (GTK, Morphic, Toplo) agnostic. It makes desktop applications simple to build. This book shows the basics of Spec in Pharo 12 and how it enables reuse of user interface elements. It focuses on Spec 2.0 features such as new widget layouts, dynamic widget building and more advanced features such as transmissions or commands. The book contains: - Deep explanations of various Spec 2.0 facets. - A tutorial gets you started in less than 20 minutes. - A minimal email client revisiting all Spec 2.0 features.

Spec is the default UI building framework for Pharo. With Spec, developers focus on user interaction and widget layout. Spec is built around the Model View Presenter pattern. Presenters are responsible for defining the interaction logic of the application. They enforce the interaction of their subelements as well as domain objects. With Spec, existing presenters or even complete UIs are reused and configured to form a new user interface. Spec is widget framework (GTK, Morphic, Toplo) agnostic. It makes desktop applications simple to build. This book shows the basics of Spec in Pharo 12 and how it enables reuse of user interface elements. It focuses on Spec 2.0 features such as new widget layouts, dynamic widget building and more advanced features such as transmissions or commands. The book contains: - Deep explanations of various Spec 2.0 facets. - A tutorial gets you started in less than 20 minutes. - A minimal email client revisiting all Spec 2.0 features.

Autoren/Hrsg.

de Hondt, Koen

Ducasse, Stéphane

Leseproben

CHAPTER 3
Most of Spec in one example
In this chapter, we will guide you through the building of a simple but nontrivial application tomanage films as shown in Figure 3-1. We will show many aspects of Spec that we will revisit in depth in the rest of this book: the application, presenters, the separation between domain and presenter, layout, transmissions to connect widgets, and styles. 3.1 Application
Spec 2.0 introduces the concept of an application. An application is a small object responsible for keeping the state of your application. It manages, for example, the multiple windows that compose your application, and its backend (Morphic or GTK), and can hold properties shared by the presenters. We start with the definition of the example application class: 3.2 A basic film model
Since we will manage films we define an ImdbFilm class as follows. It has a name, a year, and a director. We generate the companion accessors. Figure 3-1 Film app: reusing the same component to edit and browsing a film. We need a way to store and query films. We could use Voyage (https://github.com/pharonosql/voyage) since it works without an external Mongo DB. But we want to keep it extremely simple. So let’s define a singleton. We define a class instance variable called films. We define a method that lazy initializes the films variable to an ordered col- lection. And to finish we define a way to add a film to the list. Now we are ready to define a first presenter that manages a list of films. 3.3 List of films
We define a presenter to manage a list of films by introducing a new class named ImdbFilmListPresenter which inherits from SpPresenter. We add an instance variable named filmList that will hold an elementary list presenter. We define how the information should be presented by defining a method named defaultLayout. We specify a simple vertical box layout with the film-List as the only element. defaultLayout When you do not define any other methods to represent layout, defaultLayout is the method that is invoked by Spec logic. A presenter can have subpresenters. ImdbFilmListPresenter contains a table presenter and you will see later that: a presenter can have multiple layouts layouts can be defined dynamically In Spec, layouts are dynamic by default and are expressed at the instance level. To allow backward compatibility, it is still possible to define a defaultLayout class-side method that returns a layout instead of using a defaultLayout instance-side method, but it is not the recommended way. initializePresenters So far, we have not initialized filmList. The place to initialize the subpresenters is the method initializePresenters as shown below. There we define that filmList is a table with three columns. The message newTable instantiates a SpTablePresenter. The following expression creates an instance of the film list presenter and opens it. You get the window shown in Figure 3-2. Figure 3-2 A layout and a simple initializePresenters showing an empty list of films. 3.4 Filling up the film list
We define the method updatePresenter which is automatically invoked after initializePresenters. It just queries the domain (ImdbFilm) to get the list of the recorded films and populates the internal table. Right now we do not have any film in the singleton so the list of films is empty. If you want, just add a film and reopen the presenter. You should see the film on the list. 3.5 Opening presenters via the application
While directly creating a presenter is possible during development, a more canonical way to create a presenter is to ask the application using the message newPresenter: as follows. The application is responsible for managing windows and other information, therefore it is important to use it to create presenters that compose the application. 3.6 Improving the window
A presenter can be embedded in another presenter as we will show later. It can also be placed within a window and this is what the message open does. Spec offers another hook, the method initializeWindow:, to specialize the information presented when a presenter is displayed within a window. Figure 3-3 Film list presenter with a toolbar and a decorated window. The method initializeWindow: allows you to define a title, a default size (message initialExtent:), and a toolbar. You should obtain the window with a toolbar as shown in Figure 3-3. To make sure that the Add film button does not raise an error, we trigger an addFilm method that is defined with no behavior. In fact, we will define a different presenter to be able to define a film. As we will see in Chapter 18, toolbars can be automatically created out of commands. We could have added the toolbar in that way to the filmList (e.g. using an instance variable) as part of the ImdbFilmListPresenter because the toolbar is also a presenter (similar to the table presenter or other predefined presenters). But doing it that way is less modular. Note also that the toolbar we created could be factored in a separate class to increase reuse too. 3.7 An applicationmanages icons
What we can see from the definition of the method initializeWindow: is that an applicationmanages icons with the message iconNamed:. Indeed, a presenter defines the iconNamed: message as a delegation to its application. In addition, your application can define its own icon set using the message icon-Provider:. 3.8 FilmPresenter
We are ready to define a simple presenter to edit a film. We will use it to add a new film or simply display it. We create a new subclass of SpPresenter named ImdbFilmPresenter. This class has three instance variables: nameText, directorText, and yearNumber. As we did previously, we define a default layout. This time we use a grid layout. With a grid layout, you can choose the position in the grid where your presenters will appear. Note that it is not required to create the accessors for the presenter elements as we were forced to do in Spec 1.0. Here we only create getters because we will need them when creating the corresponding ImbdFilm instance. For convenience, a SpGridLayout also comes with a builder that lets you add elements to the layout in the order they will appear. The previous layout definition can be rewritten as: Pay attention: do not add a yourself message here because you would return the class and not the layout instance. Figure 3-4 A single film presenter. And as before, we define the method initializePresenters to initialize the variables to the corresponding elementary presenters. Here nameText and directorText are initialized to a text input, and yearNumber is a number input. Now we can try our little application with the following script and obtain a window similar to the one shown in Figure 3-4: 3.9 Better looking FilmPresenter
We improve the look of the film presenter by specifying column behavior and setting window properties. As you can see, the form to present Film data has very large labels. Indeed, they take half of the form width. We can solve that by using non-homogenous columns and asking the second column to take the biggest possible width with column:expand:. See Figure 3-5. Figure 3-5 Using a non-homogenous grid layout. Now we set the window properties by adding the following new initializeWindow: method. We get the situation shown in Figure 3-6. Figure 3-6 Better window. 3.10 Opening FilmPresenter in a modal dialog
Instead of opening the film presenter in a separate window, we like to open it in a modal dialog window. The modal dialog blocks the user interface until the user confirms or cancels the dialog. Amodal dialog has no window decorations and it cannot be moved. While a window can be opened by sending open to an instance of a presenter class, a dialog can be opened by sending openModal. Figure 3-7 Amodal dialog. Figure 3-7 shows the result. Note that there are no UI components to close the dialog. Press the ”Esc” key on the keyboard to close it. 3.11 Customizing the modal dialog
Spec lets us adapt the dialog window, for example, to add interaction buttons. We specialize the method initializeDialogWindow: to add two buttons that control the behavior of the application, as shown in Figure 3-8. We also center the dialog on screen by sending centered to the dialog presenter. Figure 3-8 Customizing the dialog window. 3.12 Invoking a presenter
We are ready to use the film presenter fromwithin the film list presenter. We define the method addFilm in the class ImdbFilmListPresenter. When the user clicks on the button, we create a new film presenter that we associate with the current application. We open the film presenter as a modal...