**Course Title:** QML Application Development **Section Title:** JavaScript in QML **Topic:** Enhancing your app with JavaScript for dynamic interactions.(Lab topic) In this lab, we'll explore how to enhance your QML app with dynamic interactions using JavaScript. We'll dive into the world of dynamic behavior, exploring how to create interactive UI elements, handle events, and integrate with QML components. ### 1. Creating Dynamic UI Elements One of the most powerful features of JavaScript in QML is the ability to create dynamic UI elements. This allows you to create templates for UI components and instantiate them programmatically. Let's create a simple example where we dynamically create a `Rectangle` component with a random color. ```qml import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 640 height: 480 title: qsTr("Dynamic UI Elements") function createRectangle(x, y, width, height, color) { var rect = rectangleComponent.createObject(container); rect.x = x; rect.y = y; rect.width = width; rect.height = height; rect.color = color; } Component { id: rectangleComponent Rectangle { } } Item { id: container } Component.onCompleted: { for (var i = 0; i < 10; i++) { createRectangle(Math.random() * 600, Math.random() * 400, 50, 50, getRandomColor()); } } function getRandomColor() { return Qt.rgba(Math.random(), Math.random(), Math.random(), 1); } } ``` In this example, we define a `createRectangle` function that takes in the properties of the rectangle and creates a new instance of the `Rectangle` component using the `createObject` method. We then use the `Component.onCompleted` handler to create 10 rectangles with random positions, sizes, and colors. ### 2. Handling Events with JavaScript QML provides a range of event handlers that allow you to respond to user input, such as mouse clicks, key presses, and gestures. However, sometimes you need more fine-grained control over event handling, and that's where JavaScript comes in. Let's create an example where we use JavaScript to handle a mouse click event on a `Rectangle` component. ```qml import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 640 height: 480 title: qsTr("Event Handling with JavaScript") Rectangle { id: rect width: 100 height: 100 color: "blue" MouseArea { anchors.fill: parent onClicked: { console.log("Mouse clicked!"); rect.color = "red"; } } } Component.onCompleted: { rect.mouseArea.clicked.connect(function() { console.log("Mouse clicked with JavaScript!"); }); } } ``` In this example, we define a `Rectangle` component with a `MouseArea` that handles the mouse click event. We then use the `Component.onCompleted` handler to connect a JavaScript function to the `clicked` signal of the `MouseArea`. When the user clicks on the rectangle, both the QML and JavaScript event handlers will be triggered. ### 3. Integrating JavaScript with QML Components One of the most powerful features of JavaScript in QML is the ability to integrate with QML components. This allows you to create complex, dynamic behavior that combines the strengths of both QML and JavaScript. Let's create an example where we use JavaScript to animate a `Rectangle` component. ```qml import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 640 height: 480 title: qsTr("Integrating JavaScript with QML Components") Rectangle { id: rect width: 100 height: 100 color: "blue" Behavior on x { SmoothedAnimation { duration: 500 } } } Component.onCompleted: { function animate() { rect.x = 200; setTimeout(function() { rect.x = 0; animate(); }, 1000); } animate(); } } ``` In this example, we define a `Rectangle` component with a behavior animation that smooths the transition of the x property. We then use the `Component.onCompleted` handler to start an animation loop that moves the rectangle back and forth. This example demonstrates how to integrate JavaScript with QML components to create complex, dynamic behavior. ### Resources For more information on enhancing your QML app with JavaScript for dynamic interactions, check out the following resources: * [Qt Documentation: JavaScript in QML](https://doc.qt.io/qt-5/qml-javascript.html) * [Qt Documentation: QML Animation and Transitions](https://doc.qt.io/qt-5/qml-animation.html) ### Exercise Create a QML app that uses JavaScript to dynamically create and animate UI elements. For example, create a app that generates random shapes and animates them across the screen. **What's Next?** In the next topic, we'll explore "Introduction to models: ListModel, XmlListModel, and Custom Models." This topic will cover the basics of data models in QML, including how to create and use models, and how to integrate them with views. **Leave a Comment** If you have any questions or feedback, please leave a comment below. This helps us understand what you need and improve the course material.