How to Use a QSqlQueryModel in QML/es: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
'''Spanish''' [[How to use a QSqlQueryModel in QML|English]] [[HowToUseAQSqlQueryModelInQML Italian|Italian]]
'''Spanish''' [[How_to_use_a_QSqlQueryModel_in_QML|English]] [[HowToUseAQSqlQueryModelInQML_Italian|Italian]]


=Como usar un QSqlQueryModel en <span class="caps">QML</span>=
[[Category:Spanish]]


El software que estoy desarrollando, Photo Parata, es una aplicación cliente servidor que usa un backend <span class="caps">SQL</span>. 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.
= Como usar un QSqlQueryModel en QML =


En este articulo, recorreré los pasos para configurar un modelo personalizado para ser usado desde <span class="caps">QML</span> derivado de QSqlQueryModel.
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.


Quiero agradecer a [http://cdumez.blogspot.com/ Christophe Dumez] ''[cdumez.blogspot.com]'' por su articulo [http://cdumez.blogspot.com/2010/11/how-to-use-c-list-model-in-qml.html How to use C++ list model in <span class="caps">QML</span>] ''[cdumez.blogspot.com]''. <br /> Este articulo me permitió crear el siguiente ejemplo:
En este articulo, recorreré los pasos para configurar un modelo personalizado para ser usado desde QML derivado de QSqlQueryModel.


(La fuente de datos para este ejemplo ha sido tomada de unos de los ejemplosde <span class="caps">SQL</span> que se incluyen con Qt, [http://doc.qt.nokia.com/stable/sql-masterdetail-database-h.html examples\sql\masterdetail] ''[doc.qt.nokia.com]'')
Quiero agradecer a &quot;Christophe Dumez&amp;quot;:http://cdumez.blogspot.com/ por su articulo &quot;How to use C++ list model in QML&amp;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, &quot;examples\sql\masterdetail&amp;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 &amp;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 /> &quot;artist&amp;quot;,<br /> &quot;title&amp;quot;,<br /> &quot;year&amp;quot;,<br /> NULL<br />};<br />const char* ArtistsSqlModel::SQL_SELECT =<br />&quot;SELECT artists.artist, albums.title, albums.year&amp;quot;<br />&quot; FROM albums&amp;quot;<br />&quot; JOIN artists ON albums.artistid = artists.id&amp;quot;;<br /></code>


Siempre tengo dos constantes estáticas en cada uno de mis modelos que derivan de QSqlQueryModel, <span class="caps">COLUMN</span>_NAMES y <span class="caps">SQL</span>_SELECT. El orden de los nombres de las columnas en <span class="caps">COLUMN</span>_NAMES debe coincidir con el orden en que aparece en la instrucción <span class="caps">SELECT</span>.
=== Paso 3: Establecer el roleNames en el constructor ===


===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.


Aquí es donde toda la magia realmente ocurre. <span class="caps">QML</span> 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&amp;lt;int, QByteArray&amp;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:


===Paso 5: Permitir a <span class="caps">QML</span> ver el modelo:===
<code>QVariant ArtistsSqlModel::data(const QModelIndex &amp;index, int role) const<br />{<br /> QVariant value = QSqlQueryModel::data(index, role);<br /> if(role &lt; Qt::UserRole)<br /> {<br /> value = QSqlQueryModel::data(index, role);<br /> }<br /> else<br /> {<br /> int columnIdx = role - Qt::UserRole - 1;<br /> QModelIndex modelIndex = this-&gt;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:


h3.Paso 6: Crear la lista y el delegado en <span class="caps">QML</span>
<code><br /> ArtistsSqlModel *artistsSqlModel = new ArtistsSqlModel( qApp);<br /> QmlApplicationViewer viewer;<br /> viewer.rootContext()-&gt;setContextProperty(&quot;artistsModel&amp;quot;, artistsSqlModel);<br /> viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);<br /> viewer.setMainQmlFile&amp;amp;#40;QLatin1String(&quot;qml/SQLListView/main.qml&amp;quot;&amp;#41;);<br /> viewer.showExpanded();


Desde el modelo que hemos expuesto en el paso 5, el modelo existe y esta listo para ser usado por <span class="caps">QML</span>. Simplemente establezca el modelo de el ListView con el nombre dado en el paso 5.
</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 /> }


Siéntase libre de contactase conmigo para obtener el código fuente completo, estaré muy feliz de compartirlo. (mas información en la [[How to use a QSqlQueryModel in QML|versión original]] del articulo)
Text {<br /> text: title<br /> width: 300;<br /> }


===Categories:===
Text {<br /> text: year<br /> width: 50;<br /> }<br /> }<br />}</code>


* [[:Category:Spanish|Spanish]]
Siéntase libre de contactase conmigo para obtener el código fuente completo, estaré muy feliz de compartirlo. (mas información en la &quot;versión original&amp;quot;:How_to_use_a_QSqlQueryModel_in_QML del articulo)

Revision as of 10:40, 24 February 2015

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&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.
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&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().

<br />class ArtistsSqlModel : public QSqlQueryModel<br />{<br /> Q_OBJECT<br />public:<br /> explicit ArtistsSqlModel(QObject '''parent);<br /> void refresh();<br /> QVariant data(const QModelIndex &amp;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 /> &quot;artist&amp;quot;,<br /> &quot;title&amp;quot;,<br /> &quot;year&amp;quot;,<br /> NULL<br />};<br />const char* ArtistsSqlModel::SQL_SELECT =<br />&quot;SELECT artists.artist, albums.title, albums.year&amp;quot;<br />&quot; FROM albums&amp;quot;<br />&quot; JOIN artists ON albums.artistid = artists.id&amp;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&amp;lt;int, QByteArray&amp;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 &amp;index, int role) const<br />{<br /> QVariant value = QSqlQueryModel::data(index, role);<br /> if(role &lt; Qt::UserRole)<br /> {<br /> value = QSqlQueryModel::data(index, role);<br /> }<br /> else<br /> {<br /> int columnIdx = role - Qt::UserRole - 1;<br /> QModelIndex modelIndex = this-&gt;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()-&gt;setContextProperty(&quot;artistsModel&amp;quot;, artistsSqlModel);<br /> viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);<br /> viewer.setMainQmlFile&amp;amp;#40;QLatin1String(&quot;qml/SQLListView/main.qml&amp;quot;&amp;#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&quot;:How_to_use_a_QSqlQueryModel_in_QML del articulo)