Creating slick app interfaces using Qt Quick

Hello all,

I've got some experience coding Qt & QML but not a huge amount (C# is my thing). I'm trying to implement an app interface similar to that of Nokia Situations (i.e. tap 'At home', the screen fades and slides to the left, revealing new buttons), how would I do this?

Do I create a large canvas as a base state, then shift it to the left and change the opacity of the controls using QML transitions?

Any tips and/or advice appreciated!

Infms

[video=youtube;solfTOEl_Hg]http://www.youtube.com/watch?v=solfTOEl_Hg[/video]

fading can be display by opacity and sliding can be done using animation. Check qml example, you will get lots of sample.

Thanks for the reply, kkrish. I thought this is how it might be done. So it's possible to have a canvas larger than the screen resolution. This canvas is then shifted around using animations, revealing new controls? I'll definitely take a look at the QML examples.

The above application is written with [URL="http://doc.qt.nokia.com/qtquick-components-symbian-1.1/index.html"]Qt Quick components for Symbian[/URL]. This means that you can use them only if you are targeting Symbian platform (or Meego). If you are targeting at other platform then yes you need to create them yourself or use [URL="https://projects.developer.nokia.com/colibri"]Qt Quick Colibri project[/URL].

Now a few things for the above video.
All the transitions that you see (fade out, slide, etc.) are caused from that components, you don't have to write them yourself.
The slide of the view to the left when a list item is selected is caused from the [URL="http://doc.qt.nokia.com/qt-components-symbian/qml-pagestack.html"]PageStack component[/URL]. You have different [URL="http://doc.qt.nokia.com/qt-components-symbian/qml-page.html"]Pages[/URL] that containing your different views. Upon pushing to the PageStack a new Page, the new Pages is at the top of the stack so automatically the views will slide to the left hiding the old and revealing the new. Note here that you don't have to have all the Pages that you can possibly show preloaded upon startup. A Page can be created just before its showing and will be deleted when the PageStack is poped [I](this is a comment on your saying " So it's possible to have a canvas larger than the screen resolution").[/I]

The revealing of the new buttons is a simple concept: you have a [URL="http://doc.qt.nokia.com/4.7-snapshot/qml-rectangle.html"]Rectangle[/URL] containing a toggle [URL="http://doc.qt.nokia.com/qt-components-symbian/qml-button.html"]Button[/URL] at the top and below what you want to show. Then when you bind the size of the Rectangle with the state of the Button. When the Button is not pressed, the size of the Rectangle equals to the size of the Button. When the Button is pressed the size of the Rectangle is the height of the Button plus the height of the components that you want to show. Also at the height property you will add a [URL="http://doc.qt.nokia.com/4.7-snapshot/qml-behavior.html"]Behavior[/URL] so that when it changes it will be animated. Now you have a sliding component showing and hiding things you want.

Well i can keep talking and talking. Take a look at those, if you have any question we will be happy to help.

Hi favoritas,

A belated thank-you for your detailed reply, it makes perfect sense. Qt Quick components for Symbian does a great job at making controls and transitions look pleasing – just what I was looking for.

Cheers