Merengue: Cambalache’s workspace

Lemon pie with Italian meringueCambalache is a new RAD tool that enables the creation of user interfaces for Gtk and the GNOME desktop environment, it’s main focus is on the newly released Gtk 4 library but it has been designed from the ground up to support other versions.

It started as a proof of concept data model for Glade meant to try out all the crazy ideas I had during the years about how a clean model should be.

A few months later I had a pretty good data model that matched GObject type system quite well and did not depend on GtkBuilder nor GObject.

The model could:

  • Import and export multiple UI at once
  • Support plain (no custom tags) GtkBuilder features
    • Objects
    • Properties
    • Signals
    • Children
    • Packing/layout properties
  • Undo / Redo stack
  • History command compression and grouping

With that in mind one late night while holding my newborn daughter in one hand, I decided it was time to put it to test so I fired up Glade with the other hand and started a GUI prototype which quickly evolved into Cambalache, as my few dozen Twitter followers can assess. @XjuanAr

At this point the GUI supported most of the data model features.

One big difference with Glade is that Cambalache supports multiple UI in the same project so you need to ‘export all’ in order to create them as you can see at the end of the screencast bellow.

At this point I had a very specialized XML editor but… there is always a but, what about the workspace? the place where the UI is shown, rearranged, edited…

For the workspace my requirements are:

  • It should look and feel as close to the real UI as possible
  • Support multiple toolkits (Gtk 3, 4, 2 if really needed, libreoffice?)
  • Out of process to avoid loosing data on an eventual crash
  • It should look and feel as close to the real UI as possible, really!

Obviously adding the widgets directly like we did in Glade would not work if we want to support more than one version of Gtk since you can not mix them in the same process.

So we need a way to render widgets in a different process and show them somehow in the workspace… GtkPlug/GtkSocket would only work on X11.

Merengue enters the picture!

Fortunately this was not the first time I had to deal with such problem (See Maxwell) this reminded me of Alexander Larsson’s excellent project called Broadway a Gdk backend for the web. Ideally I would use an embedded Wayland compositor widget instead of a webview and broadway, but unfortunately there is only an old non working prototype called Wakefield and finishing it is a project on its own. In any case replacing the webview with a wayland compositor widget would be trivial.

Merengue is the name of the process Cambalache uses to render the UI while the user creates it, it is a regular Gtk 3 or Gtk 4 application depending on the version your project is targeting that just connects to Broadway and talks to the main application in JSON trough stdout/stdin pipes.

I will be talking more about Cambalache and the rationale behind starting a new project instead of porting Glade at GUADEC

See you there!

UPDATE: Cambalache source code released under the LGPL 2.1, get it here!

What’s new with Glade

It’s been a long time since my last post. After doing the last major UI rework which included a new workflow and the use of a headerbar instead of a menu bar I had little free time to work on the project.

Early this year while on quarantine and in between jobs I started working on things I been wanting to but did not had the time

Fix Glade Survey

On January the GNOME infrastructure was migrated to a new server which broke a small web service running at https://people.gnome.org/~jpu/ used to collect Glade’s survey data.

They also added surveys.gnome.org to conduct any GNOME related surveys making my custom service redundant.

So in order to properly fix the survey I made Glade act like a browser and post the data directly to surveys.gnome.org, no need to open a browser!

This means Glade has to download the survey form, parse it to extract a session token and send it as a cookie for it to work!

JavaScript support

A few years ago while working at Endless Mobile I started adding support for JavaScript widgets since we had several widgets implemented in GJS.

Unfortunately back then a really obscure bug made GJS crash so I never added support for JS in Glade. To my surprise this time around GJS did not crash, at least not on Wayland which led me to find a workaround on X11 and move on

So in order for glade to support your JavaScript widgets you will have to:

  • specify gladegjs support code as your plugin library.
  • set glade_gjs_init as you init function.
  • make sure your catalog name is the same as your JavaScript import library since
    glade_gjs_init() will use this name to import your widgets into the
    interpreter.

gjsplugin.xml

<glade-catalog name="gjsplugin" library="gladegjs"
               domain="glade" depends="gtk+">
  <init-function>glade_gjs_init</init-function>

  <glade-widget-classes>
    <glade-widget-class title="MyJSGrid" name="MyJSGrid"
                        generic-name="mygrid"/>
  </glade-widget-classes>

  <glade-widget-group name="gjs" title="Gjs">
    <glade-widget-class-ref name="MyJSGrid"/>
  </glade-widget-group>
</glade-catalog>

gjsplugin.js

const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;

