QML Focus



  • 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?



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



  • 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)



  • 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.


  • 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.



  • 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.



  • 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.



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

    can anyone give explanation with good detailed examples.?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.