Code Snippets for Apps

This page is a summary of common use-cases and shows how they are solved with the V-Play App Components. We try to extend this page with every update, if you have a good example that fits here, don't hesitate to send it to support@v-play.net and we will add it.

Code Snippet Overview

Listview Code Snippets

Make a ListView Cell Swipe-able

AppListViewSwipeOptionsContainer

Many apps allow to show additional options for list items by swiping them to the left or the right. Imagine a mail app that shows a list of mails. Clicking a mail will open it. But it's also possible to swipe it to the right to show additional options like deleting the mail or forwarding it.

The solution to create a swipe-able ListView like that requires two components:

  • The AppListView for showing the list items in a scroll-able view.
  • The SwipeOptionsContainer for making the items swipe-able and displaying options when swiping to the left or the right.

The following example shows a simple swipe-able list within a Page. To display the list items and the swipe option the SimpleRow and SwipeButton components are used. They are convenience types with a platform-specific look that can handle the most common use-cases:

iOS Android

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       title: "Swipe-able List"

       AppListView {
         anchors.fill: parent
         model: [
           { text: "Item 1" },
           { text: "Item 2" },
           { text: "Item 3" }
         ]

         delegate: SwipeOptionsContainer {
           id: container

           // the swipe container uses the height of the list item
           height: listItem.height
           SimpleRow { id: listItem }

           // set an item that shows when swiping to the right
           leftOption: SwipeButton {
             icon: IconType.gear
             height: parent.height
             onClicked: {
               listItem.text = "Option clicked"
               container.hideOptions() // hide button again after click
             }
           }
         }

       } // AppListView
     }

   }
 }

Add a New Row to a ListView Dynamically

AppListView

Each ListView displays its data based on a model. In the simplest case, this will be an array that holds data objects. Adding a row to the list then means adding a data object to the array model.

The following example displays a list view and a button that allows to add rows:

iOS Android

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       id: page
       title: "Add List Items"

       // the data model for the list
       property var dataModel: [
         { text: "Item 1" },
         { text: "Item 2" },
         { text: "Item 3" }
       ]

       // button to add an item
       AppButton {
         id: button
         anchors.horizontalCenter: parent.horizontalCenter
         text: "Add Row"
         onClicked: {
           // create and add new item
           var itemNr = page.dataModel.length + 1
           var newItem = { text: "Item "+itemNr }
           page.dataModel.push(newItem)

           // signal change in data model to trigger UI update (list view)
           page.dataModelChanged()
         }
       }

       // list view
       AppListView {
         id: listView
         anchors.top: button.bottom
         anchors.bottom: parent.bottom
         width: parent.width

         model: page.dataModel
         delegate: SimpleRow {}
       }
     }

   }
 }

Remove a Row from a ListView Dynamically

AppListView

Like in the previous example, the way to remove a list item is by modifying the data model of the ListView. If the model data is an array, this means removing data objects from the array.

The following example shows a ListView and a button that allows to remove a list item:

iOS Android

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       id: page
       title: "Remove List Items"

       // the data model for the list
       property var dataModel: [
         { text: "Item 1" },
         { text: "Item 2" },
         { text: "Item 3" },
         { text: "Item 4" },
         { text: "Item 5" },
         { text: "Item 6" },
         { text: "Item 7" },
         { text: "Item 8" },
         { text: "Item 9" }
       ]

       // button to add an item
       AppButton {
         id: button
         anchors.horizontalCenter: parent.horizontalCenter
         text: "Remove Row"
         onClicked: {
           // remove second item from the data model
           page.dataModel.splice(1, 1)

           // signal change in data model to trigger UI update (list view)
           page.dataModelChanged()
         }
       }

       // list view
       AppListView {
         id: listView
         anchors.top: button.bottom
         anchors.bottom: parent.bottom
         width: parent.width

         model: page.dataModel
         delegate: SimpleRow {}
       }
     }

   }
 }

