Write your App Logic & Use Native Code

JavaScript for Fast Prototyping

JavaScript is the main choice for app logic. You can write it inline in QML and also use separate JS files. Here is a more detailed guide on this topic: JavaScript Expressions in QML Documents

For this quick overview, we provide you with a code quick example:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   id: app

   property int myValue: 0
   property string highLow: "low"

   NavigationStack {

     Page {
       title: "JavaScript"

       AppText {
         anchors.centerIn: parent
         // Property bindings are JavaScript
         text: app.myValue + " is really " + app.highLow
         color: app.highLow == "low" ? "green" : "red"
       }

       AppButton {
         text: "+2"
         flat: false
         anchors.horizontalCenter: parent.horizontalCenter
         onClicked: {
           // Code in signal handlers is JavaScript
           var plus = 2
           app.increaseValue(plus)
         }
       }
     }
   }

   // Functions are written in JavaScript
   function increaseValue(amount) {
     app.myValue += amount
     if(app.myValue >= 10) {
       app.highLow = "high"
     }
   }
 }

Basically anytime you write any form of logic in QML, you are using JavaScript!

C++ for Highly Performance Critical Code

C++ is simply king when it comes to performance. You have the option to make use of it if you need to. We have written a detailed blog post how you can do this: How to Expose a Qt C++ Class with Signals and Slots to QML

The code from this blog post is also available as example app here: C++ QML Integration Demo App

There is also an additional example app that displays charts from a C++ model: C++ Backend Charts Demo App

Native Code for Special Use-Cases or Native Libraries

If your app requires special native libraries or a native device feature that V-Play does not yet provide, you can also include Objective C, Swift, Java or Kotlin code in your app. You can contact us at support@v-play.net if you need code examples for this.

Native Dialogs, Share, Contacts and more

The NativeUtils component provides convenient access to several native device features, such as native dialogs, alert sheets, phone contacts, native sharing, device camera and more.

Below is a list if the most important methods from NativeUtils:

displayAlertDialog Displays a native alert dialog with a given title, an optional description that can provide more details, an OK button and an optional Cancel button.
displayAlertSheet Displays a modal alert sheet with the specific options. It uses an AlertDialog on Android and a UIActionSheet on iOS.
displayCameraPicker Allows to take a photo by starting the native camera, if available.
displayDatePicker Allows to choose a date from a calendar by displaying a native date picker dialog, if available.
displayImagePicker Allows to choose a photo from the device by displaying the native image picker, if available.
displayMessageBox Displays a native-looking message box dialog with a given title, an optional description that can provide more details, an OK button and an optional Cancel button.
displayTextInput Displays a native-looking message input dialog with a given title, a description that can provide more details, a placeholder that is displayed as long as the input field is empty (optional) and a prefilled text.
getContacts Returns a list of all contacts including name and phone number.
openApp Tries to launch an app identified by launchParam on the device. The required parameter value depends on the platform.
openUrl Opens the urlString with the default application associated with the given URL protocol of the current platform.
sendEmail Opens the native email app prefilled with the given to receiver, subject and message.
share Opens the native share dialog with a given text and url.
storeContacts Stores one or more contacts to the device address book.

Useful Components for App Logic

Here you get a quick overview for components and concepts useful to create your app logic.

Timer for Timed Events

A Timer can be used for any logic that should either repeat, be delayed or last for a specific time interval.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   id: app

   property int seconds: 0

   NavigationStack {

     Page {
       title: "Timer"

       AppText {
         anchors.centerIn: parent
         text: "Seconds " + seconds
       }

       Timer {
         running: true   // This starts the Timer immediately, you can also use start() and stop()
         repeat: true    // Will repeat to run permanent
         interval: 1000  // Timer interval after which the Timer triggers
         onTriggered: {  // Signal handler fired when Timer triggers, write your logic here
           app.seconds++
         }
       }
     }
   }
 }

Creating Objects Dynamically at Runtime

Sometimes you need to create objects at runtime, and not at app start. We will show you 2 different ways to do this.

First option is using a Loader component. You can find more examples in the Loader component documentation.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   id: app

   NavigationStack {

     Page {
       title: "Loader"

       AppButton {
         anchors.centerIn: parent
         text: "Create Rectangle"
         onClicked: {
           // Set the Loader source, as you can see this also supports web urls
           loader.source = "https://v-play.net/web-assets/RedRectangle.qml"
         }
       }

       Loader {
         id: loader
         // We can change properties of the loaded item in this signal handler
         onLoaded: {
           item.x = dp(50)
           item.y = dp(50)
         }
       }
     }
   }
 }

Second option is using functions to create components from JavaScript. You can find more detailed info on this here: Dynamic QML Object Creation from JavaScript

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   id: app

   NavigationStack {

     Page {
       id: page
       title: "Dynamic Creation"

       AppButton {
         anchors.centerIn: parent
         text: "Create Rectangle"
         onClicked: {
           // Create an object from the component, with page as parent and custom x/y properties
           rectangleComponent.createObject(page, {"x": 50, "y": 50});
         }
       }
     }
   }

   // For this example, we create an object from a Component. For using a qml file, see the link above.
   // A Component encapsulates a QML component definition, without actually creating it right away
   Component {
     id: rectangleComponent
     Rectangle {
       width: dp(100)
       height: dp(100)
       color: "red"
     }
   }
 }

QML Logic Basics

We also feature 2 very basic tutorials if you are interested in those topics. The were orignially written for the V-Play Game Engine but apply to QML in general:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support