Qt 5.11 - First Steps with QML

पहला कदम QML के साथ




qt

पहला कदम QML के साथ

एक QML दस्तावेज़ बनाना

क्यूएमएल दस्तावेज़ एक उच्च पठनीय, संरचित लेआउट के साथ वस्तुओं के पदानुक्रम को परिभाषित करता है। प्रत्येक QML दस्तावेज़ में दो भाग होते हैं: एक आयात अनुभाग और एक वस्तु घोषणा खंड। प्रकार और कार्यक्षमता उपयोगकर्ता इंटरफ़ेस के लिए सबसे आम QtQuick आयात में प्रदान की QtQuick हैं।

आयात और QtQuick मॉड्यूल का उपयोग करना

क्यूटी क्विक मॉड्यूल का उपयोग करने के लिए, क्यूएमएल दस्तावेज़ को इसे आयात करने की आवश्यकता है। आयात सिंटैक्स इस तरह दिखता है:

import QtQuick 2.3

क्यूटी क्विक प्रदान करने वाले प्रकार और कार्यक्षमता का उपयोग अब QML दस्तावेज़ में किया जा सकता है!

एक वस्तु पदानुक्रम को परिभाषित करना

क्यूएमएल दस्तावेज़ में ऑब्जेक्ट की घोषणा दृश्य दृश्य में प्रदर्शित होने वाली चीज़ों को परिभाषित करती है। Qt Quick सभी उपयोगकर्ता इंटरफेस के लिए बुनियादी बिल्डिंग ब्लॉक प्रदान करता है, जैसे कि चित्र और पाठ प्रदर्शित करने के लिए और उपयोगकर्ता इनपुट को संभालने के लिए ऑब्जेक्ट।

एक साधारण वस्तु घोषणा एक रंगीन आयत हो सकती है जिसमें कुछ पाठ केंद्रित होते हैं:

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

यह रूट Rectangle ऑब्जेक्ट के साथ एक ऑब्जेक्ट पदानुक्रम को परिभाषित करता है जिसमें एक चाइल्ड Text ऑब्जेक्ट है। Text ऑब्जेक्ट के parent स्वचालित रूप से Rectangle सेट हो जाते हैं, और इसी तरह, QML द्वारा Rectangle वस्तु के children संपत्ति में Text वस्तु को जोड़ा जाता है।

यह सब एक साथ डालें

उपरोक्त उदाहरण में प्रयुक्त Rectangle और Text प्रकार दोनों ही QtQuick आयात द्वारा प्रदान किए गए हैं। आयात और वस्तु घोषणा को एक साथ रखते हुए, हमें पूर्ण QML दस्तावेज़ मिलता है:

import QtQuick 2.3

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

यदि हम उस दस्तावेज़ को "HelloWorld.qml" के रूप में सहेजते हैं, तो हम इसे लोड और प्रदर्शित कर सकते हैं।

QML प्रोजेक्ट बनाना और चलाना

क्यूएमएल दस्तावेज़ द्वारा परिभाषित चित्रमय दृश्य प्रदर्शित करने के लिए, इसे क्यूटी निर्माता के साथ लोड किया जा सकता है। इस तरह के एक के रूप में सरल यूआई फ़ाइलों के लिए, फ़ाइल> नई फ़ाइल या परियोजना> अनुप्रयोग> क्यूटी निर्माता से क्यूटी क्विक यूआई चुनें

हरे रंग के रन बटन को दबाने से एप्लिकेशन चलता है। आपको टेक्स्ट को हैलो, वर्ल्ड देखना चाहिए ! एक लाल आयत के केंद्र में।

Qt Creator में प्रोजेक्ट बनाने और चलाने के बारे में अधिक जानकारी के लिए, निम्नलिखित पृष्ठों पर जाएँ:

नियंत्रणों के साथ QML अनुप्रयोग बनाना

जबकि क्यूटी क्विक बुनियादी चित्रमय तत्व प्रदान करता है, क्यूटी क्विक कंट्रोल एक अनुप्रयोग के भीतर उपयोग के लिए तैयार क्यूएमएल प्रकार प्रदान करता है।

ApplicationWindow प्रकार सम्मिलित करना ApplicationWindow को बनाने के लिए एक अच्छा प्रारंभिक बिंदु है। एक एप्लिकेशन UI में यह मूल लेआउट है:

प्रत्येक क्षेत्र के भीतर, एक अनुप्रयोग बनाने के लिए विभिन्न नियंत्रणों को जोड़ा और जोड़ा जा सकता है। उदाहरण के लिए, निम्नलिखित स्निपेट एक मूल अनुप्रयोग है जो पिछले लेआउट का उपयोग करता है:

//import related modules
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

