Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #1

Merged
merged 1 commit into from
Dec 29, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,80 @@ 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.

## Getting Started
Open a new window (a Bloc _space_)
```smalltalk
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`)
```smalltalk
"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
```smalltalk
"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
```smalltalk
"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
```smalltalk
"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)]
```

## License and Contributing

Expand Down