Cambalache 0.94 Released!

Hello, I am pleased to announce a new Cambalache stable release.

Version 0.94.0 – Accessibility Release!

    • Gtk 4 and Gtk 3 accessibility support
    • Support property subclass override defaults
    • AdwDialog placeholder support
    • Improved object description in hierarchy
    • Lots of bug fixes and minor UI improvements

How it started?

A couple of months ago I decided to make a poll on Mastodon about which feature people would like to see next.

Which feature should be added next in Cambalache? Results: - 28% GtkExpression support - 28% GResource - 36% Accessibility - 8% In App polls

To my surprise GtkExpression did not come up first and GResources where not the last one.

Data Model

First things firsts, how to store a11y data in the project”

So what are we trying to sotre? from Gtk documentation:

GtkWidget allows defining accessibility information, such as properties, relations, and states, using the custom <accessibility> element:

<object class="GtkButton" id="button1">
  <accessibility>
    <property name="label">Download</property>
    <relation name="labelled-by">label1</relation>
  </accessibility>
</object>

These looks a lot like regular properties so my first idea was to store them as properties in the data model.

So I decided to create one custom/fake interface class for each type of a11y data CmbAccessibleProperty, CmbAccessibleRelation and CmbAccessibleState.

These are hardcoded in cmb-catalog-gen tool and look like this

# Property name: (type, default value, since version)
self.__a11y_add_ifaces_from_enum([
  (
    "Property",
    "GtkAccessibleProperty",
    {
      "autocomplete": ["GtkAccessibleAutocomplete", "none", None],
      "description": ["gchararray", None, None],
      ...
    }
  ),
  (
    "Relation",
    "GtkAccessibleRelation",
    {
      "active-descendant": ["GtkAccessible", None, None],
      "controls": ["CmbAccessibleList", None, None],  # Reference List
      "described-by": ["CmbAccessibleList", None, None],  # Reference List
      ...
    }
  ),
  (
    "State",
    "GtkAccessibleState",
    {
      "busy": ["gboolean", "False", None],
      "checked": ["CmbAccessibleTristateUndefined", "undefined", None],
      "disabled": ["gboolean", "False", None],
      "expanded": ["CmbBooleanUndefined", "undefined", None],
      ...
    }
  )
])

This function will create the custom interface with all the properties and make sure all values in the GtkEnumeration are covered.

One fundamental difference with properties is that some a11y relations can be used more than once to specify multiple values.

To cover this I created a new value type called CmbAccessibleList which is simply a coma separated list of values.

This way the import and export code can handle loading and exporting a11y data into Cambalache data model.

Editing a11y data in the UI

Now since these interfaces are not real, no actual widget implements them, they wont show up automatically in the UI.

This can be easily solved by adding a new tab “a11y” to the object editor which only shows a11y interface properties.Cambalache screenshot showing A11y tab with all propertiesNow at this point it is possible to create and edit accessibility metadata for any UI but as Emmanuelle pointed out not every a11y property and relation is valid for every role.

@xjuan @GTK make sure you're not setting accessible properties/relations that do not match the roles that define them; GTK will use the role to read attributes, but we're missing a strong validation suite

To know what is valid or not you need to read WAI-ARIA specs or write a script that pulls all the metadata from it.

With this metadata handy is it easy to filter properties and relations depending on the a11y role.Cambalache screenshot showin a11y tab with properties filtered by accessible roleBTW keep in mind that accessible-role property should not be changed under normal circumstances.

Where to get it?

From Flathub

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

flatpak install flathub ar.xjuan.Cambalache

or directly from 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!

New Cambalache Release 0.92.0!

I am pleased to announce a new Cambalache stable release, version 0.92.0!

This comes with two major dependencies changes, the first one is a very basic port to Adwaita and webkit/broadway replacement with a custom Wayland compositor widget based on wlroots.

What’s new:

    • Basic port to Adwaita
    • Use Casilda compositor widget for workspace
    • Update widget catalogs to SDK 47
    • Improved Drag&Drop support
    • Improve workspace performance
    • Enable workspace animations
    • Fix window ordering
    • Support new desktop dark style
    • Support 3rd party libraries
    • Streamline headerbar
    • Lots of bug fixes and minor improvements

