QML

QML ( Qt Modeling Language ) é uma linguagem de programação declarativa que foi desenvolvida como parte do Qt , uma biblioteca para criar interfaces de usuário em C ++ . O objetivo da linguagem é desenvolver interfaces de usuário, principalmente (mas não necessariamente) para sistemas desktop e móveis. QML é sintaticamente baseado em JSON e CSS . Devido à sua estrutura básica declarativa e à integração perfeita do JavaScript , ele combina abordagens declarativas e imperativas em uma linguagem de programação. QML é parte do Qt User Interface Creation Kit (Qt Quick) e pode (incluindo seus componentes JavaScript) ser compilado em C ++ nativo usando o Qt Quick Compiler .

sintaxe

No centro do QML está a descrição declarativa dos elementos da GUI . A descrição de um elemento individual pode ser semelhante a esta, por exemplo:

Rectangle {
    color: "green"
    x: 5; y: 10
    width: 50
    height: 2 * width
}

No início está o tipo do elemento, seguido por chaves. As propriedades do elemento são descritas entre chaves na forma “ Nome da propriedade : Valor ”. O valor pode ser um literal simples ou uma instrução JavaScript completa, como no exemplo acima ao definir a altura. No entanto, esta definição por meio de uma instrução JavaScript não é uma atribuição de acordo com o princípio das linguagens de programação imperativas, mas sim uma definição no sentido matemático. No caso do exemplo acima, isso significa que a altura é sempre o dobro da largura, mesmo se o valor da largura mudar. A altura real será então recalculada.

Os elementos podem ser aninhados. Para fazer isso, a descrição do elemento filho é escrita na descrição do elemento pai:

Rectangle {
    //...

    Text {
        id: label
        color: "red"
        text: "Hello World!"
        anchors.centerIn: parent
    }
}

O elemento filho agora pode fazer referência ao seu elemento pai por meio da variável pai , por exemplo, B. para se centrar em seu elemento pai usando a "Propriedade" anchors.centerIn: pai . Além disso, os elementos podem, em princípio, se definidos, ser referenciados por meio de seu ID. O ID é definido por meio do id da propriedade .

O "princípio do slot de sinal" também é uma parte importante da linguagem. Os sinais são acionados, por exemplo, como consequência de entradas como B. o sinal clicado () do tipo de elemento MouseArea . Pode-se reagir a um sinal definindo um "slot" no elemento correspondente, para este propósito a propriedade em <Signalname> é definida com a instrução JavaScript a ser executada ou o bloco JavaScript a ser executado, que é então executado imperativamente. Para o exemplo com MouseArea, poderia ser assim:

MouseArea {
    //...
    onClicked: {
        console.log("Hello World");
        label.text = "Guten Abend!";
    }
}

Como alternativa, você mesmo pode definir propriedades e sinais ou acioná-los manualmente:

Item {
    //...
    property bool enabled: true
    signal clicked; // Dies ist die Definition des Signals
    MouseArea {
        anchors.fill: parent
        onClicked: if (enabled) {
            parent.clicked(); // Hiermit wird das Signal ausgelöst
        }
    }
}

Vantagens sobre outras abordagens

QWidgets

Tradicionalmente, as interfaces baseadas em Qt foram desenvolvidas usando o sistema QWidget usando C ++. A vantagem do QML está, por um lado, na programação declarativa, que traz uma vantagem na clareza do código do programa. As animações em particular são mais fáceis de implementar usando QML. Por outro lado, as superfícies QML da versão 5.0 são desenhadas por um gráfico de cena baseado em OpenGL . Isso traz maior velocidade de execução e reduz o risco de erros de exibição.

HTML

No campo dos aplicativos móveis, o HTML está se tornando cada vez mais importante. Os pontos fortes significativos de QML ou Qt Quick em comparação com HTML como base para interfaces de usuário são:

Vinculações de propriedade

Diferentes elementos em interfaces de usuário são frequentemente interdependentes, especialmente em termos de forma, por ex. B. se um elemento tem uma largura variável, mas um elemento irmão deve sempre usar o espaço horizontal restante no elemento pai. O que só é possível em HTML com CSS, se é que só é possível com truques, é possível em QML com a definição de propriedade simples "width: parent.width - otherElement.width".

Posicionamento

O posicionamento dos elementos no QtQuick é possível de três maneiras diferentes: Posicionamento absoluto, relacionado ao elemento pai, layouts e as chamadas âncoras. Embora os layouts já sejam algo que não existe nesta forma em HTML, o que significa que os layouts são uma força do QML em si, o poder do QML realmente entra em ação com as âncoras. Cada elemento gráfico QML possui várias âncoras, nomeadamente superior , inferior , esquerda , direita , verticalCenter e horizontalCenter . Qualquer âncora de outro elemento pode ser atribuída como um valor a cada uma dessas âncoras por meio de associação de propriedade (âncoras horizontais, é claro, apenas outras âncoras horizontais, âncoras verticais apenas outras âncoras verticais). Então, z. B. o meio de um elemento na borda direita de outro objeto pode ser alinhado verticalmente e centralmente:

O resultado

Rectangle {
    id: rect1
    color: "green"
    width: 100
    height: 100
}

Rectangle {
    id: rect2
    color: "red"
    width: 20
    height: 20
    anchors.horizontalCenter: rect1.right
    anchors.verticalCenter: rect1.verticalCenter
}

Orientação do objeto

Além dos tipos de elemento padrão, é possível em QML definir seus próprios tipos de elemento, os chamados componentes. Isso funciona criando um arquivo QML comum com o nome do componente e simplesmente criando um elemento em outro arquivo QML com o nome do componente como o tipo de elemento (os arquivos devem estar no mesmo diretório). O elemento agora é programaticamente transparente, uma instância do código que está no arquivo QML do componente correspondente. Como resultado, os segmentos de código usados ​​repetidamente podem ser trocados e reutilizados de acordo com o princípio da orientação a objetos. Para aplicações mais complexas, também é possível vincular suas próprias funcionalidades desenvolvidas em C ++ com QML. Por exemplo, qualquer instância de QObject pode ser atribuída a um contexto QML, cujos atributos e métodos podem ser acessados ​​no código QML. Graças ao conceito de slot de sinal , que é usado em toda a biblioteca Qt, os valores de atributo QML também podem ser vinculados a valores de atributo C ++ e atualizados automaticamente quando são alterados. Além disso, você pode desenvolver seus próprios tipos de elemento QML com qualquer funcionalidade em C ++ ou expandir os elementos QML existentes. Ambas as rotinas de desenho já usadas para QWidgets e o gráfico de cena mais recente, baseado em OpenGL, estão disponíveis para elementos visuais.

A principal vantagem do HTML é que ele é mais amplamente usado e mais conhecido.

Links da web

• Documentação de referência QML
• Introdução à linguagem QML
• Exemplos e demonstrações de QML
• Tutorial QML

Evidência individual

1. ↑ https://www.qt.io/blog/qt-5.15-released
2. ↑ http://doc.qt.io/QtQuickCompiler