Hide the Navigation Bar on a Specific Page

PageNavigationStack

Each NavigationStack automatically adds a NavigationBar that shows the current page title and other NavigationBarItems. By setting the Page::navigationBarHidden property to true, the navigation bar won't be shown for that page.

The following example shows a Page with a button that allows to show or hide the navigation bar:

iOS Android

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       id: page
       title: "Hide Navigation Bar"

       // this is the default, the NavigationStack shows a navigation bar for this page
       navigationBarHidden: false

       AppButton {
         anchors.centerIn: parent
         text: "Show/Hide Navigation Bar"

         // when clicked, we switch the navigationBarHidden property
         onClicked: page.navigationBarHidden = !page.navigationBarHidden
       }
     }

   }
 }

Add a Custom Title Item

PageNavigationStack

The NavigationStack shows the Page::titleItem of the currently active page in the navigation bar. This default title item is a simple Text that shows the Page::title. By overwriting the Page::titleItem you can replace the item.

The following example replaces the default title item to show an image together with the page title:

iOS Android

 import VPlayApps 1.0
 import QtQuick 2.5

 App {
   NavigationStack {

     Page {
       id: page
       title: "My Title"

       // we define a custom titleItem, that consists of an image and a title text
       titleItem: Row {
         spacing: dp(6)

         Image {
           anchors.verticalCenter: parent.verticalCenter
           height: titleText.height
           fillMode: Image.PreserveAspectFit
           source: "../assets/vplay-logo.png"
         }

         AppText {
           id: titleText
           anchors.verticalCenter: parent.verticalCenter
           text: page.title
           font.bold: true
           font.family: Theme.boldFont.name
           font.pixelSize: dp(Theme.navigationBar.titleTextSize)
           color: "orange"
         }
       } // titleItem
     }

   }
 }

Logic Code Snippets

Read and Parse JSON

XMLHttpRequest Element

To implement logic in QML we can simply add JavaScript code to our QML items. JavaScript already comes with features to load and parse JSON data. With the XMLHttpRequest Element we can load data from a file or web service. The JSON.parse function then allows us to convert the data to a JSON object.

The following example dynamically loads JSON data from a file and displays it in a list:

iOS Android

data.json

 [
   { "text": "Item 1" },
   { "text": "Item 2" },
   { "text": "Item 3" },
   { "text": "Item 4" },
   { "text": "Item 5" },
   { "text": "Item 6" },
   { "text": "Item 7" },
   { "text": "Item 8" },
   { "text": "Item 9" }
 ]

Main.qml

 import VPlayApps 1.0
 import QtQuick 2.5

 App {
   id: app

   // property will store data
   property var jsonData: null

   // we load the data when the component was successfully created
   Component.onCompleted: {
     loadJsonData()
   }

   NavigationStack {

     // we display the json data in a list
     ListPage {
       id: page
       title: "Parse JSON"
       model: app.jsonData
     }
   }

   // loadJsonData - uses XMLHttpRequest object to dynamically load data from a file or web service
   function loadJsonData() {
     var xhr = new XMLHttpRequest
     xhr.onreadystatechange = function() {
       if (xhr.readyState === XMLHttpRequest.DONE) {
         var dataString = xhr.responseText
         app.jsonData = JSON.parse(dataString)
       }
     }
     xhr.open("GET", Qt.resolvedUrl("data.json"))
     xhr.send()
   }
 }

Read and Parse XML

XmlListModel

The easiest way to work with XML data is by using the XmlListModel type. After we set the XML source and add some queries to identify the items and item attributes, we can directly use this model to display the items with components like AppListView or Repeater.

The following example sets up a XmlListModel to load data from a local XML file and displays the items in a ListPage:

iOS Android

data.xml

 <?xml version="1.0" encoding="UTF-8" ?>
 <data>
   <item>Item 1</item>
   <item>Item 2</item>
   <item>Item 3</item>
   <item>Item 4</item>
   <item>Item 5</item>
   <item>Item 6</item>
   <item>Item 7</item>
   <item>Item 8</item>
   <item>Item 9</item>
 </data>

