Cambalache Gtk4 port goes beta!

Hi, I am happy to announce Cambalache’s Gtk4 port has a beta release!

Version 0.17.2 features minors improvements and a brand new UI ported to Gtk 4!

Editing Cambalache UI in Cambalache

The port was easier than expected, still lots of changes as you can see here…

64 files changed, 2615 insertions(+), 2769 deletions(-)

I specially like the new GtkDialog API and the removal of gtk_dialog_run()
With so many changes I expect some new bugs so please if you find any file them here.

Where to get it?

You can get it from Flathub Beta

flatpak remote-add --if-not-exists flathub-beta flathub.org/beta-repo/flathub-

flatpak install flathub-beta ar.xjuan.Cambalache

or checkout main branch at gitlab

git clone https://gitlab.gnome.org/jpu/cambalache.git

Matrix channel

Have any question? come chat with us at #cambalache:gnome.org

Mastodon

Follow me in Mastodon @xjuan to get news related to Cambalache development.

Happy coding!

Cambalache 0.16.0 Released

Hello, I am pleased to announce a new version of Cambalache

Version 0.16.0 targets the newly released GNOME SDK 45 and includes all the new changes in Gtk and the new Adwaita release.

These release should also help people experiencing issues with the workspace since it has a brand new version of webkit.

Matrix channel

Have any question? come chat with us at #cambalache:gnome.org

Mastodon

I created a Mastodon account @xjuan where you will be able to get news related to Cambalache, which means the Twitter account @XjuanAr will be phased out soon.

Where to get it?

As always you can get the code in gitlab

git clone https://gitlab.gnome.org/jpu/cambalache.git

or download from flathub

flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
flatpak install --user flathub ar.xjuan.Cambalache

Happy coding!

Cambalache 0.14.0 Released!

I am pleased to announce a new Cambalache version.

Cambalache is a new RAD tool for Gtk 4 and 3 with a clear MVC design and data model first philosophy.

Version 0.14.0 brings two new features one of them not even originally supported by Glade.

Release Notes:

    • Add GMenu support
    • Add UI requirements edit support
    • Add Swedish translation. Anders Jonsson
    • Updated Italian translation. Lorenzo Capalbo
    • Show deprecated and not available warnings for Objects, properties and signals
    • Output minimum required library version instead of latest one
    • Fix output for templates with inline object properties
    • Various optimizations and bug fixes
    • Bump test coverage to 66%

Menu Support

The <menu> tag in GtkBuilder is the builtin support for GMenuModel and GMenu classes defined in GIO.

All you need to do is create a “(menu)” model object…

and add items, sections or submenus to it.

People familiar with the GObject type system might have noticed that “(menu)” is not a valid GType name this is intentional and used for built in features like <menu> tag or defining external objects ( “(external)” ) this allows me to model everything in a generic way and have custom code to export this in the right non generic format.

UI Requirements

Just like Glade, Cambalache now let you choose which library version you want to target.

A list of all libraries used in the UI file. will be available in the requires tab of the object editor.

Here you will be able to select which target version you want to use in the UI file and the application will warn you if the object, property or signal is not available in the version you selected.

You can also leave it blank and Cambalache will automatically use the minimum library required for your UI.

Where to get it?

As always you can get the code in gitlab

git clone https://gitlab.gnome.org/jpu/cambalache.git

or download from flathub

flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
flatpak install --user flathub ar.xjuan.Cambalache

Happy coding!

Cambalache 0.12.0 Released!

I am pleased to announce a new release of Cambalache a new RAD tool for Gtk 3 and 4!

Version 0.12.0 packs a year’s worth of new features and lots of improvements and bugfixes.

Workspace CSS support

Does your application use custom CSS? Now you can see CSS changes live in the workspace. All you need to do is add a new CSS file in the project and specify if you want it to be global or for one UI file in particular.

Keep in mind that GtkBuilder does not support CSS inline so your application still needs to load the CSS at runtime.

GtkBuildable Custom Tags

In an ideal world object properties would be enough to define your application UI but in reality it is not, so Gtk Widgets can define customs tags in their GtkBuildable implementation such as GtkWidget <style> or GtkComboBoxText <items>

This feature was missing in Cambalache, mostly because I do not want to add custom code to handle each case one by one, as you can imagine this would become really hard to keep up and maintain.

