Skip to content

Commit 4df099f

Browse files
rvillemeurrvillemeur
authored
initial element for bloc introduction
1 parent c08677a commit 4df099f

File tree

4 files changed

+213
-1
lines changed

4 files changed

+213
-1
lines changed

‎Chapters/gettingStarted/figures/example_star.png

2.28 KB
Loading

‎Chapters/gettingStarted/figures/letters_drag_drop.png

23.8 KB
Loading

‎Chapters/gettingStarted/miniTutorial.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,93 @@
11
## Play with Elements
22

3+
Full script to get
4+
5+
![event propagation](figures/example_star.png)
6+
7+
```smalltalk
8+
elt := BlElement new
9+
size: 150 @ 150;
10+
geometry: (BlPolygonGeometry vertices: {
11+
(100 @ 50).
12+
(115 @ 90).
13+
(150 @ 90).
14+
(125 @ 110).
15+
(135 @ 150).
16+
(100 @ 130).
17+
(65 @ 150).
18+
(75 @ 110).
19+
(50 @ 90).
20+
(85 @ 90) });
21+
background: (Color pink alpha: 0.2);
22+
border: (BlBorder paint: Color black width: 1).
23+
24+
elt addEventHandlerOn:BlMouseOverEvent do: [ :anEvent |
25+
anEvent consumed: true.
26+
elt
27+
background: (Color blue alpha: 0.2);
28+
border: (BlBorder paint: Color purple width: 1) ].
29+
30+
elt addEventHandlerOn:BlMouseLeaveEvent do: [ :anEvent |
31+
anEvent consumed: true.
32+
elt
33+
background: (Color pink alpha: 0.2);
34+
border: (BlBorder paint: Color black width: 1) ].
35+
36+
elt addEventHandlerOn: BlMouseDownEvent do: [ :anEvent |
37+
anEvent consumed: true.
38+
self inform: 'Star clicked' ].
39+
elt openInNewSpace.
40+
```
41+
342
### Element instantiation
443

44+
```smalltalk
45+
elt := BlElement new
46+
size: 150 @ 150;
47+
geometry: (BlPolygonGeometry vertices: {
48+
(100 @ 50).
49+
(115 @ 90).
50+
(150 @ 90).
51+
(125 @ 110).
52+
(135 @ 150).
53+
(100 @ 130).
54+
(65 @ 150).
55+
(75 @ 110).
56+
(50 @ 90).
57+
(85 @ 90) });
58+
background: (Color pink alpha: 0.2);
59+
border: (BlBorder paint: Color black width: 1).
60+
elt openInNewSpace.
61+
```
62+
563
### Event reaction
664

65+
When the mouse goes over the star
66+
```smalltalk
67+
elt addEventHandlerOn:BlMouseOverEvent do: [ :anEvent |
68+
anEvent consumed: true.
69+
elt
70+
background: (Color blue alpha: 0.2);
71+
border: (BlBorder paint: Color purple width: 1) ].
72+
```
73+
74+
When the mouse goes out of the star.
75+
```smalltalk
76+
elt addEventHandlerOn:BlMouseLeaveEvent do: [ :anEvent |
77+
anEvent consumed: true.
78+
elt
79+
background: (Color pink alpha: 0.2);
80+
border: (BlBorder paint: Color black width: 1) ].
81+
```
82+
83+
When we click on the star
84+
```smalltalk
85+
86+
elt addEventHandlerOn: BlMouseDownEvent do: [ :anEvent |
87+
anEvent consumed: true.
88+
self inform: 'Star clicked' ].
89+
```
90+
791
### Nesting elements
892

993
### Conclusion

‎Chapters/gettingStarted/sortingLetters.md

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,132 @@
22

33
### Sorting letters?
44

