Results 1 to 4 of 4

Thread: How to manage Focus with States in my custom QML component?

  1. #1
    Join Date
    Sep 2016
    Posts
    3
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default How to manage Focus with States in my custom QML component?

    I´ve created a draggable custom Component in order to manage the geometry of individual Quick Controls Components.

    The componet has 2 parts:

    • The "Manipulator" which is a draggable and resizable Rectangle
    • The inner component which is in the center of the manipulator


    Description of the behavior:

    1. No focus: the default state, the Manipulator is invisible and you can only see the inner component
    2. Focused: When you click the component (or try to drag it) you enter this state and the Manipulator becomes visible but you can´t access the inner component. Disabled pressing Escape or clicking outside the component (goes to state 1)
    3. Inner Focus: when you double click on the component The Manipulator keeps visible and you can still still resize but the the inner component has the main focus (for example a TextEdit now could be editable). Disabled pessing Escape (goes to state 2) or clicking outside the component (goes to state 1)


    Example of the Component when the Manipulator area is visible:


    The logic of this component would be similar to the logic of a folder in a Desktop Enviroment (except for resizing) The manipulator would be the folder itself and the inner component is its name.

    analogy with folder:


    Here I post a simplified version of my manipulator, I´m sure it will help to construct an answer, (I tried a lot of variations for several hours, this is one of those not functional attempts)

    Qt Code:
    1. FocusScope{
    2. id: root
    3. width: 175; height: 25;
    4. focus: true
    5.  
    6. states: [
    7. State {
    8. name: "noFocus"
    9. when: !manipulator.activeFocus && !innerComp.activeFocus
    10. PropertyChanges {
    11. target: innerComp
    12. enabled: false
    13. }
    14. PropertyChanges {
    15. target: manipulator
    16. visible: false
    17. }
    18. },
    19.  
    20. State {
    21. name: "focused"
    22. when: manipulator.activeFocus
    23. PropertyChanges {
    24. target: innerComp
    25. enabled: false
    26. }
    27. PropertyChanges {
    28. target: manipulator
    29. visible: true
    30. }
    31. },
    32. State {
    33. name: "innerFocus"
    34. when: innerComp.activeFocus
    35. PropertyChanges {
    36. target: innerComp
    37. enabled: true
    38. }
    39. PropertyChanges {
    40. target: manipulator
    41. visible: true
    42. }
    43. }
    44. ]
    45.  
    46. //visual area of manipulation (drag, redimension, etc)
    47. MouseArea{
    48. id: manipulator
    49. anchors.fill: parent
    50.  
    51. onDoubleClicked: forceActiveFocus(innerComp) //go to state 3 "innerFocus"
    52. drag.target: manipulator
    53.  
    54. Keys.onEscapePressed: forceActiveFocus(root) //I don´t think this is the correct to loose focus but I don´t know how to do that
    55.  
    56. Rectangle {
    57. id: background
    58. anchors.fill: parent
    59. color: "lightsteelblue";
    60. }
    61. }
    62. //Inner Component (TextField for example)
    63. InnerComp {
    64. id: innerComp
    65. anchors.fill: parent
    66.  
    67. Keys.onEscapePressed: forceActiveFocus(manipulator) //return state 2 "focused"
    68. }
    69. }
    To copy to clipboard, switch view to plain text mode 

    I posted my question in StackOverflow: http://stackoverflow.com/questions/39298647/ but I thought this would be a good place to ask too.

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to manage Focus with States in my custom QML component?

    Mybe reverse the dependency, i.e. make the focus depend on the state, not the state depend on the focus?

    So events like click, double, escape, change the state and the state changes focus if necessary.

    Cheers,
    _

  3. The following user says thank you to anda_skoa for this useful post:

    Dharkael (3rd September 2016)

  4. #3
    Join Date
    Sep 2016
    Posts
    3
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: How to manage Focus with States in my custom QML component?

    Quote Originally Posted by anda_skoa View Post
    Mybe reverse the dependency, i.e. make the focus depend on the state, not the state depend on the focus?

    So events like click, double, escape, change the state and the state changes focus if necessary.

    Cheers,
    _
    Thank you for this advice, I adapted the example as you sugested and now it works!
    I post the code here for those who could be interested in a solution (as I said this is a simplified version of the real code):

    Qt Code:
    1. Item {
    2. id: root
    3. width: 175; height: 25;
    4.  
    5. states: [
    6. State {
    7. name: "noFocus"
    8.  
    9. PropertyChanges {
    10. target: innerComp; enabled: false
    11. }
    12. PropertyChanges {
    13. target: background; visible: false
    14. }
    15. PropertyChanges {
    16. target: manipulator; focus: true
    17. }
    18. },
    19.  
    20. State {
    21. name: "focused"
    22.  
    23. PropertyChanges {
    24. target: innerComp; enabled: false
    25. }
    26. PropertyChanges {
    27. target: background; visible: true
    28. }
    29. PropertyChanges {
    30. target: manipulator; focus: true
    31. }
    32. },
    33. State {
    34. name: "innerFocus"
    35.  
    36. PropertyChanges {
    37. target: innerComp; enabled: true
    38. }
    39. PropertyChanges {
    40. target: background; visible: true
    41. }
    42. PropertyChanges {
    43. target: manipulator; focus: true
    44. }
    45. }
    46. ]
    47. state: "noFocus"
    48.  
    49. //visual area of manipulation (drag, redimension, etc)
    50. MouseArea{
    51. id: manipulator
    52. anchors.fill: parent
    53.  
    54. onPressed: {
    55. root.state = "focused"
    56. forceActiveFocus(manipulator) //this prevents loosing focus in some especific situations
    57. }
    58. onDoubleClicked: {
    59. root.state = "innerFocus"
    60. forceActiveFocus(manipulator) //this prevents loosing focus in some especific situations
    61. }
    62. Keys.onEscapePressed: root.state = "noFocus"
    63.  
    64. }
    65. Rectangle {
    66. id: background
    67. anchors.fill: parent
    68. color: "lightsteelblue";
    69. }
    70. //Inner Component (TextField for example)
    71. InnerComp {
    72. id: innerComp
    73. anchors.fill: parent
    74.  
    75. Keys.onEscapePressed: root.state = "focused"
    76. }
    77. }
    To copy to clipboard, switch view to plain text mode 

  5. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to manage Focus with States in my custom QML component?

    In case you want to move the "forceActiveFocus" also into the state, then you can do so using http://doc.qt.io/qt-5/qml-qtquick-st...ngescript.html

    Cheers,
    _

Similar Threads

  1. GroupItems in two states
    By Andre008 in forum Qt Programming
    Replies: 2
    Last Post: 11th March 2016, 12:40
  2. Replies: 0
    Last Post: 18th November 2014, 05:39
  3. Replies: 0
    Last Post: 1st February 2012, 18:34
  4. Replies: 1
    Last Post: 30th September 2011, 20:54
  5. Replies: 1
    Last Post: 3rd November 2009, 23:26

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.