so good morning everyone and welcome to programming with cute quick this is going to be a lot of material for the next eight hours or so your brains are going to be very full this is actually a condensed version of what usually amounts to about a three day class so what we’re going to be doing is there’s going to be a lot of lecture generally in this class there would be time for labs and you’d actually do hands-on programming for today we are going to be going over the solutions to lab and explaining them and getting in through as much material as we can as we were going through material feel free to raise your hand if you have any questions we do have a room Proctor they will bring a microphone around so you can ask your question into the microphone and we can get it on the recording so before we start I’d like to just ask a few questions of the audience how many people here are C++ cute programmers have done widget based programs before pretty much everybody how many people here write desktop applications okay how many people write applications that run on embedded systems fair amount and how many people here are targeting mobile phones okay how many people here have used cute quick or qml before and how many people here have C++ code they would like to use with cute quick that they may have previously used all right sounds like a sounds like this is the right place for you basically what we’re going to be talking about today is the very basics of cute quick and qml what it means to make items and components and how to lay them out we’re going to talk about how allowing the user to interact with your application via touch a nor clicking or using a keyboard or keypad we will also talk about states and transitions the concept of animations and state machines are actually built into the qml language it’s going to help you if you have an embedded device whose user interface roughly maps to a state machine and you want fancy animations to happen when you transfer from state the state this is actually stuff that’s built into the language so previously in C++ you would have had to write a lot of code using cue state machine and cue property animations this is becoming a lot easier we’re going to talk about using data models in your code whether it’s data models that you make directly in QML or data models that you make in C++ and export them into QML those who just be abstract item models for those that are familiar with that we’re going to talk about taking your cue ml code and making modules out of it modules in qml are analogous to libraries in C++ so you can take your components make them generic making them distributable so that you can make maybe a generic set of user interface components that you can use maybe across your company across projects and finally we’re going to talk about integrating qml with c++ how to use C++ objects in QML and how to allow QML items to actually have C++ backends where the user of your qml module might not even know that this module has C++ in it or whether it’s written in say JavaScript and we’ll talk about the different approaches because there’s actually three or four different ways to get your C++ in your qml talking together so let’s jump into the super basics basically what we’re going to talk about is what qml actually is qml is a new user interface language it’s actually a declarative language which means that writing qml is more like writing web pages than it is like writing C++ there’s going to be a defined layout to your code and it’s very basic in fact it’s meant or non C++ programmers to use such as you know technical people on your art staff so we’re going to talk about elements and identities you’re going to be making these elements and you’re basically going to give them name so you could reference them later and we’re going to talk about how to use some of the layouts so that you could position your items by a dead reckoning or say I want this item just smacked up against this item and they will forever

follow each other around so some people ask all the time so what’s the difference between cute quick and qml well the answer is that qml is just the programming language cute quick is actually a collection of things it includes the language which is qml it includes the runtime a C++ runtime to run your qml in it includes the acute creator IDE support for qml a graphical design tool and the debugging utilities so it’s kind of a marketing umbrella for everything having to do with qml not just a language but all the tools and runtimes that go along with it so part of the idea is that it is very touch oriented system and very design oriented system the idea is that your user interface designers can take the lead when it comes to defining how the application looks those people in your design staff or your art staff who are familiar with things like HTML and CSS and JavaScript should be familiar enough to actually use and work with the qml language you can actually use tools from Nokia such as a Photoshop export tool where a Photoshop prototype could be generated into actual qml code that the designer can then give to you the idea is is to hand the pixels over to the designer and let the programmers worry about the code so it’s entirely designed around being design oriented and very very quick to write things in so that you can take your prototype and we use it you can make changes very quickly to the user interface and has very easy to deployment you can basically bundle all your qml files into a single binary and distribute it so when it comes to user intuitive user interfaces since the introduction of things like the iPhone and these fancy effects that make the devices seem more real you can actually touch the screen and move switches and has you swipe you see the switches actually move you can actually slide dials up and down these are what people have come to expect especially in the embedded device market that the animations are fluid that the animations make the device seem more real and the they map to real-world objects and this is the philosophy that cute quick was designed under so that it is designed so that it’s very easy to do these animations these states and these transitions it’s built directly into the language so for those from the desktop world you’ll probably find that for right now qml is of limited benefit on the desktop it’s really meant to create very custom looking user interfaces that are generally use on one device there are these things called cute components which we’re not going to cover here today and cue components are actually widget sets for different devices so there’s a cute components version for Symbian cute components for me go cue components for me go home Hatton which is the n9 and there is under development cute components for desktop so if you’re looking to write a standard desktop application that looks like Mac on the Mac look like Windows on the windows and looks like you know KDE or gnome on Linux that is coming right now the goal has been for devices whether it’s betted or mobile phones so for rapid prototyping everything in qml is either the declarative qml language that can include embedded JavaScript so we’ll find out when we put these files together there is the declarative portion and the JavaScript portion and we’ll find out what the difference is as we go through the slides what it looks like is it looks a lot like cascading stylesheets and doesn’t require a lot of programming knowledge to work with another interesting feature of qml is that it’s also network transparent you can actually everything is based on URLs so whether you’re loading images the display on the screen or you are simply using qml files and loading components those can actually come from the web or over the network and your load your

