Bloc is a low-level UI infrastructure & framework for Pharo.
You can join the mailing-list [email protected] from https://sympa.inria.fr.
The following script installs Bloc in Pharo 11:
[ Metacello new
baseline: 'Bloc';
repository: 'github:https://pharo-graphics/Bloc:dev-1.0/src';
onConflictUseIncoming;
ignoreImage;
load ]
on: MCMergeOrLoadWarning
do: [ :warning | warning load ]You can replace dev-1.0 by v2.0.0-alpha to load such released version.
Alternatively, you can do it by terminal (MacOS, linux... and should work as well in Windows with MINGW64).
Create a directory and execute <this_repo>/scripts/build.sh, which first downloads the Pharo image and VM and then loads the project.
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: falseAnimating
"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: animationSequenceHandling 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.