 Okay, so hi everyone and I'm here to show you the new tutorial of Kuri Gami and this is a video that I'm doing like almost live, I will show it as a premiere. So it will be completely uncut if there are mistakes or interruptions, you will see them. So I hope to get everything right first. So we can see that we've got the new tutorial here and I'll start giving a bit of context what is Kuri Gami. Kuri Gami is the tool that we use to create QML applications. Let's say Discover is a Kuri Gami application and we can see like the top area, the cards and the layout generally speaking is drawn by Kuri Gami. So by using Kuri Gami you can make very pretty apps. So if you want to make an application from scratch, Kuri Gami will help you. So let's see first of all setting up Kuri Gami, I actually have it installed already but first of all there are all these things that shall be installed. I think I already have most of them. So let's see, yep there are a couple of missing, so let's get them, okay, okay. Then we have to make a project directory which is probably the hardest part. So let's make a new directory, let's go to I don't know documents, KDE, yeah. And Kuri Gami example and the first thing we need is the CMakeList which makes the project buildable. So it's .txt, okay, whoops, CMakeList.txt which contains, okay, which contains this app. We can call the project award, that's fine. Let's copy paste the example and see what it is about. So first of all is there like a make file, yeah, yeah, a bit better CMake, okay. First of all we declare the name of the project, we say what the CMake we are requiring, we set KDE frameworks and Qt versions and then there are some other stuff that I'm less like competent in. So I get that this one finds Qt and the KDE frameworks. For those who don't know Qt is like the underlying stack that actually draws the whole application while the KDE frameworks are various like modules that help you build the applications like reading directories and stuff like that. And we now show add the source directory here as it is in the make file and inside it we need another CMakeList. So let's make that one, I cannot write stuff correctly, better, okay. And it's actually lists with a trailing S, so sorry about that, much better, okay. Okay, this is for the one inside the directory, we are declaring a mean C++ file, it does not have to be C++, Kuregami is also, can also allow for Python and other programming languages. So you can use those as well. And then the Qt resources which are a magic thing that I never learned properly. And yeah, here's the explanation, set, if we decide to create additional C++ file we need to add them here, which makes sense. Add executable, executable and grabbing the file needed to create it and target link libraries, link the libraries using our code to our executable. Then the resources file dot qrc, right, which shall contain this, let's copy paste everything. So basically we are declaring that there is the main QML file, I think that's pretty much it. It details which QML files are going to be included in the compilation process. If we decide to add more QML files, we should add them to this file as well, okay. So let's create the main C++ file now, as we've, I didn't see, as we've declared here. So a new file, main dot C++, which shall contain this. And we can see that we are using QML, KUR, which, yeah, it's basically a class that parses URL to a local file. And KLocalizeString, which I think is a KDE framework, I hope it is. And what we are doing in here is creating the application. We set the attribute enable high DPI scaling because why not, we create a key GUI application. We set the application domain to be a hello world, which is the name of our example project, and then organization name and domain. The name of the application is hello world. Then we need a QML application engine. And then we create a context object, which is, if I remember correctly, the way for the C++ file to communicate, let's say, with the QML file, where the C++ file will have all the logic of the project, while the QML should only have like the physical appearance of the application. That's the idea behind this. So, okay, let's also create the main QML file, which is, again, the appearance. And let's copy paste here, oops. So we are using QT, QT quick, which is the framework that's included with QML, the controls layout, and Kuri Gami. So with Kuri Gami, we are creating an application window. We can give it the idea root. And if we type root anywhere, it will be referring to the application window that we have created. We can give the title of our application, which will be displayed here. And then there's the concept of pages stack. If we get back to discover one sec, we can see that if we click on Krita, we get to this page. And we have now two pages, the main one with the list of application and the inside one. This is the page stack, like this is the main page, and this is added to the page stack. So in here, we say that the initial page, which in this cover case is this one, is a page with a label centered, which just says, hello world. I18n is the localization function. OK. So here it says that Qt Quick is the standard library used in QML application. Controls provide a number of standard controls that we can use to make our application interactive. In here, we just use the label. And layouts helps with, like, we don't use it yet, but it's for the layout, like, where things are positioned, put together. And the application window, there's even the link to the API, if you want to learn more about every object of this, there's even examples of them. But yeah, it's the main window. I18n function makes your app more easily translatable, as I've said before. And then we create the main page. So let's try to actually build what we have done, we've just done. So let's save here and save here. Let's open up the terminal. OK. We should create a new folder, which is like a build one. And maybe it's done automatically, so let's move for build. Let's try with this out. OK. It has created the build directory. OK. And now we have hello world build source project, build, I don't have build source. Let's see what went wrong, the resulting binary, I don't have any resulting binary. This is a great start. No project command. OK. The CMake file is empty. OK. That was a mistake of mine, I forgot to save. So now it should work. Let's save. Let's try again. And it failed. What happened? The RCC list process failed because premature end of document, I didn't even save that one. So this is one. Let's save it. OK. And another mistake. Let's see. No rule to meet target QRC resources. OK. So it's not building main QML. And why is that? Because it's missing. Let's see if I forgot to make something. This one. Copy pasted this one, this one, contents UI main, OK. I kind of assume that the examples would work if you copy pasted them, but apparently that's not the case. Did I get the name wrong? Main.qmr, main.qmr, the name is right, contents UI, did I have to make a contents UI directory? Oh yes, I had to. Wow. Sorry about that. So I had to make contents, contents right, contents UI. And the QML file goes here. OK. Let's try again. And it failed or worked. Cannot find source file, main QML. Let's use tree. Oops. This one should go. Contents UI, main QML, contents UI, main QML. This time it's right. What went wrong? Cannot find source file, main.qmr, tried extension, ah yes, stupid me, stupid, stupid me. I added main QML as a blind test and it was a stupid idea. OK. OK, that's much better. It's actually building some things this time. Let's see if this time we have got the hello world. OK, let's run hello world. And we've got our main page with the label hello world, nice. So this was like the basic example to make things work. So let's switch to the a bit more complex example, which is pages. And again, we can see how to push bit. By the way, this is actually useful. If you go and install curigami gallery, which I think I don't have right now. So let's install it curigami, yes, let's install curigami gallery. It's like an extremely useful tool to understand what curigami does because it is like a gallery of all of the curigami tools. We can see it now, or maybe not, who knows, curigami gallery. So basically you have all the sections with all the things that curigami is able to do. So if you go like buttons, here are all the buttons, selection control, drawers. If we go to pages, which I'm pretty sure exists somewhere, where is pages? And then selection level sheet, progress bar, tabs, text field, from layout cards, it's called multiple columns. Here we have got a page and if we push another page, you can see that we've got only pages. And we can try to fit as many pages as possible. So we can even have, but if we resize the curigami application, it will only show the one page. So these pages. So let's try to add some pages. This is the same example as before. And it's not very clear to me what is different. So let's go with a scrabble page. Let's replace scrabble page as it's asking. Right. I remove the file, so close, and source, contents UI, mean comma, yeah, okay. Let's go with a scrabble page and we can give it a title. So countdown is fine. And then let's go to, let's try to build it again and see if it's still working. Okay, it is. So let's run and see if anything changed. Okay. Now we have the title of the page above the separator line and the label is no longer at the center. Okay. So let's go to layout list views and cards. So here should we create a countdown model? Okay. So let's go with a card list view as it is saying. And how this works, I'll explain it, yeah, it goes here. So this is a list view of cards. So cards stacked one above each other. And the basic idea around the model and delegate is that the model is the, like, the data we are trying to represent. So we've got a list with a name, dog birthday, a description, which is this one and a date, which is 100. This is the data that we want to represent. And then there's the delegate, which is like how, what's the appearance of our data. So we should copy this one somewhere. I guess anywhere is fine. Let's go here. And this one is the model used by the cards view. And this is the delegate. So let's copy paste it and see what it does in the file. So indentation is absolutely broken. Okay. So, okay. So, in this case, I forgot, oops, okay, I forgot a line. So let's try again like this. Now it's better. Okay. So let's see what this does. So we say that the component counter delegate, which is, again, the physical appearance of our data is a card, which is again provided by Korygami. And a card is this component here with the outline and shadow. And then we specify the content of that card, which is a generic item, which has a grid in it, which I guess there are spacing columns, okay, it should change depending on the size of the application. So the anchors says that the left of the content of the card should be, how do I explain this? Like the left of the content of the card should be at the left of the card. So you can see that this 100, which is the left of the content of the card is at the left of the card. The top one should be at the top and the right one should be at the right. It's missing the bottom one, which means that it's not necessary that the bottom of the content is aligned with the bottom of the card. And then we are specifying, sorry, we are specifying the spacing between the rows and the columns of the grid. So the distance between each element in that grid. And then the number of columns, which is, if we got a white screen, which could be either, I don't know, either a very white screen or a TV, never mind. We will use four columns, otherwise two. And I'll guess that, okay, I should not guess, never mind. So Kugemi heading, which fills height with the text of the date, which is, in our case, 100. And then a column layout, which is these three elements, with an heading, with the name, a separator, which is, whoops, this one, and a label with the description. And then, finally, a button at the very right, whoops, at the very right with the edit text in it. So let's try this one out. It should work as is. And here we see the button, the 100 and the description. If we go to the file, we can, like, put more elements in here. So like, you can see, there's a cat in it, there's, I don't know, alpaca, and I'm actually a fish. Okay, let's go with the fish. And blah, blah, blah. If we replace all the text and the date, like this. We are changing just the data. But when we restart the application, we will see that it adapted to our new data. So we still have the, whoops, we still have the cards list view, which is just the container of the cards. Then we have the model, which is just the data, which is to be displayed. And then the delegate, which is just how the data is displayed. Usually the model is not defined in the QML, because the QML should be just the aesthetic appearance of the file, but it's defined in the C++ code. So let's add some actions, which are to be displayed, like, in the top, right now in the top bar, but we can also put them like in drawers, but I'll guess that comes later. So let's add actions. And actions are property of the page. So each page can have its own actions. So we have got a page. And let's go with actions, the main one is going to be a curriculum action. Okay. Then we have, let's copy paste this one, actually, okay. The name of the icon that the actions should have, the text of the action, and what happens when you click on that action, which is in this case, that we add something to the model. So we have our data and we add a new element, which has the name curriculum action added card, the description, congratulation, Kirigami action works, and date, 1,000. And if we now try this out, I messed up some, this one is right, expected. So I'm missing a closed bracket somewhere, where did I miss a closed bracket? 926, 926, and column 17, here. Where does it think that it's missing a closed bracket? Let's see the example. Maybe there should be like commas, nope. Maybe I forgot to build. Let's try. Okay. That was the comma. So now we have our four elements, and we've got action at the countdown, and if we click on this, a new element appears, and we can just keep on doing that. And we have all of the elements. So we should also probably add a way to remove them soon. Ah, yes, this is actually pretty important. If you don't know the name of the icon, just pop up Cattlefish, or install it if you don't have it, because it's a very useful tool. There's also Icona, which is not exactly for just viewing icons, but also for making them, like, training them on various different backgrounds. So check out that too, but Cattlefish, just search for icon, and then you can see all their names. So if you go for system search, symbolic, as an example, system search. Symbolic means black and white, so not color. And if we make and then run our action, we will have the search icon. So let's go on, and we can add a drawer, as I said before, which is this component, which expands from the left. So let's add a global drawer to our code. And it is a property of the application. So the, whilst the actions are property of the page, in this case, we're adding a property of the application. So it will always be there regardless of what page you're in. So let's add this one, like here, nice, okay. So we say that the global drawer is a karygami drawer. We say that it is a menu menu. And then we specify all of the actions that are in the drawer, which in this case, it's only one action, which is quit. The icon name is JDK quit, which is a bit weird. Let's pop up Cattlefish just a second to see if it's like the only quit application, the quit icon we have. Yeah, it's weird. I mean, why JDK? Never mind. The shortcut is the standard key for quit. And untriggered, we quit. Okay. This is straightforward. So let's try again to, okay, so about that, but the combination that I use to replace elements, which is control R is the same as the one for simple screen recorder. So I tried to replace an element and then everything died. So let's see, edit, and then replace, edit, edit sheet with add overlay, because we used a different name. And that should be it, right? Okay. Okay. In the delegate, instead of like doing this thing when we create an instance and then use it here, we can just move the instance here directly and then remove this one entirely, which looks better. And then let's, so here we've got some logic to actually display the days. Let's actually not implement that right now. So let's try to see if this one works. It probably won't because we've changed a lot of stuff without testing. Syntax error in, first of all, main because can turn and the gate is not there, but it is said, let's undo the change we've just done because this one worked. So let's try again. I see. Ah, yes. Of course it's unavailable because it has a syntax error. So sorry about that. No, it, this one should work, but I mean, okay, this one should work, putting the can turn delegate here, but I've done a syntax error here. So the file won't load line 53. It's missing. Oh, I forgot completely to put the actual stuff here and the actual stuff here is where's the delegate delegate. So we are calling the function that's defined in the other file, saying that the mode is edit the index, we pass the index of the card that's been clicked on, edit, then the name of the card, the description, the date, which is a new date, tweezer strings, less, zero, 10. Wow. Let's see make and see if it works. It seems like it does. Let's add a can down, ABC, okay, this one works. Let's edit something. And this does not work. We've got the error here, the error, error here. So we cannot assign to a non-existent property index. So line 46 of main, okay, yes, I forgot this line in the can turn delegate, sorry, in the overlay, we actually need the property index, which is going to be an integer and should it see how it is defined here, it is property index minus one, okay, the fault value minus one. Makes sense. Okay. Let's try again. Oops. Okay, let's click on edit. Cannot assign to, of course, if I need to add index, I also have to add name, description and KD8, that is obvious, okay. So let's try again. I mistype I8NC, I8NC, it was 18, not eight, obviously, by the way, like when you actually try to code like all this stuff, stupid mistakes are always not like you can get rid of stupid mistakes. So let's try again to edit. And we actually have the delete button now and it is not working, the populate thingy is not working, it should populate the event name and the description. Let's try to remove the card entirely, this one works, nice. And if we try to add a new one, oh, this is wrong, okay, so if you try to add a new one, it will say edit, and he's right because we actually did not specify that when clicking the add button in the main file, the add one, we also should set, oops, that we are going to add hourly mode is, oops, to add. If we don't specify the mode that is to add, of course, it won't work because it will still think that we are editing it. So let's try again, let's remove this one, and let's try to add, and this time it works. So blah, blah, blah, blah, blah, blah, okay. We actually cannot edit a card if the date is incorrect, which is a pity because I'm completely unable to actually type in a correct date, okay. And then we can edit, and it works. And it even populates the edit dialog with the information, so if I can change like the date and nothing changes, no, it did, it did change, let's, no, it's not changing, okay. So we've got a bug. Why is it not changing? Let's go to add hourly, and add name field, sorry, we are editing, so actually close index name, description, and date field, and we call, ah, because we are calling close, it's not close, it's edit. We are not closing, we are editing it. So let's try again. Okay, let's edit, let's try, let's add a new one actually, which is one, two, three, four, four, three, two, one, and then let's put in the date, okay. Let's try to edit this one, and add five, six, and we've got a mistake here. So property edit of object at hourly is not a function, okay, what is it then? It is edited, not edit, of course, what a stupid mistake. So let's try again, this time it will work, one, two, three, four, four, three, two, one, da, da, da, let's go with 1118, let's try to edit this, and it works, nice. Now, we should try to understand why trying to edit already existing card does not work, because it does not populate the name and the description and the date correctly. So let's try to give a look to the code. It's actually really weird that it works for one thing and does not work for another. So maybe it's because the date is like a number, not a proper date to them, because in the delegate index name, description, date goes new date, and then in the open populate overlay, if the mode is edit. Okay, I don't really see why it is not working. Sorry, maybe it's like a mistake in the examples and I'm not to blame, but I doubt that. Anyway, let's go on and see the action-based components. So we've got our action here, and then we've got sub-actions. Okay, so let's try this out. So if we've got an action, let's edit this one. It seems like we can go here and create, let's keep out on Triggered for a second, even more actions inside of it, which should, let's try, come off like as, let's try it out before I speak and say something stupid. And not it actually works as expected. So we've got our main action and then our sub-actions, and we should be able to do this like recursively, so like this. Let's try, there's one level in depth as a maximum it seems, or I've done something stupid, but I don't see anything wrong. So yeah, it seems like only one depth is allowed. And if we remove the Is menu, we can see how it looks like with Sidebar, which is we've got a quit within the arrow, and then there's the animation to switch to the actions that are inside it. Nice, so let's go on, okay nested actions and then display component and display int for the actions. So let's try, oh no, oh no. Okay, so I actually need to take my computer accidentally got the meta case tack, so if I click it activates like moving the window because that's done with meta. So I need to like shut it down a second, so let me get right back. Oh no, how did I stop this? Why now? Oh no. Okay, I think it worked. So we are back live, sorry about that. And we were talking about Qoogam actions. So we were talking about display components, so let's play a bit with it. So let's stick to a drawer for a second and then give this action which shall be called like 42, display component, which actually let's go with that text field as in the example. And let's see what it does because it should like embed that component in the text field is not a type. Should it be like controls text field? Let's see, nope, nothing happens. Okay, sorry about that. Let's try to put it as a not nested action if something changes. Okay, I'll admit it's not a good idea to try to guess what something does, but nope. Display component, display need, I'll keep visible maybe. Okay, nope, it has nothing. You lied to me. Another feature of the Qoogam action is to provide various hints to items using action about how they should display the action. These are primarily handed by the display hint and display component properties. These properties will be respected by the item if possible. For example, the following action will display at the text field with the item trying its best to keep the item, the item trying its best to keep the item visible for as long as possible. I actually don't understand this one, so sorry about that. I'll try to revise the text as soon as I understand what's going on. And let's switch to the page. Ah, this is fun. Let's show notifications. This looks like fun. The notifications are not like the system white one, but the small black ones in the bottom. So let's untrick guard. Oops, untrick guard. The black ones in the bottom, so we can see them now. This one, this is a notification from a Qoogam application. And then what do we get? Contextual actions. Now these are the actions of a page. So let's copy this action and go to the page. And actions in here we only have the main action. We can actually add not just the main one, but also the left one and the right one, which shall be called right and left. Whoops, okay. So let's try this out. Syntax error line 58. Expected comma. Right, sorry, this is wrong. And let's make this and run it. And then we have the adcantown, the right one, and the left one. And if we, as you can see, it adapts to the width. If we were to execute Qoogami on the phone, the three actions would not be like in the top right part, but they would be in the bottom. We'd like the three actions, the main one, the left one, and the right one floating in the bottom. So it will adapt to all the devices automatically. And then we have the contextual actions. Let's copy paste them from here. So like this. Sorry about that, okay. Let's CMake and then execute this. And then, yeah, right, left, contextual, contextual. Which on the phone would be in the contextual drawer, I think, but we have them here. On the phone they would be in a drawer that slides from the right. What else? Yes, we can see here this is like the main action, the left one, the right one. And then these are like the contextual ones. And to make the context action more combined, you need to add a context drawer to your app. Okay, this makes sense because it is a drawer. So we need to add this element. Let's see the global drawer. We've already looked into it. We can add this beautiful giant title icon. Let's do this. It's beautiful. The global drawer like this. And a title as well, which is gonna be thanks for the fish. Let's CMake this. Seriously, I thought this was pretty straightforward. Maybe I need to like turn this on. No. Okay, because it's, okay, sorry, it's only, it only works for some reason. It's only turned on on a mobile device and not on the desktop. So you would see this thing thingy on the mobile phone. By the way, you can actually try out Kurogami on the desktop as if it was on a mobile phone for testing purposes by setting a flag, which I actually don't remember that right now. So sorry about that as well. And then we have an action text field. This one's fun. Let's go fetch this one and add it to our drawer. Like this. Whoops. Oh, come on. Okay. Let's make this and syntax error. What did I get wrong this time? This is correct. This is correct. Come on. This is, what's wrong? Which line is this error? 26. So here, maybe it's a comma. It was a comma. Nice. So we've got the second. Okay. This is not the text field that I was expecting. Let's see if it works on like page action instead of me. Okay. Let's try this out here. So maybe it will work here. It doesn't. Okay. So it should work, but I don't quite see what is going on. Red actions. Econ name added clear and triggered. Okay. This is weird. It sounds like it should be working. Nope. But it doesn't. Okay. So in theory, you should have this component. In practice, I don't quite see what it's not working, but we can look into the API and try to work this out somewhere. But let's skip this for now. So we've got a swipe list item. Okay. Which should be used in a list view. So to try this out, let's change our, where is it? We've got a card list view. Let's use a list view. And then as a delegate, instead of using the card, we use this wipe list item, which I think goes still by Kuri Gami. So Kuri Gami dot swipe list item. Let's see if this one works. Please, please tell me it works. It does. And the cool thing about the swipe list item is that we can add actions to the list item instead of buttons like actions. Let's copy paste these ones. And sorry, action toolbar. To the list view itself, not to the delegate. Okay. No. So here. And these actions will be automatically embedded into each list item. On triggered do something. This is gonna be a syntax arrow. So print anything. Let's try again. Action is not a type. Is right. It's Kuri Gami dot Kuri Gami dot actions. Kuri Gami dot action. So let's try again. Okay. So we can see that each element has two buttons, which are like given by the list view. If we were on mobile, then we would get this thing for which we can actually swipe the element to make the action appear, which is very elegant. Then we have the toolbar. I'll actually skip this one because I mean it's pretty straightforward. If you want a full toolbar, you use this component. And let's go straight into colors. So Kuri Gami theme. We can use the colors with Kuri Gami theme background color. And we have these categories. The view, the window, the button, the selection, the tooltip and the complementary. And these ones like are set. If you go to system settings in the color scheme section, you can check those out. What colors you have enabled. And you can like, so if you do a rectangle, you can set the color of the rectangle to be the view, which is let's open Dolphin. This is the background color for a window. This is the background color for the view. So view is lighter on the default breeze color scheme. And what else? Yes, you can set that the Kuri Gami theme should not be inherited by the parent. And that the color set is complementary if you want each children element plus this one to use that complementary color scheme. And we can use custom colors apparently. Okay, as far as card goes, okay, let's try let's get back to cards because I gotta say that I really like cards. So I don't like this. Why please list item? Let's go back to a card. Okay, here as well. Okay, and we what we used is abstract card, which is like the simplest card ever. It's just the card. If you want to do something that's like like this, like a standard card with an image and everything, you use a normal card. Let's try to use a normal card in our delegate. And we have to define, first of all, the actions, which should, okay, no, I actually removed them. So let's get back the actions and the banner as well. Okay, the banner obviously is like the image and the text on it. And I'm sorry if I do like a lot of hands movements, but you know, I'm Italian, so I have to. It's by law. And if we add in the card these banner and action property and action ones are fine, the banner uses a banner.jpg image. Let's take any image from my picture gallery. Let's go with this one. I don't know, a screenshot of plasma sounds good. I actually, I'm not sure where it should go. Maybe here. Ah, it's .png, the banner. Png, okay. I know it's ..slash. Okay, title alignment, title alignment, blah, blah, blah. Okay, so let's try this out. Let's see if it uses a cool card with the image and everything. It doesn't. It does add the actions but not the banner because a QML image cannot open QRC banner. Do we have to add the image to the resources? I hope not. Wait, let me try to move the banner over to here. Maybe this is enough by itself. Whoops, nope. So let's go again and actually add this one up. So it's banner.png and the URL is, guess what, banner.png. Let's run CMake. It built and then, wow, we've got a banner. So it's pretty big. It resizes according to the width and we can see that we have a full-fledged card with the banner, the title, the actions and then everything that we had previously. So this still completely works as before but with a cooler card and who wouldn't want a cooler card. Then we have the cards layout which is a kind of card. There are a couple. This one is for when you have different kinds of cards and you need to arrange them and you can see that you have a cards layout with an abstract card and a card and then you have them displayed in a custom layout. In this list view, instead you have them in a list and when you have a grid view you have them in a grid. That's pretty straightforward. If we do choose let's try out the grid actually just to show that I am able to use a card grid view. Let's say that columns... Let's go with two and let's try to build this. It's red only. Obviously it's red only. Why would it... How do you choose whether a grid view... there are a number of columns in the grid view. Like is it automatic? Maybe it's automatic. Let's skip this one out. Okay it is automatic. It is a bit broken as well but what can you do? It works. It displays your cards as a grid. That's the basic idea. You can then adjust spacing to make this one actually work out visually well but let's go over the topography because we need to like still do six pages and there's not much time left. Let's look into this one. This one is about headings and to see this one let's actually try to change our heading because we do have a heading over the delegate. This one we have two and this one has the date and it's like really big so it's level one and then there's the name which is a bit smaller so it's level two. If we put level five here it will be very very small so let's try this out and we can see that the number got really small. What else? We have labels. We've seen how to use labels and then as far as text alignment goes when you use a label from QQC2 is just a key to key controls that we've already used but this time it's called QQC2 instead of controls and in the label we've got the horizontal alignment which is align horizontal center. You also have like align vertical center as stuff like that but of course align vertical center goes to vertical alignment. Actually sorry let me check out this thing I just said so it's pretty quick QQ controls label. Let me check out the label documentation. I think there's a vertical alignment property but i'm not sure. This is missing no this is the wrong component. Maybe wait it is a text so okay. Alignment horizontal alignment and vertical alignment yes it does exist so I'm not wrong. There exists the vertical alignment which can be like align top, align bottom and align vertical center and let's get back to typography. What else do we have? So there is like an example to align everything right okay. There is the wrap mode which I guess is for when you have an element like let's see wrap. The wrap mode can be either no wrap or wrap anywhere and wrap so this is when okay when I like the text is too long for the text content for the box that contains the text so it wraps automatically and you can specify that behavior here and we can have rich text with HTML basically HTML rich text formatting in the label which means that the kuri gami header should have it as well and then the font size of the kuri gami theme is available as kuri gami dot theme dot default font dot point size. Let's see pages manipulation and we've got a picture of the page row as I've shown before like all of the vertical pages and we have a initial page with the login page. The login page is like this guy did a login page dot qml which gets imported here and it's used as the login page dot qml and this is like the login one and when you click on this button the page stack replaces the page stack replace means that the current page is replaced with home page which is a different page so if you want to replace the page you are using you go ahead and use page stack replace but you can also push a new page and let me show you this one in my little beautiful example if we go ahead and we have action one and let's edit this action one where is it action one on trigger let's application window page stack push so we push a new page which is going to be I don't know empty page a query gami page like an empty query gami page so let's see if this one works okay syntax error can't really get away okay syntax error line 15 expected yeah that was a bad idea actually the query guide page let's put it here and give it an id like test and then we push it by id not by just push putting the whole page inside it let's see if that was it it's quite slow this time weird okay so action one and we can see that it pushed out an empty page so if we resize it we've got our empty page and we can go back to our countdown page so this one works so as far as layers go this is not very clear but let's try this out it's basically just like page stack but with layers so let's try to push instead of page stack two layers so let's see me and then build sorry run and if we go with action one we cannot push of undefined so basically layers is undefined I sorry the page stack dot layers not just layers sorry layers layers okay action one okay so it did push a new ah yes we can see like usually if you push just a page it will display both if there's space it will display both the old page and the new one but if you push like a layer it will be just that layer and we can go back with the back button but it will like go into that page and not show the old one as well okay and then we have scrabble pages oh here's new chat this is a good example of a cool kuregami application if you haven't used new chat go check it out because it's freaking awesome so at least viewing a scrabble page I love this example scrabble page okay let's let's do this one we make instead of just a page a scrabble page and then whoops we add a rectangle which is as wide as the root element which i'm afraid we don't have here as an idea maybe it works anyway maybe and then the height is like a lot so let's check this out sorry it doesn't work let's actually go with uh and let's also set color of the rectangle which is going to be red we could use plasma dot theme dot blah blah blah but boring doing things properly is very boring so let's just put red so let's see what happens this time and we've got our red rectangle and we can actually scroll through the rectangle because this is a scrabble page so yeah this one works if it was like just a page not a scrabble one let's check out this combination as well i did not want to see this okay okay so don't don't do that just just don't okay i did not expect like the red rectangles to pop up like that honestly but yeah this one works so it's fine it is possible to add a placeholder message with some instruction in case the list view is empty yes i remember when neat added this component i think it's also like here in the disk in the vices like this one normal this one is a placeholder message and we can add a search by adding a title delegate search field okay my sort my sort filter model dot filter text i think we have to implement yeah we have to implement the sort filter model but we can use the k sort filter proxy model from k item model to easily add filtering capabilities so this is why kda frameworks are so useful and then we can also implement pull to refresh and by adding in the model on refresh done view refreshing equals false and then in the scrabble page supports refreshing is true and on refreshing changed if refreshing refresh wow okay so next step is actually going back from qml to cmake list this one explains a bit how cmake works but that i think that's pretty much the same information that we got in the setting up page and as far as main dot c++ goes yeah it's also the same information we got in the setup page but that's outside the scope of korygami again korygami you can use it even without cmake lists and without c++ you can just plug in plug in python and use any programming language that supports qt so don't worry about that so in order yeah this is in order to connect the logic of the application from the c++ side to the qml and we do that by creating a new item which in this case is called back end which we then register as a single term instance okay and then we give it the properties that this back end should have so as an example introduction text which will have a read function a write function and a notify for a function signal to that will be called when it is read write and changed because in qml when something changes automatically all of the values that depends on it change as well so we then proceed to actually implement this function one to read the value one to set it and one to run when it's changed but the idea is that by doing that registering as an instance single term and then adding q properties we can then in the qml go and take this element back end that we have defined define and then read that property or set it and change it so in this way we can communicate between the c++ side and the qml side by doing this like weird element and they are not weird but these elements that are both in the c++ world and in the qml world and the logic of which the logic of what properties these elements have and how they react to change and being read is defined in the c++ side but if you go ahead and like take your favorite programming language and check out the library for working with qt you will see that each one has like a bit different way to implement it so go check out the documentation of our of your programming language library about qt this is like the easy part of the tutorial i think which is by the way done so that was it we've got our beautiful big red rectangle which we can scroll even with a scroll bar which is amazing this is the bottom of the rectangle our cards we can edit the cards and everything so this was a bit of a a bit of a joke like this is this can't be a serious ui but if you go ahead and see what applications are done with kuri gami so as an example uh system settings is not like completely kuri gami but lots of stuff is actually kuri gami let's make a notification like i'm pretty certain this one is kuri gami if you go here and you click configure you can see that this one is like a kuri gami page stuck it pushed a new page so you can also understand how kuri gami apps work by using them an example is most of system settings then there's discover then there's also kamoso which is the app that i'm using to register myself and it has like okay sorry it has like the effects here on the global drawer that we've seen and then this one is like the context drawer with the context elements so you can see that the same things that we've seen in the tutorial also apply to most of kuri gami applications and there are lots of kuri gami application as i've said like check out near chat because it's a beautiful example but there is also like koko which is for viewing images and the kuri gami sorry the kd connect application on the desktop is kuri gami and the new system monitor i mean have you seen that that it's beautiful the system monitor here it is it's beautiful and it's kuri gami again and you can see that we have the context drawer sorry the global drawer which is a menu and the the main action of this page that pops up a toolbar and you know all of these complex applications are done with kuri gami that just helps out with laying out all of the elements and it makes giving an application to the user so much easier so if you're looking for how to make an application kuri gami is totally something you'd want to look into and this was a bit of a simple video just trying out for fun all the various examples and screwing up everything on the way but if you like go through it read everything carefully you will totally be able to do your own beautiful kuri gami application so that was it