 This is a presentation that I've been using in some events to teach people about GTK and usually the presentation is made an hour long. So, I was requested by the deaf organizers to try to make it shorter because in times of pandemic everybody is tired of long presentations. So it's going to be a little bit of a speech run because it's a longer presentation. I put in these lines and also links to the resources I have. And he also has a video of a longer version of this presentation that I presented in another conference. If you want to see me going through more details and all the things that I'm going to be mentioning. So, yeah, before I get to that, I'm working in GNOME for about 10 years now. I work for Red Hat in the last six years in the desktop team. I'm mostly developing GNOME and Fedori. I work in GNOME Boxes, which is our visualization front end. So I am not touching a lot of GTK applications and I've been committed to the newcomers initiative in GNOME that tries to bring new people to the project. And one of the initiatives that we do is to teach people how to contribute to existing projects. And another one is how to write applications from scratch because the Linux ecosystem unfortunately still lacks a lot of applications in comparison to other ecosystems. And a lot of folks don't develop making applications for documentation and things like this. And I admit that GTK doesn't have a documentation that is as good as the other two kits, let's say. But we are progressing on that and this presentation is another step towards making GTK more approachable. Usually I would have one slide for each one of those bullet points and then I'll go in detail and everything, but since the time constraint here, I'm actually going to just talk a bit about it and then get into demo time where I'm going to be writing a GTK application and just trying to talk at the same time and trying to communicate these concepts while I do so. And yeah, demo presentations are everything that can go wrong, right? So let's hope it's going to work. But to start with, who is using GTK? If you're using the GNOME desktop or if you're using a desktop that is basing in on, you're likely using GTK applications. XFC and MATE and all the ship GTK applications. I also know that Firefox draws its chrome, like the window decorations and all, using GTK on Linux. Steam uses it. We have spoken to some folks at Konami that we are using GTK internally, but for the mention of proprietary software, they cannot tell us specifically why they are using it, but GTK is widely used on desktop land. Unfortunately, our multi-platform storage is not as concrete as other two kits. So if you were to develop something that you expect to run in a phone or in an embedded device and Windows and macOS, maybe GTK might not be for you, but there is being a constant improvement on our Windows bindings and macOS bindings. So the story is changing and GTK is catching up. And when it comes to desktop applications, it's very delightful to develop applications with GTK. So if you get experience with that, you're going to see the clear advantages. The key concepts that GTK is designed on is the idea that a widget, a UI element, can either be a final widget or a container that packs other widgets. So we are basically adding boxes and adding items to boxes and organizing things like this. And this is going to be much more visible to you once we get to the practice part. GTK introspection is another topic that is important to cover here, is that what allows us to write applications in Python, JavaScript, VALA, various other programming languages that GTK has bindings to. And this allows us to write GTK in Cs, and GTK is developed in C, and concern is throughout these programming languages. So thanks to geodec introspection, the example that I write today is written in Python and is going to be called in GTK widgets that have been written in C. The pros and cons is exactly what I mentioned about the widget platform story. The animations are also kind of lacking in the past, but now in GTK4 there is nearly released. The animation API has improved significantly. Another part that I want to cover here is the clean. So the IDE that you can use and debugging another clean that you can use while developing GTK applications and the distributing aspect that nowadays we have this feature of technology that is able to run applications on flatback containers. And it's groundbreaking for us and not just for internal testing and things like this, but also for distributing applications to end users across distribution boundaries. But anyway, let's get to the practice because as far as I can tell, I don't have much time. Also, you have some issues with the sound quality. Let me try to change the microphone to the camera. I wonder if this improves the situation. I'm going to hope it does. Okay, I'm going to continue forward. Please let me know if things aren't working. So our IDE is GNOME Builder, and GNOME Builder can bootstrap projects for you. So this saves us a lot of time once you are learning a platform you don't want to actually have to learn a whole picture before you get to do something easily with it. And I like to be able to start from somebody or play a project, evolve from it, and then later on just clarify this concept. In the presentation that I linked, I actually go through bootstrapping a project and describe the files one by one. But here, since we are constrained with time, I want to simply just start an application as fast as possible. The application is going to be a web browser. I think a web browser is useful for showing how we can use GTK, also linking to WebKit GTK, which is the web engine that we are going to be using, so how we can create a real practically useful applications. I'm just going to go check the checks a bit because I don't have a comment. So I hope the audio continues. So the project name you describe in builder, it's basically the typical project name that you're going to see like Firefox, Nautilus. And then the application ID is a reverse DNS name that meets your application need. This is going to be used for the divorce activation for AppStream data. So for instance, for your application to show up on AppStores. This is also used for desktop files. So the files that describe how the application launchers look on wireless launchers. So we don't show the type of Firefox, but describe the icon name, the human readable name, and things like this. So yeah, we're going to just create an order in Nautilus browser because it's not being creative today. And pick the language as flight. Here in the bottom, there are templates. There's just a basic, you know, application. So by creating a project, you know, the builder is going to bootstrap the project with the initial files that we need. Here in the very top where you can control the build and everything and see also that it's building against the runtime and it has version of a runtime. So I'm just going to go into the details about it very quickly. So this is specifically a whole flatback. So the application is going to write this manifest that describes how the application should be built. And this allows us to create a flatback for this application. So the manifest describes the app ID that we entered before, the runtime. So the runtime is everything that your application is going to depend on. That is genome-specific. So the org.genome.plotform is the genome runtime. KDE has its own runtime, so you can link against the KDE-specific libraries. And the way run-times in flatback are implemented is that they inherit from other run-times. So there's the free-to-stop run-time that has this very elementary building blocks that both genome and KDE run-times use. Same thing about the SDKs. So these are libraries and headers and things that you need to propose your application. And then here we come to the finish arts, which in the flatback manifest describes the permissions your application have. These are not portal permissions. So these are not the permissions you see, like application wants to have access to your camera, authorized. These are run-time permissions. These are hardware static permissions. So these are hardware permission that your application cannot function without. So basically, our application needs network access, ITC, so we can access the divorce, and these sockets for the display servers for both X and Y and Y. Since our application is a user-facing application, there's no point in keeping the files that get extracted into this pass. So there is a thing of common here that suggests to detail. The important part is this module's list that you can bundle applications and libraries. So for instance, I will be able to add here another JSON entry and just bundle another library that doesn't belong to that type. So my application can use and link things that are distributed in run-time, but can also bundle its own internal libraries and dependencies. So this is very convenient to distribute an application like this and once for all, solve the latest implementation problem, let's say. So one of the modules that is described is the very own application. So here we have the name of the application, the build system, and the sources. So the user changes it to this local path, and the version of my application, this could be a parbole or could be the digital repository online. So for everybody who's building a flatback to be able to obtain the sources. So yeah, before we progress, I want to check the chat again. Okay, so. Okay, so it seems that it's working. So the nissan file describes the very basic things and unfortunately, you don't have time to get into the details about everything. Let's progress to the code part. One interesting thing about a modern application development in DTK is that we are able to separate the graphic template part from the logic. So you'll see here in the side that we have this UI file, window.UI, that describes the widgets in this XML format. And then you have the window.py file that has been already bootstrapped that is just the vital logic that is connected to that. So you imagine about a model viewer controller type of paradigm that you see in others text. So this is something that DTK kind of has it. So what Builder is doing here is pretty much just binding this browser window class to the template that is defined on that file. So I can access the widgets defined on that file and their properties and such. So let's run things. Once I press play here on the very top, Builder is going to use the flagpack manifest to run the application. And hopefully it's going to work. Yes. So this is the basic model plate that we get. So it's a DTK window and there is these labels. So first thing we're going to do is we're going to change the label. Why not? So here we have the description on that label on the XML file that's the text from the label property. This might be a good moment for us also to look at the documentation. So let's just rapidly modify here and see the changes. And let's get going. We are building a web browser and this web browser is going to be using WebTGTK as a web engine. The reason is because WebTGTK is record of the web engine that can be used in GTK. So that's how we are embedding and WebEngine is responsible for rendering the web pages. So when you see in a regular browser we have the rendering area that is provided by WebEngine and then we have the Chrome as the browser. So we are going to be doing a Chrome to control existing WebEngine. So I'm going to work here with WebTGT tool library and on my UI file I'm going to turn the first challenge that is a label that we saw into a box so I can place that inside of it. So boxes don't have labels, I'm getting rid of it and these attributes are also label-specific attributes. So just a plain box. And then here when it comes to the code I am just going to rename the label into the code. So let's create the WebView. I'll create a WebView instance and then I'm going to pack it in that box. So the GTKbox and GTK3 has this tag start that allows to put that widget inside of the container. This is going away in GTK4 but this is actually a GTK3. So I'm going to edit and you will see these three other parameters. So let's actually get to the dots so I can show you exactly where the parameters are coming from. So this is the page you see with the IntimizedLives and everything here. So the GTK object reference here will be able to tell us that the GTK box has a method and it's tag start and receives firstly the GTK widget with the child and then some properties on the widget whether they should spend should fill the container and some padding so the business the margin on the space between the whole space of the widget and you don't want to have a margin. With that done I guess we can just tell our widget our application window to just show all the widgets that are contained on it. So this should already do some. Actually we should tell the WebView to load a web page. And then look at the WebView documentation and look for the loadURI method. I'm just browsing of the API specifically because that's how a newcomer would approach it. You don't necessarily know the name of the items on the API and they're just browsing the API reference material and figuring out. So loadURI receives a string and this string is just a classic WebURI. So let's do a loadURI and we're going to load DevConf.season So we're time to run our application. But once it's not defined it's itself. Right, so now we have a dummy browser that opens just one website. It's here we can browse everything but there's not much I can do if I need to always review the source code to get to get to any other address, right, other than this point it's maybe a fun exercise to try to escape the website and get elsewhere. But anyhow what you're usually expecting a browser is an entry for you to type an address, right, so that's the next step we're going to do it. Here in the top we have a GTK header bar. The header bar is this typical GNOME bar in the top that can have widgets. You see here where my cursor is going in a typical web browser you also have all these controls embedded. So it's the very same principle we're going to use in our application. I am not a designer so I'm going to make a browser that looks like the other browsers. I'm not going to get creative about it. So what I'm going to do is that I'm going to pack a child widget to this header bar. The header bar is a container as well. We can see that on the API browser as well. In this GTK entry I'm going to give it ID so I can reference this in my idle and I'm going to follow it to my ID entry because naming things is one of the hardest things in computer science. And I'm going to set the property of the widget to visible. This is basically how I set properties of a widget. I set the property name and the value of the property. So let's get ready in our application. Yes. So you see that there's this entry bar here in the top. It's quite dummy. It doesn't do anything. I can type and press enter. I'm not going to do anything because we haven't connected just yet. Another thing I noticed about it is that it's kind of on the left because the header bar is a special type of container that has a child type that allows it to face on the center here, which is what usually the title of the application is. So I'm going to pass a property here to this child type and the type is type. So running again the application as it's centered. So at this moment one of the tools that are very useful for GCA development is the inspector. In the link I put it there, I have some documentation about how to activate an inspector and how to set up the shortcut for it. I already have it on my system that when I press Ctrl Shift I, I have the GCA inspector pop up. So it has a message here in case somebody triggers this by accident. And this is simply just, it is inspired by these inspectors that you see on the WebView, right? The WebKit, if you press Ctrl Shift something, you also get this WebView that you can pick an element on the Web page and change it's CSS and properties, you can do whatever you want. And this is very nice for interactive development. And GTK has it as well. So I can click on the speaker and select part of the widget on the application. So I'm going to click the GTK entry that we just added. Here I can see the name of it. Various properties of it in terms of size allocation and accessible rows. I would go into details about the other tabs here if I have more time. But this is usually very useful for us to test an application with other teams, like high contrast teams, important for people with accessibility needs, the wind temperature, just the dark variant. So this is very useful. But what I wanted to click here on this GTK entry is actually to have it fill the whole content horizontally. So when I check its properties, I can just toggle them for instance. The property visible that we just set here before can be easily toggled. They are in alphabetical part here. So I can turn false and true and the widget reacts live. So that's very nice. What I wanted to expand horizontally, so H expand set into true, expands the whole. That's nice as a restart. So I would just go here and make it official by expressing it on the widget description. So from now on, these are connected. Since I'm showing you the inspector, another thing you might have noticed is the CSS tab. GTK style sheets are CSS which means that if you want to tweak the way your application looks, you can use CSS and it's very powerful. So I could for one start by let's say set in the background of everything to read. So all the containers are read now. I could use a specific container selected. Just say only the boxes are read. Let's say the entry. So only the entry is read. And this is very powerful. I could go to extent of defining keyframes for animation. So let's say I want to do a siren, like a police siren animation, and I could define it as a transition from background read to side to the truth from background blue to background red. And then I am going to just make it for the whole set of widgets, define animation the name of that animation how long it should repeat and the frequency of it. So now you can see that I can have a transition from one to another in one second and slow it down or anything. Various things on your desktops are made like this. If you go to the user accounts and you know it's something that was personally involved in the development, this error that follows your user account is also defined by keyframes in CSS. You can define here for instance the linear transition or if you want it not to be linear you can specify other functions for the transition. So it's very powerful. But anyways we are not here to make funny applications. I want to actually be able to type addresses on the top bar and get the page to go elsewhere. So if I go to a GTK entry I can see that it has a signal called activate. The activate signal is emitted but the user hits the enter key. This is exactly what we need here. So I am going to connect that signal by doing signal name activate and the handler is going to be the callback that I am going to execute as soon as that signal gets emitted. So this is an event oriented programming so user clicks a button and the signal is emitted and something reacts to that. So that's how things are all plugged in together. So I am going to call my method on your I entry callback. Again creative and naming things is not an SQI have. So here we need to write to the function. One last minute. Ok, so I am going to do really fast. So if I were to define the name of the function here in a Python reference to it I could just get the URI from that entry so I could say entry get text and then pass it to this function that we saw here above that loads the page. So you are selling load to our I with that as a fact. I also need to indicate that this is a callback so there is an annotation that connects and I am going to run and hope it gets in a minute. So now the webpage is here and I can type my webpage press enter. We didn't connect the progress bar or anything but it seems to be working. So I am going to be able to enter the presentation link so you can go forward and backwards and everything because I also added back and forth buttons, reload buttons, homepage buttons but these are things that are easy to implement and you can see on that. So yeah, basically that was it. In this link you will have more information if you want to follow along. You can also join us on IRC and ask for help over there.