Page MenuHomePhabricator

Erigo - EFL Gui Builder
Updated 2,474 Days AgoPublic

This document was moved from /w/projects/gui_builder/.

Erigo - EFL GUI Builder

{F11312 layout=right, float}
Introducing Erigo (v.0.9) - the EFL gui builder. It enables you easily create user interface for your application. You can easily build multi-windowed application, simulate its behavior without compiling, generate sources in different languages (currently C).

Demo video

{F11314 layout=inline} {F11316 layout=inline} {F11318 layout=inline}

Compiling and installing

Source Download



  • CMake
  • FFI LIbrary (Ubuntu: sudo apt-get install libffi6 libffi6-dbg libffi-dev)


  • Graphviz (Version > 2.35.00) - show application's graph.

Building and Installing

$ cd erigo
$ mkdir build
$ cd build
$ cmake -DCMAKE_INSTALL_PREFIX=/your_install_path -DCMAKE_BUILD_TYPE=release ..
$ make
$ sudo make install


go to erigo/build folder and run:
$ sudo make uninstall

Using Erigo

Command line


> ./src/bin/egui ../examples/example.egui


> ./src/bin/egui -s [Desktop/Phone/Tablet] ../examples/example.egui

Export to C ("filename.c" and "filename.h" will be generated):

> ./src/bin/egui -e c -o filename ../examples/example.egui

Export to JSON ("filename" generated):

> ./src/bin/egui -e json -o filename ../examples/example.egui

User Interface

Top - Actions Toolbar:

  • Project (New, Open, Save, Save As, Export, Close).
  • Resource manager (Project's Resources - Images, Edge files, Callbacks, Strings).
  • Settings (Project's Settings - Project name, enter points, paths).
  • Edit (Undo, Redo, Reload context).
  • View - show/hide, change view of windows.
  • Simulate - run application simulation on different targets.
  • Graph - show application's graph.


  • Widgets factory - Drag`n`Drop supported


  • Objects Tree View
  • Properties view with Description, Properties, Callbacks and Content tabs.

Center - Main canvas.

Resource manager

{F12735, layout=right, float}
Resource Manager allows you to add such resources as Images, edge files, callbacks and strings, assign alias name and later use in application design.
In order to add resource, switch to desired tab, fill in fields at the bottom, when it is possible you can use file selection dialog (press "..."). In the end press Add Resource button.
In order to edit resouce: change desired fields and press Save button.
To delete resource: press del button.

Project Settings

{F12733, layout=right, float}
Set Project name - used in structure's, function's, variable's names in generated code.
Set Images prefix name: - give the name of define which will provide prefix path for app's images.
Set Start Points - define main objects which will be created on application start.

Object tree view

Objtree shows items with it's children.
Search string allows to filter widgets by name.

Property View

Property view provides detailed information about widgets. It contains four tabs: Description, Properties, Callbacks, Content. Search string allows to filter properties by name and fields contain popup hints - just put mouse over it.

Description tab contains following fields: class name (can not be changed), name, public property. When widget is marked as "public" it will be accessible in generated code.

{F12713, layout=right, float, alt = "Properties tab"}
Properties tab shows properties grouped by class in inheritance order.
Properties colored in grey are properties, which were not changed by user and they show default values, whereas properties colored in white were changed by user. They can be dropped by clicking {F12715, layout=inline, size=full} button and choosing "Drop Property". Some properties such as ("Size Hint Weight", "Size Hint Align") have predefined(aliased) set of values, which can be accessed by pressing on "..." button next to property value.

Callbacks tab shows callbacks supported by widget. The list is sorted by inheritance order.
Callbacks can be assigned with next actions: Modify, Create, Invoke.

Modify - this action changes a property of desired object.
First you choose "Modify" action, then you choose an object - one of the widgets defined in the project. Then you can choose a property from the list of supported and finally fill in values.

Create - this action allows to invoke creation of one of main objects.
After you choose "Create", choose main object to create and it's parent.

Example: {F12719 layout=right, float} You have two main object: "Window 1" and "Window 2". "Window 1" is created when application is launched. You want "Window 2" to be created when "Button" is clicked in "Window 1". You need to open "Callbacks" tab for "Button" object. Extend class "Evas.CLickable_Interface", for "clicked" event choose "Create", select "Window 2" as first parameter, an leave the second parameter empty, because we want "Window 2" to be created next to "Window 1" (parent is NULL).

Invoke - this action allows you to invoke user callback. User callback must be registered in Resource Manager.

Content tab - allows to manage content according to class of selected windget.
Erigo defines following types of containers:

  • Pack containers: Box, Table.
  • Resize object containers: Window.
  • Part containers: (according to part_content_set function): Button, Check, Radio, Actionslider, Clock, Dayseelctor, Calendar, Colorselector, Bubble, Entry, Flip, Layout
  • Item containers (Item widgets): Menu, Diskselector, Ctxpopup, Toolbar, Naviframe.

Content view contains different control elements depending on type of selected widget.

Graph view

{F12727, layout=right, float} {F12725, layout=right, float, size=full}
Erigo allows you to build graph of your application. Press Graph button to open Graph View window.

Project menu

New Project - create new project.
Click "New Project" menu item to open "New Project" dialog.
Type in project name, select project folder or type new folder name. Click "Ok".
Project file will be created in selected folder.
For project name "New Project" project file will be created with name "new_project".

Save - save project file. Also "Ctrl + S" key combination can be usde.

Save As - save project file as.
Click "Save As" menu item to save project in different file. In opened dialog select folder and enter file name.
Click "Ok."
Also "Ctrl + Shift + S" key combination can be used.

Export - option allows you to generate C source code.
Click "Export" choose folder and enter "filename". "filename.c" and "filename.h" files will be generated.

Close project - closes current project.


Erigo supports all conventional ways of editing in gui builders: drag and drop, moving and resizing, properties and containers editing.

Select object by clicking it on canvas or by selecting it in Object View.
When object is selected green border is drawn around it. Now you can open Property view to review and change property's values, manage callbacks and containers. Object can be resized by dragging border's markers.

If object is packed into container, changing it's size/position may not have effect.

Objects can be dragged and dropped around canvas. It can be dragged from factory to canvas, between containers, between windows, from window to canvas(object becomes main) and from canvas to window(object stops being main).

{F12739 layout=right, float}
Erigo also supports undo/redo functionality. You can either use Undo/Redo buttons, or shortcuts Ctrl + z/Ctrl + Shift + z

Main Objects

All objects which are located directly on canvas are main. Generally they are windows, but any other object also can be main. It is useful when you want to have custom snippet which can be used in different places around the project.
You build it as a main object and invoke its creation using Create action.

Using Edje

You can use Edje objects in your project. It can be either compiled edj object or raw edc file.
If you use compiled edj object simply add it as a resource and use in File property.
If you want to use raw edc file, add all its objects into your project's folder into consequent dirs: /images, /sounds, /fonts, /data.
{F12761 layout=right, float}
In order to edit edc file you can start Enventor right from Resource Manager. When you save the changes, edc file will be automatically compiled and reloaded.


{F12723, layout=right, float}
This feature allows you to test application behaviour without compiling.
Go to Simulate->Create a new session... submenu in toolbar and select target, which you want to run simulation on.
To finish simulation close all simulated windows or select Simulation->Name of simulation->Kill.

Key Shortcuts

Following key shortcuts are currently available in Erigo.

"Crtl + z" - Undo.
"Crtl + Shift + z" - Redo.
"Ctrl + s" - Save.
"Ctrl + Shift + s" - Save as.
"Delete" - delete widget.


Creating new project - Add Window, Background, Box, Button

Start Erigo with

> ./src/bin/erigo

Click Project->New Project.
Type in "Project Name", choose project folder and click "Ok". New project is created.

Drag "Window" widget from Factory to main canvas. Drag "Background" widget to Window.
Select "Window" widget and open "Content" tab in Property view. Set "Background" as Window's content. Background will be set as window's resize object.

Drag "Box" widget to Window. Select "Window" widget and open "Content" tab in Property view. Set "Box" as Window's content. Box will be set as window's resize object.

Drag and drop "Button" widget into the Box.
That's it!

Adding image as a resource and apply it to background.

Open Resource manager and switch to Images tab. Fill in fields in the bottom: type in alias name, press "..." button and select image file. Press Add resource button. Close Resource manager.
Select background widget in you project. Open Property tab.
Find File property in Efl.File subclass and select desired alias in dropdown list.

Adding menu (or any itemed widget)

It will be shown on example of window's main menu. Each window widget has main menu, but it is not visible if has no items.
Select main menu in Object View and open Content tab in Property View.
Tab has following buttons: {F12767 layout=inline, float, size=full}
Add Item - add new item after selected item.
Add Subitem - add subitem for selected item.
Add Separator - add separator after selected item
Delete Item - not hard to guess :)
Add as many items as you need and set needed values. Put mouse over edit field in order to see tooltip.

Working with edje

Add window widget on the canvas. Add layout to window and set it as window's resize object.
Add edje resource through Resource Manager. Open layout's File property and assign edje with needed part name.

Technical notes

Current version is 0.9.

  • install script;
  • fix drag and drop errors;
  • add testing;
  • widgets multiselection and copy/paste;
  • cormetics.
Last Author
Last Edited
Jan 11 2015, 3:38 AM