Spanish English Italian

Como usar un QSqlQueryModel en QML

El software que estoy desarrollando, Photo Parata, es una aplicación cliente servidor que usa un backend SQL. La mayor parte del tiempo, lo datos mostrados por Photo Parata requieren de alguna relación (join). Debido a esto, la mayoría de las veces los modelos derivan de QSqlQueryModel no de QSqlTableModel.

En este articulo, recorreré los pasos para configurar un modelo personalizado para ser usado desde QML derivado de QSqlQueryModel.

Quiero agradecer a Christophe Dumez [cdumez.blogspot.com] por su articulo How to use C++ list model in QML [cdumez.blogspot.com].
Este articulo me permitió crear el siguiente ejemplo:

(La fuente de datos para este ejemplo ha sido tomada de unos de los ejemplosde SQL que se incluyen con Qt, examples\sql\masterdetail [doc.qt.nokia.com])

Paso 1: Crear una clase C++ que derive de QSqlQueryModel:

Toda la magia ocurre en el constructor y en el método sobrecargado data().

  1. class ArtistsSqlModel : public QSqlQueryModel
  2. {
  3.     Q_OBJECT
  4. public:
  5.     explicit ArtistsSqlModel(QObject *parent);
  6.     void refresh();
  7.     QVariant data(const QModelIndex &index, int role) const;
  8. signals:
  9. public slots:
  10. private:
  11.  const static char* COLUMN_NAMES[];
  12.  const static char* SQL_SELECT;
  13. };

Paso 2: Implementar dos constantes estáticas

Siempre tengo dos constantes estáticas en cada uno de mis modelos que derivan de QSqlQueryModel, COLUMN_NAMES y SQL_SELECT. El orden de los nombres de las columnas en COLUMN_NAMES debe coincidir con el orden en que aparece en la instrucción SELECT.

  1. const char* ArtistsSqlModel::COLUMN_NAMES[] = {
  2.  "artist",
  3.  "title",
  4.  "year",
  5.  NULL
  6. };
  7. const char* ArtistsSqlModel::SQL_SELECT =
  8. "SELECT artists.artist, albums.title, albums.year"
  9. "  FROM albums"
  10. "       JOIN artists ON albums.artistid = artists.id";

Paso 3: Establecer el roleNames en el constructor

Aquí es donde toda la magia realmente ocurre. QML hará referencia a las distintas columnas por el nombre del role establecido en el modelo.

  1. ArtistsSqlModel::ArtistsSqlModel(QObject *parent) :
  2.     QSqlQueryModel(parent)
  3. {
  4.     int idx = 0;
  5.     QHash<int, QByteArray> roleNames;
  6.     while( COLUMN_NAMES[idx]) {
  7.             roleNames[Qt::UserRole + idx + 1] = COLUMN_NAMES[idx];
  8.             idx++;
  9.     }
  10.     setRoleNames(roleNames);
  11.     refresh();
  12. }

Paso 4: Implementar el método data() :

Mientras el role que se solicita no es un role de usuario, se devuelve el valor predeterminado. Pero si role es un role de usuario, devuelve la columna correcta:

  1. QVariant ArtistsSqlModel::data(const QModelIndex &index, int role) const
  2. {
  3.     QVariant value = QSqlQueryModel::data(index, role);
  4.     if(role < Qt::UserRole)
  5.     {
  6.         value = QSqlQueryModel::data(index, role);
  7.     }
  8.     else
  9.     {
  10.         int columnIdx = role - Qt::UserRole - 1;
  11.         QModelIndex modelIndex = this->index(index.row(), columnIdx);
  12.         value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);
  13.     }
  14.     return value;
  15. }

Paso 5: Permitir a QML ver el modelo:

Cree una instancia de el modelo (tome nota de que el constructor del modelo consulte la base de datos la primera vez). A continuación, establezcalo como una propiedad en el contexto del viewer, en este caso lo he llamado artistModel:

  1.     ArtistsSqlModel *artistsSqlModel = new ArtistsSqlModel( qApp);
  2.     QmlApplicationViewer viewer;
  3.     viewer.rootContext()->setContextProperty("artistsModel", artistsSqlModel);
  4.     viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
  5.     viewer.setMainQmlFile(QLatin1String("qml/SQLListView/main.qml"));
  6.     viewer.showExpanded();

h3.Paso 6: Crear la lista y el delegado en QML

Desde el modelo que hemos expuesto en el paso 5, el modelo existe y esta listo para ser usado por QML. Simplemente establezca el modelo de el ListView con el nombre dado en el paso 5.

  1.         ListView {
  2.             id: list_view1
  3.             clip: true
  4.             anchors.margins: 10
  5.             anchors.fill: parent
  6.             model: artistsModel
  7.             delegate: ArtistItemDelegate {}
  8.         }

Y finalmente la implementación de el delegado, note aquí como los nombres establecidos en el roleModel son usados como los valores a enlazar a la propiedad text de los objetos Text:

ArtistItemDelegate.qml

  1. import Qt 4.7
  2.  
  3. Item {
  4.     id: delegate
  5.     width: delegate.ListView.view.width;
  6.     height: 30
  7.     clip: true
  8.     anchors.margins: 4
  9.  
  10.     Row {
  11.         anchors.margins: 4
  12.         anchors.fill: parent
  13.         spacing: 4;
  14.  
  15.         Text {
  16.             text: artist
  17.             width: 150
  18.         }
  19.  
  20.         Text {
  21.             text: title
  22.             width: 300;
  23.         }
  24.  
  25.         Text {
  26.             text: year
  27.             width: 50;
  28.         }
  29.     }
  30. }

Siéntase libre de contactase conmigo para obtener el código fuente completo, estaré muy feliz de compartirlo. (mas información en la versión original del articulo)

Categories: