A little about the elements Part one

Tutorials
#1

This time, I will tell you about several elements of QML. Elements allow you to build the user interface of an application. The very first and perhaps the most important element in FLIPABIT is the Item.

Item{} in QML is a basic type of element that serves as a simple container for other elements. It is most commonly used as the main building block of the interface in QML, as it allows for the organization and structuring of other components and visual elements. Each of your applications has a whole hierarchy of elements.

Writing code in FLIPABIT is required only in two cases:

  1. You want to create your own component.
  2. The program lacks solutions for your business process.

One more thing: a component can be either visual or non-visual, although in the case of FLIPABIT, the component container is always visual. It’s not necessary to use the new component function to write your own subroutine (component).

2024-09-25_18-52-08

You can use any ready-made component to write code.
Let’s start with a regular button.

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    Button {
        text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
    }
}

2024-11-24_22-01-17

In this example, a button is created within the Item{} container, and its properties are set to default, but we can change them.

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    Button {
        width: 400 
        height: 300    
        text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
    }
}

2024-11-24_22-00-12
This is how we add new properties to the button. In this example, we changed its size. We can also fill the entire space of the container using anchors.fill: parent.

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    Button {
    anchors.fill: parent 
    text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
    }
}

2024-11-24_21-59-32

Now the button will be the same size as the parent container.
With the same success we can fill either only the width or only the height of the parent element width: parent.width, height: parent.height, and also without problems and unnecessary calculations fix the button in the middle of the element anchors.centerIn: parent.

Each element can be given its own identifier, so you can easily access the elements without using long structures and paths.

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    
    Button {
	    id: buttonOne
	    anchors.left: parent.left
	    anchors.bottom: parent.bottom
	    width: parent.width / 2 - 5
        text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
    }
    Button {
	    id: buttonTwo
	    anchors.right: parent.right
	    anchors.bottom: parent.bottom
	    width: parent.width / 2 - 5
        text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
    }
}

Since these are buttons, they should at least respond to a click and perform some action.

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    Text {
        id: myText
        text: "НаТмитС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ"
        font.family: "Arial"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        lineHeight: 1.5
        anchors.centerIn: parent
    } 
    Button {
        id: buttonOne
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        height: 40
        width: parent.width / 2 - 5
        text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
        onClicked: {myText.text = text}
    }
    Button {
	    id: buttonTwo
	    anchors.right: parent.right
	    anchors.bottom: parent.bottom
	    height: 40
	    width: parent.width / 2 - 5
        text:"Пока ΠΌΠΈΡ€!"
        onClicked: {myText.text = buttonTwo.text}
    }
}

2024-11-27_19-13-39

I added a Text{} element, anchored it to the middle of the container, positioned the buttons at the bottom of the container, and attached a mouse click event handler to the button. Now let’s break down the operation specified in the click handler.

onClicked: {myText.text = text}
onClicked: {myText.text = buttonTwo.text}

Both variants assign a new value to the text property of the Text{} element. As you may have noticed, in the first assignment variant, only a reference to the text property is used. If the property that you want to assign to element B is located within element A, then specifying the full path or referencing the identifier is not necessaryβ€”simply specify the property name. However, if the assigned value is located in another element, you need to provide a reference to it via the element’s identifier, and this rule also applies in the opposite direction.

Let’s try a different option.

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    property string myVar: "НаТмитС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ"

    Text {
        id: myText
        text: myVar
        font.family: "Arial"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        lineHeight: 1.5
        anchors.centerIn: parent
    } 
    Button {
        id: buttonOne
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        height: 40
        width: parent.width / 2 - 5
        text:"ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
        onClicked: myVar = text
    }
    Button {
	    id: buttonTwo
	    anchors.right: parent.right
	    anchors.bottom: parent.bottom
	    height: 40
	    width: parent.width / 2 - 5
        text:"Пока ΠΌΠΈΡ€!"
        onClicked: myFunction(text)
    }
    function myFunction(text){
        myVar = text;
    }
}

In this example, I used the myVar variable to display the text.

onClicked: myVar = text
onClicked: myFunction(text)

Again, we have two options for handling the click. In the first case, I simply assigned a value to a variable, while in the second case, I called a function and passed it a value which the function then assigned to a variable.

But what if we need a lot of buttons, right, we will use repeater

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12

