Bloc is a low-level UI infrastructure & framework for Pharo.
You can join the mailing-list [email protected] from http://sympa.inria.fr.
Use the following script to install stable Bloc in stable Pharo:
[ Metacello new
baseline: 'Bloc';
repository: 'github://pharo-graphics/Bloc:master/src';
onConflictUseIncoming;
ignoreImage;
load ]
on: MCMergeOrLoadWarning
do: [ :warning | warning load ]
You can replace master
by:
dev
to work on the development branchv2.0.0-alpha
to load a released version
Open a new window (a Bloc space)
aSpace := BlSpace new.
aSpace show.
"Edit the space's properties, like title and size"
aSpace title: 'Bloc basics'.
aSpace extent: 800 @ 600.
Draw an element (a BlElement
)
"Create a red rectangle"
rectangle := BlElement new
background: Color red;
size: 150 @ 150;
yourself.
"Add it to the space"
aSpace root addChild: rectangle.
"Update its properties"
rectangle
background: Color lightBlue;
position: 100 @ 100;
border: (BlBorder paint: Color blue width: 10).
Nesting elements
"Create a circle using a geometry (a BlElementGeometry subclass)"
circle := BlElement new
background: Color blue;
geometry: BlCircleGeometry new;
size: 80 @ 80;
yourself.
rectangle addChild: circle.
"Use a transformation to resize and show child element's overflow"
circle transformDo: [ :builder | builder scaleBy: 1.2 ].
rectangle clipChildren: false
Animating
"Animate opacity"
rectangle addAnimation: (BlOpacityAnimation new opacity: 0.5).
"Animate transformations"
fallAnimation := (BlTransformAnimation translate: 0 @ 200) absolute.
rectangle addAnimation: fallAnimation.
climbAnimation := (BlTransformAnimation translate: 0 @ 0) absolute.
rectangle addAnimation: climbAnimation.
"Create sequence of animations"
animationSequence := (BlSequentialAnimation withAll: {fallAnimation . climbAnimation})
beInfinite;
yourself.
rectangle addAnimation: animationSequence
Handling Events
"Change color on click"
rectangle addEventHandlerOn: BlClickEvent do: [ :event | event target background: Color lightGray ].
"Animate on hover/blur"
rectangle
addEventHandlerOn: BlMouseEnterEvent
do: [ :event | event target addAnimation: (BlOpacityAnimation new opacity: 0.2)];
addEventHandlerOn: BlMouseLeaveEvent
do: [ :event | event target addAnimation: (BlOpacityAnimation new opacity: 0.8)]
This code is licensed under the MIT license.
If you want to contribute to the project, please read our contributing guide.