images will be loaded a synchronously so just a little more before we dive into actual code so qml is basically a user interface description language is the best way that I could describe it basically it is made up of a number of elements in a tree and those elements have properties that you can manipulate for example this rough diagram here is a simple set of items in qml we have a rectangle that is the black outer portion we have an image that’s the rocket ship and we have some text which is the cute quick part and these actually have just like cute widgets have a parent-child hierarchy and you can position them either via layouts via anchors or just simple XY dead reckoning and you’ll see that the text has properties for its fonts a point size or pixel size in its color and image has things like X Y in its source it sources the image it’s going to load so this is pretty much hello world in qml it’s the simplest qml application you can write it basically displays a light blue rectangle on the screen you’ll notice that there is an import statement at the very top of the file this is like an include statement this says that I want to include all the items from cute quick 1.0 this is going to help you keep compatibility has cute quick evolves over the years so there right now there’s a cute quick 1.1 however if you say import cute quick 1.0 you’re guaranteed to get all the features and all the behaviors of 1.0 and not the behavior changes that may have been introduced in 1.1 we make ourselves a rectangle object and set a number of properties you’ll notice that the properties are set with colons and this is the binding operator in queue ml and this is actually a very powerful tool that we’re going to find out later is going to actually bind these values together these are all static values so binding isn’t as important in this case you can sort of think of them as assignments but we basically want a small rectangle displayed on the screen and that’s it and this really starts off has 400 400 but the top level item will grow when you resize the screen so another interesting feature is that you don’t actually need to compile this code you can run it with the qml viewer runtime this is built into creator so you could actually edit a qml file hit ctrl R and it will run it through qml viewer or from the command line you can run qml of your rectangle uh qml in fact you could write entire applications that run entirely inside of qml viewer it’s a very powerful tool ql viewers even smart enough to load things like those qml libraries that will talk about making at the end of the session can also include QML imports that have c++ built into them so the import statement is a guarantee of the functionality that you’re going to be getting the comment structure is c and c++ style so slash slash and star slash star are the ways to define comments and rect and items are basically instantiated and you wrap them in curly braces to define the scope of the property changes so it’s in these in this scope is where you’re going to be making child items as well as setting properties introducing and writing functions so the actual amount of items in the qml toolkit is very small we’re going to find out that there’s really only rectangles images text text inputs and in mouse areas and gesture areas and using these very primitive components you can actually make things like buttons and checkboxes very quickly you could also choose to use prepackaged

