Skip to content

Commit

Permalink
Merge pull request #93 from Ducasse/master
Browse files Browse the repository at this point in the history
Last check before freezing chapter 5
  • Loading branch information
Ducasse committed Apr 28, 2024
2 parents 884f951 + 635e5e9 commit 974e5c0
Show file tree
Hide file tree
Showing 7 changed files with 17 additions and 15 deletions.
10 changes: 4 additions & 6 deletions Chapters/FirstContact/FirstContact.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

We will construct a small but complete user interface. This will allow you to build basic user interfaces.

After completing this chapter you should read Chapter *@cha_reuse@* about reuse of Spec presenters, which is the key behind the power of Spec. With these two chapters, you should be able to construct Spec user interfaces as intended. You could use the rest of this book just as reference material, but nonetheless we recommend you to at least give a brief look at the other chapters as well.
After completing this chapter you should read Chapter *@cha_reuse@* about the reuse of Spec presenters, which is the key behind the power of Spec. With these two chapters, you should be able to construct Spec user interfaces as intended. You could use the rest of this book just as reference material, but nonetheless, we recommend you to at least give a brief look at the other chapters as well.

### A customer satisfaction UI
@seccustomersatisfaction
Expand Down Expand Up @@ -47,7 +47,7 @@ CustomerSatisfactionPresenter >> initializePresenters
```


`SpPresenter` defines messages for the creation of standard presenters: `newButton`, `newCheckBox`, `newDropList`, … All of these are defined in the `scripting - widgets` protocol of the `#SpTPresenterBuilder` trait. They are shortcuts to create presenters.
`SpPresenter` defines messages for the creation of standard presenters: `newButton`, `newCheckBox`, `newDropList`, … All of these are defined in the `scripting - widgets` protocol of the `SpTPresenterBuilder` trait. They are shortcuts to create presenters.

The following method shows how `newButton` is defined.

Expand All @@ -60,7 +60,7 @@ SpPresenter >> newButton

Note that the naming may be a bit confusing since we write `newButton` while it will create a button _presenter_ and not a button _widget_, which Spec will take care by itself. Spec provides `newButton` because it is easier to use than `newButtonPresenter`.

**Do not** call `new` to instantiate a presenter that is part of your UI. An alternative way to instantiate presenters is to use the message `instantiate:` with a presenter class as argument. For example `result := self instantiate: SpLabelPresenter`. This allows one to instantiate standard and non-standard presenters.
**Do not** call `new` to instantiate a presenter that is part of your UI. An alternative way to instantiate presenters is to use the message `instantiate:` with a presenter class as an argument. For example `result := self instantiate: SpLabelPresenter`. This allows one to instantiate standard and non-standard presenters.

#### Presenter configuration

