V-Play Apps Components Reference

Every V-Play app begins with a single App component defined as the root of the QML tree. Every app then usually includes a navigation item and some Page items.

For a short introduction on how to use V-Play Apps components please refer to our Getting Started guide.

V-Play Plugins for Apps (and Games)

V-Play Plugins add platform-specific features and 3rd party SDK integration available from QML.

AdMob Plugin

Integrate with AdMob to monetize and promote your apps & games with ads.

Chartboost Plugin

Integrate with Chartboost to monetize and cross-promote your games with ads.

Facebook Plugin

Integrate with Facebook to help you build engaging social apps and get more installs.

Firebase Plugin

Add Google's Firebase for user authentication and access to the Firebase Realtime Database.

Flurry Plugin

Integrate with Flurry to get insights into your app's usage.

GameCenter Plugin

Integrate with GameCenter to send your games' highscores from V-Play Game Network to Apple Game Center on iOS devices.

Google Analytics Plugin

Integrate with Google Analytics to measure user interactions for your mobile and desktop apps.

GoogleCloudMessaging Plugin

Integrate with Google Cloud Messaging Push to send cross-platform push notifications and increase your users' engagement.

HockeyApp Plugin

Integrate with HockeyApp for beta distribution & crash reports.

Notification Plugin

Schedule native local push notifications in your app.

OneSignal Plugin

Integrate with OneSignal Push to send cross-platform push notifications and increase your users' engagement.

Parse Plugin

Integrate with Parse Push to send cross-platform push notifications and increase your users' engagement.

Soomla Plugin

Integrate with Soomla to offer in-app purchases and a virtual economy model within your app.

Note: For testing the plugins on mobile and source code examples, see the V-Play Plugin Demo. When you develop your own app and want to add plugins to it, a V-Play license is required.

App Essentials

App

Top-level component of a V-Play application containing all other components

AppFlickable

A Flickable with a preset rebound animation for a native scrolling experience

ListPage

A Page item with an AppListView as a single child

Page

A single page within an application

App Controls

AppActivityIndicator

An intermediate spinning progress indicator

AppButton

A button with a default raised and flat button style

AppCheckBox

A checkbox with a platform-specific styling for iOS and Android

AppImage

An image with a default source

AppListView

A ListView providing a native ScrollIndicator, an empty view and swipe gestures for its list delegates

AppMap

Displays a map view with the current user position

AppRangeSlider

A slider control with two handles to set a range

AppSlider

A slider control with one handle

AppSwitch

An on/off button-like control

AppTabBar

A tab bar with Theme-based iOS and Android styles

AppTabButton

A tab button to be used with AppTabBar for Theme-based iOS and Android styled tabs

AppText

A styled text control

AppTextEdit

A multi-line TextEdit with a given placeholder text

AppTextField

A single-line TextField input control

AppTextInput

A single-line TextInput with a given placeholder text (deprecated)

Dialog

A dialog with custom content and one or two buttons

FloatingActionButton

A material-design styled floating action button

Icon

An item for displaying icons from an icon font

IconButton

A button with an icon as visual representation

InputDialog

Global object for displaying standard user interaction dialogs

NativeDialog

Global object for invoking native system dialogs

PageControl

Displays page indicators and allows switching to the previous or next page

PictureViewer

A modal, full-screen picture viewer component

PullToRefreshHandler

A helper adding a pull-to-refresh control to an AppListView

RoundedImage

An image item with rounded corners and an optional border

SearchBar

A search bar with native styling for iOS and Android based on the Theme settings

SectionSelect

A control that allows to jump to specific sections of a ListView

SimpleRow

A ListView delegate item with two labels and an optional image

SimpleSection

A ListView delegate item for displaying sections in a list view

SwipeButton

A button with a default style to be used together with SwipeOptionsContainer

SwipeOptionsContainer

A ListView delegate container to implement swipeable rows within a ListView

VisibilityRefreshHandler

A helper item for handling data reload actions as soon as the item becomes visible

App Navigation

ActivityIndicatorBarItem

Displays an AppActivityIndicator inside a NavigationBar slot

AppDrawer

A drawer opened from the left or right edge of the screen with custom content

ButtonBarItem

Base type for NavigationBar items which can be clicked

