Skip to content

Commit

Permalink
Merge pull request #13 from StevenCostiou/justifying
Browse files Browse the repository at this point in the history
Adding more to BlElements basics with an exercise
  • Loading branch information
rvillemeur authored Sep 30, 2024
2 parents 06d911d + debf533 commit 7a11e75
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 2 deletions.
66 changes: 64 additions & 2 deletions Chapters/bloc/element.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@ the `BlUniverse`, providing a clear overview of your active spaces.
#### Ready to Build: Creating Your First Bloc Component

```smalltalk
BlElement new
blueRectangle := BlElement new
geometry: BlRectangleGeometry new;
size: 200 @ 100;
background: Color blue;
openInNewSpace
yourself.
blueRectangle openInNewSpace
```

![Creating a basic element.](figures/basicElement.png)
Expand All @@ -47,6 +48,67 @@ Specify the element's size and color to customize its visual characteristics.
4. **Bring it to life:** Finally, open the element in a new space, making it visible on the screen.


In our example, we can observe the state of your element by inspecting the `blueRectangle` variable. We can observe a graphical overview of the element, as well as its state:

![Creating a basic element.](figures/basicElementInspection.png)

Elements are organized in trees.
To compose tree of elements, we select a root element and we add children.

```smalltalk
redRectangle := BlElement new
geometry: BlRectangleGeometry new;
size: 50 @ 50;
background: Color red;
yourself.
blueRectangle addChild: redRectangle
```

1. **Start with a root element of your choice:** in our example, we reuse the `blueRectangle` element.
2. **Define the new element:** This is done like any other element, such as the `blueRectangle` element.
In this example, we will use a red rectangle, but smaller than the blue one.
3. **Add the new element as a child of the root element:**
The `addChild:` api adds leaf elements to a root.
4. **Bring it to life:** If the `blueRectangle` is still open, it automatically updates with the `redRectangle`. Else, re-execute all the code to open the root in a new space, making it visible on the screen.

![Composing elements.](figures/composedElements.png)

The red element is placed on the top left corner of its parent, the blue element.
By default, the position of `BlElement` instances is `0@0`.
The position of elements is configured by using the `position:` api, such as in the following:

```Smalltalk
redRectangle position: 75@25.
```

![Changing elements positions.](figures/basicElementPosition.png)

Notice that if you did not close the original space opened for the `blueRectangle` element, the display automatically updates when the `redRectangle` position changes.

## Spaces: where elements are displayed

Spaces represent windows in which elements are displayed.
They are explicitely controlled by instantiating `BlSpace` objects.
A space has a root element, to which other elements are attached using the `addChild:` api.
In the following example, we create a new space in which we add our two rectangles:

```Smalltalk
space := BlSpace new.
space root addChild: blueRectangle.
space root addChild: redRectangle.
space show
```
An element can only be the child of a single other element.
If an element is already added as a child in a space, trying to add that element to a new space will raise an exception.
One solution is to create new instances of that element to add it to another space.

## Exercise

Create a $10\times10$ grid of squares, each with a random color, and display it in a space.

![Creating a grid of elements.](figures/elementsGrid.png)


### Geometry of BlElement

In Bloc, the visual form and boundaries of your UI elements are determined by their geometry.
Expand Down
Binary file modified Chapters/bloc/figures/basicElement.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Chapters/bloc/figures/basicElementInspection.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Chapters/bloc/figures/basicElementPosition.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Chapters/bloc/figures/composedElements.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Chapters/bloc/figures/elementsGrid.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions _support/latex/sbabook/sbabook.cls
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
% footnotes at bottom of page instead of below text (which is ragged bottom)
% also moves footnotes below bottom-of-page floats
\RequirePackage[bottom]{footmisc}
%\justifying

%%%
%%% Title page
Expand Down

0 comments on commit 7a11e75

Please sign in to comment.