Adwaita

The port to Adwaita gives Cambalache the new modern look and enables dark mode support.
The headerbar is simplified only keeping most common used actions, everything else was moved to the main menu.

Cambalache editing Cambalache UI
Cambalache editing Cambalache UI in dark mode

Casilda Compositor

Up until this release, Cambalache showed windows from a different process in its workspace running broadwayd or gtk4-broadwayd backend depending on the gtk version of your project and using a WebView to connect to it and show the windows in an HTML canvas.Workspace diagram using Bradwayd and WebKit WebViewAll of this was replaced with a simple Wayland compositor widget which reduces hard dependencies a lot.

On top of that we get all the optimizations from using Wayland instead of a protocol meant to go over the internet.

With Broadway, the client would render the window in memory, the broadway backend would compress the image and sent it over TCP to the webview which has to uncompress it and render it on an HTML5 canvas.

Now, the client just renders in shared memory which is directly available to the compositor widget to use. This also leave the option to further improve performance by adding support for dmabuf which would allow to offload the composition to the host compositor reducing the number of memory copies to show the windows on the screen.

This allowed me to re enable Gtk animations since they no longer impact the workspace performance.

Special thanks to emersion, kennylevinsen, vyivel and the wlroots community for their support and awesome project, I would not have been able to do this without wlroots and their help.

You can read more about Casilda in my previous post

3rd party libraries

Cambalache now loads 3rd party catalogs from GLib.get_system_data_dirs()/cambalache/catalogs and ~/.cambalache/catalogs

These catalog files are generated from Gir data with a new tool bundled in Cambalache calledcmb-catalog-gen. This used to be an internal and still lacks proper documentation but you can see an example of how its used internally here

So what is a catalog anyway?

A catalog is a XML file with all the necessary data for Cambalache to produce UI files with widgets from a particular library, this includes the different GTypes, with their properties, signals and everything else except the actual object implementations.

Runtime objects are created in the workspace by loading the GI namespace specified in the catalog.

Feel free to contact me on matrix if you are interested in adding support for a 3rd party library.

Improved Drag&Drop

After the extensive rework done porting the main widget hierarchy from GtkTreeView to GtkColumnView and implementing several GListModel interfaces to avoid maintaining multiple lists I was able to reimplement and extend Drag&Drop code so now its possible to drop widgets in different parents.

Data Model

History handling for Undo/Redo was simplified from multiple history tables (one per table tracked) into one history table by adding a few extra columns to store data change in JSON format.

CREATE TABLE history (
  history_id INTEGER PRIMARY KEY,
  command TEXT NOT NULL,
  range_id INTEGER REFERENCES history,
  table_name TEXT,
  column_name TEXT,
  message TEXT,
+  table_pk JSON,
+  new_values JSON,
+  old_values JSON
);

This is the current history table, entries are populated automatically by triggers each time something in the project is created, changed or removed.

This data is then used to implement Undo and Redo commands.

Where to get it?

You can get it from Flathub

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

flatpak install flathub ar.xjuan.Cambalache

or directly from 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!

 

 

 

 

 

Introducing Casilda – A Wayland compositor widget!

I am pleased to introduce the first stable release of Casilda!

A simple Wayland compositor widget for Gtk 4 which can be used to embed other processes windows in your Gtk 4 application.

It was originally created for Cambalache‘s workspace using wlroots, a modular library to create Wayland compositors.

Following Wayland tradition, this library is named after my hometown in Santa Fe, Argentina

License

Casilda is distributed under the GNU Lesser General Public License version 2.1 only.

Where to get it?

Source code lives on GNOME gitlab here

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

Manual installation

This is a regular meson package and can be installed the usual way.

# Configure project in _build directory
meson setup --wipe --prefix=~/.local _build .

# Build and install in ~/.local
ninja -C _build install

How to use it

To add a Wayland compositor to your application all you have to do is create a CasildaCompositor widget. You can specify which UNIX socket the compositor will listen for clients connections or let it will choose one automatically.