Main.qml

 import VPlayApps 1.0
 import QtQuick.XmlListModel 2.0

 App {
   // model for loading and parsing xml data
   XmlListModel {
     id: xmlModel

     // set xml source to load data from local file or web service
     source: Qt.resolvedUrl("data.xml")

     // set query that returns items
     query: "/data/item"

     // specify roles to access item data
     XmlRole { name: "itemText"; query: "string()" }
   }

   NavigationStack {

     // we display the xml model in a list
     ListPage {
       id: page
       title: "Parse XML"
       model: xmlModel
       delegate: SimpleRow { text: itemText }
     }
   }
 }

Save Things in a Local Database

Storage

Setting up a local database requires the Qt Quick Local Storage features. In many cases, it is enough to have a simple key-value store. For this special use-case, V-Play offers the Storage type as a convenience wrapper around the Local Storage features. The stored values are also available after the user updated the app.

The following example stores the number of app starts in a local database and displays the current value:

iOS Android

 import VPlayApps 1.0
 import VPlay 2.0
 import QtQuick 2.5

 App {

   // define Storage item for loading/storing key-value data
   Storage {
     id: localStorage
     property int appStarts: 0

     // update app starts counter
     Component.onCompleted: {
       var nr = localStorage.getValue("appstarts")
       if(nr === undefined)
         nr = 0

       nr++
       localStorage.setValue("appstarts", nr)
       appStarts = nr
     }
   }

   // define page that shows nr of app starts
   NavigationStack {

     Page {
       id: page
       title: "Local Storage"

       AppText {
         anchors.centerIn: parent
         text: "App Starts: "+localStorage.appStarts
       }
     }
   }
 }

Maps Code Snippets

Display a Map

AppMapLocation Plugin

The AppMap component is an extension of the QML Map item and can display a map and optionally the user location. To actually display the map, it is required to specify a Plugin that provides the map data. QML currently supports the following plugins:

Note: To use the map features, make sure that the Qt Location components are installed. In case you are missing the module, use the MaintenanceTool in you V-Play installation folder to add it. Also include QT += positioning location to your project configuration in the *.pro file of your project.

The following example creates a Map that uses the MapBox Map plugin:

iOS Android

 import VPlayApps 1.0
 import QtLocation 5.5

 App {
   NavigationStack {

     Page {
       title: "Map Example"

       // show the map
       AppMap {
         anchors.fill: parent
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.mapping.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
             },
             PluginParameter {
               name: "mapbox.mapping.highdpi_tiles"
               value: true
             }]
         }

       }
     }
   }
 }

Show Markers on a Map

AppMapMapQuickItem

The AppMap component allows to show a map and optionally the user location. It is based on the QML Map item. There are several overlay items that can be placed on a map, for a list of all possible overlay items see here. The MapQuickItem type allows to place custom QML items on the map, which is what we will use for this example.

Note: To use the map features, make sure that the Qt Location components are installed. In case you are missing the module, use the MaintenanceTool in you V-Play installation folder to add it. Also include QT += positioning location to your project configuration in the *.pro file of your project.

The following QML code creates a map with a custom overlay at its center:

iOS Android

 import VPlayApps 1.0
 import QtLocation 5.5
 import QtQuick 2.5

 App {
   NavigationStack {

     Page {
       title: "Map Overlay"

       // show the map
       AppMap {
         anchors.fill: parent
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.mapping.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
             },
             PluginParameter {
               name: "mapbox.mapping.highdpi_tiles"
               value: true
             }]
         }

         MapQuickItem {
           // overlay will be placed at the map center
           coordinate: parent.center

           // the anchor point specifies the point of the sourceItem that will be placed at the given coordinate
           anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)

           // source item holds the actual item that is displayed on the map
           sourceItem: Rectangle {
             width: dp(150)
             height: dp(50)
             color: "white"

             AppText {
               text: "This is a marker!"
               anchors.centerIn: parent
             }
           }
         } // MapQuickItem
       } // AppMap
     }

   }
 }

