 So, soon Voila will present you to take a quick for beginners. Yep, this is the quick for beginners and let's start about seeing the plan for the next 45 minutes. If there is any questions during the talk please raise your hand and speak up because everything I'm going to do is going to build up on what I said right before. So, if there's anything that is unclear then let's take it from whenever we arrive to such a thing. And yeah, I will be talking about the talk, about some basics and then getting a bit more advanced with the how to interact with C++ and the friendship of Debian Box 743250. But me, I'm involved with Debian maintainers since 2005 and developers since 2007. 2007 is also when I was at my previous Debian Conf which was my first. I have been a KD contributor since 2007 when Qt opened up for external contributors. I have had a patch in here and there since it opened up in 2011. When I'm not doing all of these three things, I'm a software consultant doing Qt or C++ or Java or whatever, either for container shipping business or for medical technology or whoever else needs my services. And I'm soon available again if any of you is needing somebody that can do what I can do. So, this talk, there will be a lot of live coding in Qt Creator. And just so that we all know that this, just to show it off, we'll have, this is a Qt Creator window. The thing of all these IDs, especially when used for live coding is that someone like me who used all of the keyboard shortcuts and so on, it can be a bit hard to follow if you're not used to it. So, the big thing is what is the main window which is where the code is actually happening. Over to the left there is a structure of things and in this lower corner over here there is the play button which starts the application. There's a lot of more other things that I will not dive into because this is not about Qt Creator. It is just to show you enough of it to, you're not lost in what I'm doing. And then there will of course be this slideshow and I'm going to be switching quite frequently between them to give an example in a slideshow and then show it off live. So, let's continue. First, let's get a couple of terms that I'm going to use, explain. Qt is a framework for making applications, graphical and other kinds of applications. It is made by currently a company called Digia and it's available under various licensing terms. All of them is at least GPL v3 compatible but other possibilities are also available. To jump down a couple of things, QML is a language that is mostly a way of declaring how things are supposed to be and then it's having an interpreter to actually turn it into something usable. QML combined with a set of items and rectangles and text input fields and similar is what's called Qt Quick. That is also kind of a marketing term for the concept of QML plus standard components. Then there is Mock which is a Qt code generator tool that is helping to do some of the magic but it's mostly happening transparently behind the scenes but it is sometimes instructed by various magic in some of the code files. Qt declarative is what's the source package name and the git module upstream name for where the QML and Qt Quick bits live. I will mostly be using QML for the language and Qt Quick for the actual concepts. So, let's get started. There is basically a hierarchy of types. Most things that can be shown on the screen is an item or derived from an item. Rectangle is a quite common used item because it has the possibility to add a background and a border and things like that but both item and rectangle has a size on the screen. Then there is Qt object which is an object that is not a graphical element but it can hold data or it can hold functions or both. In many cases item or rectangle is used as container objects to put more things into it. But let's start by seeing a rectangle. This is one of the examples. Is it fun large enough to see for most people in the back? I guess we enlarge it a bit. But this is basically a rectangle. This can be run and it looks like this. Here we have actually an application. It doesn't do much but it is there. Of course we can say that we want the background to be... I can't type today. This is going to be a great live demo day. It can be turned into a red rectangle. But enough about the simple rectangle. Let's get back and look a bit further. Often when you want to lay things out, you want them to be attached to each other. First you have a text element underneath. You have an image or a button or a text input field or whatever you feel like. In order to say that this item should be attached to the bottom of this other item. Or this item should fill the other item or whatever you want. You are accessing things by either referencing them as a parent or by an ID. Everything can get an ID and is accessed in the file. Let's try adding another rectangle. For those of you who were at my lightning talk the other day, we are starting from around the scratch as I did back then. Some of you might see it once more. Let's make a rectangle inside and make that white. Let's anchor it somehow to the rest of it. Now we have a white rectangle that is anchored to the top, bottom and left of the parent item, which is our red box. The red anchor is set to the horizontal center of the parent. We should have a half white, half red kind of thing. And that's basically how you can lay out things attached to each other if we give this thing an ID and create another one. Red rectangle. And here we have a cyan rectangle that is attached to the left edge of the cyan rectangle that is attached to the right edge of the white rectangle. That way things can be attached together as how you want them to be. This is a bit about basics in anchoring. Let's get rid of this and continue. That was the basics of anchoring. The next interesting thing could be if you have several items that you just want to lay out either down next to each other or as a column next to each other. There are two container items for that, row and column. Let's put a couple of items in a row or column. Let's do that inside the white rectangle. We are placing our row in the middle of our parent item, which is the white rectangle. There we have a row in the middle of our white rectangle with some green in it. If we instead want them to be laid out in the other way, it's just making it a column instead. We can even do some spacing in between them. This is a language that a couple of my friends who are designers have started to like a lot because then they can actually easily express how they want things to look rather than having to explain it to those stupid developers who can't figure out how to implement their ideas probably. But next up you might also want to have more than one thing derived from something else. So let's do a repeater. A repeater is, as it says, it repeats. It can take various models. That is basically what it is repeating. It can be an integer, it can be a list of things, it can be more advanced types that somehow can be iterated over. But for a simple thing we could do a repeater with a text item inside. Let's do that inside the column to have our things actually laid out. So here we have, it might not, maybe not all of you can see it, but we have five text elements with the text from text zero to text four laid out in a column. And that's basically all it takes for that. Instead of using the integer five as a model you could use a string list or whatever else you felt like would be the right thing for your use case. And the main data element for all these simple models is basically called model data. That would also be if you were putting in a string, or if you were putting in a list of strings or similar, it would also be model data that was a thing. Isn't it something like, isn't that how you make a string list in this language? So you can just use a string list instead for all these things. So that was repeaters. And what's next? Oh, that's events. Now it's going to be actually funny. For various things you can do. Some objects has, somehow can generate an event. It could be something coming from inside the system. It could be changing of a property for some kind of reason. And then there is handlers that are either on foo or on bar change or what kind of thing it is. On foo is for a function type called signals. That is basically when this signal is emitted, then do something. Then there is on bar change, which is whenever the property of bar is changing, then do whatever is happening. And we are going to use that in a moment to do mouse interaction. The very basic one is create a mouse area. And when clicked, then debug write hello to the debug console. So let's try at a mouse area somewhere. We could add it to the white rectangle. So now we have, those of you in the front can at least see that we in our debug console can get the word hello written out. For those of you in the back, you just have to trust that whatever is changing on the bottom of the screen is hello being appended to it. And this is actually how to make simple mouse interactions with the event handler for mouse clicking. It can of course be turned much more advanced if one wants to and we are likely ending up there in the not too distant future. Next up I will talk about what is called the controls. It is a set of pre-prepared components that kind of fits into your desktop. It is a set of buttons and labels, checkboxes, whatever else you need of standard controls to actually build a desktop application. They try to follow the style of your system so that if you are running in a GNOME desktop it is trying to use styling that make it look like GNOME buttons. If you are running in a Windows something system, it takes up the buttons from your Windows system to actually use that. For Mac and KDE Plasma and all sorts of other things it is trying hard to fit into the system to actually behave like a native desktop application. So let's try to add a button or two. Let us put the buttons, let us create one more rectangle for the other half of the screen to put more things in. Did this? No. I did. Thank you. That was not what I was trying to do. So now we should have a science thing on the other side so that we have something we can actually put things into. So let's do a button with a text. Let's be advanced in saying text plus equals and see what happens. We have a button that says click me and whenever we click it we change the text of the button and soon it is going to be quite ugly but I guess you get the concept. This is a button and there are lots of other components checkboxes, radio buttons, whatever building blocks you would need for your modern application. Table views, list views. There are other sets of components. For example there is the Celica component which is shipped by the Jollaphone which is native things for that. The touch people have also their own set of components that are used to make the open to phone things and other device makers as well who are making their own set of style controls that actually fit into their systems. The couple of projects that I have been hired to work on has also made their own set of things to be able to make their own platform use or look as they wanted to. The next other thing is text. There is various text components. The basic text one we saw already it just displays text not styles in any way and the text item has its friend label over the controls that is basically making a label that fits into your system. Similar there is text input and text field where the text input is a very basic type and text field is a style to look like a text input on your native platform. Text edit and text area are multi-line items just like that are also either style or unstyled. Next up this is likely where it's going to be funny. Let us do some magic with behavior. It is basically you can set up what happens when things change. This is an example of a number animation that when rotation changes then it should happen with a number animation that takes 500 milliseconds and uses a fancy easing curve to make it look smart. Let's try it in practice. We have now created a button. Let's do something smarter with that instead. On click, right rectangle dot rotation plus equals 180. For the right rectangle, behavior on rotation. When we are clicking it we should fancy rotate the right rectangle and we see all of the nice red background that we had before. The eating in out bounce is the thing that is actually making it bounce a bit. If we think that's a bit too fancy we can just go for the default which is just rotating it nice and easy. It depends on your expectations of fanciness. A whole lot matter of taste. Transitions is a way to do more advanced behaviors or things that happens on specific times. States is part of it. For example, a state happens and then you transition from one state to another by applying the following changes. I'm not going to show that today but that's basically behaviors for a bit more advanced usages. Next up I will just mention the QML scene application which is basically a command line tool that runs QML files. It is what Qt Creator here has been using behind the scenes to actually execute what we have been writing and it can be invoked on command line just as easy. Next up for actually extending Qt Quick one might want to do that. For example, creating a thing that you want to use for another. Project or just another place in your application instead of copy pasting which is just usually giving more problems than actually solving. If you are creating an item in a file as the only content then you can reference this item by just creating it. So if we try to create a small item I'm just getting this thing to creating a Qt Quick file. I could also create it with touch or similar. Now we have a file called FooQML and it is a rectangle and we are going to color it. What color are we missing? We have anything blue currently. So this is called Foo. It is 100 pixel wide and 62 pixel high. So let's put it into our column. So now we have created a Foo item here and we have a blue square. All of you can of course make it more advanced as you need it but this is basically how to reuse parts in other places. So now we are going to make things a bit more complex. This is Debian Box 7.4.3.2.5.0 which is a thing I made leading up to April 1st. It is a CPU load monitor thing that basically shows various pictures depending on your CPU load. It is using a bit of a native code to actually find the QNCPU load and then it's being displayed with a small Qt Quick application and we are going to talk a bit about that. In general for interacting with C++ this is a full C++ class. For those of you who know C++ half of it looks weird but let's take it from the top. We have created a thing called MyObject. It inherits from the class called QObject. Then it has a macro called QObject that is needed for most things that derive from QObject. It is a macro that extends into four or five lines of code for setting up various Qt bits. The next thing, QProperty, that is another macro it is defined to absolutely nothing. The purpose of it is for the MetaObject compiler mock that I mentioned first. This is where we are actually instructing mock to generate some code based off of this. This is basically exposing a type called foo that can be read by a method called foo and set by a set foo method and whenever it is changed this function is called. We have our get method that just returns the member and we have a setter function that just sets the member and calls this function. Next fancy thing is QSignals. That is another define that is mostly meant for mock. QSignals is defined to public. It instructs the mock that it should generate the actual method body and some metadata around it. That is more or less what it actually needed to expose C++ things to Qt Quick. We can now create a MyObject thing where we can set the foo property on it and if the foo property changes we can actually react to that. You can create it by creating a MyObject just like we created the other foo thing just with plain QML. The application from before is called hot pole tag and let's look at that. It is a CPU load monitor and this is the entirety of the header file of that. We are defining an enum value with various CPU load categories and then we are just having a method that returns the current load as expected for our load enum and that is about it. If we look at the actual implementation of things we are of course creating a timer that pulse the system for the CPU load because that way the CPU monitor uses more CPU as all the CPU monitors does. It is just a feature to ensure that more things happen and the CPU load monitor actually looks like it is doing something. That is just a timer that every second checks what is the CPU load and if the CPU load is different from last time we are going to communicate to our GUI bit of it that the load has changed. This thing is a C or standard library GPC thing or something like that that can somehow give me the current load of the system and then we are just mapping the load to our enum. It is a simple application that if I am switching to that project it is just a square with an image and I have not that much running on my computer system but this is when there is no load on the system. This is more or less all the C++ bits there are. We are running this timeout method every second that queries the system for its load and then if it is different from the last load then we are updating the GUI. The attached file is we have a rectangle as you have seen before. It has a height and a width and then we are declaring a local member variable of this rectangle that is basically our list of images in a specific order and we then have an image type which is another quick basic type that basically just shows an image. Now we are creating our CPU load object that is the one that we actually declared in C++ and whenever the load changes then it sets the source of the image object to a member of our PIX bar and this is basically all there is to that fancy CPU load monitor. So yeah that is hot pole tech. If somebody wants to package it for Debian you are free to do that but you might need to sort out licensing around images or get the model and replace them. The model is down there in the middle of smiling. In general you want to create in many cases you want to create most of your business logic in C++ and much of your GUI in QML. You can for some more advanced GUI elements also use C++ for those depending on how much custom painting or fancy OpenGL cores you need to do in your own font depending on what kind of fancy you want you can interact closely with the underlying system but now we are getting a bit past the basic or for beginners part of it so I will not go much further into that here but in general as you saw we created the foo object that was just a foo.qml with a rectangle in it and we used it similar to how the hot pole tech application just creates a CPU load it is very similar on how it is actually done for the end developer it doesn't matter where it is actually created it is just a matter of using it, it looks the same and you can actually implement it first using QML and then you might figure out that you need some more things that you then move your entire item into a C++ thing but yeah if you are curious and want to know more there is a couple of links qmlbook.org is a book that is written by a couple of great people who are quite good at this they are from the Pelagicore company I think and they do mostly QML for in-car navigation or in-car entertainment systems and other similar things there is of course the official documentation then there is the declarative module by KDE which has various add-ons and more functionality that KDE has needed for their products and then of course there is the actual source code of the module for those who are way past beginners or getting started and yeah that's about it that's me, you are free to reach me by however you want and or contact me when I'm here but yeah, any questions or other things then now it's time and if not then I will just point you that KDE is running a fundraiser for the next year of doing more magic to the world and you can access that link and thank you oh yeah it is pixelous for some uses what you want to do is for some things you just want it to be pixel-placed as you expect it to do like for example if you are targeting a device like this you know how many pixels it is but many of the things, for example you are using anchoring for laying out things you might want to have I think in the top that is I don't know some kind of fitting size it could be just whatever size of a text or a button and then at the bottom you might do something similar and then you are just going to put an item in the middle that just anchors to the bottom of the top bar and to the top of the bottom bar and then when you resize the window your top and your bottom bar stays at the same size and your thing in the middle just resizes if we are trying to take our current application, what is my current application, I'm just switching here if we drag a bit how do I touchpad given that our middle anchor is to the the white and the blue one are both anchored to the center of the parent so it is basically just adopting to that so as long as you use anchoring the sizes are just whatever default sizes you want it to have but you can use pixel perfection or pixel placement if that is your thing but you can also just anchor things to each other if we extend how much time is left for example we have we are extending our unclick handler here to also expand the text as we had it before and we are giving it an ID creating another rectangle anchors left but bottom right anchors right parent but right and now have this rectangle that is anchored to the to the left of the button and to the right of the screen or the right of the parent object and when we are clicking on this right we also have the rotation but if you look up and now when we maximized it our white area got bigger again and now it's shrinking once more so it's the same kind of techniques you can use for creating things that dynamically adapts to whatever you want you likely want to have some fixed size elements because having a button that fills your entire screen is rarely actually what you want even if the screen is that big so yeah it is there to use for that kind of thing as well could you also say for the button size maybe 50% of the parent size can you say it or can you express the height or the width in percentage yes I think this is going to be fun so we have now set the height to be half of the width of the button you can basically reference all other elements in the same file and you have the full power of JavaScript to actually do whatever you want whenever the width of the button changes then the height of the rectangle gets recalculated you can find these however you want them to be bound so it's just a matter of using your imagination okay thank you for your talk