== App Developer Week -- Qt Quick: Rapid Prototyping -- jryannel -- Thu, Apr 14th, 2011 == {{{#!irc [18:02] Logs for this session will be available at http://irclogs.ubuntu.com/2011/04/14/%23ubuntu-classroom.html following the conclusion of the session. [18:10] Before I continue on rapid prototyping... some remarks to animations [18:10] There are several ways to use animtions: [18:10] * Animation on [18:11] * Animation { } // standalone [18:11] * Animation during a state transition [18:12] * Behavior on // when property changes than always with the specified animation [18:12] You can nest animations with ParallelAnimation and Sequential Animation. [18:13] There is also a PauseAnimation, which waits some time before continue with the next animation in a group [18:13] IMPORTANT!!: If an element is anchored for example on the left and right, x can't be animated!! [18:14] anchoring is stronger!! [18:14] if an element is anchored on left and right, sure y can be animated and also the height. but not the width and x [18:16] All of this is available as a 5 1/2 hour talk here: http://qt.nokia.com/developer/learning/online/training/training-day-at-developer-days-2010 [18:16] Just make yourself a nice video evening instead of watching lord of the rings [18:16] Coming to "Qt Quick Prototyping" [18:17] Please have a look at: http://qt.nokia.com/developer/learning/online/talks/developerdays2010/tech-talks/qt-quick-rapid-user-interface-prototyping [18:18] Sorry I planned to have a screen sharing available. I hope at least some of you can watch the video [18:18] Anyway I will explain about the thoughts behind... [18:19] Qt Quick was designed to bridge the gap between "designers" and "developers" [18:20] In a normal design driven project you have [18:20] designers, which think about the user interaction, graphics and nowadays animation (e.g. motions) [18:21] Then they use tools like Flash or paper or PhotoShop to sketch the ui. [18:21] Present beautiful design to their bosses and then ... [18:21] They throw these design to the c++ developer and ask them to implement this. [18:22] Sure the result will be miles away from the the sketch. It's a different technology maybe even different HW on embedded [18:23] Qt Quick allows designers early on to work with the same technologies as all the other developers [18:23] Sure these kind of designers should now how to work e.g. with HTML/JavaScript of Flash/ActionScript. For them it's pretty easy to come to Qt Quick [18:24] The result is that at any time developers and designers work on the same code base and it's easy to sketch a first ui prototype ... [18:25] and then the prototype goes over nicely into production code [18:26] By this you can shorten the time to market but also ensure the that the UI is really that what someone asked for. Pixelperfect [18:27] Qt Quick is fast to code. So that you can create many different prototypes easily and then just ask you users, which one they like best [18:27] Another aspect id that the ui code is cleanly seprated from the c++ code. [18:28] This allows you to unit test your models and business logic and heavy lifting... [18:28] and push a simple and clean qml API towards the ui developers [18:29] Qt Creator contains a design mode, which allows you to drag-n-drop ui elements (and your custom components) on a surface to sketch your ui [18:30] When you are in a qml file hit the button on the left "Design" [18:30] in Qt Creator [18:31] Here you can create a first sketch. But finally you want to switch to your code (editor) to make the more complicated stuff [18:31] So an interaction designer creates "wireframes" e.g. like on http://balsamiq.com/ [18:32] A graphics designer makes nice graphics to the wireframe, e.g. with photoshop, gimp, inkscape, ... [18:33] A motion designer thinks about how ui elements should be animated. [18:33] This is currently how I see designers. I'm not a designer I'm a programmer and I always wondered how they work === tubadaz is now known as tubadaz_away [18:35] We have material for designers ready at: http://qt.nokia.com/developer/learning/online/training/materials/qt-quick-for-designers [18:35] Especially module 6 talks about the different designer roles. [18:36] If you target a UI different from a standard desktop UI you want to have a design affine person in your team. [18:36] Especially with Qt Quick. This makes it really efficient. [18:37] If you target a standard desktop UI you want to create a set of standard UI elements or use/extend the elements produce by the Qt Components project [18:37] See https://qt.gitorious.org/qt-components [18:39] I posted this link already yesterday: http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/ [18:39] When I prototype a UI I always start with rectangles [18:40] I normally use black background and white borders. [18:40] Just make sure you get the dimensions right. Maybe add some text to label an element [18:40] Then concentrate on the application logic [18:41] E.g. when I press here what should be happen? [18:41] At then end you look into the animations. [18:41] When something changes, then how. Should it fade (animation on opacity), should it fly in (animation on x) === tubadaz_away is now known as tubadaz [18:42] Should it fly and fade (parallel animation on opacity and x) [18:43] You should extract components early on (e.g. mybutton, mytextedit, mycheckbox, etc... [18:43] Then you concentrate on the more details and bring in the graphics, colors, gradients, etc... [18:44] Make sure you get the structure right. give application wide used elements a good id. [18:45] Mark internal properties with '_ [18:46] Try to avoid to be to dependent on your c++ backend, I use a bool _debug property to guard sometimes those dependencies [18:46] Try not to create a reusable component which can be reused in all projects in the future. [18:47] Designers think more in reuse by copy. Just make the element work for your needs. Qt Quick can be fast adapted anyway [18:47] I guess that's it is for now. Any questions? [18:49] Take care and hope you enjoined this lengthy talk :) [18:49] Ohh, one link at the end [18:50] https://gitorious.org/qtmediahub, a XMBC (MediaCenter) clone in qt [18:50] And https://gitorious.org/qmlshowcase. [18:51] qmlshowcase was produced for a customer in one afternoon! Check it out }}}