So I decided on a generic component that relies on minimum metadata to create the UI automatically. So let me know if your favorite Class is missing a custom tag!

Property Bindings

Another important feature missing is setting up properties binding directly in the property. While technically it was always possible to create a GBinding object, clicking on a property label and selecting the source object and property is much easier.

User Templates

Back in the day one of the main features of Glade 3 was being able to extend the widgets available to use without having to modify the source code. This was done by creating a XML widget catalog unfortunately this is a high bar for every application as it required not only writing an XML file describing all the metadata but also having a library to load the new types.

Having all of your application’s UI files in the same project allows exposing all the templates for use without any extra steps, all you need to do is have all your templates types in the same project and you will be able to use them immediately.

The only current limitation is that you wont be able to use any custom properties since they are defined in code and Cambalache does not have access to the GType. For that we still going to need to create a catalog file similar to Glade.

XML Fragments

Have you ever been in the position where you are forced to write the whole UI XML file by hand just because the shiny new (or old) feature you need is not supported?

Fear no more!! Custom XML fragments comes to the rescue!

This new feature sounds fancy but it just a way to manually define any XML fragment that you want to append to an object or UI even if it is not valid GtkBuilder.

This should be handy in lots of different situation from defining <menu> objects to setting custom properties in your customs widgets!

External object references

GtkBuilder lets you expose external objects to be reference inside the XML description, but Cambalache does not export broken references, instead it will let you declare which external object you will expose in your application using a special type “(external)” that only let you define its id.

Where to get it?

You can download the flatpak bundle from flathub

flatpak install --user flathub ar.xjuan.Cambalache

Run this first if you do not have flathub repo in your host

flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo

You can also get the source code from gitlab (see README.md for instructions)

git clone https://gitlab.gnome.org/jpu/cambalache.git

BTW I will be making point releases as soon as translations are updated!

enjoy!

 

Juan Pablo

Cambalache 0.10.0 is out!

3rd party libs release!

After almost 6 months of work I am pleased to announce a new Cambalache release!

Adwaita and Handy support

This cycle main focus was to add support for 3rd parties libraries and what better than Adwaita and Handy to start with.

Keep in mind that workspace support for new widgets is minimal which means you should be able to create all widgets and set its properties but some widgets might not show correctly in the workspace or lack placeholder support, please file an issue if you find something!

Inline object properties support

One of the new features in Gtk 4 is the ability to define a new object directly in a property instead of using a reference.

 <object class="GtkWindow">
   <property name="child">
     <object class="GtkLabel">
       <property name="label">Hola Mundo</property>
     </object>
   </property>
 </object>

You will be able to create such object by clicking in the + icon of the object property and the child will appear in the hierarchy with the property name as prefix.

Special child type support

An important missing feature was being able to define special child type which is needed for things like setting a titlebar widget in a window.

<object class="GtkWindow">
   <child type="titlebar">
     <object class="GtkHeaderBar"/>
   </child>
 </object>

Now all you have to do is add the widget as usual and set the special type in the layout tab!

New Property Editors

From now on you will not have to remember all the icon names just select the icon you want with the new chooser popover.

GdkColor and GdkRgba properties are also supported using a color button chooser.

Child reordering support

Some times the order of serialization matter a lot specially when there is no layout/packing property to define the order of children, this is why now you can reorder children serialization position directly in the hierarchy!

Full Release Notes

  • Add Adwaita and Handy library support
  • Add inline object properties support (only Gtk 4)
  • Add special child type support (GtkWindow title widget)
  • Improve clipboard functionality
  • Add support for reordering children position
  • Add/Improve workspace support for GtkMenu, GtkNotebook, GtkPopover, GtkStack, GtkAssistant, GtkListBox, GtkMenuItem and GtkCenterBox
  • New property editors for icon name and color properties
  • Add support for GdkPixbuf, Pango, Gio, Gdk and Gsk flags/enums types
  • Add Ukrainian translation (Volodymyr M. Lisivka)
  • Add Italian translation (capaz)
  • Add Dutch translation (Gert)

 

Cambalache is still in heavy development so if you find something that does not work please file a bug here

Matrix channel

Have any question? come chat with us at #cambalache:gnome.org

Where to get it?

Download source from gitlab

