Tuesday, January 10, 2012

Introduction to Qt Quick and User Interaction In QML Video

Hi all,

I have found few interesting video tutorials about Qt Quick and QML. Today I will present you two of them. First video is titled "Introduction to Qt Quick (part 1/4)"
I consider it useful if you want to learn Qt Quick. Video is from Qt Developer days 2010. O.K. so it is not the new video, that is true, but if you are new to Qt Quick this will help you to understand how things work. If the documentation is boring to you this video tutorial is just for you. It has few examples so you can understand what Adam is talking about. I think it is great for beginners like myself.

Second video is titled "User Interaction In QML - User Input and States (part 2/4)"
In this video you will learn:
- to receive mouse and keyboard user inputs from Qt Quick
- signal handlers and property bindings (awareness of user's actions)
- basic understanding of states and transitions

UPDATE: I have found newer versions of this video from October 17th 2011. These two video files are replaced by 3 shorter and newer ones. You can find my newer post here:
http://mobiledevvt.blogspot.com/2012/01/programming-with-qt-quick-video.html



Obviously there ate two more videos from where these two came. I still haven't watched them so I will not mention them here. I have also created index of topics covered in videos with time marker. I hope this will make it easier for you to navigate through video after you watched it already.

So here is the first video:
Introduction to Qt Quick (part 1/4)




Topics covered in this video
and positions where the topics are in the video:

00:00:00 intro
00:05:45 What is Qt Quick, What is QML? And why?
00:17:25 Tree of Elements -> Elements and properties
00:18:20 First Qt Quick code - blue rectangle
00:19:54 First Qt Quick code explained, how to add comments in QML, Rectangle element and some of its properties
00:24:34 What are QML elements? Item, Rectangle, Text, TextInput...
00:26:50 What are Properties in QML? width, height, color, id...
00:27:29 Property example, standard properties, Grouped properties, Identity property, attached properties, custom properties
00:30:16 Binding properties
00:36:25 Identifying Elements. What is id property? Using Identities
00:39:33 Methods in Qt Quick
00:41:00 Basic Types (int, teal, Boolean values, strings, constants...)
00:45:50 Questions
00:50:55 Composing User Interfaces. Spacial relationship between elements in QML
00:52:15 Nested elements
00:53:30 Colors (opacity, strings, Qt.rgba()) and code example
00:55:05 Images (Image scaling, image rotation)
00:59:24 Gradients
01:06:45 Layout in Qt Quick. Anchors and examples
01:12:40 Margins and examples
Hints and Tips



Here is the second video:
User Interaction In QML - User Input and States (part 2/4)



Topics covered in this video
and positions where the topics are in the video:
00:00:00 Example how to arrange and align image and text
00:11:16 What is Mouse Area? Example with onPressed and onReleased signal handlers and acceptedButtons property
00:15:00 How to detect mouse hover? Mouse area .containsMouse property
00:18:16 Signals vs. Property Binding
00:19:23 Keyboard input (TextInput, TextEdit) and assign focus
00:22:56 Getting Focus and changing focus (KeyNavigation.tab and .backtab)
00:24:16 Key Navigation (KeyNavigation.right KeyNavigation.left)
00:25:50 Lab - Menu screen example of key navigation and focus
00:30:00 Raw keyboard input and example - rotate picture based on key presses
00:33:03 Focus Scopes
00:34:30 States: State element, states and state property. Example traffic light
00:41:20 State conditions using when property
00:46:56 Transitions
00:51:15 Using States and Transitios
00:56:00 Lab - Light switch
01:09:26 Animations (Number animation, Property animation,
01:14:37 Easing Curves
01:15:20 Sequential animation and parallel animations, PauseAnimation
01:18:18 Color Animation
01:19:00 Rotation Animation



I didn't made these videos. The video is presented by Till Adam and Stephen Kelly. It is done by KDAB and NOKIA.
I got the video from this web address:
http://qt.nokia.com/learning/online/training/training-day-at-developer-days-2010/qt-quick
Unfortunately there were no additional explanations so I decided to write the time table for the video. I just created the "Topics covered in video table". I think it will be useful to you if you wan to get back to a topic inside the video.

No comments:

Post a Comment