EditableComponent

The EditableComponent allows you to edit selected properties of a specific target with an ItemEditor. More...

Import Statement: import VPlay 2.0
Inherits:

Item

Properties

Methods

Detailed Description

The EditableComponent can be used by the ItemEditor, to identify which properties are editable in its target. This allows changing properties easily during runtime. For instance, the ItemEditor parses the properties of the EditableComponent::target and assigns an according GUI element for each datatype. For instance: a Slider element will be shown for a number property.

Example Usage

Following examples demonstrate different use-cases of the EditableComponent.

ItemEditor uses the EditableComponent

This example shows a Particle which uses the EditableComponent to provide access to different properties. This can be used by the ItemEditor to show the properties which should be editable. This can be used by a particle editor like seen in our Particle Editor Demo. Properties such as: maxParticles, particleLifespan and more can then be changed by application users during runtime.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {
   Scene {

     ItemEditor {
       id: itemEditor
     }


     ParticleVPlay {
       // The EditableComponent is used by the Particle Editor for automatic generation of the property GUI.
       // It is not needed for particles which finished and added to a game.
       EditableComponent {
         editableType: "fire"
         properties: {
           "Particle Configuration": {
             "maxParticles":               {"min": 0, "max": 2000, "label": "Particle Count", "color": "red"},
             "particleLifespan":           {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan", "color": "red"},
             "particleLifespanVariance":   {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan Variance"},
             "startParticleSize":          {"min": 0, "max": 512, "label": "Start Size"},
             "startParticleSizeVariance":  {"min": 0, "max": 512, "label": "Start Size Variance"},
           }
         }
       }
     }
   }
 }

Different Item Editors and Entities

This demonstrates the usage of two different BaseEntites targeting different ItemEditors. The entities use the EditableComponent to provide access to different properties of their own. One Entity uses the default itemEditor, while the second one uses otherEditor.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {

   EntityManager {
     id: entityManager
     entityContainer: scene
   }

   Scene {
     id: scene

     ItemEditor {
       id: itemEditor
       opacity: 0.5

       editableTypes: [
         "fire","smoke","splatter","death"
       ]

       currentEditableType: "fire"
     }

     ItemEditor {
       id: otherEditor
       opacity: 0.5

       anchors.right: parent.right

       editableTypes: [
         "rubin","smaragd","saphir", "diamond"
       ]

       currentEditableType: "rubin"
     }

     EntityBase {

       width: 50
       height: 50

       Rectangle {
         anchors.fill: parent
       }

       EditableComponent {
         editableType: "fire"
         properties: {
           "Entity Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel"},
           }
         }
       }
     }

     EntityBase {

       x: scene.width/2
       y: scene.width/2

       width: 30
       height: 30

       Rectangle {
         anchors.fill: parent
       }

       EditableComponent {
         editableType: "rubin"
         targetEditor: otherEditor
         properties: {
           "Entity Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position", "group": "testGroup"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position", "group": "testGroup"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel", "group": "testGroup"},
           }
         }
       }
     }
   }
 }

See also GUIElements Test, ItemEditor Test, ItemEditor, and Particle Editor Demo.

Property Documentation

defaultGroup : string

Set this property if you have multiple properties with the same name and the same editableType.

Following example shows how to use the defaultGroup property to differentiate EditableComponents within the same editableType.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {

   EntityManager {
     id: entityManager
     entityContainer: scene
   }

   Scene {
     id: scene

     ItemEditor {
       id: itemEditor
     }

     EntityBase {

       x: scene.width/2
       y: scene.width/2

       width: 30
       height: 30

       Rectangle {
         anchors.fill: parent
       }

       Rectangle {
         id: rect2
         width: parent.width/2
         height: parent.height/2
         color: "red"
       }

       EditableComponent {
         editableType: "rubin"
         target: rect2
         defaultGroup: "Rect"
         properties: {
           "Rect Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position", "group": "testGroup"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position", "group": "testGroup"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel", "group": "testGroup"},
           }
         }
       }

       EditableComponent {
         editableType: "rubin"
         properties: {
           "Entity Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position", "group": "testGroup"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position", "group": "testGroup"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel", "group": "testGroup"},
           }
         }
       }
     }
   }
 }

editableComponentMetaData : variant

This property can be used to provide meta data for the EditableComponent. This meta data is stored in the target editors and can be used to access custom data in the delegates of the target editor if necessary.

The default value is set to following map:

 property variant editableComponentMetaData: {
   "displayname" : editableType
 }