5-
### Drag and drop
5+
![event propagation](figures/letters_drag_drop.png)
6+
7+
### Drag and drop
8+
9+
#### Element containers
10+
11+
drag >> lettersSorterRoundedContainerWithBorder
12+
13+
```smalltalk
14+
^ self lettersSorterContainer
15+
border: (BlBorderBuilder new paint: Color gray; dashed; width: 2; build);
16+
geometry: (BlRoundedRectangleGeometry cornerRadius: 5)
17+
```
18+
19+
drag >> lettersSorterContainer
20+
21+
```smalltalk
22+
^ BlElement new
23+
layout: BlFlowLayout horizontal;
24+
constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ];
25+
padding: (BlInsets all: 10)
26+
```
27+
28+
drag >> labelContainer: anElement with: aText
29+
30+
```smalltalk
31+
^ BlElement new
32+
layout: (BlLinearLayout vertical alignTopCenter cellSpacing: 10);
33+
constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ];
34+
addChild: (BlTextElement new text: aText asRopedText);
35+
addChild: anElement
36+
```
37+
38+
drag >> letterFor: aCharacter
39+
40+
```smalltalk
41+
^ BlElement new
42+
layout: BlLinearLayout horizontal alignCenter;
43+
size: 30 @ 30;
44+
margin: (BlInsets all: 5);
45+
background: Color veryVeryLightGray;
46+
border: (BlBorder paint: Color veryLightGray width: 1);
47+
geometry: (BlRoundedRectangleGeometry cornerRadius: 3); width: 2 offset: 0 @ 0);
48+
addChild: (BlTextElement new labelMeasurement; text: aCharacter asString asRopedText)
49+
```
50+
51+
#### drag containers event
52+
53+
lettersSorterDraggableLetterFor: aCharacter
54+
55+
```smalltalk
56+
| element offset |
57+
element := self letterFor: aCharacter.
58+
element addEventHandlerOn: BlDragStartEvent do: [ :event |
59+
event consumed: true.
60+
self inform: 'source1 BlStartDragEvent'.
61+
offset := event position - element position.
62+
element removeFromParent ].
63+
64+
"element addEventHandlerOn: BlDragEndEvent do: [ :event |
65+
event consumed: true.
66+
self inform: 'source1 BlDragEndEvent' ]."
67+
68+
element addEventHandlerOn: BlDragEvent do: [ :event |
69+
event consumed: true. "self inform: 'source1 BlDragEvent'."
70+
element position: event position - offset.
71+
element hasParent ifFalse: [
72+
BlParallelUniverse all first spaces first root addChild: element ].
73+
element preventMeAndChildrenMouseEvents ].
74+
75+
^ element
76+
```
77+
78+
#### drop containers event
79+
80+
drag >> vowelsDropContainer
81+
82+
```smalltalk
83+
| vowels |
84+
vowels := self lettersSorterRoundedContainerWithBorder.
85+
vowels background: Color lightRed.
86+
vowels addEventHandlerOn: BlDropEvent do: [ :event | event consumed: true. self inform: 'target BlDropEvent'.
87+
(event gestureSource firstChild text first isCharacter and: [ event gestureSource firstChild text first isVowel ])
88+
ifTrue: [ self inform: 'drop accepted'. event gestureSource removeFromParent. event target addChild: event gestureSource ]
89+
ifFalse: [ self inform: 'drop rejected'. event gestureSource position: 100 @ 400; allowMeAndChildrenMouseEvents] ].
90+
91+
vowels addEventHandlerOn: BlDragEnterEvent do: [ :event | event consumed: true. self inform: 'target BlDragEnterEvent' ].
92+
vowels addEventHandlerOn: BlDragLeaveEvent do: [ :event | event consumed: true. self inform: 'target BlDragLeaveEvent' ].
93+
94+
^ vowels
95+
```
96+
97+
drag >> consonantsDropContainer
98+
99+
```smalltalk
100+
| consonants |
101+
consonants := self lettersSorterRoundedContainerWithBorder.
102+
consonants background: Color lightBlue.
103+
consonants addEventHandlerOn: BlDropEvent do: [ :event | event consumed: true. self inform: 'target BlDropEvent'.
104+
(event gestureSource firstChild text first isCharacter and: [ event gestureSource firstChild text first isVowel not ])
105+
ifTrue: [ self inform: 'drop accepted'. event gestureSource removeFromParent. event target addChild: event gestureSource ]
106+
ifFalse: [ self inform: 'drop rejected'. event gestureSource position: 100 @ 400; allowMeAndChildrenMouseEvents] ].
107+
108+
^ consonants
109+
```
110+
111+
#### entry point
112+
113+
drag >> lettersSorter
114+
115+
```smalltalk
116+
<sampleInstance>
117+
| letters vowels consonants |
118+
letters := self lettersSorterContainer.
119+
vowels := self vowelsDropContainer.
120+
consonants := self consonantsDropContainer.
121+
122+
letters addChildren: { $a. $c. $Q. $o. $j. $E. $y. $Z. $U. $B. $p. $i }
123+
collect: [ :each | self lettersSorterDraggableLetterFor: each ]).
124+
125+
^ BlElement new
126+
layout: (BlLinearLayout horizontal cellSpacing: 30);
127+
constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ];
128+
addChildren: {
129+
(self labelContainer: letters with: 'Letters to sort').
130+
(self labelContainer: vowels with: 'Vowel letters').
131+
(self labelContainer: consonants with: 'Consonant letters') };
132+
openInNewSpace
133+
```

0 commit comments

Comments
 (0)