git clone https://gitlab.gnome.org/jpu/cambalache.git

or the bundle from flathub

flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
flatpak install --user flathub ar.xjuan.Cambalache

Happy coding!

Cambalache 0.8.0 released!

Cambalache is a new RAD tool for Gtk 4 and 3 with a clear MVC design and data model first philosophy.

Exactly one year ago I made the first commit…

commit 51d4185cd8556f0358cc463578df5a4138ac90b5
Author: Juan Pablo Ugarte
Date: Wed Dec 9 19:14:53 2020 -0300

Initial commit

Supports type system and interface data model.
Basic history (undo/redo stack) implementation with triggers.

It consisted of just 3 files, the data model, a python script to generate history triggers automatically and a small sql script to test it.

Fast forward one year and I am starting to believe it can be on feature parity with Glade sooner than expected.

Having a pretty solid backend this release focus on adding all the big missing UX parts, like a good type selector, workspace placeholders and basic clipboard actions like copy/paste.

Type chooser bar

Borrowing the design from Glade I implemented a type chooser that categorizes object classes to make it easier to find what you need.

Workspace placeholders

Containers now have placeholders to make it easier to add children in a specific positions

It supports the following actions:

  • Double click on a placeholder to create a new widget in place
  • <Control> + Insert to add more placeholders
  • <Control> + Delete to remove placeholders
  • <Shift><Control> + Insert to add a new row
  • <Shift><Control> + Delete to remove a row

Translatable properties

Thanks to the work of Philipp Unger it is possible to mark properties as translatable and add comments for translators.

Clipboard actions

To make life easier, common clipboard actions like, Copy, Paste, Cut and Delete where added.

Better unsupported features report

Cambalache will make its best effort to notify the user about unsupported features when importing UI files and export to a different filename as a precaution to avoid loosing data.

Matrix channel

Have any question? come chat with us at #cambalache:gnome.org

Where to get it?

As always you can get the code in gitlab

git clone https://gitlab.gnome.org/jpu/cambalache.git

or download the bundle from flathub

flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
flatpak install --user flathub ar.xjuan.Cambalache

UPDATE: Version 0.8.1 released!

 

Happy coding!

Milonga in Flathub!

Cambalache 0.7.4 is now available in Flathub here

For the impatient, simply run this to install it:

flatpak install --user flathub ar.xjuan.Cambalache

Cambalache is a new RAD tool that enables the creation of user interfaces for Gtk and the GNOME desktop environment. It’s main target is Gtk 4 but it has been designed from the ground up to support other versions. It is released under LGPL v2.1 license and you can get the source code and file issues here

These are the relevant new features:

  • Interactive introduction
  • Workspace Gtk theme selection
  • Template support
  • New translations, German and Czech
  • Sponsors credit section

Interactive Introduction

Even tough the workflow is similar to Glade, there are some key differences like multiple UI files support in the same project, which means new concepts like import and export where introduced. Since I do not like writing documentation, who does? I made an interactive tutorial to show up the work flow.

Workspace Gtk theme

Would not be nice to have a way to easily change the theme of your app to see how it looks?

Thanks to rendering widgets out of process, setting a different theme for the workspace is trivial to implement. All I had to do is set the theme name in the renderer’s GtkSetting. Keep in mind that flatpak application can not access your host themes, you have to install flatpak Gtk theme extensions!

Template support

All modern applications should use templates extensively! So 0.7.4 has basic support for templates, all you have to do it toggle the Object Id check button of the toplevel widget you want as your template. In the near future I will add the option to use all the templates in a project as just another widget class.

New translations

Thanks to two new contributors Phil and Vojtěch Cambalache now has 3 translations.

  • de by PhilProg
  • cs by Vojtěch Perník
  • es

If you want to see it translated in your language, open an issue with a new MR and I will merge it asap.

Sponsors Credits Section

You can financially support development on Patreon, other options like Liberapay are under consideration.

My goal is to have a steady stream of donations so that I can dedicate at least one day a week to development and hire a part time QA engineer. This would help ensure continuous improvements and keep up with bugs reports.

So many many thanks to all the people that supports Cambalache!

  • Patrick Griffis
  • Platon workaccount
  • Sonny Piers
  • Felipe Borges
  • Javier Jardón

 

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