things like those cute components so what are elements things like rectangles text text input are all visual items and visual items all inherit from a base type of element called item item is the is you can think of as the base class to provides things like X Y width and height and the ability to take up space on the screen there’s also the base for layouts and anchors there were also some non visual elements that we’re going to be using such as States transitions models gradients timers these types of things that you will have in your file as items but they won’t be displayed on the screen they actually don’t inherit from item they would inherit from a thing called cute objects so you can make your own items and you can inherit from items and you can extend them with properties and functions and so on in fact even in this simple example with the rectangle we’re actually making a specialization of a rectangle right here because we’re making an instance and changing its properties if we put this into its own file we’ll find out that we have just made our own item so some properties most of them are very simple you’re going to have a type and a name so things like width height X Y in color generally these are going to have default values and they’re all documented inside of the documentation whether it’s in the web assistance or directly inside cue creator there is a special property called the ID property and if you use the ID property that is how you can then reference that item elsewhere in the qml file and basically use that item as a variable you can use this to change the behavior or the look of the item has the user interacts with the user interface so for example here we have some basic properties so we make a text element and we said it’s text property to a static strain and we set some height likewise we have a text item and we set its font family and its font pixel size when you see the this property grouping where it says font there’s an extra dot and basically a sub element these are called grouped properties and things like elements and anchors are grouped properties and this is a it makes it easier to read and to write the code we also have the last one which is an identifier called label which we default the text here it’s a hello world but since now this label has an identifier we can actually somewhere else in the qml application called label dot text equals something else and change its text dynamically so you can think of these IDs as variable names yes so the scope of the ID is actually pretty broad so the scope is going to be within your within the file that you’re in and anything any of your child items that you make below you will also have access to that identifier and it uses the JavaScript lookup rules we’re just going to first look for the identifier locally then it’s going to go up in the in the qml namespace and finally get to global namespace so once you’re setting identifier this is the label is valid for the file that you’re in and it is also valid if you made children of the text item maybe you made a rectangle or something underneath it you could use the ID inside of there as well so the scoping is very broad so there are also things called attached properties that look a lot like it groups properties and these only appear under certain conditions such as in the text input we have a key navigation property this defines what happens to focus when tab back tab left right up and down oppressed and that’s going to vary wildly per application and per keypad how do you move from one element to the other the key navigation element is going to help you do that and there’s an entire section on that it is actually turns out to be a lot easier to write and maintain than it is to do

tab order and in C++ you can also make your own custom properties on any item whether it is an instance of an item or it’s an item that you put in your own file which becomes in Stansel so here we’re making a rectangle and we’re adding a property called mass whose type is real the real type in qml is analogous to float it actually is going to depend on what platform you are you’re on but it’s going to be whatever is most expedient for your platform so in the ARM architecture it’s generally going to be float on x86 it’ll be double only because they’re faster so we talked about this concept of binding which is actually going to be really really useful it’s gonna save us a lot of code in fact you’ll notice here on this slide that we’re making a parent-child hierarchy so we have an item and underneath that we have a rectangle we set a static width and height on a topple of an item but our rectangles width is special our rectangles width is defined has our height times 2 and what this means is that this is a binding not an assignment so qml is smart enough to know that when you use a variable in a binding a property whether it’s your properties somebody else’s property that anytime any of the properties change within an expression it is going to rerun all expressions that include that variable so anytime height changes it is going to recalculate the width of this object and this is all done because of cute properties that include read write and notify signals so built into the language is the concept of QT signals so every property gets an automatic signal on X Y on X change on Y changed on height change and the bindings are smart enough to automatically subscribe to the signal and rerun the code anytime the variables change in that expression so you’ll you’ll see that that is the sort of power of that : operator it’s not the assignment operator it’s much more powerful so IDs are also useful because then you can have access to your elements so that you can change them dynamically and you can also use these IDs to layout your dialogues and your screens to say that I want one item to be positioned relative to another item and you’re gonna use these quite a bit so general rule of thumb is almost every item that you have that’s not just a simple container is probably gonna have an ID so for example here we’re making an item and underneath that a text and a rectangle the text element it has an ID of text element and we’ll notice that the rectangle width is being set to the text elements with this is just another example of binding but instead of using one of our own properties we’re actually using that property of text elements once again anytime the width of text element changes the width of this rectangle is going to change so methods in qml are JavaScript functions and there are a number of qml elements that come out of the box with functions such as the text input has a select all the timer has start and stop and restart and particles has burst particles is actually a you can think of it like a firework type of type of item that you can configure it to do sort of burst patterns very helpful for doing things like games there is also the concept of the Qt global objects this is actually you can think of this like a namespace and you can use it to do things like format daytime’s do md5 sums and do color manipulations so when you’re getting started with cute quick I would look up the cute global object and read all the functions that it has because it has a lot of useful things in it that you might not know where to look for them so there are some basic types in qml

