Merge pull request #11 from Enzo-Demeulenaere/patch-1

Correcting/adding skins doc

Chapters/toplo/skinningAWidget.md

@@ -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')
@@ -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. 
@@ -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.
 
 ```
@@ -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>
@@ -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'
@@ -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
@@ -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
+
 ```
 
 ```
@@ -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.
@@ -225,14 +280,18 @@ ToNumberInputElement class >> openInputWithSkin
 ```
 
 ```
+
+BlElement >> newMooflooSkin
 BlElement >> newNewThemeSkin
 
 	^ ToBasicMooflooSkin new
 ```
 
 ```
+ToNumberInputElement >> newMooflooSkin
 ToNumberInputElement >> newNewThemeSkin
 
+
 	^ ToInputElementSkin new
 ```