Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correcting/adding skins doc #11

Merged
merged 2 commits into from
Aug 22, 2024
Merged

Correcting/adding skins doc #11

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea2be71
Update skinningAWidget.md
Enzo-Demeulenaere Jul 19, 2024
57176a8
Merge branch 'main' into patch-1
Ducasse Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 62 additions & 3 deletions Chapters/toplo/skinningAWidget.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,32 @@ ToElement << #ToNumberInputElement
package: 'Bloc-Book'
```

[E] Our widget will then inherit the behavior to install a skin when instantiated, we can now define a skin

### Define a skin

We define a skin
We define a skin
[E] by inheriting from `ToRawSkin`, this class defines methods reacting to some events.
In fact, skins in Toplo are EventHandlers we simply add to our elements, changing their visual properties according to incoming events

```
ToRawSkin << #ToInputElementSkin
package: 'Bloc-Book'
```


[E] These methods **need** to call themselves on `super` before declaring other behaviors (I might need to check this info with Alain)
We will now define the actions that should be done when the skin is installed.
Here for example we can change the border, background color and more.
Note that we can access the theme token properties using the message `valueOfTokenNamed:` or decide that
can simply use values specific to this skin.


```
ToInputElementSkin >> installLookEvent: anEvent
ToInputElementSkin >> installSkinEvent: anEvent
"when installing the skin, changes the properties of widget mentionned down here"

super installLookEvent: anEvent.
super installSkinEvent: anEvent.
anEvent elementDo: [ :e |
e border: (BlBorder
paint: (e valueOfTokenNamed: #'color-border')
Expand All @@ -56,6 +63,9 @@ ToInputElementSkin >> installLookEvent: anEvent
e minus background: Color red ]
```

[E] Here we redefine the background of the element and its 'plus' and 'minus' sub-elements, but we also define a border to our element using tokens from our theme.
We accessed our element through the event received, this can be done in both following ways


##### Remark
Notice that the two following forms are equivalent.
Expand All @@ -69,17 +79,26 @@ target := anEvent currentTarget.
target border: target valueOfTokenNamed: #'color-border-checkable’)
```


[E] Now that we defined our skin, we only need to tell our element to install this skins during initialization
In the `ToNumberInputElement` we define the method

### Declaring the skin

The last step is to declare the skin to be used by the element.
To do so we define the method `newRawSkin` in the class `ToNumberInputElement`.


```
ToNumberInputElement >> newRawSkin

^ ToInputElementSkin new
```


[E] This `newRawSkin` method is the one called by default by a ToElement to get the skin to install, here we simply gave it our brand new skin

[E] (I'm not sure to understand what has been updated in the initialize method below, I don't see the relevant information here)
Update the following instance method.

```
Expand All @@ -101,6 +120,13 @@ ToNumberInputElement >> initialize

We can now open


[E] We can also decorate a BlElement by applying the `TToElement` trait

```
BlNumberInputElement << #ToNumberInputElement
traits: {TToElement}

ToNumberInputElement class >> openInputWithSkin

<script>
Expand All @@ -114,10 +140,13 @@ ToNumberInputElement class >> openInputWithSkin
```


[E] This way, some methods in the API of `ToElement` are not called and we need to define the following behaviors to install skins on this element

### Define a theme that extends an existing one

Here we show that we can refine an existing theme.


```
ToRawTheme << #ToNewTheme
package: 'Bloc-Book'
Expand Down Expand Up @@ -185,6 +214,18 @@ ToNumberInputElement >> onAddedToSceneGraph



```
ToNumberInputElement class >> openInputWithSkin

<script>
| space anInput |
space := BlSpace new.
space toTheme: ToInputElementTheme new.
anInput := self new position: 200 @ 200.
space root addChild: anInput.
space show.
^ anInput
```


### Autonome theme
Expand All @@ -198,17 +239,30 @@ We will
#### Defining a new theme

```

ToTheme << #ToMooflooTheme
slots: {};
tag: 'Input';
package: 'myBecherBloc'

ToTheme << #ToNewTheme
tag: 'Input';
package: 'Bloc-Book'

```



```

ToMooflooThemenewSkinInstanceFor: anElement

^ anElement newMooflooSkin

ToNewTheme >> newSkinInstanceFor: anElement

^ anElement newNewThemeSkin

```

```
Expand All @@ -217,6 +271,7 @@ ToNumberInputElement class >> openInputWithSkin
<script>
| space anInput |
space := BlSpace new.
space toTheme: ToMooflooTheme new.
space toTheme: ToNewTheme new.
anInput := self new position: 200 @ 200.
space root addChild: anInput.
Expand All @@ -225,14 +280,18 @@ ToNumberInputElement class >> openInputWithSkin
```

```

BlElement >> newMooflooSkin
BlElement >> newNewThemeSkin

^ ToBasicMooflooSkin new
```

```
ToNumberInputElement >> newMooflooSkin
ToNumberInputElement >> newNewThemeSkin


^ ToInputElementSkin new
```

Expand Down
Loading