such as the numbers are int and real basically in integer objects and a floating-point object there’s boolean there’s strains and there are certain constants such as align left’ and even some objects like the text elements and the font elements are going to have these constants set so when you want to set alignments you can do them in a sane way it’s just not strings there is the concept of Lists which is very much like JavaScript all you do is instantiate a property or variable with the brackets and you can make a list of objects and you can include scripts in your application so entire driver script files that have their own scoping and namespace and there are also types for like colors dates times points rectangles and actually one that’s used in qml 3d which is a 3d vector element so that is the basic basic basics of qml there’s some very small amount of items that you can build up into more complex things there’s the concept of binding and identifiers properties are bounds and not assigned in the qml declarative section and you can define functions there’s a number of predefined functions and there are a small array of built-in items and types one thing that’s interesting to note about the what I call the qml section of this well UML file is that all of these items the creation and the storage and signals and slots for these particular items is read at run time an item text and rectangle actually becomes C++ objects that are May instanced they are managed animated and drawn in C++ so when you look at this file and you look at cute quick in general people see oh it’s a lot of JavaScript this is being processed all the time we’re in the declarative section the qml runtime is going to load all of this basically into C++ it is the JavaScript snippets that I call them that are actually run and interpreted over and over again and things that you might not think are Jarvis JavaScript really are such as that assignment of that width to width is he is bound to height times two that’s actually snippet of JavaScript and it’s going to be run by the JavaScript interpreter every time with changes we’re gonna find later that it’s going to be pretty easy to identify when you’re writing this code what’s qml and what’s javascript mostly because anything you want to do that’s complicated in JavaScript is going to require you to put brackets if there was more than one line you would need curly braces around text element with does anybody have any questions so far now it’s been pretty basic up to here yep one more oh yeah it’s it’s um it’s both it’s the entirety of this file gets that identifier as well as children know they’re in any given qml file there can only be one top-level item in the file and that is usually a generic item or it’s going to be something called a focus scope which if you want to do keypad navigation I say the general rule of thumb is everything starts with focus scope which is a focus proxy object we’ll talk about probably around lunchtime yep yeah so within the same file you cannot use the same identifier twice it’s

pretty much the rule but outside of the if you have two different qml files and say that you had the rectangle file and this particular file you could overlap identifiers in two different files but you can’t overlap identifiers within the same qml file they need to be unique and there’s actually a couple more rules on top of that so the names you need to be unique within a given file the names have to start with a letter and the only valid characters are letters numbers and underscore yes and in fact there’s it was a bit of an enforced naming convention when it comes to properties as well anytime you make yourself a property it has to start with a lowercase letter I’m not sure about IDs I never tried to make one with an uppercase lighter but I’m seeing shaking heads in the crowd so I’m gonna say no yes yes yep yes yeah after so yeah so what’s gonna happen here is we have this property real mass so there’s an automatic signal we can catch called on the mass changed or actually the signal is called mass change we’re going to find out that there’s also automatic slots we get such as on mass changed and inside of on mass change is called after the value actually changes so this this property basically get is a is a get a satin a signal and you can let bindings take care of it for you or you can subscribe to them yourself so now we’re going to talk about more interesting things such as how to nest the elements and lay them out and what types of elements are there and what are their features and we talked about a really powerful thing called anchor layouts which is something that’s not available in C++ widgets but is the standard layout tool for QML so just like widgets in C++ elements so often nested in a parent-child hierarchy there are some distinct the differences though between widgets and qml items the first and biggest one is that qml items do not clip their children they will provide a coordinate system but if you tell an item to live negative 100 and negative 100 is still on the screen and your parent is here the child will gladly display at negative 100 coordinates we’re gonna find that not clipping makes graphics and animations a lot easier and a lot faster if you need clipping on any particular item you can actually set a property called clip to true so you should write your code assuming there is no clipping try not to turn it on but when you have to such as when you’re dealing with lists and you you know flicks scroll things and have a fancy frame around it be judicious in your set clip true we’re going to talk about dealing with colors images and gradients and doing alignments and anchors so we can position items not on dead reckoning XY width and height but on relationships we want to stuff this object in the upper right hand corner of the screen and have it stay there regardless of how the screen changes so here’s an example of a set of nested elements once again we have the top-level rectangle and a rectangle in that and yet another rectangle and what this is really meant to show you is the propagation of coordinate systems is that the parents role here is to provide a coordinate system to its child this is much the way that cue widgets work so the coordinate system for the interior green rectangle starts at a zero zero position relative to the zero zero of

