diff --git a/Chapters/gettingStarted/buildingAWidget.md b/Chapters/gettingStarted/buildingAWidget.md index 45ba8e5..10a083f 100644 --- a/Chapters/gettingStarted/buildingAWidget.md +++ b/Chapters/gettingStarted/buildingAWidget.md @@ -41,7 +41,7 @@ We start by defining the shape of the main element. Notice that visual propertie ``` -BlIntegerInputElement >> inputExtent +BlIntegerInputElement >> widgetExtent ^ 300@120 ``` @@ -57,7 +57,7 @@ BlIntegerInputElement >> backgroundPaint BlIntegerInputElement >> initialize super initialize. - self size: self inputExtent. + self size: self widgetExtent. self background: self backgroundPaint. self geometry: (BlRoundedRectangleGeometry cornerRadius: 20). self layout: BlFrameLayout new. @@ -88,8 +88,9 @@ BlIntegerInputElement >> label: aString inputLabel := BlTextElement new. inputLabel text: (self configuredString: aString). inputLabel text fontSize: 25. - inputLabel constraintsDo: [ :c | c frame horizontal alignCenter ]. - inputLabel transformDo: [ :t | t translateBy: 0 @ 10 ]. + inputLabel constraintsDo: [ :c | + c frame horizontal alignCenter. + c margin: (BlInsets all: 10) ]. self addChild: inputLabel ``` @@ -102,7 +103,7 @@ We modify the initialize method to invoke the `label` method. BlIntegerInputElement >> initialize super initialize. - self size: self inputExtent. + self size: self widgetExtent. self background: self backgroundPaint. self geometry: (BlRoundedRectangleGeometry cornerRadius: 20). self layout: BlFrameLayout new. @@ -146,7 +147,7 @@ Then we change the `initialize` method to invoke `initializeInputValue:`. BlIntegerInputElement >> initialize super initialize. - self size: self inputExtent. + self size: self widgetExtent. self background: self backgroundPaint. self geometry: (BlRoundedRectangleGeometry cornerRadius: 20). self layout: BlFrameLayout new. @@ -194,23 +195,23 @@ We create a new text element and place it inside the circle and then add the cir ``` BlIntegerInputElement >> initializePlusButton - | circle | - circle := self createCircle. - circle constraintsDo: [ :c | + | textElt | + plus := self createCircle. + plus constraintsDo: [ :c | c frame horizontal alignRight. c frame vertical alignCenter ]. - circle transformDo: [ :t | t translateBy: -15 @ 0 ]. + plus transformDo: [ :t | t translateBy: -15 @ 0 ]. - plus := BlTextElement new text: (self configuredString: '+'). - plus text fontSize: 55. - plus constraintsDo: [ :c | + textElt := BlTextElement new text: (self configuredString: '+'). + textElt text fontSize: 55. + textElt constraintsDo: [ :c | c frame horizontal alignCenter. c frame vertical alignCenter ]. - circle + plus addEventHandlerOn: BlMouseDownEvent do: [ :e | self increaseInput ]. - circle addChild: plus. - self addChild: circle. + plus addChild: textElt. + self addChild: plus. ``` Note that in addition, we use the message `addEventHandlerOn:do:` to configure @@ -220,7 +221,7 @@ the circle element to react to mouse-down events. BlIntegerInputElement >> initialize super initialize. - self size: self inputExtent. + self size: self widgetExtent. self background: self backgroundPaint. self geometry: (BlRoundedRectangleGeometry cornerRadius: 20). self layout: BlFrameLayout new. @@ -252,24 +253,24 @@ Here we adjusted the size of the minus character so that it has a similar shape ``` BlIntegerInputElement >> initializeMinusButton - | circle | - circle := self createCircle. - circle constraintsDo: [ :c | + | textElt | + minus := self createCircle. + minus constraintsDo: [ :c | c frame horizontal alignLeft. - c frame vertical alignCenter ]. - circle transformDo: [ :t | t translateBy: 15 @ 0 ]. + c frame vertical alignCenter. + c margin: (BlInsets all: 10) ]. - minus := BlTextElement new text: (self configuredString: '-'). - minus text fontSize: 80. - minus constraintsDo: [ :c | + textElt := BlTextElement new text: (self configuredString: '-'). + textElt text fontSize: 80. + textElt constraintsDo: [ :c | c frame horizontal alignCenter. c frame vertical alignCenter ]. - circle + minus addEventHandlerOn: BlMouseDownEvent do: [ :e | self decreaseInput ]. - circle addChild: minus. - self addChild: circle. + minus addChild: textElt. + self addChild: minus. ``` FInally we update the initialize method to call the minus creation. @@ -277,7 +278,7 @@ FInally we update the initialize method to call the minus creation. BlIntegerInputElement >> initialize super initialize. - self size: self inputExtent. + self size: self widgetExtent. self background: self backgroundPaint. self geometry: (BlRoundedRectangleGeometry cornerRadius: 20). self layout: BlFrameLayout new. diff --git a/Chapters/toplo/figures/inputWithSkin.png b/Chapters/toplo/figures/inputWithSkin.png new file mode 100644 index 0000000..748687d Binary files /dev/null and b/Chapters/toplo/figures/inputWithSkin.png differ diff --git a/Chapters/toplo/figures/inputWithTheme.png b/Chapters/toplo/figures/inputWithTheme.png new file mode 100644 index 0000000..7a7840f Binary files /dev/null and b/Chapters/toplo/figures/inputWithTheme.png differ diff --git a/Chapters/toplo/skinningAWidget.md b/Chapters/toplo/skinningAWidget.md index 9156a14..980b90f 100644 --- a/Chapters/toplo/skinningAWidget.md +++ b/Chapters/toplo/skinningAWidget.md @@ -15,24 +15,24 @@ Remember that we want to create a widget as shown in Figure *@inputFinalSkin@*. ### Getting started -If you implemented the widget as presented earlier, just copy the class giving it a new name for example `ToNumberInputElement`. -The definition of the `BlNumberInputElement` is available SD:DefineAPlace. +If you implemented the widget as presented earlier, just copy the class giving it a new name for example `ToIntegerInputElement`. +The definition of the `BlIntegerInputElement` is available SD:DefineAPlace. -The first thing that we should do is to make `ToNumberInputElement` inherit from `ToElement` as follows: +The first thing that we should do is to make `ToIntegerInputElement` inherit from `ToElement` as follows: ``` -ToElement << #ToNumberInputElement +ToElement << #ToIntegerInputElement slots: { #plus . #minus . #inputValue . #value . #inputLabel }; tag: 'Input'; package: 'Bloc-Book' ``` -[E] Our widget will then inherit the behavior to install a skin when instantiated, we can now define a skin +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 -[E] by inheriting from `ToRawSkin`, this class defines methods reacting to some events. +We define a skin by inheriting from `ToRawSkin`, this class defines methods reacting to some events. +The class `ToRawSkin` is th default skin class when using the `ToRawTheme` which is the default theme but themes are detailed later. In fact, skins in Toplo are EventHandlers we simply add to our elements, changing their visual properties according to incoming events ``` @@ -41,7 +41,7 @@ ToRawSkin << #ToInputElementSkin ``` -[E] These methods **need** to call themselves on `super` before declaring other behaviors (I might need to check this info with Alain) +These methods **need** to call themselves on `super` before declaring other behaviors 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 @@ -54,16 +54,34 @@ ToInputElementSkin >> installSkinEvent: anEvent super installSkinEvent: anEvent. anEvent elementDo: [ :e | - e border: (BlBorder - paint: (e valueOfTokenNamed: #'color-border') - width: (e valueOfTokenNamed: #'line-width')). - e background: Color red. + e size: 200 @ 100. + e border: (BlBorder + paint: Color black + width: 3). + e background: Color blue. e geometry: (BlRoundedRectangleGeometry cornerRadius: 20). - e plus background: Color blue. - e minus background: Color red ] + e plus background: Color brown. + e plus border: (BlBorder + paint: (e valueOfTokenNamed: #'color-border') + width: (e valueOfTokenNamed: #'line-width')). + e minus background: Color brown. + e minus border: (BlBorder + paint: (e valueOfTokenNamed: #'color-border') + width: (e valueOfTokenNamed: #'line-width')).]. ``` -[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 also need to add the accessors of 'plus' and 'minus' elements. + +``` +ToIntegerInputElement >> plus + ^ plus +``` +``` +ToIntegerInputElement >> minus + ^ minus +``` + +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 @@ -74,13 +92,14 @@ This is important if you want to maximize ``` anEvent elementDo: [ :e | e border: (e valueOfTokenNamed: #'color-border-checkable’). - +``` +``` 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 +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 @@ -90,103 +109,98 @@ To do so we define the method `newRawSkin` in the class `ToNumberInputElement`. ``` -ToNumberInputElement >> newRawSkin +ToIntegerInputElement >> 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 +This `newRawSkin` method is the one called by default by the `ToRawTheme` on 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. +Update the `initialize` method in which we can now remove graphical properties definition. +In fact, we could leave the graphical properties definition because they are overriden either way when the skin is installed but removing them clears the code and helps the readability. ``` -ToNumberInputElement >> initialize +ToIntegerInputElement >> initialize super initialize. - self constraintsDo: [ :c | - c vertical fitContent. - c horizontal fitContent ]. - self padding: (BlInsets all: 30). - self layout: BlLinearLayout horizontal. - self border: (BlBorder paint: Color pink). - self validateValueBlock: [ :v | v between: 1 and: 25 ]. - self label: 'Input'. + self layout: BlFrameLayout new. + self initializePlusButton. self initializeMinusButton. self initializeInputValue: 20. - self initializePlusButton -``` - -We can now open - - -[E] We can also decorate a BlElement by applying the `TToElement` trait - + self label: 'Input'. ``` -BlNumberInputElement << #ToNumberInputElement - traits: {TToElement} -ToNumberInputElement class >> openInputWithSkin +We can now open our element and see our new skin installed. -