 Okay, hi, so my name is Daniel Vratil. I'm a Okay, okay, so I have to wait for another six seconds. So hello, my name is Daniel Vratil I'm a long-time KD developer and cute user and Today I want to talk to you about cute or even more about QML the cute modeling language The talk is not really about teaching QML. Although it's a developer conference. So I do have a few slides with code The main purpose of this talk is to actually show you what QML can do for you How you can use it and how what what really cool features it has So hopefully after this talk, you you will well, maybe at this consider QML for your next project or maybe even for your current project and We will know what cute or and QML can offer you so I One QML first appeared I was very skeptical about language because I thought like well Why would anyone want to use this weird new scripting language instead of using the glorious C++ API for widgets, right? and So I stick to you to you know classic API C++ eventually though I got the project which was using QML and And so I opened the QML file and immediately saw the code I saw where the problem is and I could fix it in like five minutes before without even seeing the code ever before and at a point I realized I was so so wrong about QML QML is really simple and it's so powerful that anyone basically can use it and Yeah, since then I'm using QML a lot So let's begin with actually look a bit into Qt I suppose most of you or all of you here at least heard about Qt in the past Qt is a cross-platform open-source application framework I will just briefly go through like a history and something about licensee of Qt So this is a very brief history of Qt. It started in 1995 developed by a couple guys in Norway In the important milestone was KDE, which is not actually which is using Qt, right? It was already in 1998. I will talk about it on the next slide a bit The couple more releases in 2008 Qt was Trotec the company behind Qt was acquired by Nokia So Nokia actually back then had a plan to use Qt and QML or only Qt back then it was Qt on their Symbian systems and on the smartphones and In 2010 with Qt 4.7. They introduced QML. So QML was actually developed by Nokia They wanted to have something that is way easier than C++ to create user interfaces mostly for mobiles But it also works very well on desktop In 2012 Nokia realized that's not the way they want to go. They sold Qt to a company called DJI nowadays Qt is owned by DJI subsidiary called the Qt company surprisingly and Yeah, in 2012 the same year Qt 5.0 was released and nobody's we have Qt 5.5 with 5.6 being released I think in March this year One thing that people usually know about Qt is that there was a sort of a license controversy about it because the first Releases of Qt were not really free as in Free speech or they will not really GPL compatible, right? The first two releases were available on the free Qt and Qt PL. So the custom licenses not really compatible with GPL Which was even one of the reasons why GNOME was started right as a project to actually have a desktop environment based on really open Toolkit, which was GTK There is actually there is a foundation called KDE free Qt foundation Which actually assures that whatever happens to Qt or the company that owns Qt whether they are Acquired or they go bankrupt or whatever happens that Qt will always be available under a proper free license So nobody's Qt is available under a GPL v2 GPL v3 and LGPL in the next release Sorry, that's supposed to be Qt 5.7 release at 5.6. There will be also a GPL v3 Available so yeah, it will be Qt is now properly open source project with open governance and everything Now Qt I said is a cross-platform toolkit and cross-platform doesn't really mean Linux Windows and Mac Qt can run re-array anywhere Obviously the Linux Windows and Mac are supported But you can also get Qt on Android Qt on iOS Qt for Windows Windows phone QNX that's BlackBerry and a couple more embedded systems So you can really get Qt on any platform you reasonably may want to target, right? On Linux, obviously X11 and Wayland are supported just out of the box Qt also supports Some frame buffer backends so you can even use it on embedded What is a great Think about Qt and one of the most powerful parts is that it is a platform native look Which means that if you run a Qt application of Windows It actually looks like a Windows application if you run if you run the same code the same application just compile for Mac It will look like a native Mac application on Linux we have KDE has their own style like plug-in that slightly changes the default style of Qt currently there is a project called QQ GNOME platform, I think Which basically creates Which basically is a plug-in that makes attempts to make Qt applications look native in GNOME So you start a Qt application in GNOME and it will look like a GTK application So you can really and if you if you if you're targeting Another platform and or you want to have a specific look you can just write your this plug-in yourself so Then you can create your custom Look and fill packages very easily and it also can it can also affect your QML code. We will we will show that later So this is an example of the Qt designer on Windows Q designer is you know the tool where you can just click click click and create UI This is how it looks on Mac So you can see that it this looks like basically a native application and that's without any piece of you know Changes to the code of the project So nowadays Qt is really everywhere. It's not just your computers, but you know phones televisions Coffee machines fridges Qt everywhere You don't see it because it's using usually you cannot even tell let it Qt because the looks is customized and everything But really Qt is everywhere So if you if you have a project where you want to target more than just Linux then Qt is a really great choice for that So now to finally finally speak about QML a bit So QML is a declarative language Ditch the declarative means that Unlike with C++ where you would just say you know in sort of commands this to this to this to this In in the QML you actually describe the entire thing In a declarative way, right? So you just described the hierarchy of the objects how they are nested What are the properties and how you describe it? That's exactly what you get on the screen later on Right. So it's really easy and because it's a scripting language You can you can actually Well, you don't need to recompile everything right once when you change something you just restart the QML viewer and you see the change So it's really great for quickly prototyping the UI because you don't have to you know Just just try to change this one big make it one pixel wider recompile everything run it again You know in QML you just change it reload the file and you are done one important note When I'm sometimes this is being confused for historical reasons when the separation wasn't like that But QML really is just language right when I say QML. I really mean just the language nothing else The language on its own kind of do anything right just the syntax To do in order to be able to instantiate some some some objects in the QML you need some components right and There is a set of components or a module called Qt quick which contains the basic simple components like rectangles Some scrollables and and this stuff, but you need to import it first right without that you have a cool language But nothing to create in that language There are more modules of components obviously so you have Qt quick is the default one ship with Qt Qt also offers Qt quick controls, which are the actual widgets like buttons checkboxes radio buttons and this stuff and then there's Qt quick layouts which provides layout for the for the for the controls there are some Graphical effect modules which provides a fancy fancy graphic graphical effects Or you can just create your own right you can just write your own module usually in C++ you can also create a Module just by putting a bunch of QML files together and saying this is a module and you install it into the Qt Directory and then from your QML code you can just say import You know my module and QML will import your module and make the components that you created there available in the QML file Speaking of the plugins Another great thing about QML is that it's extensible. It's extensible through C++ Which is not that great if you if you want to avoid C++ but still So as I said you can so there was a comment that it's also there are also Bindings available like for Python so we can actually write create plugins in Python as well and maybe other languages I think I remember there was a little bit bindings, right? but go yeah So Anyway, yeah, so let's focus primarily on the C++ plugin, but obviously it will apply on the other languages as well so you can imagine you have You have your your huge application like let's say a video editor So obviously you don't want to implement your logic in QML or JavaScript, right? That you just don't want to do that. So what you do is you you write a bunch of C++ classes that implement the actual logic write the business logic of your application and Then you export them as a plug-in so you can have a Model which gives you access to the files. You can have some sort of a timeline Which shows you the the the videos you are editing and stuff like that implementing in C++ and You create this as a C++ plugin that you install with your application to the system and then from your QML You really just import this module and you immediately have these objects available So you in QML you just create a list view and then you attach the model that you actually created in C++ to the list view in QML This means that QML being a different language Being a different language than then you know C++ it enforces you to keep your UI and logic separated It's the separation is very strict right because these are two different languages So you look at it and you clearly see the border when you are writing your UI or when you are implementing an application using the normal key to widgets in C++ You can try or you will obviously try to keep your UI and logic separated But since it's the same language eventually, you know, your logic starts bleeding into UI and vice versa With QML, it's really easy to do separation right because they are different languages So the approach is to actually So so the question is how do you how do you then get your logic connected to the UI? Right, so one of the one of the possibilities is the plugins that I mentioned the other possibility is that you actually have a C++ application that instead of a normal window creates a QML window and loads a QML file and then it basically Create instantiates, you know all of your application logic objects controllers, whatever and then injects them into the QML context Basically as global variables so you can reference them from the QML and access them like lucky they were pointers in C++ I will not Probably show or talk too much about the UI C++ integration late in this talk, but Yeah, it's definitely possible and it's used a lot But it's also possible to create a pure QML applications Right QML is using JavaScript for basically extend to also provide some some non declarative some imperative Programming or way to because not everything can be expressed it with with the declarative approach, right? sometimes you need that bit of imperative programming when you say well do this this this this and it somehow affects the the UI but Mostly mostly you you are okay with just a decorative approach So QML is so awesome. I actually use it to write slides and To create this abomination took me like 15 minutes Right, so and there's like I don't know six things happening at the same time and This is all really like I don't know maybe 100 lines of code in the slides, right? So yeah QML is easy and now Okay Now since this is a developer conference. I need to show you some code But the I will just I really just want to explain how the basics work, right? We won't go into the deep details although after this couple slides You actually will be able to write a simple QML application because it's really easy so The in this piece of code we actually create a blue rectangle The syntax is very intuitive if you ever saw any programming at all you get the idea what's going on So on the first line we just import the Qt quick So we need to impose tell QML which module of components it should import so that I make it available Right because as I said QML is just language. There are no components. No rectangles nothing So we import Qt quick which contains among other things the rectangle and then on the next line We just say rectangle and curly braces and that's it this way we tell QML Please create an instance of rectangle and then we use the JSON like syntax to just set a couple properties So we set x y with height and color and what we get is a blue rectangle. Yeah Now You can you can also create your own Extend the object by adding your own properties, right? But that's I will not go into it here But it's possible to have your own properties added to it and then all the things that I will show later apply to these properties as well Now a question like what if we want to put another rectangle inside of this rectangle, right? Alright, for instance, what if we want to put a red rectangle into the blue rectangle? Well, it's easy. We just put another rectangle into the rectangle in the code as well Right, so we just nest another rectangle into the blue one and magic happens. It's also shows inside On the on the screen There are a few things that you might notice the blue rectangle is the same as on the previous slide in the red rectangle in the nested one You might notice a couple weird thing First is that we nothing is really we don't use any absolute positioning, right? The geometry of the red rectangle is relative to the parent So in in the x and y properties I use parent dot with the parent is sort of magical variable. They just refers to parent So in this case it refers to the blue rectangle And I do some math to make it just to make it to put it in the center for the width and height I just refer to the blue rectangle explicitly, right using the id property This allows me to do using the explicit reference the explicit name allows me to reference any other object in the hierarchy Right in this case. I only have one other object Well, if there was you know much more complicated tree, I could refer any other object in the tree using the id Now what you might also notice is that? I'm referring the width of the red rectangle before I actually assigned to it, right? So on the line, what's it? Well for the x, right? I say with like the width of the red rectangle, but I only initialize the width a couple lines later So how is this not an error? Well, the properties are defined in the object in the object in the module that we imported So the rectangle has defined a bunch of properties including the width height and others So by default they just have some default value like zero. So in this case I'm just saying well take parent width minus zero divided by two So then the red rectangle should probably be off-center right because the math doesn't work yet The width is not yet initialized Well the great thing about QML and this is one of the most powerful parts of QML is something that these are not just simple expressions These are also called bindings The expressions are can be any JavaScript expression that you want, right? It doesn't have to be this simple math. It can be something way more complicated It can be a function call, you know, you can have if then Any way of any complex expression, you know, and it's just about the return value of the expression, right? That's what gets assigned to the property so In this case a binding means that when I'm referring to some property in the expression QML remembers that and whenever that property changes the QML will automatically Evaluate all these expressions that somehow refer to it again and update the value update the result, right? so yeah when this file is this Rectangle is being created for the first step The the the x is assigned what is off-center, right? Because with it's to the zero but when we assigned with a couple lines later It actually gets the QML knows that there is another property referring to with and it will again calculate The value of the property and then the rectangle moves to the center Right, and this is not happening only during the start of the application This is happening all the time and we can make pretty nice use of that so Here we have again a blue rectangle a text and an animation the property animation thing at the end is a non-visual element, so Kid quick doesn't have only rectangles and texts But other non-visual elements that you really cannot see but they have some functionality in this case property animation Really, we just said what we want to animate so we animate the blue rectangle and the property width of the blue rectangle We say what we want to animate it from you know 200 to 600 So the width will just grow and then for duration is five seconds, and then we just enable it, right? So that's what's happening right the animation is changing the width of the blue rectangle, so it's growing and it's looping Again and again again. What's interesting is that nowhere in the code is nothing like Well normally in C or C++ or any other language What you would do is you would have to have a callback connected to I don't know On width change or on geometry change signal, right? You would have to have a callback connected to it And you would need to get the new width of the of the rectangle and then set it to the text, right? So it's so that the text gets being updated In QML, there's nothing like that, right? There is no callback nothing involved all the magic is In the text property of the text element, right be a sign that we say the text is equal to you know math that floor of blue rectific so math the floor is JavaScript right this from JavaScript writers JavaScript has this math library So which is also available in QML so you can use things like this, right? So it's completely valid ECMAS script And yeah QML is smart enough to know that even though the blue rectangle width is just an argument of the floor function It still knows that it needs to evaluate the property every time the width changes and update Update the value of the text property and this way the text automatically updates itself Right and this makes so many things so easy, right? Because you don't have to have any more like Random connecting to signal somewhere and then having a callback somewhere else which changes, you know properties of this object somewhere else Right, you have the object and then you see that this property of this object depends on exactly these things Which makes it really easy to navigate, right? It makes it really easy to Fix and find bugs and change behaviors, right? Because you don't have to go and find all the places where this button is being disabled right in the code from some random callbacks You just look at the button you find this enabled property and then you see the expression Which says disable it if this condition is true or this condition is true or this condition is true So we just change it to fix it and you know that nothing else would be affected the button, right? So it makes it makes it really easy to fix the box Actually, I have this more useful example We are finally getting to actually getting to actually showing some widgets here So here I have a combo box a checkbox and two buttons right and The properties of the the checkbox and the buttons somehow depend on the state of the combo box So so the checkbox will be checked if the first item in a combo box is selected The first button will be enabled only if the second item in the combo box is selected And the third button will be only visible if the third item of the combo box is selected So this is something like you do often in your UI, right? You you you have parts of your UI enabled or hidden depending on some state of some checkbox or some some combo box value right, so if I Go and switch it to item 2 as we will expect The button is now enabled the checkbox is unchecked, right? And there are no callbacks or you know signals or anything, right? You just I just you know set the condition send the property of the button depends on some condition and Whenever that condition changes and QML will reevaluate if the condition is true now and then update The properties accordingly. So this makes it really simple to to create create UI Right another great example how QML makes it easier for you to create UI Here we want to create a bunch of radio buttons or well it could be any buttons or any other widgets, right? But in the code we actually only had to mention it only once right We just say the radio button once and we use a component called repeater and Then we pass some data to the repeater and then the repeater instantiates the the the radio button for each Of the of the day or each of the each item in the model The model can be anything in this case. It's a simple JavaScript array Which with with objects It can be it can be just It can be just simple array of strings out the ray of numbers It can be basically any JavaScript array. It can also be a queue string. So a cute container class It or it can be it can even be a queue abstract item model derived class So that's like the cute base class for models, right? So it's very very versatile So you don't really you don't need to if you have a simple thing like this You don't have to implement like a complicated queue abstract item model subclass in C++ and import it You are perfectly you're perfectly okay with just some JavaScript array Right, but if we would get to something more complicated, then you may be going to go to to have a C++ model or You can do With a model actually this is for instance what the network management applet in KDE does it has models implemented in C++ which talk to network manager and they provide information about You know the available Wi-Fi networks and the strength of the signal and stuff like that and then we just import these as a as a plug-ins or as a modules into the QML and Attach them to to a view and then so we get the data Fet to QML from C++ doing the complicated, you know talking over D bus with network manager But the actual visualization happens in QML where we have the list view and bunch of delegates to actually visualize the items differently and so on so yeah That was more models, but here we have us just a simple model well And the QML what it does is that for each of the each of the item in the model just instantiates a new radio button, right in this case So here we have it So I can even switch those Yeah, there's a special property called model data Which is something called attach property. I will not go into that in detail But it just makes it it just makes the data of the current item available to to each of the each instance of the radio button So that we get a title and the default checked state Basically propagated from the model to the to the radio button to the delegate Okay, that's it. That's the last slide I decided to show you how easy QML is I decided to take a risk and actually write some Program here during the presentation Actually, I will not write the program I won't I will show you how to create a simple QML calculator without actually writing any code. So I will sit down I Will try to close this Right, so let's create a new project. We create a cute quick controls project We call it the calculator Let's use new version of cute Yes, please. Okay. Well, this is code code is ugly. Let's let's use something else We don't need font we will do it. Ah, okay, we will not do it Let's try again. That's better Okay, so we have a window. Sorry, it's so small but Oh, the screen is small. So let's create a calculator. So for calculator, we will need a bunch of buttons, right? so Come on work. So let's have one button This will be slow So QML was created actually with Non-developers in mind So the idea is that you can actually have your designer or people from the design team Actually have to come up with mock-up instead of just right creating mock-ups in I don't know whatever tools are used for mock-ups I know Photoshop, MS Paint, whatever You can they can actually create a simple UI in Actual in QML, right? You don't really have to be developer You don't have to be programmer to get the idea how to create QML. You just saw how simple it is so You can you can have basically your design team or designers actually create a working Mock-up or working example or UI prototype in QML just like this Right and then so you can have these people create the UI and then just hand it over to developers who just bridge it with the C++ backend they wrote and Everyone is happy right the designers cannot complain that you made it two pixel wider than they wanted and You don't have to bother with well stupid UI. So let's make this bigger and Let's So let's make this fill the rectangle What's at some Margins? Yep, that's good We want to get rid of the text Um now we label the buttons I Cannot really zoom this in I'm sorry But hopefully you get the idea of what I'm doing nine So be zero plus minus equals clear Now we put it into some sort of layout so it doesn't break when we change the window size. So let's hit grid layout and magic happened Okay, cool So now we have a UI I Can just I can just run this Yes, please Okay, I need to compile it first Okay, so that's it. We have UI right took me Three minutes maybe last right so we have UI that works. I can actually click the buttons and everything Now how do we make it to actually do something? Go away So I can still I could switch to the code and start implementing the behavior in the code But why would I do it? I can I can I can do it from here, right? So there's a this says button one. So that's the button. I want to Create do something for and there's a signal handler So the button the button will when I click it the button will emit a click signal and in QML for each signal You automatically get a handler called on something so on clicked on text changed on whatever So we connect to that and the action we want to happen Oh, okay I will do one more thing and that is I will rename the label that shows the current results to result and What I want to do when I click the button is that in case of the first button I want to result the text just append one Right, so this is a simple super simple JavaScript expression just append You know to the to we just append to the text property of the text label here, right? So we do this for each button this might take a while So on clicked we went to for three we append three three For plus we actually append plus So this is I mean this is a bit of programming right? I don't really think this is real programming Anyone can do this kind of you know just writing the simple expressions. They are actually quite intuitive So even if you are a non-developer you can still do this simple stuff So yeah, it's it makes it possible to actually You know with QML you can just sit down with your fellow developers and you can quickly prototype Some ideas for UI and you can even get you know the idea how it looks like and what it will do Right walk-ups and wireframes are fine But the problem is that they are not moving right? You don't see what was going to really happen when you click a button or when you you know just change something while With QML really doing stuff is so easy and so you are done really fast This will be zero this will be so for the clear button I will just instead of Appendling I will just set the result text to empty string and now for the for the equals button. I will just I Will just do well I will this is JavaScript right so I can use eval to evaluate the expression In a text build right and assign it back to the text field. So let's see build and run Hope I didn't do any typo. So let's see How much is 42 minus 6? Right, so I created working calculator without actually writing any real code And I'm thank you So yeah, so this is how easy it is to prototype or create something with with QML, right? So I will not try to improve it because that's when things would go wrong So I think I will end this talk. So if you have any questions The entire desktop Like this whole thing is QML There is a lot of obviously a lot of C++ backends involved in there But the entire shell is in QML not the applications, but the shell as the desktop shell Indeed I can I can show you for instance the desktop settings dialogue, which is like a settings dialogue for The desktop is also this is also completely QML complete QML UI Right and you can see that the animations when it switches you get it for free with QML because you just said well animate Property, you know X or Y and then just instead of disappearing Instantly the animation just makes it makes it slide away slowly and it's like five flights of QML again. Maybe less for for the plasma thing quite a lot there is a The problem is that there are things that you cannot really do in QML right handling multiple screen support You know getting access to files So you need to have the file system access implemented in QML and then there's a lots of logic involved, right? How wide the panel should be anything so yeah, but many basically the So but this is like the the application logic, right the the actual UI this is QML Yeah, yeah, that's yeah, that's that's true for instance The problem with the components is that the controls are really properly available on their own desktop You can have them on phone as well for instance on Android. They work really nice but For instance BlackBerry, they they don't really have cute quick controls. So the buttons I show you just now They have their own module that have they have their own components there So if you are developing from Yola or BlackBerry you instead of importing cute quick controls You import, you know com dot Yola dot something and then you get The Yola components which might have slightly different API slightly different property names than the BlackBerry ones And which might be slightly different than the cute quick controls So yeah, eventually if you want to target all the mobile platforms with at once You will have to have on different UI for each platform But then again, it's easy right because your actual logic the C++ code you share on our platforms because that's in a C++ But and you just have different UI for different different platforms Which is actually good because then you get native look on each platform. Maybe adapt it to the size of the device Yeah, well, they are not new they've been around since for a couple years for quite a few years But they've been revered and like many times But they support custom styles so you can actually have your custom style library that so you can make your own Basically, this is what you can see here, right that we have not the default cute looks But we had the components here actually have a KDE breeze team, so they look differently Right, so what choices what what else you can use except for C++ for backends? Well, I'm sorry mentioned that you have at least Python Ruby and go bindings I'm sure I think I heard about a long bindings Haskell bindings, so if you like obscure things why not I'm not I don't know what the state of these bindings is but At least at least Python is definitely doable. You can you can write. There's pie cute Right, you can write the entire cute applications with Python and which and so this applies to Writing a back-end for QML code as well Well, the bindings First bindings are not officially developed by Qt. They are developed by other company. I Think you don't get like 100% API compatibility like there are things that you cannot copy easily in Python like templates So there it is made slightly different, but the general stuff is like one to the API is one to one Yeah, that's I Think I need to restart. Yeah, come on. I need a way to jump to the last slide quickly That's it Right well, you wouldn't see it in the code right when I when I change the button You wouldn't see change the value in the code because the code is separated. I Think that you can this doesn't happen, but we can take a look after the dog. I'm out of time So let's check it out. Thank you