its parent likewise the white rectangle on the inside its coordinate system is defined by the green rectangle however if we set the white rectangle to display a coordinates you know negative 100 y 150 it will gladly display over the blue section you’ll also notice here that we are setting our colors by these strain names and these names actually come from the scalable vector graphic specification so if you’re looking for a giant list of these check out the world wide web consortiums documentation on SVG so there’s also other ways of specifying colors such as what I call HTML syntax will you say pounds and give it six digits for your standard 24-bit RGB and eight digits if you want RGBA you can also set these using the Qt global objects RGB a function and these are actually set in percentages of the amount of red green blue and alpha you want rather than going from 0 to 255 this naming convention goes from zero to one while this might not be the kind of thing that C++ programmers are used to this is the color conventions that artists are going to be more used to there was also a concept of opacity which also goes from zero to one so here’s an example here of having three rectangles using dead reckoning to set them into a row and we are setting colors by HTML syntax by the cute global objects rgba and by simply SVG name of blue so generally I suggest for your project you find the one that works best for you your designers your programmers and try to stick with one the entire way through the image item is probably the most powerful thing in qml especially when it comes to embedded UI’s generally everything can be reduced down to an image or set of images like you think of a button a button really has a unpressed image and a pressed image and you can make that button look however you want basically it’s up then to the designer just to give you the picks maps that make it look correct for whatever their vision happens to be now the image has a source property and the source property is actually a URL so you can give this a local file you could give this a file out of the queue resources using QR c colon slash or you could give it something off of the web and it will go fetch it using its own cue network access manager all of the pathing is relative to your qml file so any paths that you use in qml are not related to the present working directory of the application it is relative to the location of this qml file so if you go grab a qml component like straight off the web and have it dynamically loaded and its image paths were relative to its that means all of its images will also be fetched over the web images have some really nice conveniences built into them such as scaling and rotation and when you rotate an image it will rotate it about the center of the image unlike how you know painter transformations work where by default rotates but the upper left-hand corner so here for example is the rocket ship we are making a black rectangle for the outside and then we’re making an image that is relative to Dachau / images rockets dot PNG now if this qml file was embedded via cue resources then this dot dot slash images rocket PNG is going to be looked up in your acute resources because all the