For instance the editableComponentMetaData.displayname is used in the content delegate of the ItemEditor if available. Otherwise the content delegate uses the editableType as standard text. Therefore, you can change the displayname of the EditableComponent to a readable form but still use a short form for the editableType.

 EditableComponent {
   editableType: "f1"
   editableComponentMetaData: {
     "displayname" : "Fire Particle Cartridge #1"
   }
   properties: {
     "Emitter Location": {
       "x": {"min": 0, "max": 480, "label": "Position X"},
       "y": {"min": 0, "max": 320, "label": "Position Y"},
     }
   }
 }

editableType : string

This property is used to set the type of the target element. Different editors can use this property to group the targets. If the type is set to fire the target element can be grouped to the fire elements. The default value is not set.

 EditableComponent {
   editableType: "fire"
   properties: {
     "Emitter Location": {
       "x": {"min": 0, "max": 480, "label": "Position X"},
       "y": {"min": 0, "max": 320, "label": "Position Y"},
     }
   }
 }

preventStorage : bool

This property is used to prevent the storage of the EditableComponent data. This can be used when the storage of the should be prevented while working with tools like the ItemEditor or LevelEditor.


properties : variant

This property is used to define the properties of the target element which should be editable. The default value is not set.

Properties and Groups

This property can be used by an editor to visualize the properties of the target and let the user change the properties during runtime. Each property consists of a map which holds the properties of this item-property, for instance: the speed of the car would have a min, max speed demonstrated below.

 EditableComponent {
   editableType: "car"
   properties: {
     "speed": {"min": 0, "max": 150}
   }
 }

Those properties can be grouped together to logical groups which can be differentiated by an editor using the EditableComponent. If no groups are added as seen in the example above, the defaultGroup is being used for the default group. Following example shows grouping of properties logically for the use in different editors.

 EditableComponent {
   editableType: "FireParticle"
   properties: {
     "Emitter Location": {
       "x": {"min": 0, "max": typeof scene.gameWindowAnchor !== "undefined" ? scene.gameWindowAnchor.width : 480, "label": "Position X"},
       "y": {"min": 0, "max": typeof scene.gameWindowAnchor !== "undefined" ? scene.gameWindowAnchor.height : 320, "label": "Position Y"},
       "sourcePositionVariance":     {"min": {x:0,y:0}, "max": {x:1000,y:1000}, "invert": {x:false,y:true}, "label": "Position Variance"}
     },

     "Particle Configuration": {
       "maxParticles":               {"min": 0, "max": 2000, "label": "Particle Count", "color": "red"},
       "particleLifespan":           {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan", "color": "red"},
       "particleLifespanVariance":   {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan Variance"},
       "startParticleSize":          {"min": 0, "max": 512, "label": "Start Size"},
       "startParticleSizeVariance":  {"min": 0, "max": 512, "label": "Start Size Variance"},
       "finishParticleSize":         {"min": 0, "max": 512, "label": "End Size Variance"},
       "finishParticleSizeVariance": {"min": 0, "max": 512, "label": "End Size Variance"},
       "rotation":                   {"min": 0, "max": 360, "label": "Emit Angel"},
       "angleVariance":              {"min": 0, "max": 360, "label": "Emit Angel Variance"},
       "rotationStart":              {"min": -360, "max": 360, "label": "Start Spin"},
       "rotationStartVariance":      {"min": -360, "max": 360, "label": "Start Spin Variance"},
       "rotationEnd":                {"min": -360, "max": 360, "label": "End Spin"},
       "rotationEndVariance":        {"min": -360, "max": 360, "label": "End Spin Variance"}
     },

     "Emitter Behavior": {
       "emitterType":                {"min": Particle.Gravity, "max": Particle.Radius, "stepsize": 1, "label": "Particle Mode"},
       "duration":                   {"min": Particle.Infinite, "max": 10, "stepsize": 0.01, "label": "Duration"},
       "positionType":               {"min": Particle.Free, "max": Particle.Grouped, "stepsize": 1, "label": "Position Type"},
       "visible": {"label": "Visible"}
     },

     // Gravity Mode (Gravity + Tangential Accel + Radial Accel)
     "Gravity Mode": {
       "gravity":                    {"min": {x:-1000,y:-1000}, "max": {x:1000,y:1000}, "label": "Gravity"},
       "speed":                      {"min": 0, "max": 1000, "label": "Speed", "color": "red"},
       "speedVariance":              {"min": 0, "max": 1000, "label": "Speed Variance"},
       "tangentialAcceleration":     {"min": -1000, "max": 1000, "label": "Tangential Acceleration"},
       "tangentialAccelVariance":    {"min": -1000, "max": 1000, "label": "Tangential Acceleration Variance"},
       "radialAcceleration":         {"min": -1000, "max": 1000, "label": "Radial Acceleration"},
       "radialAccelVariance":        {"min": -1000, "max": 1000, "label": "Radial Acceleration Variance"}
     },

     // Radiation Mode (circular movement)
     "Radiation Mode": {
       "minRadius":                  {"min": 0, "max": 512, "label": "Minimal Radius"},
       "minRadiusVariance":          {"min": 0, "max": 512, "label": "Minimal Radius Variance"},
       "maxRadius":                  {"min": 0, "max": 512, "label": "Maximal Radius"},
       "maxRadiusVariance":          {"min": 0, "max": 512, "label": "Maximal Radius Variance"},
       "rotatePerSecond":            {"min": 0, "max": 360, "label": "Rotation per second"},
       "rotatePerSecondVariance":    {"min": 0, "max": 360, "label": "Rotation per second Variance"},
     },

     "Color": {
       "startColor":                 {"min": 0, "max": 255,"stepsize": 1, "label": "Start Color"},
       "startColorAlpha":            {"min": 0, "max": 1,"stepsize": 0.1, "label": "Start Opacity"},
       "startColorVariance":         {"min": 0, "max": 255,"stepsize": 1, "label": "Start Color Variance"},
       "startColorVarianceAlpha":    {"min": 0, "max": 1,"stepsize": 0.1, "label": "Start Opacity Variance"},
       "finishColor":                {"min": 0, "max": 255,"stepsize": 1, "label": "End Color"},
       "finishColorAlpha":           {"min": 0, "max": 1,"stepsize": 0.1, "label": "End Opacity"},
       "finishColorVariance":        {"min": 0, "max": 255,"stepsize": 1, "label": "End Color Variance"},
       "finishColorVarianceAlpha":   {"min": 0, "max": 1,"stepsize": 0.1, "label": "End Opacity Variance"}
     },

     "Appearance": {
       "blendFuncSource":            {"min": Particle.GL_ONE, "max": Particle.GL_ONE_MINUS_SRC_ALPHA, "label": "Blend Source"},
       "blendFuncDestination":       {"min": Particle.GL_ONE, "max": Particle.GL_ONE_MINUS_SRC_ALPHA, "label": "Blend Destination"},
       "textureFileName":            {"label": "Texture"}
     }
   }
 }

Property Metadata

As mentioned above each property consists of a map which holds the meta data of the item-property, for instance: the speed of the car would have a min, max speed demonstrated below. Depending on the the type of the property different delegates are used in the ItemEditor to display the property. Therefore, the meta data properties vary. The color, label and enabled meta data are available across all data types.

The enabled meta data can be used to disable a specific property. This can be useful when you want to enable a property in developer mode, but disable it in release mode.

 EditableComponent {
   editableType: "GameSettings"

   properties: {
       "nextLevelId": {"label": "Next Level", "enabled": developerBuild},
   }
 }

Following table lists all meta data properties of the different delegates. The PointDelegate uses each value for x and y i.e. "min" : {x:1,y:1}

NumberDelegate
  • min - minimum value i.e. -10.5
  • max - maximum value i.e. 10.5
  • stepsize - step size i.e. 0.1
PointDelegate
  • min - minimum value i.e. -10.5
  • max - maximum value i.e. 10.5
  • stepsize - step size i.e. 0.1
ColorDelegate
  • min - minimum value of the color which is normally at 0
  • max - maximum value of the color which is normally at 255
  • stepsize - step size of the color range which is normally at 1
No Additional Metadata
  • StringDelegate
  • TextureDelegate
  • BoolDelegate

target : variant

This property is used to set the target. Most of the time it will be set to its parent but it can also contain any other id. It is used to determine which element should be editable. The default value is parent.

The default target parent does not work when the EditableComponent is located directly in the GameWindow because the parent is not the actual GameWindow. Therefore, use the concrete GameWindow id assigned to the target.


targetEditor : variant

This property can be used to set a specific editor for the target item of the EditableComponent. For instance, when overriding the default ItemEditor which is the case when two different ItemEditor should be used for two different EditableComponent.

The default value of the targetEditor is 0, but if an ItemEditor with id: itemEditor is available in the scene, it is set to itemEditor per default. So it only needs to be set separately if a custom ItemEditor is used. You need to ensure that your scene knows about the itemEditor. If it is outside you can provide an alias to the itemEditor as seen in Particle Editor Demo.

See also Different Item Editors and Entities.


Method Documentation

loadFromJSONMap(variantMap)

Loads the target object based on the values stored in the JSON string.


toJSON()

Saves all properties of the target to a JSON string.


toJSONMap()

Saves all properties of the target to a JSON Map.


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