var MyJSGrid = GObject.registerClass({
  GTypeName: 'MyJSGrid',
  Properties: {
    'string-property': GObject.ParamSpec.string('string-property',
      'String Prop',
      'Longer description',
      GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
      'Foobar'),
    'int-property': GObject.ParamSpec.int('int-property',
      'Integer Prop',
      'Longer description',
      GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
      0, 10, 5)
    },
  Signals: {'mysignal': {param_types: [GObject.TYPE_INT]}},
}, class MyJSGrid extends Gtk.Grid {
  _init(props) {
    super._init(props);
    this.label = new Gtk.Label ({ visible: true });
    this.add (this.label);
    this.connect('notify::string-property',
                 this._update.bind(this));
    this.connect('notify::int-property',
                 this._update.bind(this));
    this._update();
  }
  _update (obj, pspec) {
    this.label.set_text ('JS Properties\nInteger = ' + 
                         this.int_property + '\nString = \'' +
                         this.string_property + '\'');
  }
});

Save these files in a directory added as extra catalog path in the preferences dialog, restart and you should have the new JS classes ready to use.

Composite templates improvements

So far the only way to add custom widgets to glade is by writing a catalog which can be tedious so probably not a feature used by most people.

So to make things easier I made Glade load any template file saved in any extra catalog path automatically.

This means all you have to do to is:

  1. Create your composite template as usual
  2. Save it on a directory
  3. Add the directory to the “Extra Catalog & Templates paths” in preferences
  4. And use your new composite type!

This features will be included in the next stable release, and are already available in nightly flatpak (wiki instructions)

Better deprecations checks

Glade started before GObject introspection so it keeps version and deprecation information in its catalog files which makes it hard to keep it in sync with Gtk. There was also no way to specify in which Gtk version a property or signal was deprecated.

Unfortunately even tough all this metadata is extracted and stored in Gir files it is not available in typelib which makes using libgirepository not an option for Glade instead I decided to make a small script that will take all this information from Gir files and update Glade’s catalog directly making maintaining versioning information way easier!

This means that Glade should catch almost all deprecations and version mismatches even if you are not targeting the latest Gtk version.

Enjoy!

Juan Pablo

Glade in Libre Application Summit

First of all ISponsored by GNOME Foundation would like to thanks the GNOME foundation for sponsoring my trip to Denver to attend Libre Application Summit

As usual, it was a great opportunity to catch up with old friends and make new ones specially outside the GNOME community.

This opportunity I talked about the plans I have to integrate Glade with Gnome Builder and other IDEs

You can find the slides of my talk as PDF here, and the sources here!

Sources you say?

Yes sources, since my talk about custom UI interfaces in 2013 I been making all my slides with Glade and using glade-previewer to present them live

glade-previewer is a tiny application shipped with Glade used mainly to preview UI

It’s relevant options are:

-f, --filename=FILENAME  Name of the file to preview
--screenshot             File name to save a screenshot
--css                    CSS file to use
--slideshow              Make a slideshow of every toplevel widget
                         by adding them in a GtkStack

Normally to preview a glade file with a custom css file you would use a command like

$ glade-previewer -f talk.glade --css talk.css

Now if you instead want to make a presentation with it all you need to do is add –slideshow option and glade-previewer will pack every toplevel widget in a GtkStack and switch between pages with PageUp/PageDown buttons

As a bonus I extended –screenshot option so that when used in conjunction with –slideshow it will take a screenshot of every toplevel and save them as multiple pages if the format supports it!

GUADEC a la española

Tapas, jamón are the first words that come to my mind after this year GUADEC in Almería

One of the best part of traveling is discovering new customs and trying new things…

 

 

 

 

Do you want tomato with your toast for breakfast?

– Sure!

 

 

 

What about tuna?

– why not!

 

 

 

 

But more important than food, for me GUADEC is always about the people, meeting new people, people you always respected (still can not believe I meet the legendary JH) or putting a face to an irc nickname or email (albfan, never expected you to be so tall!) and of course catching up with old friends because being able to continue talking with someone like if it was yesterday when in fact it was a year, is priceless.

This GUADEC was special to me because it was the first time I did not talked about Glade, instead I showed a new library called Maxwell I made working at Endless.

What is Maxwell?

Maxwell is a proof of concept library that extends WebKitWebView and lets you embed/pack Gtk widgets in it as a regular Gtk container.

Etymology

The project started inspired by the Broadway Gdk backend which lets you run any Gtk application over HTTP using HTML5 and web sockets which was named after X Consortium’s Broadway release where one of its key features was X-Agent 96.

X Agent 96 => Agent 86 => Maxwell Smart => Maxwell

How does it work?

The introduction of the split process model in WebKit2 made embedding widgets in WebView rather difficult since part of WebKit operates in one process and the rest like WebCore and JS engine in another (UI/Web process).

