Hello, Graphics

Assuming you've read the Hello, world walkthrough, this page will give you some examples to get you started using graphics with A4.

A4 provides straightforward access to much of the functionality of SDL2 and Cairo, with support for 3D graphics (via Vulkan or an earlier OpenGL standard) planned for a future release.

In other words, yes, it's easy to write graphical applications. You just need to create and show a window, and of course add some graphics to it.

We'll be using a [ block ] to paint the window and the ';' shortcut operator to direct a sequence of messages to the painter. The other lines should be self-explanatory:

<A4> w <- GUIWindowResource name: 'foo'
  -> GUIWindowResource
<A4> w delegate: [:window :painter :area | painter moveTo: 0; lineTo: #(100 200); stroke]
  -> GUIWindowResource
<A4> w show
  -> true

The block, which accepts some other arguments as well as just the painter, will then be invoked whenever the window needs to be redrawn:

Screenshot of simple line-drawing demo program.

You can do some more advanced stuff with the 2D graphics library as well:

Screenshot of simple text-drawing demo program.

And you can also receive events manually:

<A4> e <- GUIEventResource next
  -> GUIEventResource
<A4> e type
  -> mouseMoved

Advanced Feature - Persistence Works Here Too

Close the A4 file and the window closes. Open it again, and the window reappears with the same contents.

In other words, your app doesn't have to create it's GUI again each time it opens - the system does that automatically and nearly-instantly.

Full GUI Support

Full support for interactive GUI components - buttons, menus, text areas and so on - is still in progress (as is support for 3D graphics and other related things).

That being said, the basics are already working fairly well. This includes Labels, Buttons, Rows, Columns and Styles.

To get started, try GUIWindow new add: 'Fubar'; show. You can also inspect objects (display their contents graphically, and walk through links between objects) with gui inspect: something.

Just for peace of mind, here are some screenshots:

This one shows the code for changing styles in the above screenshots: