Page MenuHomePhabricator

Erigo - EFL Gui Builder
Updated 1,661 Days AgoPublic

Erigo - EFL GUI Builder (v1.0.0)

{F11312 layout=right, float}
Introducing Erigo - 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

https://www.youtube.com/watch?v=54lH4St9-8g
https://www.youtube.com/watch?v=Y4RAKYKB-68
You can find examples in Erigo YouTube playlist:
https://www.youtube.com/playlist?list=PLal8LrkIgqzHrmHm0IBDT6s_Y7uVctR6r

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

Compiling and installing

Source Download

https://git.enlightenment.org/tools/erigo.git/

Dependencies

Mandatory:

  • EFL LIbraries (Version >= 1.13)
  • CMake
  • FFI Library
    • Ubuntu: sudo apt-get install libffi6 libffi6-dbg libffi-dev
    • OSX: brew install libffi. Since FFI is also provided by Apple (but not through pkg-config), libffi is not exported outside of the Cellar. To make it available through pkg-config you need to set: export PKG_CONFIG_PATH="$PKG_CONFIG_PATH:$(brew --prefix libffi)/lib/pkgconfig" in your ~/.profile.

Non-Mandatory:

  • 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 ..
$ make
$ sudo make install
More configuration options

For configuration use:

$ cmake ..

In order to install into custom path:

$ cmake -DCMAKE_INSTALL_PREFIX=/install_path ..

For configuration of Debug version and to run Erigo from build path:

$ cmake -DCMAKE_INSTALL_PREFIX=/install_path -DCMAKE_BUILD_TYPE=debug ..

Uninstalling

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

Using Erigo

Command line

Start:

> erigo project.egui

Simulation:

> erigo -s [Desktop/Phone/Tablet] project.egui

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

> erigo --gc -o project.c project.egui
> erigo --gh -o project.h project.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.

Left:

  • Widgets factory - Drag`n`Drop supported

Right:

  • 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 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.

Editing

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.

Simulation

{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.

Usecases

You can find examples in Erigo YouTube playlist:
https://www.youtube.com/playlist?list=PLal8LrkIgqzHrmHm0IBDT6s_Y7uVctR6r

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!
Watch video examples:
https://www.youtube.com/watch?v=prV3NSxVFM0&index=2&list=PLal8LrkIgqzHrmHm0IBDT6s_Y7uVctR6r
https://www.youtube.com/watch?v=gK1mlgOy1uM&index=3&list=PLal8LrkIgqzHrmHm0IBDT6s_Y7uVctR6r

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.

When you will compile a code, you have to provide path to images by defining preprocessor macro PROJECT_NAME_IMAGES_PATH

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.
When you will compile a code, you have to provide path to edje files by defining preprocessor macro PROJECT_NAME_EDJE_PATH
Watch examples:
https://www.youtube.com/watch?v=siUGZCQFpro&index=5&list=PLal8LrkIgqzHrmHm0IBDT6s_Y7uVctR6r
https://www.youtube.com/watch?v=Pqb38D9uwxk&index=6&list=PLal8LrkIgqzHrmHm0IBDT6s_Y7uVctR6r

Using GUI in your application

Example can be found in erigo/examples
Suppose there is following project folder layout:

~/demo_project/
     demo.egui
     main.c
     /images
        tux.png
        test.edj

demo.egui - Erigo project file, /images - folder with images used in project, main.c - main file of our project which uses GUI's structures and functions.

We want to generate GUI files and use it our project.
Step 1
First of all ensure that Project settings are defined. In our example project settings are the following:
Project name : "demo" - if will be used as prefix in structure's and func's names.
Start points: - check windows which must be created on GUI start.

Step 2
Generate demo.c and demo.h files in current folder with Erigo, as described here: https://phab.enlightenment.org/w/projects/gui_builder/#project-menu or by using CLI:

$ erigo --gh -o demo.h demo.egui
$ erigo --gc -o demo.c demo.egui

If you open demo.h you will find functions and structures which define the GUI:

#ifndef _demo_h_
#define _demo_h_
#include <Eo.h>
#include <Elementary.h>

typedef struct
 { 
   Eo *elm_image1;
 } Demo_Elm_Win1_Widgets;

typedef struct {
    Demo_Elm_Win1_Widgets *elm_win1;
} Demo_Widgets;

Demo_Elm_Win1_Widgets *demo_elm_win1_create(Eo *parent);
Demo_Widgets *demo_gui_get();
#endif

Demo_Elm_Win1_Widgets - structure which manages main object's widgets, here elm_win1's widgets.
Demo_Elm_Win1_Widgets *demo_elm_win1_create(Eo *parent) - function which creates main object, here elm_win1.

Demo_Widgets - structure which manages all main widgets. elm_win1 can be accessed thorough this structure.
Demo_Widgets *demo_gui_get(); - function which creates all windows which are defined in Start points and returns filled Demo_Widgets structure.

Step 3
Now we need to call demo_gui_get() in our app. Here is main.c example:

#include <Elementary.h>
#include "demo.h"

EAPI_MAIN int
elm_main(int arg, char **argv)
{
   Demo_Widgets *wdgs = demo_gui_get();
   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
   elm_run();
   elm_shutdown();
   return 0;
}
ELM_MAIN()

Generally this is basic Elementary example. Only one(two with #include "demo.h" :) ) line should be added: Demo_Widgets *wdgs = demo_gui_get(); - this will create GUI and can be used to access main and public widgets.
Step 4
Time to compile! There should be: main.c, demo.c, demo.h files and /images dir in our /demo_project folder:

$ gcc -o out main.c demo.c `pkg-config --cflags --libs elementary` -DEFL_BETA_API_SUPPORT -DDEMO_IMAGES_PATH=\"./images\" -DDEMO_EDJE_PATH=\"./images\"

Now just run ./out
That's it!

Technical notes

Current version is 1.0.0
Full NEWS.
Main changes since 0.9.1:

Features:

  • Now all classes and functions are fetched from Eolian. Functions can be filtered out with black list.
  • Add infrastructure to support warning message's popup windows. Add popup message for "Save" dialog.
  • Add memo bubble for properties which require to press "Enter" to apply changes.
  • Add supoort for widgets: Fileselector, Fileselector Entry, Fileselector Buttoni, Slider, Progressbar, Panes, Conformant.
  • Split Factory to sections.

Internals:

  • Wider usage of Eolian API to generate function names.
  • Check if Property implements GET method and it is possible to fetch default values.

Fixes:

  • Configuration and installiation options:

For configuration and installation use:

$ cmake ..

In order to install into custom path:

$ cmake -DCMAKE_INSTALL_PREFIX=/install_path ..

For configuration of Debug version and to run Erigo from build path:

$ cmake -DCMAKE_INSTALL_PREFIX=/install_path -DCMAKE_BUILD_TYPE=debug ..
  • Fix showing properties and classes in Property View.
  • Fix leaks and internal's memory management

ToDo:

  • widgets multiselection and copy/paste - snippets;
  • prettify factory;
  • cormetics.
Last Author
jayji
Last Edited
Mar 31 2015, 12:25 PM
Projects
None
Subscribers
wfx, seoz, jayji