Maxwell takes a similar approach to Broadway, all it needs is a way to render widgets in the DOM tree and get events from them.

To render widgets we use a CANVAS element the same size of the widget and a custom URI scheme to get the raw image data from each widget.

/* Get image data from widget */
let xhr = new XMLHttpRequest();
xhr.open('GET', 'maxwell:///widget_id', false);
xhr.responseType = 'arraybuffer';
xhr.send();

/* Render image data in canvas */
let data = new Uint8ClampedArray(xhr.response);
let image = new ImageData(data, canvas.width, canvas.height);
canvas.getContext('2d').putImageData(image, 0, 0);

On the Gtk side, each child is rendered in an offscreen window which we use as the source image data to implement the custom URI scheme handler.

Gtk UI process JavaScript/WebCore
GtkWidget:draw↴
Damage event ⟶ JS child_draw() ⟶ GET maxwell://
URI handler ⟵
↳[offscreen]⟶[GdkPixbuf]⟶GIOStream ⟶ [ImageData]↴
putImageData()

For events all we have to do is properly implement GdkWindow::pick-embedded-child and let Gtk know which child widget should get the event. In order to do so we need to keep track of the elements position relative to WebView’s viewport which can be calculated with getBoundingClientRect().

API

The API is pretty straightforward, all you have to do is name the child widget and add it using regular GtkContainer API.

/* Create a Maxwell Web View */
webview = maxwell_web_view_new ();

/* Create a widget to embed */
entry = gtk_entry_new ();

/* Set a unique name on the widget */
gtk_widget_set_name (entry, "myentry");

/* Add widget to web view container */
gtk_container_add (GTK_CONTAINER (webview), entry);

In order for MaxwellWebView to know where to place a child in the DOM tree you need to add a CANVAS element with a “GtkWidget” class and the unique ID you used as the widget’s name.

<canvas class="GtkWidget" id="myentry"></canvas>

Maxwell will also try to honor width and height style properties set on the canvas element. So for example if you want your widget to expand horizontally you can do:

<canvas class="GtkWidget" style="width: 100%;" id="myentry"></canvas>

You can get it at https://github.com/endlessm/maxwell

Sponsored by GNOME FoundationAs usual I would like to thanks the GNOME Foundation for sponsoring my trip to Spain and making all this possible.

 

 

 

Finally some extra pictures…

It’s always fun to be at GUADEC

Sponsored by GNOME FoundationAs usual I would like to thanks the GNOME foundation for sponsoring my trip to Manchester to enjoy such a wonderful conference and give me the opportunity to present to the community the work I been doing on Glade’s UI for the past few months.

You can find the slides at https://people.gnome.org/~jpu/docs/2017-GUADEC/

Obviously they are made with Glade, something which might seems odd, but is it really?

modern-ui branch

 

So besides a PDF you will find a tarball with all the source files. BTW You can use glade-previewer and PgUp and PgDown to switch pages

$ glade-previewer -f talk.glade --css talk.css --slideshow

https://www.youtube.com/watch?v=0krTtJCJ0Pg

 

And some random pictures from GUADEC…

Developer Experience Hackfest 2016

Sponsored by GNOME FoundationFirst of all I would like to thanks the GNOME Foundation for sponsoring once again my trip to Brussels for the GNOME Developer Experience Hackfest.
Besides hacking on Glade and attending FOSDEM I had a great time meeting with old friends and making new ones, not to mention the amount and variety of beers consumed!

beerBut beer was not the only thing we had!

wafles

Back on the hacking, together with Tristan we managed to fix several bugs and add the much needed support for id-less objects! This way Glade is one step closer to support every Gtk+ template file.
I will not go into much details since it was already covered by him in his blog post

Pretty workspace

Besides doing some CSS cleanups in the workspace and user survey window to improve theme compatibility I added the modernized original Glade logo to the workspace background as a tribute to Glade roots!
Glade workspace logo

I also got the chance to work on the Glade User Survey results, the final results will be posted soon on Glade’s website once I finish automating the results from the Data Base.

Glade User Survey Preliminary Results

3114 people took the time to fill the survey since 11-11-2013.
54 % of them use it for commercial purposes and 42 % for personal use.
Most users are from the US and Brazil with Germany, China and France as a close third.

USA 10.98 % Italy 3.44 %
Brazil 10.18 % Spain 3.37 %
Germany 6.29 % UK 3.11 %
China 5.59 % Canada 2.37 %
France 4.65 % Poland 2.21 %
Mexico 4.07 % Argentina 1.70 %
Russia 3.85 % Australia 1.47 %
India 3.76 % Turkey 1.44 %

