How to Use a QSqlQueryModel in QML/es: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
'''Spanish''' [[ | '''Spanish''' [[How_to_use_a_QSqlQueryModel_in_QML|English]] [[HowToUseAQSqlQueryModelInQML_Italian|Italian]] | ||
[[Category:Spanish]] | |||
= 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&quot;:http://cdumez.blogspot.com/ por su articulo "How to use C++ list model in QML&quot;:http://cdumez.blogspot.com/2010/11/how-to-use-c-list-model-in-qml.html.<br />Este articulo me permitió crear el siguiente ejemplo: | |||
===Paso 1: Crear una clase C++ que derive de QSqlQueryModel:=== | (La fuente de datos para este ejemplo ha sido tomada de unos de los ejemplosde SQL que se incluyen con Qt, "examples\sql\masterdetail&quot;: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(). | Toda la magia ocurre en el constructor y en el método sobrecargado data(). | ||
===Paso 2: Implementar dos constantes estáticas=== | <code><br />class ArtistsSqlModel : public QSqlQueryModel<br />{<br /> Q_OBJECT<br />public:<br /> explicit ArtistsSqlModel(QObject '''parent);<br /> void refresh();<br /> QVariant data(const QModelIndex &index, int role) const;<br />signals:<br />public slots:<br />private:<br /> const static char''' COLUMN_NAMES[];<br /> const static char* SQL_SELECT;<br />};<br /></code> | ||
=== 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. | |||
<code>const char* ArtistsSqlModel::COLUMN_NAMES[] = {<br /> "artist&quot;,<br /> "title&quot;,<br /> "year&quot;,<br /> NULL<br />};<br />const char* ArtistsSqlModel::SQL_SELECT =<br />"SELECT artists.artist, albums.title, albums.year&quot;<br />" FROM albums&quot;<br />" JOIN artists ON albums.artistid = artists.id&quot;;<br /></code> | |||
=== 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. | |||
<code>ArtistsSqlModel::ArtistsSqlModel(QObject *parent) :<br /> QSqlQueryModel(parent)<br />{<br /> int idx = 0;<br /> QHash&lt;int, QByteArray&gt; roleNames;<br /> while( COLUMN_NAMES[idx]) {<br /> roleNames[Qt::UserRole + idx + 1] = COLUMN_NAMES[idx];<br /> idx++;<br /> }<br /> setRoleNames(roleNames);<br /> refresh();<br />}</code> | |||
===Paso 4: Implementar el método data() :=== | === 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: | 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: | ||
=== | <code>QVariant ArtistsSqlModel::data(const QModelIndex &index, int role) const<br />{<br /> QVariant value = QSqlQueryModel::data(index, role);<br /> if(role < Qt::UserRole)<br /> {<br /> value = QSqlQueryModel::data(index, role);<br /> }<br /> else<br /> {<br /> int columnIdx = role - Qt::UserRole - 1;<br /> QModelIndex modelIndex = this->index(index.row(), columnIdx);<br /> value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);<br /> }<br /> return value;<br />} </code> | ||
=== 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: | 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: | ||
<code><br /> ArtistsSqlModel *artistsSqlModel = new ArtistsSqlModel( qApp);<br /> QmlApplicationViewer viewer;<br /> viewer.rootContext()->setContextProperty("artistsModel&quot;, artistsSqlModel);<br /> viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);<br /> viewer.setMainQmlFile&amp;#40;QLatin1String("qml/SQLListView/main.qml&quot;&#41;);<br /> viewer.showExpanded(); | |||
Desde el modelo que hemos expuesto en el paso 5, el modelo existe y esta listo para ser usado por | </code> | ||
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. | |||
<code><br /> ListView {<br /> id: list_view1<br /> clip: true<br /> anchors.margins: 10<br /> anchors.fill: parent<br /> model: artistsModel<br /> delegate: ArtistItemDelegate {}<br /> }<br /></code> | |||
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: | 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'''<br /> | '''ArtistItemDelegate.qml'''<br /><code>import Qt 4.7 | ||
Item {<br /> id: delegate<br /> width: delegate.ListView.view.width;<br /> height: 30<br /> clip: true<br /> anchors.margins: 4 | |||
Row {<br /> anchors.margins: 4<br /> anchors.fill: parent<br /> spacing: 4; | |||
Text {<br /> text: artist<br /> width: 150<br /> } | |||
Text {<br /> text: title<br /> width: 300;<br /> } | |||
Text {<br /> text: year<br /> width: 50;<br /> }<br /> }<br />}</code> | |||
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&quot;:How_to_use_a_QSqlQueryModel_in_QML del articulo) |
Revision as of 10:40, 24 February 2015
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().
<br />class ArtistsSqlModel : public QSqlQueryModel<br />{<br /> Q_OBJECT<br />public:<br /> explicit ArtistsSqlModel(QObject '''parent);<br /> void refresh();<br /> QVariant data(const QModelIndex &index, int role) const;<br />signals:<br />public slots:<br />private:<br /> const static char''' COLUMN_NAMES[];<br /> const static char* SQL_SELECT;<br />};<br />
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[] = {<br /> "artist&quot;,<br /> "title&quot;,<br /> "year&quot;,<br /> NULL<br />};<br />const char* ArtistsSqlModel::SQL_SELECT =<br />"SELECT artists.artist, albums.title, albums.year&quot;<br />" FROM albums&quot;<br />" JOIN artists ON albums.artistid = artists.id&quot;;<br />
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) :<br /> QSqlQueryModel(parent)<br />{<br /> int idx = 0;<br /> QHash&lt;int, QByteArray&gt; roleNames;<br /> while( COLUMN_NAMES[idx]) {<br /> roleNames[Qt::UserRole + idx + 1] = COLUMN_NAMES[idx];<br /> idx++;<br /> }<br /> setRoleNames(roleNames);<br /> refresh();<br />}
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<br />{<br /> QVariant value = QSqlQueryModel::data(index, role);<br /> if(role < Qt::UserRole)<br /> {<br /> value = QSqlQueryModel::data(index, role);<br /> }<br /> else<br /> {<br /> int columnIdx = role - Qt::UserRole - 1;<br /> QModelIndex modelIndex = this->index(index.row(), columnIdx);<br /> value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);<br /> }<br /> return value;<br />}
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:
<br /> ArtistsSqlModel *artistsSqlModel = new ArtistsSqlModel( qApp);<br /> QmlApplicationViewer viewer;<br /> viewer.rootContext()->setContextProperty("artistsModel&quot;, artistsSqlModel);<br /> viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);<br /> viewer.setMainQmlFile&amp;#40;QLatin1String("qml/SQLListView/main.qml&quot;&#41;);<br /> 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.
<br /> ListView {<br /> id: list_view1<br /> clip: true<br /> anchors.margins: 10<br /> anchors.fill: parent<br /> model: artistsModel<br /> delegate: ArtistItemDelegate {}<br /> }<br />
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 {<br /> id: delegate<br /> width: delegate.ListView.view.width;<br /> height: 30<br /> clip: true<br /> anchors.margins: 4
Row {<br /> anchors.margins: 4<br /> anchors.fill: parent<br /> spacing: 4;
Text {<br /> text: artist<br /> width: 150<br /> }
Text {<br /> text: title<br /> width: 300;<br /> }
Text {<br /> text: year<br /> width: 50;<br /> }<br /> }<br />}
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)