IconButtonBarItem

Displays a clickable Icon inside a NavigationBar slot

Navigation

A navigation control for using platform-specific navigation modes

NavigationBar

A navigation control for displaying a header, back navigation and optional items

NavigationBarItem

Base type for items to be placed in the left or right slots of NavigationBar

NavigationBarRow

Container item to display multiple NavigationBarItems within a NavigationBar

NavigationItem

Base type for items inside Navigation

NavigationStack

Provides a stack of Pages with navigation

TabControl

A tabbed navigation control

TextButtonBarItem

Displays a clickable text inside a NavigationBar slot

App Styling

IconType

A global object containing the possible Icons

RippleMouseArea

A mouse area that automatically adds a ripple effect on android devices

StyleSimpleRow

A default style for the SimpleRow type that uses the Theme::listItem configuration

StyleSimpleSection

A default style for the SimpleSection type that uses the Theme::listSection and Theme::listSectionCompact configuration

Theme

A global object for defining app-wide styling attributes

ThemeAppButton

Defines style of AppButton items

ThemeAppCheckBox

Defines the style of AppCheckBox items

ThemeColors

Defines app-wide color theming

ThemeNavigationAppDrawer

Defines style of the Navigation's AppDrawer

ThemeNavigationBar

Defines style of the NavigationBar

ThemeSimpleRow

Defines the default appearance of SimpleRow list items

ThemeSimpleSection

Defines the default appearance of list sections based on the SimpleSection type

ThemeSimpleSectionCompact

Defines the default appearance of list sections based on the SimpleSection type if SimpleSection::compactStyle is used

ThemeTabControl

Defines style of the TabControl

App Utility

DateFormatter

Convenience methods for formatting date and time

Storage

Storage item provides a persistent and offline storage for arbitrary key-value pair data

WebStorage

Item syncs key-value-data with the cloud across devices and platforms with the VPlayGameNetwork

Context Components

The Context Components are global properties that are available in all QML files. They can be used to open native dialogs and browsers, network requests, dynamic QML component creation and provide system information.

Qt Context Objects

The Qt Context Objects page contains information about often-used functionality of the Qt element, for network requests and useful JavaScript elements.

NativeUtils

NativeUtils context property allows opening native message boxes, input dialogs and browsers

V-Play & Qt Multimedia Components

These components allow to play audio and video files.

AlphaVideo

Component allows you to show videos with transparency

BackgroundMusic

Element allows playing long-lasting and looping background sound in wav, mp3 or ogg file format

SoundEffectVPlay

Element allows playing short-lasting and looping sound effects in wav file format

In addition to the above list, also these Qt Quick Components are useful:

Audio Add audio playback to a scene
SoundEffect Provides a way to play sound effects in QML
MediaPlayer Add media playback to a scene
Video A convenience type for showing a specified video
VideoOutput Render video or camera viewfinder
Camera Access viewfinder frames, and take photos and movies
Radio Access radio functionality from a QML application
Torch Simple control over torch functionality
QtMultimedia Provides a global object with useful functions from Qt Multimedia

Networking Components

These components handle network activities.

XMLHttpRequest Element

The XMLHttpRequest object can be used to asynchronously obtain data from over a network.

V-Play Gamification Components

V-Play Game Network components for using gamification elements like leaderboards, achievements and chat in your app.

Achievement

Reward your players with achievements for reaching certain goals in your game and to give them more incentive to keep playing your game

GameNetworkUser

Represents a single user instance on V-Play Game Network

VPlayGameNetwork

Root V-Play Game Network component for using leaderboards, achievements and challenges in your game

VPlayGameNetworkView

Default UI for VPlayGameNetwork leaderboards, achievements and player profile

For using chat, Facebook connection and user profiles see the VPlayMultiplayerView component.

Most useful QML Components

Item The Item is the most basic of all visual items in QML.
Animation The Animation element is the base of all QML animations lasting for a fixed time.
Timer The Timer item triggers a handler at a specified interval.
Loader The Loader item allows dynamically loading an Item-based subtree from a URL or Component.

See here for a full list of all QML components. There is also a list of all QML APIs by module including modules like connectivity (via Bluetooth, NFC or WebSockets), sensors, location or webview.

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