You Got A Question? Ask    GNOME Community!


Implementing GNOME’s CSDs with NW Window API

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.

nw-csd

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.

ilg-client

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!


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community
  • Carlos Soriano Sánchez

    that’s pretty good! The experiments you usually do make me think about the future of gtk and qt, etc. and the convergence with web technologies and how firefox/gaia is going with it.

    • alex285

      Hey, I started to learn Tizen programming. Just check on Tizen IVI. I’ve tried so hard to make a post on that, but I can’t run it.

      https://wiki.tizen.org/wiki/IVI

      • sramkrishna

        You are?! How cool. :-)

        • alex285

          OMG.. You are the “Release Engineer Manager for Tizen” ?!? I have to catch you on IRC!

  • Pingback: Implementing Gnome’s CSDs With NW Window API | Linux news()

  • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

    Nice. It would also be cool if it could adapt to the GTK theme, to have a native look with themes other than Adwaita.

    • alex285

      You will add complexity in developing, in portability & packaging and you will actually make it slower by adding extra dependencies. Why to use Gtk only for 3-4 buttons?

      • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

        Consistency?

        • alex285

          This is the one App that consistency would be bad ;) Some Apps is nice to have custom themes.

          • Marco Scannadinari

            Some Apps is nice to have custom themes.

            Why?

          • alex285

            I can’t document the why ;) It just happens. People use skins for FF, for music players, instant messengers etc. Just my opinion, I would like if all apps could have custom skins.

          • Eduard Gotwig

            yeah, right .. like in (good lol!) old M$ windows times :/ please no

          • alex285

            Or XMMS times :)

  • ohgodno

    This is a terrible idea! Mimicking will always be only that – Java’s Swing could only mimic the native OS aesthetic, which failed the moment OSes deviated from early 2000s design. Where is Swing now? It’s a failed paradigm and mimicking is a poor substitute for the real thing- this is a genuine step back from what we had before.

    No app should be able to destroy my ability to move it around, close it and otherwise manipulate it by removing the native window controls – the poor quality of software or indifference of the developer should not compromise the system’s ability to control it sensibly.

    • alex285

      Correct me if I am wrong, but I think this is CSD about. GTK applications draw their own controls, not the window manager. It is up to developer what he will do there and not of the system.

      • ohgodno

        I think it’s great that the developers of say, Gnome Music can add buttons in the title bar that change depending on the context. But consider this: Gnome’s move from “minimise, maximise, close” to just one big close button would have been near impossible if CSD was in use by then, or at least inconsistently applied.

        Every application that used a GTK-specific title bar could be ported over fairly easily – the GTK developers would just have to alter the code inside GTK. I might be wrong on this too (feel free to correct me :) ) but Qt applications would then need to be patched too, as would node-webkit applications and any other toolkit. It’d be worse for any applications that drew their own window decorations and didn’t rely on an open source toolkit – and if those applications were closed source, you’d be utterly stuck.

        (Bit of a rant here :P – apologised in advance)
        Compare this with mobile interfaces – there are no window decorations, but there are still standardised ways to interact and manage each application. On android, I can get back to the home screen by hitting the central button at the bottom of the screen. I can get to an “app list” by hitting the button to the right of that. I can go “back” in any app by hitting the left button. On my old samsung phone, I don’t have those on-screen buttons, just a big physical button. Short press to go back, long press to get the app list. On an ipad, one big physical button to go back to the home screen, and a four finger swipe from the bottom of the screen to the top.

        This works fine because it’s enforced for all apps by the ‘server’ – the OS itself. Imagine how unpleasant it would be if all those interaction mechanics were mixed freely – any iOS apps that had been ported quickly to android would require a physical button (my nexus doesn’t have one) or a four fingered swipe. My native android apps wouldn’t respond to a four fingered swipe at all, but would draw the three buttons to the bottom of the screen. Any samsung apps would require a physical button and not draw any buttons at the bottom or respond to a four finger swipe. It’d be anarchy and chaos and really user unfriendly.

        I think the ideas the gnome devs are experimenting with in terms of putting buttons in the title bar are really interesting and useful, but without an authoritative enforced app management system (whatever that might be) I think you’re going to have a really unpleasant time as a user.

        Hope that makes my position clear. :)

        • Domagoj Bet

          A very interesting point! You might want to discuss this with a gnome dev on email/bugzilla/irc to point it out.

          • ohgodno

            I’ll give it good consideration. :) Ultimately I think completely unfettered CSD is as wise as browsers letting web pages change the functionality, look and shape of that page’s tab. No one would be very happy if webpages could make their tabs bigger, or remove the close button, or make clicking the close button open a few more tabs. :P

            I’m not saying developers will use CSD for nefarious purposes, (rather, I think they will be well intentioned) but I’m making the point that in terms of responsibility, window decorations belong firmly within the domain of the desktop shell, not the app. I don’t really like anything about KDE’s design or aesthetic, but the developer of their compositor Martin Graesslin holds the same view regarding CSD, and I agree with him wholeheartedly! :)

        • alex285

          Just a couple of notices. Controls in NW isn’t a patching. All toolkits have such controls, like closing, maximing etc..

          The other thing is that the most popular program in Linux, Google-Chrome, ignores Titles Bar. In the end of the day, programmers will do whatever they want ;)

          Don’t compare mobiles UIs, with Desktop. Different needs and a variety of libraries to work in desktop.

          • ohgodno

            Truthfully I don’t know much of the details about other toolkits. Skype, a Qt app on Ubuntu 12.04 uses their server-side enforced window decorations (buttons on left side) just like Gtk apps. Did that require patching Qt?

            Thankfully you can disable Chrome’s CSD, but I take your point. I agree there are genuine use cases for custom window decorations – like conky. If I’m very honest, my personal preference would be that “desktop widgets” and other similar ideas would be plugins or extensions for the desktop shell, and all otherwise installable, sandboxed apps would be forced to use a unified “app management interface”, in this case standardised window controls.

            I disagree there- I think you can compare mobile and desktop UIs. Treating them separately is meaningless- it’s the same issue of cohesive “app management”, regardless of the platform or situation. Looking at the by far the most popular, widely used computing user interfaces right now, namely android and iOS, they *both* have server side app management/”window decorations”. Their apps come from untrusted developers, running in heavily restricted sandboxes- in other words, no, on the most used platforms in the world, developers do *not* get to do what they want. ;)

  • ohgodno

    Just as a follow on, this is what Sam Spillaz, the ex-compiz dev has to say about CSD – he puts it much better than I could:

    http://smspillaz.wordpress.com/2010/05/04/something-i-should-draw-your-attention-to/

  • Tamaskan

    I don’t get the point. If you want to build native GNOME apps, just use the native GNOME libraries like GTK+. Then you can also use CSDs, because you are just supporting GNOME and not other desktops where the CSDs would be awful.

    “Can you say that this is not a native GNOME application?”

    Yes, at first sight. Sorry, but this mimcing stuff still doesn’t work at all. There is still the trade-off between having a cross platform app that doesn’t look native and an native app running on just one platform.

    I also don’t get the point why we should use web technologies for desktop apps. Web apps are great when the only thing they do is displaying and editing content from a server, but for rich, cross platform desktop apps we have way better tools like Qt.

    • alex285

      This isn’t about whats better whats worse. I could count 100s of advantages for using JS, and you could also do the same for Qt. But the reality is that everything is about Javascript these days.

      Calling something no-native because isn’t Gtk, is wrong. I could call Gnome-Tweak-Tool no native. Since when Python is a Gnome language? As long as something runs in a platform without emulator is native. It might use some other libraries, but still native.

      Look at Ubuntu. Ubuntu Apps are made in Qt or Gtk ot HTML5. They still call them UbuntuApps.