How long have you been programming? (years)

< 1 5.17 % 11 – 20 15.83 %
1 – 2 30.72 % 21 – 30 6.26 %
3 – 5 18.49 % 31 – 40 2.95 %
6 – 10 18.33 % > 40 2.21 %

Not Programmer 16.66 %

Preferred programming languages do you prefer?

Python 50.32 % JavaScript 21.80 %
C 47.01 % C Sharp 15.25 %
CPP 38.59 % Vala 9.24 %
Java 24.85 % Perl 6.96 %
Other 25.49 %

When did you start using Glade? (years ago)

1 58.38 % 4 – 5 5.94 %
2 4.94 % 6 – 10 6.48 %
3 2.79 % > 11 2.98 %

Which version do you normally use?

What is available in my OS 82.72 % Master 1.47 %
Latest stable from sources 9.44 % Other 0.83 %
3.8 for Gtk+ 2 3.94 %

On what operating system?

Linux 58.83 % OSX 1.02 %
Windows 2.69 % BSD 0.96 %
Other 1.25 % Solaris 0.44 %

How often do you use it?

Every day 43.89 % Few days a week 10.82 %
A few times a year 20 % Every week 5.84 %
A few times a month 13.96 % Once a month 3.94 %

What level of Glade user would you say you are?

Beginner 78.29 %
Intermediate 16.44 %
Advanced 3.78 %

Under what kind of license(s) do you release the software you used Glade to create?

Free Software 42.19 % None 25.72 %
Open Source 34.32 % Commercial 9.5 %

In which field(s) is the software you used Glade to create generally used?

Desktop applications 42.77 % Industrial applications 8.95 %
Academic 18.68 % Embedded applications 7.35 %
Educational 13.48 % Accounting 4.56 %
Scientific 12.13 % Medical 2.92 %

In your opinion what is the biggest problem with Glade?

Lack of documentation 66.89 %
Other 11.23 %
Lack of publicity/exposure 9.79 %
Lack of official binary releases for other OS (Win32, OSX) 5.78 %
Lack of professional training 2.63 %
Lack of professional support 1.5 %

18 % of users found a bug, 6.9 % reported it and 21.96 % contributed to the project.

Glade User Survey goes live!

Hello everyone! in the past few weeks I been working on a survey for Glade. The idea is that it will help us to better know our user base and thus allow us to take inform decisions to improve Glade users experience.
So please take a few minutes to complete it!

thanks

Juan Pablo

Porting widgets to the new template API… the LAZY way!

First of all I want to thanks everyone involved in GUADEC organization specially to the GNOME foundation for sponsoring me once again.

It is been great meeting with old friends and making new ones!

So after Tristan’s talk UI developer experience with Glade/GtkBuilder where he talked about the new template API some good friend of us, lets see if you can guess who, came and ask:

friend: How do I port my widgets to the new templates stuff?
friend: I do not want to redo all of them in glade
me: What kind of widgets?
friend: “A grid with some s#it in it!”
me: hmmm…
 

So we talked about it and told him if that he was that lazy not to redo all widgets in glade manually he could do some function that iterate over containers and spit some xml to get at least the hierarchy right.

As we all know the lazier a programmer is the better, since it will end up writing a program to do its chores!

Anyways I did!

I made a function you can paste in your program and use it together with libgladeui api to dump a runtime GtkWidget to an xml definition.

#include <gladeui/glade.h>

/* Create a Glade project */
GladeProject *project = glade_project_new ();

/* add as many widgets as you want in the project */
glade_project_add_widget_from_object (project, widget, NULL);

/* And then save it to a file */
glade_project_save (project, "myclass.ui", NULL);

And that is all you have to do if the widget is simple enough.
You will have to mark internal children manually since there is no easy way to introspect them, say for example you want to dump a GtkDialog derived widget…

#include <gladeui/glade.h>

/* Create a Glade project */
GladeProject *project = glade_project_new ();

/* We need to mark every internal children manually */
INTERNAL_CHILD (gtk_dialog_get_action_area (GTK_DIALOG (widget)),
                "action_area");
INTERNAL_CHILD (gtk_dialog_get_content_area (GTK_DIALOG (widget)),
                "vbox");

/* add as many widgets as you want in the project */
glade_project_add_widget_from_object (project, widget, NULL);

/* And then save it to a file */
glade_project_save (project, "myclass.ui", NULL);

Here is the cut&paste code glade_dump.c

This is obviously hacky code, it was not heavily tested and will probably make gladeui and gtk API complain a lot but it works pretty well for what is intended.

BTW you have to link with gladeui-2.0 library for this code to work!

I think that is all, happy porting!

Sponsored by GNOME Foundation