πŸ’»
Programming Concept
  • πŸ‘¨β€πŸ”¬About Me
  • πŸ“—C++ STL Concept 2023
    • πŸ“–STL in CPP ( Part I)
    • πŸ“–STL in CPP ( Part II)
    • πŸ“–STL in CPP ( Part III )
    • πŸ“–STL in CPP ( Part IV )
    • πŸ“–STL in CPP ( Part V )
    • πŸ“–STL in CPP ( Part VI )
    • πŸ“–STL in CPP ( Part VII )
  • ✏️Pointers in C / C++
    • πŸ“–Pointers in details
  • πŸ“˜Strings in CPP 2023
  • πŸ•žThread in C++ 2023
  • πŸ““Smart Pointer in C++ 2023
  • Basic C++ Topics
    • πŸ’ΌType Casting in C++ 2023
  • πŸ’»Advanced C++ Programming
    • πŸŽ“Topics (Syllabus)
    • πŸ§‘β€πŸŽ“Inheritance and Polymorphism
    • πŸ–ŠοΈException Handling
    • πŸƒRuntime Type Information
    • πŸ“”An Overview of Templates
    • πŸ“‘Template in C++
  • πŸ’»Embedded Linux
    • πŸ–₯️Embedded Linux OS
      • Build Yocto Project Step By Step
      • How to install apt-get to the Yocto Project image
      • Installing gcc/g++ toolchain in yocto project
      • Installing GDB in yocto project
      • Installing ssh-server-dropbear for embedded linux in yocto project
      • Add Python To A Build
      • Add Boost To A Build
      • Adding Valgrind To Build
      • How To Add A Custom App To A Yocto Build
      • Raspberry Pi
    • πŸ“ΆCommunication Protocols
      • ✏️Working With I2C using c++
      • πŸ“”SPI Implementation with source code in C++
      • πŸ““Linux Serial Ports Using C/C++
      • πŸ–±οΈUART
      • πŸ–¨οΈUniversal GPIO Access
  • πŸ§‘β€πŸ’»QT QML
    • πŸ“˜QT QML Concept 2023
      • Why Qt Framework and QML
      • Sqlite3 for qtquick application
      • How To Install sqlite3 in windows 11 || Windows 10
      • Signals and Slots in Qt QML
      • Working with Signals and Slots in QML
      • Sorting QML ListModels
      • ListView In QML With Section Delegate
      • Registration of custom enum in QML
      • Registering a QML Type as a Singleton object
      • Using enumerations in QML without C ++
      • Registering a Singleton object to use β€œStatic” methods in QML
      • Connecting JavaScript files to other JavaScript files in a Qt / QML project
      • Positioning in Qt QML with anchors
      • TextInput validators in Qt Qml
      • Qt Qml Abstract Item Model using C++
      • Qt QML List Model
      • How to Register your C++ Class as a QML Type
      • Jabra Speaker Connect Qt Project
      • Qt | One article summarizing QObject
  • ▢️QT Concept
    • ℹ️Icon button
    • πŸ’»Register QML Singletone in CP
Powered by GitBook
On this page
  • Example
  • main.qml
  • Conclusion

Was this helpful?

  1. QT QML
  2. QT QML Concept 2023

Connecting JavaScript files to other JavaScript files in a Qt / QML project

In the framework of the project on QML there is an opportunity not only to connect JavaScript files in QML files, but also in other JavaScript files. The syntax for connecting these files will be similar to that used in QML files.

For example, a variant of connecting a JavaScript file in a QML file

import "first.js" as FirstJs

Then, how to connect a JavaScript file to another JavaScript file will differ only by the presence of a dot before this line

.import "first.js" as FirstJs

Example

We are given a small project, in which there are the following files

  • main.qml

  • first.js

  • second.js

The next task is to connect first.js to main.qml and call a function from this JavaScript file, which will call the function from second.js , which will be connected in the file first.js .

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
 
import "first.js" as FirstJs // Connecting first.js
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Button {
        anchors.centerIn: parent
        text: qsTr("Click Me")
 
        // By clicking the button, we call the function from the first.js file
        onClicked: FirstJs.func()
    }
}

second.js

This file has only a function for outputting the Second line to the console. This function will need to be called in the first.js file

.pragma library
 
function func() {
    console.log("Second")
}

first.js

.pragma library
.import "second.js" as Second // Connecting second.js
 
function func() {
    console.log("First")
    Second.func() // Calling a function from file second.js
}

Conclusion

As a result, when the button is pressed, the function from the file first.js will be called, which will output its message to the console and call the function from file second.js .

The following message will be displayed in the console:

qml: First
qml: Second
PreviousRegistering a Singleton object to use β€œStatic” methods in QMLNextPositioning in Qt QML with anchors

Last updated 1 year ago

Was this helpful?

πŸ§‘β€πŸ’»
πŸ“˜