Imagine that we are going to build an application for GNOME. GNOME is the graphic user interface of what runs beneath… a layer on top of what we call GNU/Linux.
How we can define native and non-native applications for GNOME? If an app uses Qt, does that make it a non-native GNOME app? Does Qt run on an emulator? Does Qt have restrictions against using GNOME Technologies like GOA? Is everyone happy with the UI of Blender?
I think that people tend to characterize something as GNOME-native as long as it looks like a typical GNOME app. What if we write a GTK app that doesn’t look like GTK? What if we write an HTML app that looks exactly the same as a GTK app?
The important thing is to use the right tools for what you are going to create. You want to make a GNOME Utility? Then yes, you will definitely go with GTK. You want to write an application that will talk with Online Services? Then GTK isn’t good enough. As a matter of fact, many GTK apps use WebKit to draw their contents.
Implementing GNOME’s CSDs with NW Window API
What’s fascinating with HTML5 is that you can easily mimic any interface to such a degree that people won’t be able to tell if it’s GTK or HTML. The most “recognized” part of a GTK3 application is undoubtedly the Client Side Decorations(CSD), so let’s start with them.
The following figure shows the problem.
The solution is really simple. Node-Webkit gives us a Window API that we can use to set properties on elements and windows, like draggable or not, min/(un)max/close buttons, fullscreen, (un)focus and lot more. Just check the API.
The next step is to create a CSD widget that will mimic the GTK headerbar, giving it a “more native feeling”. I didn’t look at Adwaita CSS to completely copy the theme, I did it by eye, but it’s okay for the demonstration.
Window is dragged as any GTK Window
Can you say that this is not a native GNOME application? It’s actually extremely GNOME native/oriented, because it can only run in GNOME. We can even wrap GNOME libraries and call them directly from the DOM.
What if we want to change our settings, like themes, fonts etc? It is even possible to theme HTML5 applications according to our system settings, as long as someone writes a GTK theme parser.
Themes Bundle Arriving ;)
The above application is the client for the Theme Services I am building.The Online Service already provides comments, ratings, full-text search & indexing, user’s karma, reporting themes, quarantining themes, transferring ownership of a theme, create theme packs, downloading/installing with a single click… and more!
Just yesterday as I started prototyping the client I was wondering, why not ship this application bundled with some themes in offline mode until I finish the online service? So I am going to do that. I think it should be ready by next week.
I will upload it to GitHub, and people can send pull requests for themes. If you hit the Updates button, you can get a new client version bundled with new and updated themes. No installations, no compiling… just launch it, hit the Play button and use the theme!