1. Create your first view in Cade

In this section we will see how to create a new view in Cade and add shapes to it.

Opening a CadeView

First open a Playground in your Pharo instance and run the code bellow:

view := CadeView new open.

A window labeled Cade View should open in the current world. This window will diplay the graphics of your application and also will be used to interract with the event associated with your view.

There are differents options to open a CadeView in the current World. For instance, it's possible to specified a size for the window, the default size is 400@400.

view := CadeView new openSize: 800@800.

It's also possible to specified a specific label for the window.

view := CadeView new open: 'My first CadeView :)' size: 800@800.

Currently, our window doesn't display anything. Because the model of the view is empty. You can inspect the model with an inspector, there are multiple ways to do it. I will show you one of them. Select the view in the playground, right clic on it and use Inspect It.

In the inspector of the view you can see two custom inspector tabs call Cade - Tree and Cade - preview. Both are currently empty because we do not have any shape in our model.

In the inspector if you select the model, the custom inspector tab call Cade - Tree should also be visible.

Adding a shape to your view

There is multiple way to add a shape to the CadeView. We can use the method addShape:.

view := CadeView new open.

"Adding a basic shape to the view"
shape := CadeShapeLeaf2D shape: (0@0 extent: 50@100).
shape fillColor: (Color blue).

view addShape: shape.

For more information about the shapes, refere to this section -- Ajouter ici la section shape --