How to Use a QSqlQueryModel in QML/es

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":http://cdumez.blogspot.com/ por su articulo "How to use C++ list model in QML":http://cdumez.blogspot.com/2010/11/how-to-use-c-list-model-in-qml.html. 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":http://doc.qt.nokia.com/stable/sql-masterdetail-database-h.html)

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

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

class ArtistsSqlModel : public QSqlQueryModel
{
 Q_OBJECT
public:
 explicit ArtistsSqlModel(QObject '''parent);
 void refresh();
 QVariant data(const QModelIndex &index, int role) const;
signals:
public slots:
private:
 const static char''' COLUMN_NAMES[];
 const static char* SQL_SELECT;
};

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.

const char* ArtistsSqlModel::COLUMN_NAMES[] = {
 "artist",
 "title",
 "year",
 NULL
};
const char* ArtistsSqlModel::SQL_SELECT =
"SELECT artists.artist, albums.title, albums.year"
" FROM albums"
" 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.

ArtistsSqlModel::ArtistsSqlModel(QObject *parent) :
 QSqlQueryModel(parent)
{
 int idx = 0;
 QHash<int, QByteArray> roleNames;
 while( COLUMN_NAMES[idx]) {
 roleNames[Qt::UserRole + idx + 1] = COLUMN_NAMES[idx];
 idx++;
 }
 setRoleNames(roleNames);
 refresh();
}

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:

QVariant ArtistsSqlModel::data(const QModelIndex &index, int role) const
{
 QVariant value = QSqlQueryModel::data(index, role);
 if(role < Qt::UserRole)
 {
 value = QSqlQueryModel::data(index, role);
 }
 else
 {
 int columnIdx = role - Qt::UserRole - 1;
 QModelIndex modelIndex = this->index(index.row(), columnIdx);
 value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);
 }
 return value;
}

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:

 ArtistsSqlModel *artistsSqlModel = new ArtistsSqlModel( qApp);
 QmlApplicationViewer viewer;
 viewer.rootContext()->setContextProperty("artistsModel", artistsSqlModel);
 viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
 viewer.setMainQmlFile(QLatin1String("qml/SQLListView/main.qml"));
 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.

 ListView {
 id: list_view1
 clip: true
 anchors.margins: 10
 anchors.fill: parent
 model: artistsModel
 delegate: ArtistItemDelegate {}
 }

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

import Qt 4.7

Item {
 id: delegate
 width: delegate.ListView.view.width;
 height: 30
 clip: true
 anchors.margins: 4

Row {
 anchors.margins: 4
 anchors.fill: parent
 spacing: 4;

Text {
 text: artist
 width: 150
 }

Text {
 text: title
 width: 300;
 }

Text {
 text: year
 width: 50;
 }
 }
}

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":How_to_use_a_QSqlQueryModel_in_QML del articulo)