Defining the UI

You can define the UI by adding a QML file that declares the UI components of your new app.

1. Click the Edit icon on the left side, right-click the QtApp folder in the Projects view, then choose Add New... in the popup menu.
2. In the New File dialog, select Qt in the Files and Classes list, then QML File (Qt Quick 2) in the list of file types (shown in the middle), then click Choose...
3. In the Location page of the New QML File dialog, name the file main, then click Next.
4. In the Summary page, click Finish.

   The main.qml file is opened for editing.

5. Delete the default file content and replace it with the following:

   import QtQuick 2.0
   
   Rectangle {
       width: 360
       height: 360
       Text {
           text: qsTr("Hello World")
           anchors.centerIn: parent
       }
   }
   

   This QML code defines a simple UI consisting of a box displaying Hello World.

   Note: The QNX Apps and Media reference image has a similar HTML5 sample that displays "Hello World" but here, we're writing an app with a basic UI to demonstrate Qt app development and deployment. In fact, you can replace the QML code here with whatever you like to display a different UI.
6. Save the file.