 Yeah, it probably should be able to hear me at the front anyway, but good morning everyone And I'd love for you to give a warm welcome to Thomas Mijanovic to his talk on Cross-platform development in QML. Please give him a warm welcome Hello, everyone. We are all kind of alive kind of awake after last night's penguin dinner nearly Right, I'll just take a quick poll before we get started. Who here's used QML a quick before? Hands up No one Want excellent. Well, we might start with just a bit of an overview on a basic intro into the language just to get everyone else up the speed Development anyone use any kind of cute tools before Anyone who's done any JavaScript development before Everyone else not a worry. This is very accessible very simple We're gonna start a bit low-level everyone is bored by the on the beginning of this tutorial feel free to charge ahead a bit We'll just do a bit of housekeeping before we get started We've got some SDKs being around we have Italian architectures if anyone still need one of those other than that if you've got one of these fancy laptops with no optical drives We've got a hard drive being passed around feel free to grab the SDKs You won't actually need everything installed just yet Because everything that we're going to be doing works on a normal desktop device will be doing our developments on desktop and Later on towards the second phase of this tutorial about 40 minutes in we'll switch to playing around with mobile devices So the question was if installing cute creator at the moment would be sufficient That's all you need right now if your normal package manager has it Other QML scene and your favorite text editor or cute creator Anything else you might possibly want is for deploying to various mobile devices and embedded devices So you feel free to grab those later on so right now if everyone is going to be Interactively taking part just wants to either make the decision now you want to work with cute creator the IDE or work with QML scene from the command line We'll just do a basic familiarization I've had that's going to go soon after up interrupt ourselves later on just one moment. We're having problems at the microphone Okay, no problems there So coming through now Fantastic alright everyone can hear me All right, we'll charge on then so before we get any further I'm licking with personal details in the bottom. That's all right So the only thing at the moment We're not going to be making any kind of project Just make sure either through a key binding or through the menu you work out how to run QML scene As long as you save a document With the QML extension and click this it'll run all of our demos on your desktop normally We'll go that to start with All right, so we'll start with the basic overview of QML some of us have heard of it before some of us haven't so it's a Relatively recent language. It's a declarative language. So rather than being concerned with Imperatively setting up our entire environment those of you have used maybe C++ and Qt's to set up something kind of similar to what we're going to be doing today or most other languages You're actually trying to build everything from the ground up with the declarative language You're only expressing the final state that you want and you're letting something else handle the implementation of how you get there Which is part of what makes this so simple to work with and Usually a lot of this all of the Scripting involved it's all JavaScript or a special runtime called Qt quick to handle all the graphics side Everything's interpreted at runtime. Nothing's compiles It's actually ends up being a lot faster than most compiled languages though The JavaScript engines are very highly optimized and the Qt quick scene graph As long as you've got decent open GL drivers. It's a lot faster than most other solutions out at the moment as well Usually QML is used for developing GUI apps or just the GUI front ends to other apps There are plenty of bindings to other languages, but if you're happy to use JavaScript for your logic It can be used as a standalone language as well right so Those of you who are familiar with Qt's history over the past few years you that Qt got to a state best expressed by the following fancy video Sean Claude you look really worn out today Do you have to finish your program on three different platforms and in several languages too? Is your boss breathing down your neck? Your troubles are over. We have the solution for you We might leave that there before we run through the whole app So the state of things at the time was you had this one toolkit called Qt which you could use to write almost platform independent code with just a few hundred if-defs it now and there for obscure embedded devices and you build up for a variety of systems and everything would kind of work and Till a company you may have heard of them. They used to be big in mobile called Nokia acquired Qt and thought this is great, but we can do much better and Under Nokia's ownership that's when QML was released. They wanted something fast and agile Ideally, they wanted a native interpreter pre-installed in every mobile device. Otherwise use some boilerplate code. You compile one launcher pretty much your interpreter for that platform and then everything else is standard you use the same code No if-defs no changes and everything runs nice fast fluidly with the mobile platform in mind So you can use QML for mobile apps Desktop apps you can even website bindings you can do webpages with it This is basically what a QML file looks like. You've got a whole lot of import statements up the top And various objects nested down the bottom now that looks a bit messy. I don't know about you That's a bit hard to understand. So let's just go to an example That's pretty much it ignore the import statements for now. You need a magic line at the top of your script and That's it. You pick one object in this case a rectangle So if you want open up your editor And we'll give something like this ago. I'm just going to copy and paste this code All right, so if you put that much in and you run that with QML scene You should get a nice yellow rectangle with some nice blue text over the top All right, this is a bit of a chest to see that everyone's able to use the tools and kind of keep up How's everyone going with that? You've got something similar on your screens? Ah In that case rather than making a new project, which will be final set up your build environment All this fancy code let you do all these fancy things. Maybe just create a new file actually ignore all that You know what if it's going to be easier Just make it create a file externally give it a dot QML extension and just open it with QCreator Have I lost anyone there? All right, we'll forget it. Just a new file of projects cute QML file Qt quick one Choose that They're going to want some of that for that to be saved give it a fancy name But QML on the end Normally we'd give a capitalized first name. It doesn't really matter and There you go. It'll just give you some ball of plate code, which will do something kind of similar All right back to the other example or show again how that works. Okay, so the example Was something like this So we have an object in this case. It's a rectangle. We've given it an ID and We've given it a property of color In there with nestled a child object We turn ID we've given it some other properties So if you want to have a line ending rather than a new line You can use a semi-colon kind of similar to JavaScript I was a bit space constrained on my slides to do the resolution. We're using I'll make it a bit nicer No, it makes no difference. This isn't python. You can put as much for as little white space as you like Sorry pipeline guys So it doesn't really matter doesn't care. It's not pearl You can forget the semi-colons add the semi-colons whatever you like. It's not really picky So if you put something similar to that And then you run QML scene You should get exactly that a rectangle a yellow rectangle with some blue with the words blue and blue over the top Okay, ah fantastic. Anyone else want an SDK later on just come and grab that hard drive Right hands up if you're not there That's right another couple of seconds everyone else. I'm just going to throw some other properties in that text is a bit small So this is a nested property here You can try and change the style of your text. You can use the autocomplete to have a play arounds You might think your rectangles a bit small All right, everyone kind of there Running it. So I've just put a shortcut for Going to external Qt quick and Qt quick to preview and you should see this fancy window popping up And if you're deploying to a platform, which naturally perform supports QML such as mer selfish plasma active Ubuntu mobile, you know all the common mobile phones that everyone has these days Otherwise later on you'll just build some basic We'll use some basic bullet plate code to build us either an objective see you're in Java some kind of interpreter They'll do the job for us instead. So you've run QML seen and nothing's happened Or I'll just have a quick look. Have you saved the file? Yep Unfortunately, it doesn't work on the active state of your document. You have to save the file and Then give it another go still not working No worries, so you've gone QML seen on the fall I should try a dash to file on the end are using a distro package But I don't know unfortunately if you're using distro packages, which is usually quite helpful Sometimes they have some weird quirks just so they can package Qt 3 4 5 2 1 all at the same time So let us know now now that everyone's on the same page. We can motor through a little bit more All right. All right, so everyone has your fancy yellow rectangle with your fancy blue text. No No problems. We've got lots of times there And nothing's popping up Just if you go to a can you find the part of it wherever the binary is gone and just try and call it externally on the file so It's called QML seen QML se any so if you can do that for now and later on we might work out what's wrong with key creator So everything right in the middle row. That's right. Just a moment Unfortunately as with a lot of solutions, it's harder to set up your environment and it actually used to code something It's you might that's some needs to be font font and then see and then see that runs It's if you go tools tools yes external Qt quick QML seen maybe save it first So a quick file and save and try that again. That's funny Say this gentleman in front of us had the same problem. Are you able to open a terminal? Ah, okay Sorry, what was your name? Can you please leave your hands just to do the same thing that we did before Okay Honestly, I've never seen QML puppet before Or you should need if you install Qt creator it should install everything else it needs you won't need most of what it's trying to pull in now So it should just be Qt creator no dash is nothing else. Otherwise try Qt dash creator You've installed it. Oh You've got some fancy graphical tool here. Yeah, I using the design function That's so you can draw anything by hands try going to edit instead That's lower case T For Qt quick up the top All right, so everyone's aware the Qt creator ID ID you isn't too different from your normal word processor If you see a squiggly red underline that means something isn't spelled correctly So tools Menu seems to be Okay Alta team maybe Or come on to you depending how you bound it Alta team maybe I'm sorry, there should be a drop-down menu file menu up the top edit menu tools menu It's should be there I'm not I'm not sure I've never used unity before Oh on mate, okay Well, you can always if you can open a terminal up in fine with the word it QML Just run QML scene or QML scene dash Qt 5 on the file and you won't need to use the idea to run anything He finds do you have is it in your path QML scene QML s? Fantastic, and then just run that and pick and just Get point it to your file and it should run All right, so now that change your menu for capital T just save that and should run All right, excellent Right. I think most of us are there It's all right once you get it to work once every future change is pretty simple. All right, so I say so That's All right, we'll give an everyone's background. We'll ignore all the scary stuff for now Okay objects Everything's pretty much an object, but So you have some kind of object like our rectangle You can give it an ID generally wouldn't need to unless you're going to refer to it later on Bad luck to you when he wants a copy of the slides later on. I don't know how I'm gonna do this So your property so we can do width. I don't know whatever we had before comment characters Everyone document everything you're all at the talks on at the mini constant the talks yesterday Or you can do the other JavaScript style ones All right, so what we always have we have our objects we give it a few properties Function methods which we'll get into later on those if you write JavaScript you can run a JavaScript function in here oops, so don't have to write this down and Signals which will ignore to later on and child objects if you want another rectangle in here You're just the same as we did for the text before So this object is a child of the one above it. That's its parents. It's a part of it It's some painted on top of it and so on and so forth Sorry what I'm writing now. All right. Well, I'll cut that out. I'll fix that later on No, we'll be doing functions in a moment So something like this then obviously if you want to do more rectangles you can keep you can do an even smaller one inside that one so on and so forth So you have your object's name some curly braces and then property colon value property colon value property colon value and so on and so forth Now we'll get to a problem soon. So we'll go back to our very nice example and We have our text. Let's say we want some more text now. We once Somebody pick a color We've already got blue red. Thank you Reds So there we go. I've just added this So this is great now. We're gonna have a rectangle and blue text and red text and That's kind of okay until I try and increase the size of my text To the same as the other one and we'll see They overlap So there's no point having all these different objects if we can't actually position them anywhere Otherwise, they're just gonna overlap over each other. So we'll quickly look at positioners scary than it sounds So The easiest type of one actually is in this example. We'll just go back to what we're doing before and The easiest thing you can do you can give it an X and a Y value So X I Don't know 50 Y 50 and The same thing. I'll click through in case anyone missed it before it's external Do it quick QML scene or just call that from the command line on your file There we go. It's 50 pixels down 50 pixels to the side Nice and easy But manually position everything with pixels gets a bit awkward after a while So we're going to use something we call for anchors After I don't switch to a TTY Sorry about it Making the probably broken the recording system. No, all right, so the concept of anchors is It'll be easier once we run an example You can attach an object or anchor an object to an edge of another object. You can anchor to its left edge It's right edge. It's top. It's bottom. It's vertical center. It's horizontal. Sorry vertical center horizontal center or its direct center or You can just say fill the entire area of the object under it So just copy and paste this one here. All of you poor people have to type it out for exercise reasons I'm don't worry if you're importing quick quick 2.1 or 2.0 or 2.8 anything else at this stage There and now we have a Silver rectangle which looks like the same color as the window. So I might just change that to purple Haven't had purple yet Purple rectangle in the backgrounds We have a red rectangle which we haven't positioned anywhere. So it's in the top left corner and We've anchored this aqua rectangle to the left edge of the rest of the right hand editor to left one and its right anchor is on the right hand of this window here so we'll just Make some more changes to demonstrate it say we want to anchor it to the bottom as well and Notice rather than using an ID for this rectangle, which I could I've gone a bit ahead of myself and I've stuck in this little special keyword parent So purple rectangle is the parent of this funky aqua rectangle down here So if I don't want to bother giving an ID just for one of its kids to refer to it I can just say parent if I want to be specific. I Can put in the full ID from up here? so Well, we run this now and look at the change and Oh That's the problem. I gave it a height. We'll get rid of the height and anchor it to the top as well and There we go So this aqua rectangle its top edge is anchored to the top of the purple one Its bottom edge is anchored to the bottom of the purple one Left edge is anchored to the right hand side of this red one and right edge is anchored to the right hand side of this purple one and using these anchors Doesn't matter if you resize the window if you've got a responsive device And this dimensions change If you specify fixed width in pixels something will start that fixed width like this 50 pixel wide red rectangle Everything else is fluid dynamic and obeys its anchors So this could be quite handy for if you want something that works on the tablet and on a phone So the only other thing you want want to do is give it some margins Because we've got whoop. That was bad There we go. So you can see some of our lovely purple as well We've got a little border all the way around with 20 pixels Is the video feed affected? It's right just here. All right, no problems Now a bit of shorthand rather than typing anchors dot anchors dot anchors dot every time We can just type and so on and so forth and put it inside curly braces. All right You have to type it as well. I won't be lazy. I won't use any shortcuts We'll give it a new set of anchors and see what happens So Okay, 50 points without running it. What's this going to do? What's gonna? What's the aqua rectangle going to do in terms of the red one? That's not what coated. We just run it and see what happens, right? There we go So we've anchored it to the top of the purple one That's its parent the bottom of the red one the left of the parent Which is the purple one and the right of the red one So of course it perfectly covers the red rectangle without specifying any widths pixels or anything funny like that All right, everyone's still on the same page Oh Excellent so This is about 10% of what I plan to do so far and 90% adapting to what's going on in the room That's no problems at all. If it gets boring, let me know and I'll shift gears again I have all these my slides of that boring anyway So and also if it was convenience, we've also got anchors fill and you can fill the red one You do the same thing Or you could fill the purple rectangle We'll get to that in a second Say if you wanted this in the backgrounds so you can see what we're doing. I'm going to introduce another property opacity It's a value from zero to one So in this case, I'll give it some borders so we can see some edges as well margin. Sorry So there we go. It's filling the purple rectangle. It's covering the red one of what I'm around it But what if we wanted that to be the background say for example our root element Wasn't a rectangle. It was something else We wanted to put some text and we want the rectangle to be a child of a text object not obscure the text We'll just change that now make everyone's life difficult So I'm going to put a text element around this red rectangle. Sorry. I normally don't use a key creator. I use whoops Something else Which is a bit more difficult to introduce people to So I don't know how to auto indent. So I will go like a presence and do this and this and this and Give it some text and we'll see what that looks like you've got hello there and This red rectangle goes over the top and if the red rectangle was a bit wider So we made this 150 it starts completely covering the other the other text up and if we instead Do something more interesting say we wanted a nice red border around our text and For some reason we have to do the text first and make the rectangle a child you can fill the parent and Another property I'm too late to delete that So I'm just going to hide it like you're setting visible to false So all of these properties are always attached to these objects They're just going to default value by default if you put something in you obviously want it to be visible So visibility is set to true if you want to change it you just put the property and set it to false and There we go. We can't see our text whatsoever So what we have to do instead is Give this not just an X or Y value a Z value So you put Z to negative one it uses traditional Z ordering So the level of the screen is that equals zero anything positive puts it in front anything negative puts it behind We've given them a negative Z value and suddenly hello there is in front again So to answer the question fantastic Look at us We already got something that looks like a dodgy smartphone up That all we need to do is put ten ads down the bottom and punch the monkey and we're there. We're making money All right. Well That's not we're not quite there yet, but um, that's yeah multiple objects anchoring positioning There's another we might just switch back to the slides for a sec after that Positioners it's a bit boring manually specifying anchors if you want to just a nice column of text one line after the other or Rectangles and text because rectangles on text are the only fun things we're working with so far We can do that too So as you can see the root elements can be anything you like It's something without a color so QML scene doesn't know what color to make the background So it just leaves it white if we don't make it a rectangular a picture It'll pick your default system background color. We can make text the root element We can make anything the root element if it's non-visual things will get a bit funky other than that So I've got a column all I've done is given the column a width so it knows how wide to make the window I don't have to give it a height. It's by default using the heart of all its children put together and Plus the spacing if I take this spacing away if I make it something ridiculous You can't even see The next object because it's 500 pixels off the screen. There we go. There's the text Let's spacing down to five and it does what you expect Everything's nice and tightly packed That's a column a row pretty similar It'll be able automatically take the width of its children. So let's give it a height instead And there we go. That's probably a bit too high And it's put all our three items in a row So if you don't want to fix anchors, and we definitely want things in a row with fixed spacing You can just do it like that They're even funkier and even cooler ways to lay things out But they start getting a bit more complicated and you have to start importing Extra modules and things like that. So we'll get to that a bit later on I might ditch these slides in a sec No, I think we'll just ditch the slides now and keep soldering on here All right, so that's a bit fun, but it's a bit boring. We might want to put some pictures in Who knows a good picture a good URL for something on the internet? There we go LCO logo. Let me just off to another screen and Find the URL for that 50 points if someone finds it before me Please be something we can all type Yeah, that's not that bad So here we go now we've noticed something F. We've got some sizing issues here But if we drag this over You might switch this out from a row Back to a rectangle. Sorry for all the changes on the fly So no spacing So all these things obviously now going to be on top of each other again So sorry if you've been you've invested your heart and soul into all these other children I'm just gonna get rid of them and I'm gonna stick it in the middle of the rectangles and Defying me. It's not working That's bizarre All right, you know what they don't have any kind of hop-link protection on their images. Do you know? I hope not Just get another picture. Sorry about that Here we go Bob Young's face. How does that sound? It doesn't want to show This is the worst demo ever It normally It'll asynchronously load pictures and thanks for bringing it up. We've just had the point raised because it's not local Could that be why the image isn't displaying? What should happen? Is it? Displays later on it delays it loads it asynchronously Working for the it's working for you up the back there. Is it working for everyone else? Some yes some no Weird caching problems. It's working. Does it come up straight away? All right, so I've got some weird case-to-fire wall problem with my system But if it works for everyone else works for you. Are you in windows? You're still installing all right? Well, let us know when you get there. Hopefully you've been following what we're doing and We'll get you up to speed All right, so I'm gonna use a local image. Sorry about that everyone everyone else can keep using Bob Your Bob Young's fantastic face Everyone find your favorite picture nothing nothing I've seen nothing too embarrassing on your computer and Grab the URL for that instead if you put it in the local directory, which you're working in you Don't have to give it any paths. It'll just or it does relative paths as well So I'm going to find a picture Since it hates me running off the web so everyone can do the same thing I'm gonna have to grab a local one as well And this is something unfortunately to be aware of is one of the corner cases with mobile devices Things usually work, but if you've got a weird phone from one weed manufacturer with one weed firewall You actually might have to test it on that device You might test it on say a hundred other Android phones and it works if one guy's complaining on the app store that it doesn't work It might not just be crazy. He most likely is just crazy, but he might not just be crazy All right, so let's find Here we go a bit sad Let's get a picture of a mop You all like mops, don't we stick them? Maybe just follow So you can all stare at my private file hierarchy There we go Had in the demos folder, so There you go, you can use a relative path if you store your picture somewhere relative to your actual project that makes sense There we go a nice lovely mop You know what a mop that just stands still is pretty boring Mops should be doing something so We don't need that and No, that won't move anywhere. Give it a duration in milliseconds. You can probably guess what's gonna happen here Absolutely nothing Thanks a lot mop Now I'm going to cheat I'm gonna use the same curd I use for the slideshow to change slides earlier And I'm gonna copy and paste that because this mop does not like me. All right, so Apparently we've changed the syntax for how we do things So that's all right, we will Give it a name Okay, and what we're going to do we're going to start it later on One extra thing if you want to do some special initialization only when your scene is ready Don't ask why it's called this just accept it for now because it's crazy component on completed and here if you know JavaScript you can put a nice message to your terminal and We can give a JavaScript command to a number and a nation and that should work beautifully for us and ah That would be why There we go. So that was really really short. We might make that a bit longer Let's look that 50 times Wow You know what? It will make it a bit faster. Do you I think this needs? I think this needs some music Who's got the sorceress apprentice on their laptops? Fortunately I do Now unfortunately nothing in normal Qt quit can play any kind of sounds or video But if we import Come on complete for me. No, it doesn't like me All right, we'll get back to that Iran obviously didn't install something that's an animation so we can animate there If you want to change it to the x direction simple thing Now look at it is gradually going from side to side Now property bindings other than anchors we can do things here as well We don't what if we don't want it to go just negative 20 to 20 we want it to go the full width of This parent elements it's boring without a color isn't it you think this will work? No, what's a weird color orange? We haven't had orange yet So actually it will go from the style go zero To and this way even if we end up resizing the window on the fly it'll keep adapting Let's make it wider. There it goes. It keeps going wider. We'll make it narrower Once my window manager stops thinking it knows what to do better than me And it will go in it as well And we can refer to what the properties this way and that's part of the whole declarative nature Rather than us hard coding everything from the start We just pick a value from somewhere else and refer to it if that changes everything else updates and propagates through as well now What if we once this animation to stop? Let's add No, actually not doing buttons yet. Let's add a mouse area Have a guess what this does? What will make it fall in the mop now? It says mouse area, but if you use your finger on the touch screen it ends up doing the same thing Now this is a signal this the mouse area has a signal called clicked When something tricks the signal it fires an on clicked events and we can define what it does here so on clicked we can put a log to the console for people are reading that and Say transition why the best name in the world and stop it. No not start stop So there we go crazy mop we click it stopped You already have a game that's better than a lot of the rubbish that you can get on nowadays on smartphones If you don't click them off it doesn't stop click them off fantastic you win Seriously play with that a little bit make it bounce around the screen use other weird animations by default It's doing a linear animation you can choose different easing types elastic quantitative quadratic and that Sweaks the maths down the bottom, and that's about 10th into the apps in the Android app store But we want to do something a lot a bit less useless than that But what if we want to restart it again, you know what we'll go into again. We'll just show funky rectangle Equals purple So you just keep adding extra anything here. It'll just run imperatively you can put a whole script of changes in there It'll just execute it one after the other like any normal programming language first It stops the animation that it makes the background purple What we can do here one last thing JavaScript loops while the engines really fast it can be a little bit crazy. It's much more efficient to Use property binding. So if you want to change the speed Depending on whether the background of the rectangle is orange or purple you can put an if we can put this thing here on if statements We'll just go duration So those of you said you've used JavaScript before this would be familiar to you So what this does is not much So that's the problem with not sticking to your Original slides. Ah, it's orange to start with isn't it? I remember if I can make so it's going fairly slow as it is as soon as it changes color It goes ridiculously slow and we've stopped the animation. So we can't tell the difference. We'll stop doing that Now, how's everyone been going along? Is everything kind of making sense so far? Now, that's the basics of the language That's okay. There are a few more things You can have other positioners list views. So if you want to have a large list of say contacts or from a database You can go through and it can scroll off the screen without you having to do screen management or do your own scroll bars We can keep going for basics of QML or you can go straight to the stuff that you're more likely to use for a mobile app We can look at our toolbars buttons text fields Texted it is and go in that direction. So he wants to he wants to keep on with basic QML hands up He wants to go to cooler stuff Fantastic good. I was about to shoot myself All right, now we go finally new project and we want application Cute quick application. All right, so find some way to stick it All right, so you're all at this stage so far pick somewhere to put it give it a name good All right Now there's something called cute quick controls. I'll just go a bit now. I'm gonna putting the slides up I'll just write a lot a bit for a while what we just did now if a little bit further That's the state that things are in when Nokia Finally decided they were going to shoot themselves in the foot and blow this investment. They just made and That's the state that a lot of things were after that But people looked at it and thought you know what what's a button a button is just a rectangle with fancy border images with a mouse area underneath it and they started using these existing components and these are existing Objects to make other objects and they were building all signs of funky things You know all kinds of widgets that we used to on the desktop new widgets just for mobile if you want to make a slider You can just you make a circle or a rectangle with rounded corners put it on another rectangle another color Change its position using anchors or animations or X coordinates But in other words, it's a lot of fiddly work to do it all from these basic elements that we've been playing with But they did it anyway for the Nokia n9 They did it in a completely separate and incompatible way for Symbian And then guess what it was on in another incompatible way for KDE plasma Another completely incompatible way for Android You're getting the idea here and guess what Ubuntu mobile has got everything in QML incompatible again Everything like the Salfish OS incompatible again blackberry It's native native apps are all in QML, but they call them cascades and use the different way again and eventually When Qt 5 came out they said guys. This is crazy Step one I took everything and the worst thing was none of this worked on desktop It only worked on mobiles yet to physically have a mobile device in your hand to develop with to see what was going to happen Or run some virtual machine or simulator to see how things work It'll sat down A lot of the Qt 5 developers. They thought we're going to make a basic set of components that should work everywhere That's what we're about to look at here called Qt Quick components Same syntax all we're going to change is the styling The reason I said we need Qt 5.4 for today It works in Android from 5.2 and 5.3 But they looked exactly the same as they looked on your desktop So you had a nice Android button with the same width for a finger to press on it You had some tiny desktop button. You had to get your little stylus out and press on Now you only have to that manually. They've got a nice Android style They have an iOS style that have even a Windows RT style You can make a Metro app from the same code can make a Metro app an Android app a desktop app an iOS app and Pretty sooner Blackberry Plasma and Mer and selfish apps and all you have to do is maybe a Couple of tweaks for your project file. You copy the same cool QML from project to project What we're doing now you will create a separate project as we're about to do for all your separate files That's just so you get your Platform-dependent boiler code. That's just gonna launch everything set whatever permissions you need whatever housekeeping and then just run your QML So get back to it and I'll frustrate the video crew because I have to pan their camera again So Qt quick controls we hit next Just for now go a desktop target if you've plugged in a device or if you install the SDKs you should be seeing The Android target you should be seeing other targets as well Like if I unfortunately some of the changes needed for certain platforms aren't upstream So I've actually got about seven copies of Q Creator in my system One is just for desktop and cross-compiling to Windows. I don't know why I picked this one today because I'm crazy One is just for Android and iOS one is for Blackberry and Jolla and so on and so forth But if it works on desktop you can easily get it to work somewhere else No, no if you're smart and you like their way of doing it You can use version control if you're a masochist like me and use darks That's not going to help you version control in Haskell there we go and All this codes they're ready for us and Rather than reading files everything goes in a little this funny QRC thing All this is it some it means when it makes a binary in the end rather than having separate files on your file system to be read in It's going to whack it all inside your binary Not necessarily because you're an open source hating I want to obviously set my code kind of person There's a lot of mobile devices have these really weird file systems that aren't like you reading separate files from your main application So we have a profile, which is a Q make. It's a cutism It tells you we're having an app. We're using QML We're using the Qt quick subset, which is the only interesting part of it And we're using Qt widgets only to give us a native style other stuff We don't really care about it includes this special deployment file Which is the reason we're using Qt creator rather than another IDE It'll just press a button and it puts it on Android automatically for you It'll just take a little while to build using Ants and Java and whatever else we have some C++ file We don't even have to touch it The only reason you want to touch it is if you wanted to start doing some C++ codes interact or if you want to change the name of your main file and What we have here is an application window rather than having some kind of rectangle or anything else is your elements It's got a specially class window that resizes itself depending on your form factor Gives you nice window title bars or not depending on the device So and then so forth it looks like I've stored long enough for most of us to have caught up everyone else I'm sorry bad luck, but we'll get to you soon Now no more QML scene thing. We're going to run which will build for us as well now If everything's working well in a system and everything's compiled well, this is just the bullet plate code They gave us everything should work by default You see we've got button elements if we put this on an Android device They'll look like Android buttons same for other platforms with native styles And there we go fancy little functions If you've never done it before all you have to do is modify what they've given you it's got a nice file menu There you can open all right. They haven't actually done anything with it But that is your basic desktop template Now what I'm going to do. I'm going to cheat a bit I'm going to open something I prepared earlier and prepared over a considerable period of time I might just Hide that from your view for a second. You can keep admiring the example All right, so it'll take a while because I've got lots of custom files being loaded lots of classes And then I'll run it. So my laptop's really hating this screen resolution All right, so you can have multiple projects open if it's in bold. It's your two projects. Just close that Building it's running There we go. This is something designed for mobile rather than for Desktop, but we can always go back into a more desktop mode I've deployed this I did this once when I was still warranty research You can load things off the internet you can pop it's uses basic X symbol HTTP requests get push so on and so forth and 3d isn't quite working so I haven't found anything yet for us today with the figure model Just to demonstrate some of what you can do once you put some time into things You can check on the conference Wi-Fi So we'll leave that for now So everything now that you see with the little scroll wheels and scroll panels will just be a normal flickable thing on a mobile device So you're not terribly exciting if you are not Biologist just gives you something to look at what you can do This is something I made when I've never experienced Qt Quick before I had written this all in C++ took me about four months. I Ported it to Qt Quick in about two days All this kind of crazy passing. I was originally going to do all the calculations passing making drawing 3d protein backbones in C++ The speed in JavaScript is comparable anyway So I'm reading a file with 20,000 lines and doing regex operations and it only takes about 20 seconds in most phones JavaScript engines So we'll go back to our little example here Close that actually no, I lie. I'll begin decisive again I will open something else. I prepared earlier. That's much simpler So in the meantime, please be building the example checking. It's working in your system And it's running the kind of stalling because I know a couple of people are having issues No SDKs found. Did you choose the desktop target or Android? Okay, I'll be with you in a minute. So this took about 15 minutes to make and Someone wants to come up and have a play while I look over here go for it Volunteer not missing anything You're not missing anything at all. What's the actual error? So this application is really really crazy Because it literally takes the width of the screen and divides it up based on pixel size It's suitable for a phone You can show it to you on a phone in a second pass it around All of these you can fit about four of these objects in a grid on a phone because I used Numerical squaring before they ported all these fancy components over it's hard to see what it's doing All I've got is a series of pictures and it flicks them over to check if there's something underneath You can install that now from the Google Play Store. It's a really horrible thing But as I said it took 15 minutes to do and it'll actually work on your phone But because it's not taking different aspect ratios into account and all of that and screen resolutions If I ran this on a retina display, it would look horrible. Hey, can't So All right, we've got a couple of people having problems getting things to work but for now Just open up the example have a bit of a play change some of the things here these message dollars a bit complicated all the logic Main logic here is in this second for for I'm called main form that you why that QML I'm not sure why they gave it such a weird name in this latest release This file is loaded and displayed And that's most of your logic for your application. We'll get our glass symbol. Ah, sorry. I've used creepers on it They made it too complicated. All right, so what we can do here. We can ditch this this main form All this does here if it finds another QML file in the same directory Which is the same name and you put it here as an object. It loads it instead That main form is a bit too complicated for us. What we're going to do is go file new folder projects cute QML file and just save that there and we're going to get rid of this main form business and I'll just comment it out. I'll delete it and put main page instead and Everything we put in this file gets dumped into there and now we're back with an environment. We're familiar with and all the example Ballerplate code already gives us a system menu everything else if you run it on Android, it'll use an Android menu and We can get cracking very shortly. I'm using my microphone. I'll explain again what I just did They've given us a very complicated example now with the latest version of cute. We don't actually want to touch that So we can keep things main qml exactly where it is. We created a new file called main page qml and You can call it anything you want. You just put the same name here as long as it starts at the capital letter and it will work So and that's it. We can add more code to it here for the real one or we can work entirely in here So now If you run this application No, sorry about that quit And there we go we've replaced everything we had in the middle all those fancy buttons and everything else We've just a rectangle element here. So you can use this boilerplate as a code as a base To keep going away Main all I did here I got rid of this main whatever else they used to have and put main page there instead So we're not using the other file that they had by default. I made a new qml file and I put its name there What I could do I could now make another new file It remembers what I picked lot. No, it doesn't you quick quick quick file choose call it other thing dot qml Same thing Do something so I can tell it's different from the other one If I go back to main qml main dot qml. I can now add other thing Nothing special. Nothing fancy. It's straight away. No, it's in the same directory. You can import it in I now have That's main page the white one and other thing is this yellow one over the top and This way you can start cleaning up your projects and have all everything in one massive file Which you have to comment everywhere and then gets to to 10,000 lines. You don't know what it means So did you manage to install the egg hunt program? All right, I'll get the actually it's um How'd you do that with place? It's look for it's tk dot on the same big hunt Thanks Without the height and the width a lot of elements Have their own intrinsic size like if you do a text element. It's just there by default the size of the text But some a rectangle is not visible by default. It has a width of zero and a height of zero So what you can do instead if you want to fill the entire page Say with this um, right if you want to still keep it a rectangle, so we're gonna nice color We can use anchors Parent this will really care what the parent is gonna have to know it's gonna fill the parents and What's your favorite color? blue There we go, and now our entire up windows filled with a nice blue rectangle that can be a background No, I was gonna get to that lady might as well do that now this application window within the height It's good to specify something if it's gonna be on the desktop for it to encase someone minimizes it even if you make it some Say for example, you can put It's best to keep everything in the other file, but you can put a text element here It will scream and complain But you can put extra elements extra objects extra children in each file But if you set the same property twice, it will complain Right, so now we can make say the width the text with and now it starts off the width of this text You can also set application window if it's gonna be on a desktop you can set it to be full screen optimized You can give it any window flag like a you can make it an x11 splash screen You can make it some our windows special video form as long as it works on that platform You can do anything you like with it now. I'll change the syntax so So especially with these newer components. It's a bit much Myself to remember everything, but thankfully You go to the object you're looking to help with and press f1 It'll take a couple of seconds the first time it's done it. It'll open this nice helpful Help you on the side so We'll just find out how to make it full screen and go from there. Oh, it's a window So we have it's inherited from the window class. So I'll have to go there and There you go So I would have to look up how to do that, but she can give it a full screen flag as well Just be two second Google search or looking at another project that I made which I shouldn't have closed But As I said anything which you can do for a normal cute Application window you can do here and it'll automatically just ignore it on a mobile device and go full screen anyway same for a tablet Now at this stage Given this is a bit of a new experience for most of us Do you want to continue on and make a nice app or do you want to start putting it onto mobile devices? Just so how to do that Not really fast do both why not both all right fantastic Yes question Yes Unfortunately, there's no automated testing for corner cases like that a lot of the things they deliberately allow you to do whatever Your post-operating system lets you do so if you try and put in extra features which say even if they work on desktop Linux or On my Jolla smartphone here, but not on an Android device or a Windows desktop It's up to you unfortunately to test it on the platform However, the media play will play most videos on all platforms. It's it's more of a platform issue same as if I try to play an h.264 file on On Linux distribution, which doesn't allow non-free codecs. It's going to fail as well Other than that generally if you file a bug someone will get to it very quickly and try and make sure everything's compatible Again, if anything I'm going to run this silly example on Android now And it should be exactly the same except rather than having a menu bar a file menu and window controls It should actually have a nice and your menu Android menu for us So someone's kindly given me This Android tablets and didn't give me the password for it There we go that should work Now just run my Android Qt creator rather than my windows one Well, who was saying before I didn't have any kits installed Okay, if you do install everything you can go afterwards and Adds SDKs to try and cut down the number of things you have Just I wait for it to unfreeze itself because it's searching my entire file system, which is encrypted For every single Android every SDK of every install, which is a lot There we go So It's found all of that it's gonna finds These what they call kits for different devices and Unfortunately my Android kits for an early Qt version But some I'll run that in a second. I Will just Android for I'm guessing it's gonna be that this tablet. I should have asked There we go speak Android instead It's right making you build a directory for me. That's fine. I don't care where you chuck it It automatically goes then and generates for us Our Android deployment file Which if anyone's deployed to Android before It's a Quite a pain in the neck We'll have a look while it's building and it's doing all the ant rubbish for us And it's not configuration is faulty. I do apologize another proper Android configuration for this device. Anyone just in install the Android SDK now All right, excellent. I might try that one Okay, everybody else who brought their own device with them Grab your fancy micro USB cable unless you brought an iPhone in which case bad luck Insert into your phone Depending on your phone and who it's from and where it's from you might have to do some fancy Enable debugging option on your phone or something like that and then you go back to Qt creator You install the SDKs from the disk. Everyone got their disk to their hard drives No, who's still missing an SDK? All right, we were after Have you got an optical drive? All right Is it working now? Fantastic Sometimes unfortunately if you're using a nice stable disk distro like Demian, it's not going to have The best the most up-to-date configured development packages Or you can just have everything crazy like on my system which so it stops working every two months like this just in Okay, this worked yesterday. I've just had a system update this morning and it's crashed So I will run it off the SDK like everybody else We saw that spindle somewhere here Fantastic Look, yes, I like the window flags for cute Yes, you can do it. I've unfortunately forgotten how to do it off-hand. Ah, sorry, okay Just do that in a minute and this one freezes No, I think So it was a property is a QML property. We're talking about changing it from C++ so Uh-huh, and they must inherit from window. Do you know what the value is by any chance? See if that does it'll switch back to desktop. Oh That's not full screen. Oh, so it's full screen But we wanted not maximize. We want it without borders So the whole list of different some window states pops up here And you'll just say it's just a matter of picking the appropriate one The other misleading thing is on my system. I don't allow windows to go full screen So it's probably not gonna be the best demonstration for that Yeah, so you can change the window state to different sizes and it should work on a normal person's machine I don't know. Well, I'm glad you've all come today To be honest with you. I planned a rather more technical talk and All of zero people would have come along to that So I'm glad you're all bearing with me while I'm doing things a bit off the cuff So please if you've got something that you've realized that there's something you like to work with I know we're still scattered about the ecosystem I might just um, if you want feel free go nuts start throwing components together and try and make something It looks kind of decent and I just go around the room one by one and help you deploy onto your phones Does everyone think if I cover enough is it make enough sense for us to do that or it's still really not enough information to go that far All right, so we'll go back into the basics again All right, let's let's all do an app together. It'll be fun. What do you want to do a game? mortgage payment processor a chart Usually but I honestly that's not something I do so I wouldn't remember it off off hands Flappy bird we can do that No, you know, I've been writing out for the past five months. It does not work. Anyway, um, sorry, let's um Sorry about that. I said I did that 15 minutes someone said why didn't I make any apps for Easter? If you don't mind coming out here, it doesn't order, right? I've never even tried on a tablet So that's the app I was showing earlier It kind of works in the tablet but because I just decided to fit as many images as I could by pixel size into a screen It's still huge if you run it on a phone, which is the only thing I tested it on You only get about three by five and it's great for five year olds Fantastic they've played for hours and I think they're so smart But um, no flop floppy bird. I have to admit I've never actually played floppy birds I don't quite know what it is. It's something about a bird not hitting rectangles or something like that Hoppy tux. All right, so What we need what we need is a tux. All right, let's make a new file to be our tux Because I like keeping everything nice and organized. We'll seriously deployment issues We'll do it the end for everybody wants to stay into lunch Maybe we'll just make something cool and we'll work. There's no point knowing how to deploy it if it's no fun so tux.qml Let's um See if you can run that on an Android phone and see if it's any different again All right, so let's make tux an image as his base class Let's steal a picture of tux from Wikipedia Just a moment Unless is there a standard tux image on everyone's file system in the same location, but we're not No, and the conference Wi-Fi has kicked me off again for downloading too many SDKs and pictures of mops So if can someone point just to it. Sorry. Is there only got a URL for a tux image before I make us all use a mop That'd be great. That's saying I've I've been kicked off the conference Wi-Fi for Okay. Yeah. Ah fantastic the ethernet Excellent. I was paying attention during my AV orientation. I forgot these things still existed There we go, thank you university We're providing this Wi-Fi which we use which is extremely slow and can't load a wikipedia page You might do that and look for tux Oh, there we go. Sorry. We'll can change it to tux later. Maybe it can be an upgrade Okay, copy image location the smart thing to do is to download this file into a local directory Which is what you're gonna do it eventually anyway if you're gonna make a game out of this The lazy thing to do is just load the URL. Guess what we're gonna do right now But sorry Just a cycle through my useless activities. Here we go. He's gonna be some go away Sorry presenter can't even control his own computer. I Seriously do not know what's happening. Oh I've got a phone on my keyboard Funny that I haven't they must have banked up a lot of key presses there Anyway, so without waiting for me to do it because it's gonna take five million years find source code or find a your URL for a tux image and Pop it in there as a source All right, bear with me for a moment. Let's kick X from the guts. It always fixes everything So what we're gonna need thinking about this if you want to have a game with a little tux that goes up and down We need an image class for our tux how we're going to control them arrow keys or with the mouse and gestures So touch screen. I'll tap up tap down Or did you tap on I don't have him play puppy bird you actually touch the bird itself. Oh You tap anywhere. Okay So what we have to do I want to do we want a mouse area with anchors to fill the entire root window So I put that in your your code now It's mouse area open curly bracket anchors dot fill colon parents close curly bracket and We'll have an event that if you press on it on on pressed events if you press on it It'll increase the heart of our tux So we'll have a tux put it into a separate file in case we want to do a lot of logic for it as well into the file itself Don't put an ID for the tux in the for opening as well and make tux a child of whatever's going to have hold our mouse area Our background can be either a rectangle with a nice color or you can find a nice picture of clouds Or something like that and be an image just set the source Full screen make sure you give it a Z value. That's low or you make it's higher up in their hierarchy than other children So it doesn't cover everything else I would put the image in a separate file as well in case we end up doing a lot of logic there We want to add extra tuxes or something silly like that for multiplayer You need multiplayer tux, right? The smart thing to do would be to check if you've got a tablet or something with a big enough screen All right, so we have 10 minutes to murder through and make ourselves a game. Let's see what we can make You should be ahead of me because I'm starting from scratch because I lost everything because I didn't save it So whenever you are all for tux image Ricky so the moral that story never leave an Android device on your on your keyboard because they're extremely heavy All right, so All right, so where should our tux start is he started about the middle of the screen? So we'll We'll keep it easy. We'll use X and Y coordinates. So we'll make this X zero Y And Over two and we can just set that later and change it now. What do we want a mouse area? So even actually implemented this already Where are we at? I've never played floppy tux whatever this is going to be called. So what happens when you press? All right, there's several ways to do this we're going to do it the way that tick is stopping you We're going to use a timer element Which guess what that does? Um How fast does he fall roughly? Too fast. Okay. So in 20 milliseconds, he hits the bottom All right, we'll just put some numbers in and we'll see what it does. We'll go the engineering way Oh Okay, you can follow pixel at a time as you can see I plan everything really well in advance So Let's make it easy. All right, let's see if this works No, I think it's a bit too fast. Tux is too big. Oh Right, I want tux to go closer to the top of the screen. Don't I? Something tells me that's not quite smooth enough and he's not actually falling so Interval all right Let's find a happy not so much medium Milliseconds That's going to be really small see the smart thing to do rather than making these pixel values Like the way I felt anything before you make it base if some percentage of the width of the heart of the screen the width of the screen That can be an exercise for all of you later. I don't print No So let's um, let's make tux a lot smaller shall we? No, what am I doing is why is You know what that would be great, um, we can't stay I think is there a boff in this room during lunch All right, anyone who's interested we can have an unofficial boff somewhere else because we've only got four minutes left all right so Yeah, it'd be great actually. Oh, we get that logo. That'll be fantastic All right, we've got about three minutes. You can see the error in my code because I'm going too fast. I'm not thinking I'm not is that The university system what's smaller than far this 50 The problem is this is falling too fast. Let's uh-huh. I think that fraction of a second will make it one second shall we? I can do mathematics. No, what how does that make sense? If it's meant to be falling So the bottom the the top zero zero is the top left-hand corner So the height is the bottom You know what we can um make this easier for ourselves Oh backs it yet. All right, so I want the white Yet indeed actually So all right. Oh, that's a reserved property. Okay. Can I do that? All right, I've got 30 seconds Do we have a falling tux or not? No All right, so Great, I do keep flipping this wrong way around. Don't I greater? No Greater than the height He's starting at the top He's starting at zero every time the timer kicks off. He goes lower um Why isn't this working? The height is zero. So why is zero bigger than main page of height? Got about five seconds left Shouldn't be zero better not be zero It's failing at the start Main page is apparently negative 22 pixels high. There we go All right, so let's um That's where we're intelligent people unlike me have a button quick components Controls rather as they're called now Ask go for it You can as as of cute 5.4 If you download the proper xcode libraries to work with it Cute installs it detects everything On that case, unfortunately, you can't use open source cute, which is why I don't know too much about it So the question was whether you need a cute commercial license I'm not sure about the apple upstores policies. I believe you will In which case it's possible, but you have to buy the commercial license. I believe is the same I believe it's the same situation for windows rt but um There we go the world's slowest fooling tux. It goes off the screen when you click on him So actually we'll take that outside Now let's take it outside now. Everyone is interested. We'll meet up outside. Thank you all for your interest Um, where shall we go? Very quick. We have to get to this room Well, we'll wrap it up first. Yeah, we'll wrap it up. Meet outside the door So everyone, please give a big thank you to Of lca. Please take this gift speaker's gift for you. Oh, thank you kindly. That's all right. Thanks all. Let's go outside