Expand All @@ -82,9 +82,7 @@ CustomerSatisfactionPresenter >> initializePresenters
icon: (self iconNamed: #thumbsDown)
```

`SpPresenter>>#iconNamed:` uses an icon provider to fetch the icon with the given name. You can browse the Spec icon provider by looking at `SpPharoThemeIconProvider`, which is a subclass of `SpIconProvider`. Each application is able to define its own icon provider by defining a subclass of `SpIconProvider`.


The method `iconNamed:` of `SpPresenter` uses an icon provider to fetch the icon with the given name. You can browse the Spec icon provider by looking at `SpPharoThemeIconProvider`, which is a subclass of `SpIconProvider`. Each application is able to define its own icon provider by defining a subclass of `SpIconProvider`.

#### Presenter interaction logic

Expand Down
20 changes: 11 additions & 9 deletions Chapters/InANutshell/InANutshell.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@cha_core


Spec is Pharo's user interface framework. It provides the building blocks for constructing UIs, from simple windows to complex tools like browsers and debuggers. With Spec, developers can capture the layout and the interactions between the elements that compose a UI. For example, clicking on an item list on the left will display detailed information about the selected item on the right.
Spec is Pharo's user interface framework. It provides the building blocks for constructing UIs, from simple windows to complex tools like browsers and debuggers. With Spec, developers can capture the layout and the interactions between the elements that compose a UI. For example, a developer can express that a tool has two components: a list on the left and a component displaying information on the right. Clicking on an item in the list will display detailed information about the selected item. In addition, Spec supports the reuse of the UI interaction logic.

Spec is the foundation of most tools in Pharo, such as the inspector, Spotter, the Pharo debugger, Iceberg, etc. In this short chapter, we place the key architectural elements of Spec in context.

### Spec architecture overview
Expand All @@ -11,7 +12,7 @@ Figure *@coreextended@* presents the general architecture of Spec. Basically, Sp

A Presenter represents the UI element logic and it is also the connection with the domain. The Application is also a place to be in contact with domain objects but generally, it handles application-specific resources (icons, windows,…).

Based on presenters and layouts, Spec builds the actual UI. Internally, it uses adapters that are specific to each widget and per backend. This way presenters are totally agnostic about backends and are reusable across them.
Based on presenters and layouts, Spec builds the actual UI. Internally, it uses adapters that are specific to each widget and per backend. This way presenters are agnostic about backends and are reusable across them.


![Architecture of Spec.](figures/coreExtended.pdf label=coreextended&width=80)
Expand Down Expand Up @@ -55,11 +56,11 @@ You can use `openWithLayout:` or `openDialogWithLayout:` to open the presenter w

### Application

A spec application (an instance of the `SpApplication` class hierachy) handles your application initialization, configuration, and resources. `SpApplication` is not a presenter because it does not have a graphical representation. An `SpApplication` defines your application (keeping the backend, theme, icons, and other graphical resources), and keeps the opened windows that belong to the application, but it is not shown itself.
A Spec application (an instance of the `SpApplication` class hierarchy) handles your application initialization, configuration, and resources. `SpApplication` is not a presenter because it does not have a graphical representation. An instance of `SpApplication` defines your application (keeping the backend, theme, icons, and other graphical resources), and keeps the opened windows that belong to the application, but it is not shown itself.

A Spec application also provides a way to access windows or resources like icons, and provides abstractions for interactions with the user (inform, error, file, or directory selection).
A Spec application also provides a way to access windows or resources such as icons, and provides abstractions for interactions with the user (inform, error, file, or directory selection).

An application also provides the style used by Spec to style UI elements. A default style is available but you can customize it as shown in Chapter *@cha_style@*.
Finally, an application provides the style used by Spec to style UI elements. A default style is available, but you can customize it as shown in Chapter *@cha_style@*.

You should also define a method to tell what is the main window / presenter to use when running the application.
Here we specialize the method `start` as follows:
Expand All @@ -76,6 +77,7 @@ You can run your application with `MyApplication new run`. It will call the `sta
### Application configuration

In the application initialization, you can configure the backend you want to use: Morphic (default) or GTK.
In the future, Spec will also support Toplo, a new widget library built on top of Bloc. It will replace Morphic.

##### Using Morphic

Expand Down Expand Up @@ -152,7 +154,7 @@ To display its elements, a presenter uses a layout. A layout describes how eleme
- **BoxLayout**: a `SpBoxLayout` arranges presenters in a box, vertically (top to bottom) or horizontally \(left to right\).
- **PanedLayout**: a `SpPanedLayout` is a layout with two elements called "panes" and a splitter in between. The user can drag the splitter to resize the panes.
- **TabLayout**: a `SpTabLayout` shows all its elements as tabs. You can select a tab to display the content.
- **MillerLayout**: a layout to implement miller columns ([https://en.wikipedia.org/wiki/Miller\_columns](https://en.wikipedia.org/wiki/Miller_columns)), also known as cascading lists.
- **MillerLayout**: a layout to implement miller columns, also known as cascading lists ([https://en.wikipedia.org/wiki/Miller\_columns](https://en.wikipedia.org/wiki/Miller_columns)).

Any layout in Spec is dynamic and composable. In general, a layout is defined at the presenter instance level, but it can be defined on the class side.

Expand Down Expand Up @@ -232,9 +234,9 @@ messageList
whenSelectionChangedDo: [ :selection |
messageDetail model: selection selectedItem ];
whenModelChangedDo: [ self updateTitle ].
textModel whenSubmitDo: [ :text | self accept: text ].
addButton action: [ self addDirectory ].
filterInput whenTextChangedDo: [ :text | self refreshTable ].
textModel whenSubmitDo: [ :text | self accept: text ].
addButton action: [ self addDirectory ].
filterInput whenTextChangedDo: [ :text | self refreshTable ].
```

### Conclusion
Expand Down
Binary file modified Chapters/InANutshell/figures/core.graffle
Binary file not shown.
Binary file modified Chapters/InANutshell/figures/core.pdf
Binary file not shown.
Binary file modified Chapters/InANutshell/figures/coreExtended.graffle
Binary file not shown.
Binary file modified Chapters/InANutshell/figures/coreExtended.pdf
Binary file not shown.
2 changes: 2 additions & 0 deletions guidelines.txt
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,7 @@ Here are some guidelines about writing style and spelling that resulted from dis
* Use sentence case for headers, e.g. "Editable tables", not "Editable Tables".
* Use sentence case for chapter titles, e.g. "Testing Spec applications", not "Testing Spec Applications".
* Start a note with "**Note.**".
* I love musicians such as Metallica (it means that I do), I love musicians like Metallica (it does not mean I like Metallica).
* For method `SpPresenter>>methodName` and not `SpPresenter>>#methodName`
* Do not write a space before a colon, e.g. "the following code:", not "the following code :". In French one would write the space, but not in English.
* Use tabs to indent code.

0 comments on commit 974e5c0

Please sign in to comment.