Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Focus ring around tree/table views?



  • when i click into a text edit in my window (search box) i get a nice focus ring, indicating where the keyboard has focus:

    0_1565219483408_Screen Shot 2019-08-07 at 4.11.16 PM.png
    this is exactly what i want.
    but i ALSO want it when the user clicks in the tree or table view, surrounding the view. but no focus ring is shown.

    note that the underlying QWidgets all have "strongFocus" as the focusPolicy, but that doesn't seem related. How can i get this lovely focus ring to appear around my other views?



  • try:

    treeView->setAttribute(Qt::WA_MacShowFocusRect);
    

  • Moderators

    @davecotter
    as far as I know, the MacShowFocusRect that @mpergand suggested only works on Mac.

    So if you're looking for a more general approach, than take a look at the stylesheet example for a customized ListView

    https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qlistview

    QListView::item:selected is probably the selector you need



  • @j-hilk said in Focus ring around tree/table views?:

    QListView::item:selected

    well i'm looking for a ring around the entire view, not around an item, like this:

    Tree view has focus:
    0_1565247225366_Screen Shot 2019-08-07 at 11.53.13 PM.png

    Table view has focus:
    0_1565247257024_Screen Shot 2019-08-07 at 11.53.18 PM.png


  • Moderators

    @davecotter
    well that makes it easier:

    QTreeView:focus {
         border: 1px solid #6a6ea9;
    }
    


  • @j-hilk said in Focus ring around tree/table views?:

    QTreeView:focus {
    border: 1px solid #6a6ea9;
    }

    i took your suggestion but the "ring" is practically invisible. As you can see i'm setting it to 3 pixels but that doesn't change it's width for some reason?:

    0_1565288173141_Screen Shot 2019-08-08 at 11.15.07 AM.png

    Search bar does it correctly:
    0_1565288154232_Screen Shot 2019-08-08 at 11.14.45 AM.png

    No ring around treeview:
    0_1565288166232_Screen Shot 2019-08-08 at 11.14.51 AM.png

    No ring around table view:
    0_1565288219164_Screen Shot 2019-08-08 at 11.14.56 AM.png

    should i be using QFocusFrame ?



  • tried this and got exactly nothing:

    QFocusFrame *focus1P(new QFocusFrame(ui->sourcesList));
    focus1P->setWidget(ui->sourcesList);
    QFocusFrame *focus2P(new QFocusFrame(ui->tracksList));
    focus2P->setWidget(ui->tracksList);



  • It can't work because the border must be drawn above the widget.

    As far as I know, it's only work on Mac with WA_MacShowFocusRect as I said earlier.

    The possible solution would be to embed the view inside a QFrame with a 3 px margin.

    The ultimate question should be : why do you want to implement a feature that is not standard except on Mac ?



  • because it looks great, makes it clear where the focus is, and i want the EXACT SAME look on both mac and windows. also, my previous iteration of my app did it and the last thing i want to do is REMOVE FEATURES with an app rewrite, because that's the most horrible thing any dev can do to it's installed base


  • Moderators

    @davecotter
    you clearly did not write what I did, right? only 1 : not ::focus

    #include <QApplication>
    #include <QWidget>
    #include <QTableWidget>
    #include <QTreeWidget>
    #include <QHBoxLayout>
    
    int main(int argc, char *argv[])
    {
    
        QApplication a(argc, argv);
    
        QWidget w;
        QHBoxLayout *layout = new QHBoxLayout(&w);
    
        QTreeWidget tr;
        tr.setStyleSheet("QTreeWidget:focus{border: 4px solid red;}");
    
        QTableWidget ta;
        ta.setStyleSheet("QTableWidget:focus{border: 4px solid red;}");
    
        layout->addWidget(&tr);
        layout->addWidget(&ta);
    
        w.resize(400,400);
        w.show();
    
        return  a.exec();
    }
    

    0_1565290530966_d8ac3aa7-9ac6-471b-bbf9-5551d3b45cf4-image.png

    0_1565290545916_6d8ff5a3-e7de-429b-adbf-e69ce9139a8a-image.png



  • @davecotter said in Focus ring around tree/table views?:

    because it looks great, makes it clear where the focus is

    It's your own opinion ...
    Regular users on other systems could find this extra border annoying, or don't care at all.
    Stay the standard way and every users of your apps will be happy ...



  • @mpergand I appreciate your taking the time to answer, and in trying to guide me, however i'm not here for a critique of my UX, i'm here for technical details on how to accomplish a goal. My users have been seeing a focus ring for over ten years, and zero have told me they don't like it. I'm not going to change the UX, because people come to rely on visual indicators, and when you take them away is when users get upset.

    In any case it seems that i must come up with a different approach. May i ask how the text edit focus ring is accomplished? Or is there sample code for QFocusFrame ? the doc is cryptic and my first attempt lead to nothing.



  • @j-hilk well, it turns out not to have mattered. With 1 OR 2 colons, you get the same result, one pixel wide border, not the number of pixels you specify. Even your example, specifying 4px, it only shows a 1px border. but thanks for the test!


  • Moderators

    @davecotter you're welcome 😉

    strange I can confirm that, but the pixel size used to make a difference 🤔



  • @mpergand said in Focus ring around tree/table views?:

    treeView->setAttribute(Qt::WA_MacShowFocusRect);

    note i tried this on the mac just to SEE it, and got exactly nothing. is there no way to accomplish this?

    again i ask: how does the text edit control (on mac) do it? that looks great!



  • @davecotter

    Qt::WA_MacShowFocusRect will create a QFocusFrame around the specific widget. If setting that flag doesnt work for you, you could try to build a QFocusFrame directly.

    https://doc.qt.io/archives/qt-4.8/qfocusframe.html



  • @davecotter said in Focus ring around tree/table views?:

    @mpergand said in Focus ring around tree/table views?:

    treeView->setAttribute(Qt::WA_MacShowFocusRect);

    note i tried this on the mac just to SEE it, and got exactly nothing. is there no way to accomplish this?

    It works for me on MacOS 10.9, Qt 5.6
    QFocusFrame doesn't work on Mac on the config above,
    but works well on Linux (Ubuntu mate 18.04)



  • i have tried to use Qt::WA_MacShowFocusRect on mac and see nothing. can you show a screen shot of what you see?



  • @davecotter
    Focus-Ring.png

    edit=new QTextEdit;
    edit->setAttribute(Qt::WA_MacShowFocusRect);
    groupLayout->addWidget(edit);
    


  • sorry, i wasn't talking about a text edit widget. that already works without my having to do anything.

    i'm talking about putting a focus ring around a QTreeView and a QTableView.

    and in that case it only shows the ring when the view has focus right? i don't have to manage that part myself, right?



  • @davecotter
    It's work with QTable/TreeView as well !
    Focus-Ring2.png

       QTreeView* edit=new QTreeView;
       edit->setAttribute(Qt::WA_MacShowFocusRect);
       groupLayout->addWidget(edit);
       edit=new QTreeView;
       edit->setAttribute(Qt::WA_MacShowFocusRect);
       groupLayout->addWidget(edit);
    

    [EDIT]
    For me, QTable and QTreeView have the focus ring by default (without setAttribute(Qt::WA_MacShowFocusRect);)
    but for QTextEdit Qt::WA_MacShowFocusRect is needed.



  • huh, for me the text edit gets a ring automatically, and no matter what i do i can't get the tree or table view to get it.

    note i'm setting it all up in Qt Designer, then programmatically adding the ring around tree/table views, to no avail.



  • @davecotter said in Focus ring around tree/table views?:

    note i'm setting it all up in Qt Designer, then programmatically adding the ring around tree/table views, to no avail.

    Check if the focus policy is not set to NoFocus.
    On the code above, If I add :

    edit->setFocusPolicy(Qt::NoFocus);
    

    Obviously the focus ring doesn't appear anymore.



  • Yes the views default to having "strongFocus". I have recreated the minimal project, which also does not show focus rings even with all the code correct as specified above.

    If anyone has a couple free minutes, please download and run this project, and tell me what's wrong?



  • Your project works as expected for me.
    But I can't test above Qt 5.8 and MacOs 10.9.
    Maybe a bug in more recent Qt versions ?



  • well i am on macOS 10.14 and Qt 5.13.0



  • @mpergand said in Focus ring around tree/table views?:

    WA_MacShowFocusRect

    can anyone try on latest Qt?



  • @mpergand or anyone, can you reproduce the problem? that the focus ring is 1px no matter what? if you see CORRECT results (nice ring like around the search box) can you screen shot that and tell me what version of Qt you're using?

    i still can not for the life of me get this ring to look good



  • if i embed the views inside a QFrame, with 3px borders, then draw the focus on the QFrames, that looks good. i can tab between all 3 items and the borders look good (if the wrong color).

    but that leaves the wrong QObject with the focus. i need the tree/table views to have actual focus.

    soi try to do this:

    treeFrame->setFocusProxy(treeView);
    tableFrame->setFocusProxy(tableView);

    then the edit text and tree frame look good, but the table view is back to looking all wrong again (1 pixel border)

    good:
    Screen Shot 2020-06-05 at 9.32.55 PM.png

    good:
    Screen Shot 2020-06-05 at 9.33.00 PM.png

    bad:
    Screen Shot 2020-06-05 at 9.33.06 PM.png

    why 1 pixel? the code is correct.

    I've a new minimal project if some kind soul (who likes karaoke?) could take a look?
    http://kjams.com/downloads/qfocustest.zip

    thanks

    -dave



  • @davecotter said in Focus ring around tree/table views?:

    @mpergand or anyone, can you reproduce the problem? that the focus ring is 1px no matter what? if you see CORRECT results (nice ring like around the search box) can you screen shot that and tell me what version of Qt you're using?

    i still can not for the life of me get this ring to look good

    I'm currently proceeding to a major update of my developement system.
    I hope looking at your issue in a few days.



  • @davecotter
    Please take this lightheartedly, but she's spelt Eleanor Rigby :)
    Probably not the cause of your issue, but it does imply you are typing these in by hand!?



  • does it seem strange that every API for "focus rings" and even one i hacked together, doesn't work?

    • setting a frame using styles DOES NOT WORK
    • using the explicit API QFocusFrame DOES NOT WORK
    • using the mac-only "Qt::WA_MacShowFocusRect" attribute DOES NOT WORK

    or: i have not been able to understand the doc well enough to cause any of them to work



  • I've updated the example project so you can test six different implementations of "focus ring", none of which are 100% successful.

    The only one that comes close is kTest_PARENT_STYLE, and only on mac. On windows i can't for the LIFE of me make ANY focus ring bigger than 1 pixel, which is just too small. I really need 3 pixels in order to keep the UI appearing the same as the previous (10 year old, 32bit) app.

    -dave


Log in to reply