Skip to content

Development Workflow


This document discusses the recommended development workflow for all the Mates Studio environments.

In summary, it is always recommended that the graphics elements of the project is finalized before moving into developing the main program for the project.

  • Commander and Architect projects - before writing code for the host microcontroller
  • Genius projects - before writing 4DGL code for the display
  • Builder projects - before developing the program flow using blocks

Graphics Design

For a smooth development process, completing all the graphics elements required for the project should always be the initial goal. This doesn't necessarily mean that more graphics elements can't be added to the project while the program flow is being developed but it gives a lot of advantages.

The primary advantage of is having a complete set of pages and widgets to control during the main programming/development process.

For Commander environment, graphics development is as easy as simply selecting what you need from a selection of predesigned pages. You can refer to the Commander Editor manual for more information.

For the rest of the Mates Studio environments, project pages and widgets can be fully customized. A Graphics Editor is provided allowing pages and widgets to be added and customized. This includes changing the colors, resizing, positioning and adjusting widget parameters.

Program Development

After completing the graphics design, program can be developed to interact with the graphical interface.

For Commander and Architect environments, a Controller Interface can be used to simulate a host controller. This provides an easy way to test the pages and widgets included enabling users to see what can be performed and what might be missing. After checking that everything needed is included in the project, development for the host controller can be started.

For Genius and Builder environments, custom program can be developed for the the BBM module directly. Genius environment provides a Code Editor which allows writing 4DGL programs to control the pages and widgets and other additional hardware features. Bulder environment, on the other hand, provides a Block Editor which allows visual programming instead.


Changes to the graphics design can be done to any project during program development. However, some actions may require changes to working code. Such changes to the design include actions that could change the widget indexes through automatic renumbering.

This include the following:

  • adding widget to a page
  • deleting widget from a page
  • deleting a page

Any changes not listed can be safely performed without much modification required to the program.

Of course, adding new pages with new widgets require additional program to be developed. But this action shouldn't affect existing code.