Show User Position

AppMap

The AppMap already comes with a built-in feature to detect and display the user location. Set the AppMap::showUserPosition property to true to enable this feature. The app then tries to detect the user location and displays a marker on the map if possible. The position can only be displayed if the device is capable of getting a position from either GPS or other position sources.

Note: To use the map features, make sure that the Qt Location components are installed. In case you are missing the module, use the MaintenanceTool in you V-Play installation folder to add it. Also include QT += positioning location to your project configuration in the *.pro file of your project.

Note: Also make sure to add required configuration settings to AndroidManifest.xml on Android or the Project-Info.plist on iOS so your app may access gps location on the device.

The following example detects and displays the user location:

iOS Android

 import VPlayApps 1.0
 import QtLocation 5.5
 import QtQuick 2.5

 App {
   NavigationStack {

     Page {
       title: "User Position"

       // show the map
       AppMap {
         anchors.fill: parent
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.mapping.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
             },
             PluginParameter {
               name: "mapbox.mapping.highdpi_tiles"
               value: true
             }]
         }

         // configure the map to try to display the user's position
         showUserPosition: true
         zoomLevel: 13

         // check for user position initially when component is created
         Component.onCompleted: {
           if(userPositionAvailable)
             center = userPosition.coordinate
         }

         // once we successfully received the location, we zoom to the user position
         onUserPositionAvailableChanged: {
           if(userPositionAvailable)
             zoomToUserPosition()
         }
       }

     }
   }
 }

Styling Code Snippets

Add Blur Effect

FastBlur

Qt already provides several different QML types to create graphical effects like blur, drop shadow, opacity masks and more. See here for an overview of all effects: Graphical Effects

The following example creates a list page that uses a custom navigation bar background with an image. When the list is scrolled, the background image is blurred using the FastBlur effect:

iOS Android

 import VPlayApps 1.0
 import QtQuick 2.5
 import QtGraphicalEffects 1.0

 App {
   NavigationStack {

     ListPage {
       id: page
       title: "Blur Effect"

       // get the total height of status bar and navigation bar
       readonly property real barHeight: dp(Theme.navigationBar.height) + Theme.statusBarHeight

       // navigation bar is 100 percent translucent, the page then also fills the whole screen
       // this allows us to display a custom navigation bar background for this page
       navigationBarTranslucency: 1.0

       // list view only fills page area below navigation bar
       listView.anchors.topMargin: barHeight

       // add twenty dummy items to the list
       model: 20
       delegate: SimpleRow { text: "Item #"+index }

       // custom navigation bar background that shows an image
       Rectangle {
         id: background
         width: parent.width
         height: page.barHeight
         color: Theme.navigationBar.backgroundColor

         // add the image
         Image {
           id: bgImage
           source: "../assets/vplay-logo.png"
           anchors.fill: parent
           fillMode: Image.PreserveAspectCrop

           // the blur effect displays the image, we set the source image invisible
           visible: false
         }

         // apply blur effect
         FastBlur {
           id: blur
           source: bgImage
           anchors.fill: bgImage

           // the strength of the blur is based on the list view scroll position
           radius: Math.max(0, Math.min(64, page.listView.contentY))
         }
       } // Rectangle
     }// ListPage

   }
 }

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
Sign up for Free and start developing right away!
I want to make Games
I want to make Apps
Game Development
Cross-Platform, Any Resolution

Use one IDE to deploy to all supported platforms, including iOS and Android, from a single code base.

Support all screen resolutions, aspect ratios and sizes with auto-adapting UI elements, smart scene scaling and memory efficient asset selection.

Learn More

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Multiplayer

