Display information on the fly

[Mr Gisa]

I tried to find a nice title for this but I couldn't, I think that it has to do about creating widgets on the fly but I'm not sure.

I have a JSON (not that one, it's really similar tho) https://picsum.photos/list, it's a list of items, each item has a few information and a download link.
I'm used to create web application, so in this case I would request the API, loop over the items and create an HTML to display each item.
I was wondering today, how can I create a display for each item dynamically and display the information?

For example, what I need to display is: the author name, resolution, type and a radiobutton, when the user press a button it will send the selected item as a signal.

The reason I want to send as a signal is that I need the link so I can download the selected item.

[J.Hilk]

hi @Mr-Gisa
this basically screams for a lisview with a custom delegate.

Than you just populate the listview with the data from the json-file.

I would go into further details, but I'm not that proficient in his field. When I have to use a ListView I end up using a standart model/view or use the inferior "SetItemWidget" function :(

But others may be of more help here.

[Mr Gisa]

Hi, thank you for your answer. You might be right, but I have no idea how to do something like that. Let's see if someone helps me with that.

[J.Hilk]

@Mr-Gisa
well I can point you to the right docu section at least :-)

There's the Stardelegate Example that is actually pretty close to your current situation.

[VRonin]

• create a QStandardItemModel
• call QStandardItemModel::insertColumns(0,3)
• Iterate over the results using QJsonArray
• call QStandardItemModel::insertRow + QStandardItemModel::setData to populate the model (you can save the link in Qt::UserRole)
• create a QTableView and call setModel on it to assign your model

[Mr Gisa]

@VRonin The approach you said is using a table, I don't want it to be like a table (in appearance). It would look something like this:

[VRonin]

Then follow @J-Hilk 's suggestion. it's executed basically in the same way as a table but you have just 1 column and the rest goes in different roles

[Mr Gisa]

I'm still confused about this, because the example he sent is about a delegate that is going to be in a column.
I still don't know how I'm going to show a radio and tree label like in the image I sent.
I would really appreciate an example.

[Mr Gisa]

Anyone to help me with an example about this?

[mrjj]

@Mr-Gisa
Hi you can disable the gridlines and change background and it it wont look cell like.
The http://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-example.html
show a delegate example.
In your case you would use QStyle to paint the radio button and use CreateEditor
to create an action option button.
You should read this for the model/view part
http://doc.qt.io/qt-5/model-view-programming.html

How many items are we talking about ?

[Mr Gisa]

A few, 10~15 max. Even less. I don't think it's going to be more than 15 tho.

[mrjj]

@Mr-Gisa
Ok luca will kill me for this but at such low number, you could use
SetItemWidget which allows a widget to be placed on a "row"
So you can use normal widgets and simply use a UI file in Designer
and then create instances of this class and place on the rows.
Note this is only good with few items and Desktop class pc.
The performance is bad with many items and scrolling on mobile devices.
The correct way is a Delegate. However its also a vbit involving.
This is other example where it draws a progress bar via a Delegate.
http://doc.qt.io/qt-5/qtnetwork-torrent-example.html
It really is the best way , however, i must confess i used setItemWidget a few times
as its so much easier and performance is not an issue in my use case. ;)

[VRonin]

@mrjj Tu quoque, Brute, fili mi!

[JonB]

@VRonin That was too long. He only had time for: Et tu, Brute.

[mrjj]

@VRonin said in Display information on the fly:

Tu quoque, Brute, fili mi!

hehe yes. sorry. I guess back then his stepson Brutus didn't have any excuses but here
it might fit his use case as very few items. and no scrolling needed.

[VRonin]

DEATH TO setItemWidget!

#include <QApplication>
#include <QStyledItemDelegate>
#include <QStandardItemModel>
#include <QSortFilterProxyModel>
#include <QTreeView>
#include <QHeaderView>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>
int main(int argc, char **argv) {
    QApplication app(argc, argv);
    QStandardItemModel model;
    model.insertColumns(0,3);
    model.insertRows(0,3);
    for(int i=0;i<3;++i){
       model.setData(model.index(i,0),QStringLiteral("autor"));
       model.setData(model.index(i,1),QStringLiteral("resolution"));
       model.setData(model.index(i,2),QStringLiteral("type"));
       model.setData(model.index(i,0),Qt::Unchecked,Qt::CheckStateRole);
       model.item(i,0)->setFlags(model.flags(model.index(i,0)) | Qt::ItemIsUserCheckable);
    }
    QWidget mainWid;
    QTreeView* mainView = new QTreeView(&mainWid);
    const QColor backColor = mainWid.palette().background().color();
    mainView->setStyleSheet(QStringLiteral("QTreeView{border: 0px;background-color:%1;} QTreeView::item:hover{background-color:%1;}").arg(backColor.name(QColor::HexRgb)));
    mainView->setModel(&model);
    mainView->setIndentation(0);
    mainView->setSelectionMode(QAbstractItemView::NoSelection);
    mainView->setSizePolicy(QSizePolicy::MinimumExpanding,QSizePolicy::Preferred);
    mainView->header()->setSectionResizeMode(QHeaderView::Stretch);
    mainView->header()->hide();
    mainView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    mainView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    QVBoxLayout* mainLay = new QVBoxLayout(&mainWid);
    mainLay->addWidget(mainView);
    QHBoxLayout* buttonLay=new QHBoxLayout;
    buttonLay->addSpacerItem(new QSpacerItem(1,1,QSizePolicy::Expanding,QSizePolicy::Preferred));
    buttonLay->addWidget(new QPushButton(QStringLiteral("select"),&mainWid));
    mainLay->addLayout(buttonLay);

    //mutual exclusion.
    QObject::connect(&model,&QAbstractItemModel::dataChanged,[&model](const QModelIndex& idx,const QModelIndex&,const QVector<int>& roles){
        #if QT_VERSION >= QT_VERSION_CHECK(5, 11, 0)
        if(!roles.contains(Qt::CheckStateRole)
           continue;
        #endif
        if(idx.column()==0 && idx.data(Qt::CheckStateRole)==Qt::Checked){
            for(int i=0, maxRow =model.rowCount() ;i<maxRow;++i){
                if(i==idx.row())
                    continue;
                model.setData(model.index(i,0),Qt::Unchecked,Qt::CheckStateRole);
            }
        }
    });
    mainWid.show();
    return app.exec();
}