QML Focus

ephe

I have created a couple of rectangles:

@
Rectangle {
width: 600
height: 600

Component.onCompleted:
{
    rect4.forceActiveFocus()
}
Rectangle
{
    width: 500
    height: 500
    focus: true
    color: focus ? "green" : "darkgrey"

    Rectangle
    {
        width: 400
        height: 400
        focus: true
        color: focus ? "blue" : "grey"

        Rectangle
        {
            width: 300
            height: 300
            focus: true
            color: focus ? "yellow" : "lightgrey"

            Rectangle
            {
                id: rect4
                width: 200
                height: 200
                focus: true

                color: focus ? "red" : "grey"

            }
        }
    }
}

}
@

I want to set the focus of all the rectangles in the hierarchy. So if I set the focus to "rect4" (it doesn't matter if I just set it with focus: true or if I set it with forceActiveFocus()), I want all the parents to get focus as well. Is this somehow possible?

Or can only one item have the focus? I always thought that between siblings, only one can have the focus. But I thought that the parent also has the focus if the child has got the focus?

ludde

I believe you want to have a look at the "FocusScope":http://developer.qt.nokia.com/doc/qt-4.8/qml-focusscope.html element.

ephe

I have tried putting a FocusScope element around the inner rectangles, but it still does not make any difference.

@
FocusScope
{
focus:true
// focus:false
Rectangle
{
width: 500
height: 500
focus: true
color: focus ? "green" : "darkgrey"

        Rectangle
        {
            width: 400
            height: 400
            focus: true
            color: focus ? "blue" : "grey"

            Rectangle
            {
                width: 300
                height: 300
                focus: true
               color: focus ? "yellow" : "lightgrey"

                Rectangle
                {
                    id: rect4
                    width: 200
                    height: 200
                    focus: true
                    color: focus ? "red" : "grey"

                }
            }
        }
    }
}

@

I could solve my problem without the parents having the focus, but still it would have been nice if I would have known if it is possible to set the focus of all of them true (and that the focus stays true)

ludde

Focus in QML is a bit difficult to understand. I don't think I have understood it fully myself...
What I think I have understood is this:

You have to distinguish between focus and activeFocus. Many Items can have focus. Only one Item can have activeFocus.
Inside a FocusScope only one Item can have focus. When the FocusScope receives activeFocus, that is the Item that will receive activeFocus.

ephe

I agree with you.

I also thought that.
But in my test panel, only the red rectangle is shown red.
All the other rectangles are grey. Therefore I thought that only the child has the focus and not the parent. I'm checking the focus and not the activeFocus for the colour.
And it doesn't make any difference if I use FocusScope or not.

Maybe I'm still not understanding it.

ludde

I think the reason only the red rectangle has focus is that the top element is always embedded in some form of implicit focus scope (see the documentation of the "focus":http://doc.qt.nokia.com/4.7-snapshot/qml-item.html#focus-prop property).

But have you seen what happens when you force focus to one of the other rectangles? Weird... I really have no explanation for that.

ephe

If you force the focus then this rectangle really gets the focus.

@
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
width: 600
height: 600

Component.onCompleted:
{
    //        rect4.forceActiveFocus()
}

FocusScope
{
    id: fs1
    focus: true
    //        focus:false
    Rectangle
    {
        width: 500
        height: 500
        color: fs1.focus ? "green" : "darkgrey"

        FocusScope
        {
            id: fs2
            focus: true
            Rectangle
            {
                width: 400
                height: 400
                color: fs2.focus ? "blue" : "grey"
                FocusScope
                {
                    id: fs3
                    focus: true

                    Rectangle
                    {
                        width: 300
                        height: 300
                        color: fs3.focus ? "yellow" : "lightgrey"
                        FocusScope
                        {
                            id: fs4
                            focus: true

                            Rectangle
                            {
                                id: rect4
                                width: 200
                                height: 200
                                color: fs4.focus ? "red" : "grey"

                            }
                            Rectangle
                            {
                                width: 100
                                height: 100
                                color: fs4.focus ? "orange" : "grey"

                            }
                        }
                    }
                }
            }
        }
    }
}

}
@

Like this all rectangles can be coloured.

aekam

I am still not clear about 'focus' and 'activeFocus'... :(

can anyone give explanation with good detailed examples.?