//window containing the application
ApplicationWindow {

    //title of the application
    title: qsTr("Hello World")
    width: 640
    height: 480

    //menu containing two menu items
    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    //Content Area

    //a button in the middle of the content area
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

एप्लिकेशन में दो मेनू आइटम और बीच में एक बटन है। एक्ज़िट मेनू आइटम पर क्लिक करने से एप्लिकेशन बंद हो जाता है।

विभिन्न नेविगेशन तरीके और विभिन्न नियंत्रण भी हैं जैसे बटन और स्लाइडर्स उपलब्ध हैं। निम्न उदाहरण Qt क्रिएटर से उपलब्ध हैं और विभिन्न नियंत्रण और लेआउट प्रदर्शित करते हैं।

क्यूएमएल कैसे काम करता है यह देखने के लिए इस सरल हेलो वर्ल्ड एप्लीकेशन पर स्निपेट्स को कॉपी और पेस्ट करें।

उपयोगकर्ता इनपुट को संभालना

उपयोगकर्ता इंटरफ़ेस को परिभाषित करने के लिए QML का उपयोग करने के महान लाभों में से एक यह है कि यह उपयोगकर्ता इंटरफ़ेस डिजाइनर को यह परिभाषित करने की अनुमति देता है कि आवेदन को सरल जावास्क्रिप्ट अभिव्यक्तियों के साथ घटनाओं पर कैसे प्रतिक्रिया करनी चाहिए। क्यूएमएल में, हम उन घटनाओं को signals रूप में संदर्भित signals और इन संकेतों को सिग्नल हैंडलर द्वारा नियंत्रित किया जाता है।

उदाहरण के लिए, निम्नलिखित उदाहरण पर विचार करें:

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }
}

इस उदाहरण को "ClickableHelloWorld.qml" के रूप में सहेजा जा सकता है और qmlscene के साथ चलाया जा सकता है। जब भी उपयोगकर्ता विंडो में कहीं भी क्लिक करेगा, तो आयत लाल से नीले रंग में बदल जाएगी। ध्यान दें कि MouseArea टाइप स्पर्श घटनाओं के लिए क्लिक किए गए सिग्नल का भी उत्सर्जन करता है, इसलिए यह कोड मोबाइल डिवाइस पर भी काम करेगा।

कीबोर्ड उपयोगकर्ता इनपुट को समान रूप से एक सरल अभिव्यक्ति के साथ संभाला जा सकता है:

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

फोकस को स्वीकार करके, जब भी रिटर्न कुंजी दबाया जाता है, तो रंग को नीले रंग में बदला जा सकता है।

संपत्ति बाँधना

ऑब्जेक्ट और उनके गुण QML दस्तावेज़ में परिभाषित ग्राफ़िकल इंटरफ़ेस का आधार बनाते हैं। क्यूएमएल भाषा विभिन्न तरीकों से गुणों को एक-दूसरे से बंधने की अनुमति देती है, जिससे अत्यधिक गतिशील उपयोगकर्ता इंटरफेस सक्षम होता है।

निम्नलिखित उदाहरण में, प्रत्येक बच्चे के Rectangle की ज्यामिति मूल Rectangle से जुड़ी होती है। यदि माता-पिता के Rectangle की ज्यामिति को बदलना है, तो प्रत्येक बच्चे के Rectangle की ज्यामिति स्वचालित रूप से संपत्ति के संतुलन के कारण अपडेट हो जाएगी।

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
    }
}

एनिमेशन

गुणों को गतिशील रूप से एनिमेशन के माध्यम से भी अपडेट किया जा सकता है। QtQuick आयात विभिन्न एनीमेशन प्रकार प्रदान करता है जिनका उपयोग संपत्ति के मूल्य में परिवर्तन को चेतन करने के लिए किया जा सकता है। निम्नलिखित उदाहरण में, एक संपत्ति एनिमेटेड है जो तब एक Text क्षेत्र में प्रदर्शित होती है:

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

प्रदर्शित किया जा रहा मूल्य समय-समय पर 0 से 150 तक भिन्न होगा।

पुनः उपयोग के लिए कस्टम QML प्रकार को परिभाषित करना

क्यूएमएल में सबसे महत्वपूर्ण अवधारणाओं में से एक है टाइप री-यूज। एक एप्लिकेशन में संभवतः कई दृश्य प्रकार होंगे जो सभी समान हैं (उदाहरण के लिए, कई पुश बटन), और क्यूएमएल इस तरह की चीजों को कोड दोहराव को कम करने और पठनीयता को अधिकतम करने के लिए पुन: प्रयोज्य, कस्टम प्रकार के रूप में परिभाषित करने की अनुमति देता है।

उदाहरण के लिए, कल्पना करें कि डेवलपर Button.qml फ़ाइल में एक नया Button प्रकार परिभाषित करता है:

// Button.qml
import QtQuick 2.3

Rectangle {
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

इस प्रकार अब आवेदन में कई बार फिर से उपयोग किया जा सकता है, इस प्रकार है:

// application.qml
import QtQuick 2.3

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

इस प्रकार, मॉड्यूलर यूजर इंटरफेस प्रकार एक आवेदन के भीतर इकट्ठे और पुन: उपयोग किए जाते हैं।

अपने पुन: प्रयोज्य घटकों को विकसित करने के तरीके के बारे में अधिक जानकारी के लिए QML ऑब्जेक्ट देखें।

यहाँ से कहाँ जाएं

अब जब आपने QML को कार्रवाई में देखा है, तो आप अपना अगला कदम उठाने के लिए तैयार हैं। अनुवर्ती पेज आपको QML के साथ आपकी यात्रा में ले जाएगा।