compositor = casilda_compositor_new ("/tmp/casilda-example.sock");
gtk_window_set_child (GTK_WINDOW (window), GTK_WIDGET (compositor));

Once the compositor is running you can connect to it by specifying the socket in WAYLAND_DISPLAY environment variable.

export GDK_BACKEND=wayland
export WAYLAND_DISPLAY=/tmp/casilda-example.sock
gtk4-demo

API

The api is pretty simple CasildaCompositor has two properties, socket and bg-color.

    • socket: The unix socket file to connect to this compositor (string)
    • bg-color: Compositor background color (GdkRGBA)

Matrix channel

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

Mastodon

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

Happy coding!

New Cambalache development release!

I am pleased to announce a new development release of Cambalache, version 0.91.3, getting us one step closer to  the stable release for GNOME 47.

What’s new:

    • Support 3rd party libraries
    • Improved Drag&Drop support
    • Streamline headerbar
    • Ported treeview to column view
    • Several bug fixes

3rd party libraries

Cambalache now loads 3rd party catalogs from Load catalogs from GLib.get_system_data_dirs()/cambalache/catalogs and ~/.cambalache/catalogs

These catalog files are generated from Gir data with tools/cambalache-db.py script. Currently this is an internal tool which means it needs some work and documentation to make it easier to use but you can see an example of how its used internally here

So what is a catalog anyway?

A catalog is a XML file with all the necessary data for cambalache to produce UI files with widgets from a particular library, this includes the different GTypes, with their properties, signals and everything else except the actual object implementations.

Runtime objects are created in the workspace by loading the GI namespace specified in the catalog.

So please, feel free to contact me on matrix if you are interested in adding support for a 3rd party library.

Improved Drag&Drop support

After the extensive rework done porting the main widget hierarchy from GtkTreeView to GtkColumnView and implementing several GListModel interfaces to avoid maintaining multiple lists I was able to reimplement and extend Drag&Drop code so now its possible to drop widgets in different parents.

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!

New Cambalache development release 0.91.1!

I am please to announce a new development version of Cambalache

This comes with two major dependencies changes, the first one is a very basic port to Adwaita which fixes dark mode support with Gtk4The biggest one is that I have replaced the WebKit WebView used to show widgets in the workspace for a custom Wayland compositor widget based on wlroots.

So far, this is how Cambalache showed windows from a different process in its workspace.Workspace diagram using Bradwayd and WebKit WebView

It would run broadwayd or gtk4-broadwayd backend depending on the gtk version of your project and use a WebView to show all the windows.

With the new approach we do not need the extra broadway backend and also we do not need to run a whole web browser just to show a window.On top of that we get all the obvious optimizations from using Wayland instead of a protocol meant to go over the internet.

For example, with broadway, the client would render the window in memory, the broadway backend would compress the image and sent it over TCP to the webview which has to uncompress it and render it on an HTML5 canvas using JS api.

But now, the client just renders it in shared memory which the compositor use it to create a cairo surface from it and renders it directly in a GtkDrawingArea.

And this is how the new Cambalache looks like when editing its own UI.This also leaves room for improvement by leveraging all the new Gtk infrastructure for graphics offloading (see this blog post from Matthias about it)

As usual with so many changes I expect new bugs so please if you find any,  file them here.

Special thanks goes to emersion, kennylevinsen, vyivel and the wlroots community for their support and awesome project, I would not have been able to do this without wlroots and their help.

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.90.0 Released!

Hi, I am happy to announce a new Cambalache stable release.

With the UI ported to Gtk 4 I bumped the version to 0.90 to reflect the fact we are really close to 1.0

Editing Cambalache UI in Cambalache

Release Notes:

    • Migrate main application to Gtk 4
    • Update widget catalogs to SDK 46
    • Add support for child custom fragments
    • Add add parent context menu action
    • Mark AdwSplitButton.dropdown-tooltip translatable. (Danial Behzadi)

Where to get it?

You can get it from Flathub

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

flatpak install flathub ar.xjuan.Cambalache

or checkout cmb-90 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 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