 Good morning everyone Today we'll have Thomas Pfeiffer, our chief design usability officer and Marco Martin our chief technological officer, right? Talking about one of the latest KD frameworks project called Kirgami Thanks to the introduction and welcome Okay, so Yeah, what what is Kirgami? Kirgami is a framework of components for creating mobile and convergent applications based on Qt and the The trick about it is that is not just for creating any Any user interface it is based on the design guidelines that were originally created for plasma mobile applications But yeah, it can be useful for for any mobile and convergent application As you can see, yeah, we have drawn up some some guidelines for user interface design Put them on wiki and then wanted a fast way to implement these design guidelines and as we know people sometimes the the Easy it is to get something right the more likely it is so We created for every guideline we have we have a matching control or component in a repository kirgami hotkid and Yeah, the plan the plan is to make it a proper KDE framework the KDE frameworks are in several tiers which means that the ones on the higher tiers can depend on others on lower tiers and Kirgami will be a tier one framework, which means that the only dependency would have one creating an application with Kirgami is cute and that's it and the the goal was to not only have it work on desktop linux and plasma mobile but also on Android on the Ubuntu phone and in general Unity 8 want to touch devices on Windows and I on iOS and maybe other platforms once they become important and So first the the basic assumptions that were behind the design guidelines So what we want is? Convergence so the same application should run on both mobile and desktop applications and of course also on devices which basically can turn from a touch-based device to a pointer and keyboard-based device But we don't when that you can you can see in the industry There are some approaches which more or less just scale an application up and down when it switched when for example a big screen and mouse and keyboard is attached to a smartphone But we don't think that is the right approach There should be as much reuse as possible But the UI has to be optimized for each form factor and each each input for example phone or Tablets UI can be can use lots of gestures to do things and this is Often important to use gestures because you don't have a lot of space on your user interface Whereas when you're using mouse and keyboard, then of course you don't want to use gestures because they're very awkward so Whenever you turn to a mouse and keyboard input you should get controls which are more suitable for mouse and keyboard or Also depending on the space for example that on on phone You want to hide away as much as possible of the controls when you don't need them because you need the space Whereas on desktop where you have more space you can have things permanently shown and we have implemented such things in the framework But it's still we still encourage people to optimize the the UI manually for each form factor so that it really works well and Yeah, the next one is We made the assumption that especially mobile devices Whereas they can be used for content creation. They are more suitable for content consumption. So You can maybe create Write a whole book on a phone, but for most people it's still more comfortable to do that at the PC But then review it for example on the phone That's also why yeah, we wanted to give As much space as possible to the actual content especially on a phone and To some extent on a tablet depending on the size you don't want your UI to be full of controls all the time You want the space for the content and that's why most of the actual controls are only shown when they're needed and One thing we wanted to optimize for one-handed use so that in a really casual setting or when for example on public transportation you might want to have one-hand free to do other things and And most of the cases are not that people when they hold the the phone in one hand do it in a way that then they use the thumb to To interact with the with the UI and the thumb cannot reach the top parts of the screen easily So we optimized it in a way that you can reach almost everything With your thumb even if you can't reach the top and then one one big part is that we optimized for hierarchically organized content because Realized that in many occasions be it browsing through a file system or through a music library or through an email which has email account which has folders You often have hierarchically organized content, which means when you navigate through it You often go back and forth between the levels of the hierarchy So we optimized Kirigami to be able to do that very easily and Yeah, so these this is what we what we wanted to achieve with the components and the guidelines okay, so as at least as much important as What Kirigami is for and what Kirigami is To define it needs also To be said what it's not and what it's not for We can Wonder why doing another Control set when there is already cute quick controls and now cute quick controls too in fact, Kirigami is not a Full component set for things like buttons text boxes and text and things like that use cute quick controls or cute quick controls to if you can use cute 5.7 the Goal of Kirigami is to be an extension of Cute quick controls that plays as good as possible with it that implements the human interface guidelines that are Defined by the visual working group So if you think These design language is good for your application Then it's for you if you if you need to implement something completely different or some some particular design that Doesn't really then is probably Probably not for you At the at the moment we released a one standard standalone release before starting the process to iterate the into framework and depends From cute quick controls one because we wanted to have it usable also with cute 5.6 as is a long-term release Then we started also a migration of a new version that will be Constellable just different version of the import That migrates it to cute quick controls too It's it's already the part that we migrated it's already way simpler code since Since it's It's the the goal of cute quick controls to and makes it easy for us to get rid of a lot of complicated Cue my code and the but the API even even on the release the version one The API is as we designed it as similar as possible to with cute quick controls to API We will now see and the Some of the classes that we have In Kirigami one by one at least the most important Why class by class because we designed the API that it's so coupled with the With the design that The VDG is defined That basically a part some some minor helpers The classes pretty much Correspond one to one to a visual concept They designed So first application we know that's one of the Implementation implementation details helpers it's it's What you are What you are Supposed to use As as a root object in a Kirigami application. It just inner its for from cute quick controls application window And gives a couple of things more to make to make it easier to to implement that design language It it has a very simple system of passive notifications that is that are just an overlay that are That are notification that are Are Designed for a for a very narrow use case. So if you are that they're not to be to to replace the Global system notification if you are in doubt whatever one or the other to use Ask the visual design group. There are Usability reasons for one or the other Then it Exposes properties for drawers that means that The this application window Requires Still optional but encourages For the application developer to add two side drawers that we will explain later What they are but we made Explicit in the in the API that you should probably use them Last last part Page page navigation Basically everything in the application is Subdivided in pages. It's the same concept that it seemed to quick controls to And there is a particular gesture based System to Navigate to them. Maybe Thomas has something to add on that So as I already said earlier, we wanted to make Navigation through a hierarchy back and forth as easy as possible. And that's why with with this set here Navigating between pages is basically like horizontal scrolling so that Basically with a swipe to the left and right you can navigate back and forth between Different pages which then represent different levels of the hierarchy or also if you have a linear process It's just going back and forth between steps of that process. You can it is already implemented in some Android applications as well Though most of them there you often can go back with a swipe, but you can't go forward again, which is Okay for some occasions, but sometimes you don't want you just want to get a sneak peek at For example, when you have a list of conversations and you go into one conversation Then you want to quickly check. Okay, how many messages are there in other conversations? But then want to go back to the previous then on most Android applications You have to find it again and tap it again Whereas in our case it can just swipe back to the other the other direction and go back to where you were before Okay, so We said the central thing is a thing called page It's a concept that is present also in Qt Quick Controls 2 What will became will became a sub plus of Qt Quick Controls 2 page And it has one particular important Thing on top of all the standard page that is the concept of actions There there can be some actions that are contextual to the to the page that you are in at the moment and Can be either at most that reaction that are That are the main ones That will will look like What in Android is called? floating action button, I think and a Group of secondary action that you can have as many as you want That will appear in a context menu in our case in a In a drawer in Android is what appears by tapping the top right three dots Three dot menus it's Their definition it's completely semantic you cannot really Influence that much how they look It's a group property just like for instance anchors so you Here is is the funny in a page Then at the bottom you can put the content you want in the page Then Define sections we have a main one that will be the biggest button then you can have one on the left or the right I can I can show a running application later And a list of contextual actions that can be it's it's a it's a list property so it can be as many as you want Oh, yes, okay This is a is an application that it's running in mobile mode. That was just more It would it would look a bit different if it was in desktop mode, but basically Those both button three buttons are the main left and right action and at the At the other drawer that it's the the list of the actions that you That you defined Think now we have The scrolling page that it's a specialized A version of the page that maybe Thomas has more to say about it. So this is one of we find out most on many applications actually show lists of something Can be for example, yeah again emails messages whatever and They are often there longer than the screen especially on a on the phone So they have to be scrolling but then as I said we wanted to optimize for one-handed use in Which reaching the top of the screen is not easy So that's why we did a bit similar to what iOS does as well I have the possibility That you can if you scroll to the top of the of the list and then drag down further as you can see here the the top of this of the UI comes down so that you can both reach the the top elements of the list which would be hard to tap there and Also can easily reach the the header which is not just to show you where you are but also as a navigational device because you can Can scroll that left and right and go to any of the previous steps or Yeah, the ones that would come further if you have scroll back okay Then trowers I just Mentioned then before One central part of the Of the interface guideline is the concept of a side drawers that It's a concept that it's a fond of all over the place but in Android and iOS as well It's it's a it's a layer on top that goes over the application content that you can have a Second secondary controls We have a base class that it's called overlay drawer In which you can put anything you want in it it It will became in Kirgami 2 a subclass of Qt quick controls to drawer Main thing it adds Besides a bit of styling is an handle because we found that that Very often in mobile applications if if there isn't Something that always shows there is a drawers that Visually that can be open It's content can be be easily forgotten and Yeah, you can you can define Define to slide it from all the four or all the four sides sides, but the most important thing is the specialized drawer classes that we have The first is global drawer Before you talk about it. I want to see if I can yes So instead of a screenshot can be just No, please don't But it's really tricky to To try from here. They just use this So yeah, the global drawer is the one that holds the main menu of the application So anything that should always be accessible no matter where you are in the application it by default consists of header which Optionally can show just a nice background image and a title which is in most cases the name of the application and Then the the main part is the It's in the actual menu here Where you can just put the yeah the main actions It can have multi levels multiple levels as you can see here. So you can have a hierarchy of menu items and then Above it, which is you can you can put other elements in many cases This will be a search box so that you can search from anywhere in your application and There can also be custom controls put at the bottom if you want to have some some options For example, but you want to have always available then you can put them in the global drawer as well Okay, so let's let's see how is used from your application You put it as the value of your global drawer in the application window If you're if you're using a normal key to control application instead you can just put it Pay attention to put it in the right layer that doesn't get anything on top of it Exactly as as we seen for the For the page actions the the menu is Is described in a semantic way so it's it's a list property of actions and the action can also be Nested one into one into each other in this way you You obtain the multi-level hierarchical menu in the in the guidelines though It it recommends to not use more than two really maximum maximum three levels, but it's just for usability These action type Inner it's from Qt quick control action Unfortunately Qt quick controls two doesn't have one for now, so We will probably need to depend from it For a while still But it's something that's I think it's it would be a Really the case to to have it upstreamed in Qt quick controls two as well We cannot just completely Reimplement it as It needs private Qt API for Correctly managing the keyboard shortcuts if there is any Besides the actions you can put the Title the icon the top banner is any URL that an image Type can I can accept You can put arbitrary items either on the bottom or on the top of the menu I just just define the items and and it works The other important driver drawer type is the context drawer so the context drawer holds any any actions which are not Important enough to be on the main UI, but which are dependent on the context so that This is where you put things that only affects the the object you're currently looking at and Yeah, we wanted to have a clear separation between Global and Contextual actions so that users always know okay If it's something that affects what I'm looking at now I know I can find it in the context drawer if it's something that it's Independent of the context I can find it in the global one Yes, you can see here the the actions are actually at the at the bottom by default also to make it easier to access them with one thumb Yeah, and Again, you can either open it with the handle that you can see that bottom or just slide in from the right So this is an important difference from for example material design Which does have the the overflow menu to hold additional actions But those can only be accessed from that tiny little button at the top right of the screen Which makes it again more difficult to use with one hand and we made sure that these edge gestures are available for both Okay, so technically this is defined with the if I find again. Yeah Yes Defined by the contextual actions list that you put in the page and All it will need will be one contextual drawer that it's put in the Application window so as as here defines a global drawer as this one you just define Context drawer as a context drawer instance And without doing anything else then its content will be populated with Whatever the action are of the current page Then yeah, you can also have other custom drawers Thomas then Yeah, one one example of a custom drawer is the the bottom drawer which can be used for There's some some quick dialogue Which should not cover the whole screen, but just slide in from the from the bottom you quickly Decide yes or no for something and then it goes away again, or you can close it easily So that is yeah, something that can also be found in material design applications and Yeah, it is nice to not only it's not always show a full dialogue Yeah, then the for this the overlay sheet is kind of the the full dialogue The advantage is that it can be as as high as you want So it's doesn't have to fit the content doesn't have to fit on the screen. So if you have There are long long content you want to show in an overlay It can just scroll Yeah, there's more at the bottom as you can see here You can just scroll it to show everything and it but it still can be easily dismissed by just They are pushing it away. So that is that is the way to Yeah, quickly show additional contact content without leaving the the context that you are in Yeah, the technically just A couple of things So yeah, you you can have this just to basting because it's basically a big flicker ball by default the Graphics of the sheet takes the whole page, but by defining the implicit Implicit width of the of the main content you can You can have a you can you can have it also narrower. So it will have It will have an empty area on the left and on the right Let's see if I can have one that it's Working so basically Yeah, it's just a big sheet of things and you can You can dismiss it either clicking by clicking on a on an empty area or Just throwing it away. Yeah primary action button. That's Basically what I we talked before about And it's It's those controls at the bottom They can they can be triggered to to doing a particular action Those are Defined in the in the page as well. In fact if I if I go back the the whole Thing it's also scrolling away because it belongs to to that page You don't have a direct access to this class is just gets created when you When you define The primary and secondary actions So these are used for actions that are important enough to always be visible and It also doubles as an additional drawer handle because we found out there's some users Preferred to open the drawers from something in the center of the screen So they do not have to move the thumb to the edges of the screen That's why if there is a primary or secondary action buttons You can just drag them left and right to open the drawers. Yeah, then this For now that in some cases You want to be able to execute actions on an element of a list without opening it so Again typical example list of emails Where naturally usually if you would click on one email in the list it would open that email, but you might See already from the title that you don't care about that email and you want to delete it immediately for example And so in this case this would make sense to have these these handles at the right, which you can just slide To the left or click to reveal additional actions so it basically fulfills a similar purpose to the to the context drawer and In fact, it should not be combined with them because on one hand it's can be confusing because people might not know where is Which action is in there which action is in the context drawer? And that's also a bit of a conflict because the the context drawer can be opened by an edge swipe from the right which Yeah, it makes it a bit difficult when you also have these handles on the right So basically what you have to think about is Do you have contextual actions which only affects an element when it's already opened and central on the screen? Or do we have contextual actions which users might want to trigger without opening the element? And so we have controls for both of these And then just quickly I was used You use You use the particulars wipe list item as a delegate of a list of a list view and then as the page you just define a list of actions and Define what to do when they are triggered and what icon they are they have The okay the header it's So our case the the header is a typical element of mobile application so that you know where you are But in our case as I already said before it has a dual purpose. It's not just for showing where you are But also as a navigational element Well, that was me when you when you pull it down Then you will have easy access to it and can yeah, just go any step back or forward in the hierarchy in in one go by just scrolling it left and right Okay, and then there are other as I said little helpers that You can just look them up on the on the API documentation the important one as I said before is the is the action that represents semantically all things like the The bottom buttons or the context menu or the actions in the swipe list item the rest Is is just little controls that we that we needed but Not much important the most in the most important ones are those that we just Went one by one So getting in build is One thing that we that we found as a as a feedback From early adopters from people that were trying to use it on Their Android and and even more difficult IOS applications was that Seems to not be still not be trivial at all to To use any kind of third-party add-on to cute It's it's very easy in a in a Linux distribution because it And everything you need it's already installed But for things like Building in on Android or on IOS there are still some some difficult So when I ended up having four different ways to build it The most important is the distinction between have it it built as a plug-in or everything built as a static library That seems so far the only way that seemed to work correctly on IOS At least that was the And the feedback from the subsurface guys that it's The first very big application that it's using Kirigami on multiple platforms So yeah, as usual as any KD KD framework You can build it with CMake as a plug-in that from your application. You just do find package That's it from Q make Cute plus Kigami and it finds it hopefully But if with CMake you add the The command line switch static library It will it will be just a static library then they In that case you would have to have a Private copy of Kirigami in your application. It's horrible, but seems that some kind of application. It's for for Mobile devices. That's what they What they want for now, I would like this situation to change but Same thing in Q make there is a PRI file so you can just include it in from the Q make file in the In your project directory and it will Build it as a static library This yeah, very quick and dirty Example you can include it maybe only on platforms that you can cannot really avoid it. So if Ios Then if it's static Then it will not use the QML there Way of defining a plugin So we love you will have to register the tapes the types manually and there is the that If it's building that way, there is available this global static function that just does it Again do these if only if you cannot avoid it namely Ios And in the in the in the same way With we'd see make you can statically link what you built before Yeah, we have Already quite a lot of users so the the first External user of kirigami was subsurface, which is dive log application It was originally created by Linus Torvalds and the condor and And It was started as a desktop application Originally using GTK, but then later switched on to cute because it's more flexible as we know and Then they at some point they wanted to do they had a companion app on on Android Which was just could do only very few things, but they realized that they wanted an actual full-featured mobile application and This is where they got in touch with with us especially Marco and service who thought that hey this might be a good idea or a good example to put our Components that they had developed originally for plasma mobile into action and So we worked closely together with them to overcome initial obstacles and to see what would need to be done to actually make it Valuable also on other platforms Yeah, the nice thing is that since it's both cute there The mobile version shares most of the back-end code with the desktop version So they didn't have to rewrite any of that. It was really basically only the UI that they had to recreate for mobile and then some some platform-specific things and also the it is already released on on Android confided on the Play store and The iOS version is currently in beta mostly because yeah that there are many difficulties when you first start with programming for iOS But those two the Android and the iOS version again share most of the code even on the UI side So they made a few adjustments for for iOS because some iOS users wanted some things in a different way But they could have just reused the same code to build both the Android and the iOS version and That would of course also then run on Linux both desktop and also Yeah, they said they were very early adopter which allowed us for very good collaboration and it was important for our development because We didn't develop keregami in a bubble only within our team But we we got a lot of feedback and they they also had very enthusiastic beta testers and users so we also get some very valuable user feedback and made some many adjustments to the their to our design and We also got very early on already patches So that that's really an example when you create a framework It makes sense to work with external projects early on and not just they're created within your own community Yeah, so that service looks Yeah, as you can you can see you can see the the global drawer there on the left and They're they're actually using a sheet so that they're making use of Yeah, of most of the the components that we we offer and it integrates pretty well then Yeah, another example of a keregami application is peruse Which Yeah is and project done within KDE the developer is here and It has already been released for desktop Linux and on Windows and the yeah, the mobile version is currently in development then there is kube which is a Pym personal information management application currently the the first part is the email application and That is also in development for desktop Linux for mobile and It's also supposed to work then on Windows OS X Android iOS for them. It's since it is supposed to become the the standard client for co-lab It is very important for the team that they can deploy it on pretty much any platform So Linux only would not be enough for them and Then we have discover which is a software store which is the default software store for plasma and It is also in development for desktop Linux and for mobile So, yeah, here you can see some screenshots on the top left. We have an early version of kube which already Even just the screenshot get some very positive reviews and reactions from people then on the top right We have peruse which if I haven't said it is a comic book reader as you can see and It's also what's very suitable for kirigami because it's mostly a content consumption application and then at the bottom you see discover yeah, then the some feedback that we got so far Someone said that the Android demo kirigami gallery is running surprisingly fluidly on his Nexus 7 tablet from 2012. So it is not Results hog in any way works also on all the devices Yeah, someone said he's excited by the slick looking kigami and the possibility of building applications on Linux and on and windows over C++ and then one of the Subsurface users said that while he found it Took a bit of getting used to the the different navigation concepts But then even as an Android user He found that it didn't get long to get used to Swiping the central button to open the drawers and then found it easy and comfortable to use and Also very efficient because you can use it You can use one element both for executing executing an action and for opening both drawers and One of the the feedbacks on the on subsurface was that it has superb function, but also beautiful design And it a on the technical side we have a few takeaways we started by doing it as the UI framework for for plasma mobile and this is still one of our central goals, but This wasn't enough if you if we wanted to attract many application developers So it it really has to be Something that can be used by anybody anywhere Even we if we are pushing some Key design elements of plasma mobile because we think there are they really make sense And also to have an excess must be What in frameworks called a tier one doesn't Cannot have any other dependency besides cute This makes some things more difficult because there are a lot of awesome things that Are provided by? KD frameworks Especially in higher tiers, but if you then if you use them it gets less usable for some for some kind of applications and Yeah, so far most of the interest Has come from people that want to use it use it for developing mobile application mostly for Android Since building and deploying on it. It's getting quite well ironed out a bit also fire for Ios But it's still a bit more difficult But But yeah the so the The target is to make it an actual tier one framework and we that we had a standalone release so far and that's and that's good also to to get first First large-scale feedback and we Also cannot do it right now We will have to depend from E in order to do a transition to Qt quick consoles to depend from Qt 5.7. So We will do it when we will Be able to put in frameworks Qt 5.7 base library. So it will take a while But Luckily if by then it will have been I don't know enough to have a really good quality ready for KF 5 And yeah, now we started I started to port Everything to Qt quick controls to Everything where it makes Makes sense when waning Qt quick controls to there is a kind of similar class that has similar API I can really save a lot of QML code because it's done quite well Yeah, you can you can find more information We have on the wiki published the human interface guidelines how applications should be done on mobile and on desktop and Also, what are the correspondent component of kirgami that helped to implement a particular concept? All the API is is documented on the API.kd.org website if you want to try it Now very easily there is a The gallery application on Google play Google play just search for kirgami gallery and among the the many things that Talk about actual kirgamis. There is also that one Then we are on IRC on multiple channels on main lists so if you have if you have a question also in the Next days months just should there or if you have it now Please ask and thank you very much everybody. Thank you You think there's stuff in there that you're working on you can upstream also to Qt quick controls to like the drawers Maybe if they are useful Something I would like to upstream Qt quick controls to have Drawers, and that's what we are going to use and Maybe Maybe the the work on the Visible handle could be Something that could make sense in Qt quick controls to think like the Derivation global drawer. I don't think so because it's a it's a really specific use case There are there are things that I would really love to see there like An abstract action object again And some some small details like that, but overall I'm quite happy about Qt quick controls to How is this a base for us and yeah if Whatever I see something that should really makes make more sense there. Yeah, it's definitely To be tried to upstream That's the choice of saying it must be tier one Is it really something which has a lot of impact of all people are going to use it because since not the frameworks are Reseparated it's not It should not be that much to add if it's not very tier one again Sorry, I didn't answer the question You want to that you're getting is just here one because yes people would not use it as But since now it's a framework that are really separated if you would just use one part here one part here because it's interesting with it's really preventable to use it We can we may see if If it will make sense to use other tier one frameworks But what I would rather do probably is to make Either Adones for Kirigami maybe another repository, so So I think maybe an adones package that uses a couple of frameworks that do something useful or having in the frameworks themselves The proper bindings that you just need those Do you think your self component is complete now or are there components that you're planning to add the What is complete As What as the number of Graphical objects that we have I think it's pretty much complete Probably Well for sure as as always happens By the use by By the long use by people there there will be feedback about About new things that could be could be needed But I'm I'm pretty happy on what we have so far it will probably need some more things desktop specific For for adapting in a better way the applications to desktop we already have something but That may need a bit more research So basically we have I think we have everything that absolutely needs to be done to be there But there can be more further components that are nice additions and that would make it even more valuable Even some some things like people said they're missing An easy an easy date picker for example that there is a calendar element in Kirigami 2 But there is people want something where they can just go into a field and then they they have a nice Date and time picker things like that good to ask about the teaming and system seems system setting support basically Fonds font sizes background colors and so on are supported in the Kirigami or not Yeah, basically we use We use a An approach to doing styles that it's Similar to how Qt Quick Controls 2 does so we have some binding classes that Like there is one that is called units for for having Sizes one called team for having colors one called icon to render an icon with a that are That are loaded depending on the platform so For instance the the gallery here It's using the style from for plasma mobile It would look quite different if I loaded it. Let's see if I can If I loaded it with the desktop Style The same thing it looks quite different So the Yeah, the funds the colors How icons are loaded it it may vary from platform to platform at the moment. We just have a couple Desktop Plasma mobile and and a generic fallback one that we are using both on Android and iOS that does things like Just look loading icons from a sub directory In having a script to extract them So you ship only the breeze icon that you need and you don't ship an Android application with 2000 breeze icons that wouldn't be good and you can also see here that the What's normally a global draw is here a sidebar because you have more space on the desktop So you can always show it and have it only closed manually These are some of the things that we do for automatic adaptation to different form factors the last question Any last questions