file path is local to wherever this file came from another convenience of the image is that it gets an automatic width and height that defaults to the width and height of the actual image you can override that but it is automatic for you you can also define a scale factor for your images so you might load an image and you might scale it maybe by 2 X so it may be by 0.5 X and you can basically dynamically grow and shrink your images by default this will use a fast the scaling algorithm there is another property called smooth and if you set smooth to true it will use a smooth scaling algorithm so the source can be either a any of the files that cute supports so it could be a PNG file a jiff file or even a scalable vector graphic has this example this example is also rotating the image by 45 degrees and the transformation origin for images is preset so that all transformations happen about the center of the image yes on the the format supported that will will that depend on whether QT itself is built with those formats supported or does it wrap all that for you no it’s going to depend on how you your cute was built so if you don’t have the JPEG 2000 plug-in then no JPEG 2000 so they have to be can they be loaded as a plugin into QT or as long as the normal QT app can find it the QTE the the QT quick the cute quick will be able to find it exactly it’s gonna if you can use it cute quick can use it okay thank you you’ll actually find that you’ve been tracking the new features and cute over the last you know five years or so you’ll see that they’ve been slowly ramping up towards well qml with the state machines and the property framework so everything that is actually used a built cute quick is most of its actually available to you in C++ via the native API such as the cue state machine which drives a lot of this yes well it’s always a bad idea to scale if you can have your graphic artists ship you another image and you have enough memory for an extra image enough disk space for an extra image it’s always going to be better do an image also the same thing for gradients while there is a gradient object for most embedded devices it’s usually easier and faster to have your button gradients be an image rather than having the main processor calculate the gradient all the time there is a lot of optimizations that have gone into into qml with things such as the like pixmap caching so that on desktop platforms was 10 megabyte pixmap cache on embedded platforms it’s a 1 megabyte cache so it’s going to try to keep like as many pics maps that’s tolerable in memory you can actually tune that yourself you can also I don’t know if it’s covered by these notes but you can dynamically instantiate and deletes your qml screens similar to the way you do in C++ so you can manage this is a rare-earth screen for the user to pop up so I’m gonna just when the user wants it dynamically allocate it show it and when the user is done with it I’ll go ahead and delete it yeah so there is actually so for this yeah even for this example when you run this qml code it is going to load a rectangle into memory it’s going to load this image into memory and they’ll be in memory for the lifetime of that application no it’s not not that smart

yeah there is provided for you a thing called components that you can dynamically allocate things via the JavaScript interface using component dot create objects and there’s also a qml item called a loader and what a loader does is it says so if I wrap you know basically image in a loader then that loader is not actually going to create its element until I tell it to create its elements well that’s gonna depend on the size of the qml files so if you write you know thousands and thousands of qml files and expect to load them all at the same time you’re gonna be very unhappy much like you know in C++ if you made all your dialogues upfront you would be happy either so you get to decide which parts of your application are gonna be the most common for the user to use generally you want to keep them in memory all the time and which ones are at least common for the user to use and dynamically create and destroy those yeah I wouldn’t say it turns it in the C++ with constructors it’s actually making instances of you know click cue declarative item in C++ and store in them you know in various C++ data structures to manage them but when you say I want a rectangle then that memory is allocated and it’s stored for the lifetime of this application yes yeah okay so in the in the context of the loader of the loader item there is a there was a source we can give it a file name or there’s a source component where you could give it a something called a component we haven’t talked about yet and what you do is if you use the the source property on that then when you want to load you set its source to a file and when you want to destroy you said it’s finally in the quote quote you can set the source components and it will load the component and you set the source component to undefined and it will delete the component it had if you set the source on it twice it will delete the the old component and make you a new one in JavaScript you would use the components create object function then the objects you create from that have a destroy function that you will call and it’s basically the equivalent of the Qt delete later so it’ll make sure to clear the event loop before it goes ahead and actually deletes that memory yes so we’re gonna talk about that in Wow all right so jumping ahead to the end of the notes so qml is gonna force you into a very model view pattern when it comes to interacting with your c++ what this means is that it’s very easy to bind QML to objects from c++ and it’s easy to call back from c qml back to c++ it is intentionally difficult to access items that live in qml from the c++ side what this is going to do is going to force you into writing a UI agnostic back-end and exporting that back-end into the GUI side and then the GUI binds to the backend and what you’ll end up with is a lot cleaner code you can if you jump through a lot of Hoops get access to the pointers that represent the rectangle item and manipulate them but if you go that route you’re gonna well one running the problems when they go to a cute cute quick 2.0 and you know the interface is change of course and also you’re going to be very tempted like you are in C++ and widgets where you say oh I have a list on the screen maybe I’ll just use the list to store my data it has a bunch of items I’ll just store my data there and when you go to port your application or reuse your code you’ll find that there’s this there’s been this marrying of your UI to your back-end application code whereas to design cleanly you would have that list stored in C++ without regard to how it’s displayed on the screen and let your list bind to it yes