Item{

Text {
        id: myText
        text: "НаТмитС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ"
        font.family: "Arial"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        lineHeight: 1.5
        anchors.centerIn: parent
    } 

    RowLayout {
        anchors.bottom: parent.bottom
        Layout.alignment: Qt.AlignHCenter
        Layout.fillWidth: true
        Repeater {
            model: ["пСрвая ΠΊΠ½ΠΎΠΏΠΊΠ°", "вторая ΠΊΠ½ΠΎΠΏΠΊΠ°", "Ρ‚Ρ€Π΅Ρ‚ΡŒΡ ΠΊΠ½ΠΎΠΏΠΊΠ°"] 
            Button {
                text: modelData
                onClicked: myText.text = text
            }
        }
    }
}

2024-11-27_19-17-20

In this example, I used elements such as RowLayout, Repeater, and Model.

RowLayout - This is a powerful tool for creating horizontal layouts in QML. It allows easy management of element placement, provides flexibility, and supports adaptive interfaces, making it indispensable when developing applications with Qt.
Repeater - This element repeats a specified item, creating multiple instances based on an array of data from the Model.
Model - This is a basic element for all data models.

1 Like
НСмного ΠΎΠ± элСмСнтах Ρ‡Π°ΡΡ‚ΡŒ пСрвая
#2

Hi Vladimir_PV. A wonderful job what you did up there, but I have a little question for you.
How do you interact with this new element from another widget? is it by its ID or by the elements name?
Show my how to change the elements text from another widget using only code, not actions.

#3

Π”Π°, я ΡΡΡ‹Π»Π°ΡŽΡΡŒ Π½Π° ID элСмСнта.
Yes, I am referencing the element ID.

#4

НС понял, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅?
I don’t understand what exactly you want?

1 Like
#5

What I need to know is how to get a reference to this new element in another widget
Like
document.childByName("???")

#6

2024-11-29_20-11-26

versia_1.flp (6.4 KB)
versia_2.flp (6.4 KB)

ver_1

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12

Item{
    property string myVar: contentUi.getValueByKey("myVar");
    
    Text {
        id: myText
        text: myVar
        font.family: "Arial"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        lineHeight: 1.5
        anchors.centerIn: parent
    } 
    
    Timer{
        id: myTimer
        interval: 100 
        repeat: true
        onTriggered: {
            myVar = contentUi.getValueByKey("myVar")
        }
    }
    
    Component.onCompleted: {
        myTimer.start();
    }
}

ver_2

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12

Item{

    Text {
        id: myText
        text: ""
        font.family: "Arial"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        lineHeight: 1.5
        anchors.centerIn: parent
    } 
    
    Timer{
        id: myTimer
        interval: 100 
        repeat: true
        onTriggered: {
            myText.text = contentUi.getValueByKey("myVar")
        }
    }
    
    Component.onCompleted: {
        myTimer.start();
    }
}

Для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.
Timer - создаю Ρ‚Π°ΠΉΠΌΠ΅Ρ€ ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽ Π΅ΠΌΡƒ дСйствиС (ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅)
Component.onCompleted - Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽ Ρ‚Π°ΠΉΠΌΠ΅Ρ€ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Use a special table to transfer data.
Timer - create a timer and specify an action for it (update data)
Component.onCompleted - start the timer after loading the component.

#7

Thank you so much, I’ve tried this way before, but it wasn’t what I’m hoping for.
I wished If there were some direct connection between elements like flipabit’s widgets.

#8

ВсС Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ, Ρƒ всСх Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ
ВмСсто Ρ‚Π°ΠΉΠΌΠ΅Ρ€Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚ΡŒ события.

All widgets work in roughly the same way, they all have a data container
Instead of a timer, you can use event listeners.

import QtQuick 2.15

Item{

    Text {
        id: myText
        text: "ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!"
        font.family: "Arial"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        lineHeight: 1.5
        anchors.centerIn: parent
    } 
    
    Connections {
        target: widget.scriptAdaptor  // Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠ»ΡƒΡˆΠ°Ρ‚ΡŒ сигналы ΠΎΡ‚ contentUi
        onEventChanged: {
            myText.text = contentUi.getValueByKey("myVar");  // ОбновляСм тСкст ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ значСния
        }
    }
}
#9

Thank you so much for the help? I’ve worked with elements before and used some work around to solve my problem and it worked with me.
Anyway, I can’t wait to read your next tutorial part two.

Back to Flipabit >
Copyright Β© 2018. Flipabit Team. All rights reserved.