Mostra la font per a Introducció al QML. Curs 2023-2024

[https://www.qt.io/product/qt6/qml-book QML Book per a Qt6] ([https://github.com/qmlbook/qt6book QML Book a GitHub])

Comencem provant els codis qmlXX presents al [https://recull.binefa.cat/files/20231205/ recull de codis del dia 5 de desembre de 2023] usuari: ''dam'' / contrasenya: ''dam2324''

[https://zetcode.com/gui/qtquick/ Qt Quick tutorial]

[https://qmlbook.github.io/ Accés al llibre de Qt/QML en línia per a Qt5]

Execució de codis QML des del terminal:
 /home/jordi/Qt/6.2.4/gcc_64/bin/qml showcase.qml


== Dependències ==
KeysExample.qml, present a qt6book-main/docs/ch04-qmlstart/src/input, depèn de DarkSquare.qml i GreenSquare.qml

jordi@iot-clot:/media/emmagatzematge/curs2023-2024/projecteGlobal/20231205/qt6book-main/docs/ch04-qmlstart/src/input$ '''/home/jordi/Qt/6.2.4/gcc_64/bin/qml KeysExample.qml'''

Consultem [https://recull.binefa.cat/files/20231205/ancoratgesQml.pdf ancoratgesQml.pdf]

== KDAB ==

[https://github.com/KDAB/kdabtv/tree/master/qml-intro Codis QML] dels [https://www.youtube.com/playlist?list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc vídeos de KDAB]

=== qml_02_kdab ===
==== Ancoratge ====
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors.qml anchors.qml:]
[[Image:00_anchors.png|center|anchors.qml]]

[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors2.qml anchors2.qml:]
[[Image:01_anchors2.png|center|anchors2.qml]]

[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors-centerin-parent-keyword.qml anchors-centerin-parent-keyword.qml:]
[[Image:02_anchors-centerin-parent-keyword.png|center|anchors-centerin-parent-keyword.qml]]

[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors-expanding.qml anchors-expanding.qml:]
[[Image:03_anchors-expanding.png|center|anchors-expanding.qml]]

[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors-fill.qml anchors-fill.qml:]
[[Image:04_anchors-expanding.png|center|anchors-fill.qml]]

==== Bucles de vinculació ====
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-binding-loop/main.qml Bucles de vinculació (''binding loop'')]

Exemple de bucle de vinculació:
 import QtQuick 2.0
 
 Rectangle {
    color: "black"
    '''width: child.width'''
    '''height: child.width'''
 
    Image {
        '''id: child'''
        source : "../images/vertical-gradient.png"
        '''anchors.fill: parent'''
        anchors.margins: 5
    }
 }

Una solució per a evitar bucles de vinculació:
 import QtQuick 2.0
 
 Rectangle {
    color: "black"
    '''implicitWidth: child.implicitWidth'''
    '''implicitHeight: child.implicitWidth'''
 
    Image {
        '''id: child'''
        source : "../images/vertical-gradient.png"
        '''anchors.fill: parent'''
        anchors.margins: 5
    }
 }

= Extres sobre QML =
Per afegir '''QMLDesigner''' a l'entorn del QtCreator: Aneu al menú ''Help'' / ''About pluggins'' / Seleccioneu ''QMLDesigner''

Per afegir un nou formulari: '''nomForm.ui.qml'''

[https://www.youtube.com/playlist?list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc Introduction to Qt / QML - all videos so far] by [https://www.kdab.com/ KDAB] ([https://github.com/KDAB/kdabtv/tree/master/qml-intro Codis QML de la sèrie de vídeos])

[[Vídeos QML]] de connexió entre el rerefons en C++ i el frontal en QML.

[https://www.youtube.com/watch?v=9BRJ1qJkjZM Photoshop to QML exporter]

= Exercicis =
Feu els exercicis de QML presents al [[Recull de pràctiques de 2n de DAM. Curs 2023-2024]]