Finish chapter "Styling applications"

[koendehondt]

Open issues from https://github.com/SquareBracketAssociates/BuildingApplicationWithSpec2/pull/60:

• [ ] The chapter mentions themes, but it does not explain what themes are, how they are applied, and more importantly, how stylesheets relate to themes.
• [ ] I think it should be stated clearly that some aspects of the UI cannot be styled with stylesheets, e.g. the colour of a selected element in a list or a table, the text selection colour, the caret colour, and the colour of the placeholder in a text field (this is a non-exhaustive list).
• [ ] Are the two stylesheet examples in section 14.3 "STON notation" useful? I do not think so. It is good to give some idea about what is possible, but two pages of stylesheets is too much.
• [ ] Section 14.3 "STON notation" associates stonNames with SpStyle subclasses, but the classes are introduced in the next section ("Anatomy of a style"). I think that both sections have to be rewritten to avoid forward references and to make the text easier to understand. There are still some questions in the sections that indicate this. "Anatomy of a style" should do just that: what is the syntax of a style? I would not mix it with code. The anatomy of a style is part of the STON notation. How the stonNames are mapped on classes should move to a separate (new) section.
• [ ] As stated clearly in chapter 3 ("Most of Spec in one example"), "Defining a style class, however, works differently for each backend. While Gtk accepts (mostly) regular CSS to style your widgets, Morphic has its own sub-framework." I think this is a major issue because one of the core principles of Spec is reusability. That core principle breaks in the stylesheets. Chapter 14 does not give any examples of GTK stylesheets, which is a gap in the book. I am not advocating that it should be included, but stating that Morphic is the main focus is probably better than not saying anything about GTK.
• [ ] It would be good to mention where to find the default stylesheet (SpStyle class>>#defaultStyleSheetData), but as flagged in SpStyle class>>#defaultStyleSheet, the default stylesheet should reside in the Pharo application, not in SpStyle class.

Other:

• [ ] Check all code examples and images
• [ ] Use screenshots in Pharo Light theme.

[koendehondt]

@Ducasse Please try something for me.

The section "How do styles work?" states that the button would scale when using a stylesheet instead of using #add:withConstraints:.

But, if you change the size of the fonts of the Pharo image using Settings/Ap- pearance/Standard Fonts/Huge, using fixed constraints, you will obtain the following result shown in Figure 14-3. You will for example not be able to see the icons because the size is not recomputed correctly. When using styles, the size of the button will also scale as shown in Figure 14-4.

I cannot reproduce that. I see no scaling of the button when using a stylesheet. Here is the code that I used, which is not part of the book (and maybe it should).

With #add:withConstraints:

presenter := SpPresenter new.
presenter
    layout: (SpBoxLayout newLeftToRight
        vAlignCenter;
        hAlignCenter;
        add: (presenter newButton icon: (presenter iconNamed: #smallLoadProject)) withConstraints: [ :constraints | constraints height: 20; width: 20 ];
        yourself);
    open

With stylesheet

application := SpApplication new.
application addStyleSheetFromString: '.application [
    .button [ Geometry { #height: 20, #width: 20 } ]
]'.
presenter := SpPresenter newApplication: application.
button := presenter newButton icon: (presenter iconNamed: #smallLoadProject).
button addStyle: 'button'.
presenter
    layout: (SpBoxLayout newLeftToRight
        vAlignCenter;
        hAlignCenter;
        add: button expand: false;
        yourself);
    open

[Ducasse]

So in that case we should remove this from the book