V-Play Multiplayer supports both real-time and turn-based gameplay, so you can use it to make many different types of cross-platform multiplayer games. It's perfect for making player-vs-player games like 'Words with Friends' or games for a large amount of players, such as 'Clash of Clans'.

Learn More Video

Highscores & Achievements

The V-Play Game Network is a cross-platform gaming service that allows players around the world to compare game highscores and achievements. Players can also challenge each other across multiple platforms and share their progress on Facebook.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code.

import QtQuick 2.0
import VPlay 2.0

GameWindow {
  Scene {
    
    SimpleButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Level Editor

The LevelEditor can be used during development to create and modify levels for your game, which you can then bundle in your final publishing build. Additionally, you can also integrate the in-game level editor to your published game and let your gamers create new levels.

Learn More Video

Card Game like UNO, Hearthstone or Poker

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/OneCard/OneCard.pro

Match-3 like Candy Crush Saga

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquash/JuicySquash.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquashAdvanced/JuicySquashAdvanced.pro

Puzzle like 2048 or Threes!

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/2048/2048.pro

Casino like Big Win Slots

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlaskOfRum/FlaskOfRum.pro

Side Scroller like Jetpack Joyride or Flappy Bird

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlappyBird/FlappyBird.pro

Tower Defense like Castle Defense or Bloons TD

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Squaby/Squaby.pro

Falldown & Jump like Doodle Jump or Mega Jump

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak/ChickenOutbreak.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak2/ChickenOutbreak2.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/DoodleJump/DoodleJump.pro

Platformer like Super Mario or Lep's World

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Platformer/Platformer.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Action like Angry Birds, Fruit Ninja, Cut the Rope

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/BalloonPop/BalloonPop.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/CarChallenge/CarChallenge.pro

Arcade like Arkanoid or Space Invaders

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ZombieBreak/ZombieBreak.pro

Community like Super Mario Maker or Minecraft

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/examples/Squaby/Squaby.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Any other Idea? let us know how we can help you

You are looking for another demo?

The V-Play SDK includes many open-source demos for different game genres. You can use their source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

If you do not find your game genre in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us

App Development
Better Apps, Less Effort

Develop feature-rich, cross-platform mobile apps from a single code base.

V-Play apps look, feel and perform exactly like native iOS, Android and Desktop apps. With less code & much faster development time.

Learn More Highlights Video

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Save Time, Code & Money

Save up to 90% source code with V-Play, compared to frameworks like Xamarin, Titanium, React Native and others.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code. QML also allows you to easily create smooth and complex animations.

import QtQuick 2.0
import VPlayApps 2.0

App {
  Page {
    
    AppButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Native Sensors & More

V-Play Apps harness the power of Qt, the leading cross-platform development framework used by over 1,000,000 developers.

This gives your access to native device features like sensors, camera, file system as well as multimedia, networking, localization and much more.

Learn More

Responsive Design

V-Play has built in responsive design capabilities, you can target phones and tablets with the same source code.

Learn More

Highly Extensible

You have existing JavaScript, C++ or native code? You want to add any 3rd party SDK that we do not offer already?

No worries, you can add any JS, C++, Java or Objective-C code to your project.

Learn More

Component Showcase App shows the most important V-Play features and components

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/showcase/Showcase.pro

Qt World Summit Conference App a full-featured conference management app made by V-Play

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/qtws2016/QtWS2016.pro

Twitter App how to build layouts like in the official Twitter app for iOS and Android

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/twitter/Twitter.pro

Maps App displays free bikes or boxes at bike stations for Vienna's bike sharing service Citybike Wien

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/maps/Maps.pro

Messaging App demonstrates how to create the UI of a Facebook Messenger like app

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/messaging/Messaging.pro

Weather App how to include powerful animations into your user interface

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/waether/Weather.pro

Any other Idea? let us know how we can help you

You are looking for another app demo?

The V-Play SDK includes many open-source demos for different app types. You can use their source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play..

If you do not find your app type in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us