you’re employing then that the trolls have done a better job of isolating out the GUI attributes from the view because right now there are quite a few role that only exists in the view side of thing that really have nothing to do that yeah that your model has to return that are only for viewing and rendering well it turns out in qml the abstract item models work slightly differently in fact all the standard roles are ignored you’re going to implement your own roles to do as you decide generally the way I suggest designing things is that you have a C++ data model that doesn’t care about abstract item model at all you have an abstract item model class that say you know takes a pointer maybe a reference to your C++ model it’s simply a wrapper that is going to assign roles to lookups from your C++ data structure and ironically enough if you go down this route you’ll actually be easier to move your application away from qml or away from qt in general the irony of it all and this is all covered at the end of the day when we talk about integration of C++ and qml but it’s all good things keep in mind the X Y width and height is yeah it’s in your items coordinate system which is defined by your parents oh you’re all transformations are propagated which means that if you rotate the parents all the children are implicitly rotated okay try again yeah that’s that’s a situation I hadn’t considered I’ll look into that for you I’m not I’m not quite sure I can’t think about top of my head functions to map from your the child coordinate systems the parent coordinate systems but I can look into that yes yeah qmo yeah well Kim qml would be equivalent to the you know equivalent C++ so if you wrote an application in C++ that used a lot of images and used images to create its buttons they would be comparable in the memory footprint the performance of loading the application is slower because you need to read all the qml files and the the JavaScript sections need to be interpreted so if you do really bad things in JavaScript then your application is going to run slowly just like if you do really bad things in C++ however q Creator comes with a qml profiler that will profile your JavaScript and let you know where the slope sections are so we’ll help you tune your JavaScript much like you would use a C++ profiler the toon your C++ yes there is no way to pre-compile however the JavaScript back-end will use just-in-time compiling so you might get a benefit there for certain functions and with cute quick 2.0 the moving to the google chrome v8 engine which has really fast JavaScript performance yes yep that that’s very true so you there are ways where you could export a cube proxy widget by inheriting from queue

declarative item but proxy widgets are notoriously slow so in the qml world i would say avoid at all costs unless you have a really complex widget that you can’t pour it like a graphing tool to not use any of the QT widgets and while you might say for a desktop application obviously that’s a huge hindrance you don’t have the native looking and push buttons and radio buttons and tab stacks for embedded applications on devices and mobile phones is actually a lot of freedom involved in having being able to create your components that look exactly like what you want so for if you’re writing in a desktop application as I mentioned at the beginning in the talk right now qml is not the tool for you to write an application you want to run on Windows it looks like Windows yes yeah well this is so there is a there’s also a UI design tool called qml designer that’s built into creator it can help you the same drag-and-drop type of thing very useful if you have the cute components loaded like for Symbian a–from ego but there is no conversion utility or analogy between design or UI files and this this gets you your application well you get a few things one your application code for a dynamic user interface like things that are animating and it’s basically a state machine is gonna become very short and the bindings are going to allow you in one line of code to basically cover what would normally take 10 lines of C++ to set it and perpetually keep it in sync here we’re using bindings which is going to save us a lot of code and this is also a language in which like graphic designers are people on the design staff are going to be able to use and understand has a poster we’d want to keep them away from the C++ compiler yes yeah yeah so there is a there’s actually two competing unit testing frameworks for qml ones called Q test q ml and another one comes with creator and I’m not sure how easy is to separate out the one that’s used for creator but on projects that I’ve worked on we’ve basically the designers are only work on layout and graphics and for code that actually well runs like the JavaScript set of segments its programmers write those and every line of code is verified by a unit testing any other questions I mentioned that images default to rotating about their center and actually all objects have this concept of a transformation origin so that’s your say not so useful maybe with the rocket ship but for something like maybe we’re making a gauge with a needle and the needle is a separate image the gauge face is a separate image and to set the gauge to a particular value we just need to rotate that needle but we need the needle not to rotate about the center but to rotate about its end so all items have a transformation origin and you can set that either via X X Y coordinates or you can use things like top and bottom left and right