Getting Started with V-Play Apps

V-Play Apps includes components for developing feature-rich, cross-platform apps with a native look and feel to interfaces and user experience patterns.

The First App

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.

 import VPlayApps 1.0

 App {
   Page {
     AppText {
       text: "Hello World"
       anchors.centerIn: parent
     }
   }
 }

V-Play Apps includes most modern navigation patterns for all supported platforms.

Navigation Stack

The most basic navigation model is a page stack which can push and pop pages items. Usually a page stack makes use of a navigation bar for navigating back and forth between pages.

For that purpose, V-Play provides an item called NavigationStack.

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       title: "Main Page"

       AppText {
         text: "Hello World"
         anchors.centerIn: parent
       }
     }

   }
 }

This will look like the following on iOS and Android:

iOS Android

To add new pages to the stack you call NavigationStack::push(), providing the new page as a parameter. To navigate back to a previous page your users can either use the back button in the provided navigation bar or you can manually pop back in the stack when calling NavigationStack::pop().

Navigation Bar

Apps usually include a set of root navigation options, like a news feed, direct messages or a profile for a Twitter application. For that purpose different navigation concepts on different platforms are used.

One concept is the use of a tab bar as a root navigation item. This pattern is mostly used by iOS apps. In comparison to iOS, tab bars are not very commonly used as the main navigation concept on Android. On Android, you usually use a component called "navigation drawer".

V-Play Apps includes a component called Navigation which makes it easy to use the platform-specific navigation pattern from a single code base:

 import VPlayApps 1.0

 App {
   Navigation {

     NavigationItem {
       title: "Home"
       icon: IconType.home

       NavigationStack {
         Page {
          title: "Main Page"
         }
       }
     }

     NavigationItem {
       title: "Lists"
       icon: IconType.list

       NavigationStack {
         Page {
          title: "Lists"
         }
       }
     }

   }
 }

This will look like the following on iOS and Android:

iOS Android

This examples shows how to add two root navigation options to your app. On iOS the Navigation item displays an iOS-style tab bar on the bottom of the screen. On Android the navigation options are provided within a navigation drawer, sliding in from the left edge of the screen.

As you can see in the example it's also possible to stack different navigation concepts into each other. The example shows two tabs as the main navigation concept with an included NavigationStack each.

For more information about the Navigation item, read the full documentation here.

Styling and Themes

Every V-Play application comes with a set of default styles, depending on the underlying platform. As seen above, a simple app with a navigation stack looks like the following on iOS and Android:

iOS Android

Usually you want an app's style to match your app or company CI, or just want to add some color to it. For that purpose V-Play provides a global Theme object which makes it easy to change styling for all components within your app.

The root component of all apps, the App component, offers a signal handler which allows overriding the default styles. Let's have a look at some examples:

Tint Color

A lot of V-Play Apps components use a special color reference, called the tint color, for their main outline color. You can change that color by overriding the Theme's tintColor property:

 import VPlayApps 1.0

 App {

   onInitTheme: {
     Theme.colors.tintColor = "red"
   }

   Page {
     AppSwitch {
       anchors.centerIn: parent
     }
   }
 }

This example sets the global tint color to red, which is then also applied to the AppSwitch component.

This will look like the following on iOS and Android:

iOS Android

Styling the Navigation Bar

If you use the NavigationStack component you can style the included navigation bar in the following manner:

 import VPlayApps 1.0

 App {

   onInitTheme: {
     Theme.navigationBar.titleColor = "white"
     Theme.navigationBar.backgroundColor = "#57adee" // blue color
     Theme.colors.statusBarStyle = Theme.colors.statusBarStyleWhite
   }

   NavigationStack {

     Page {
       title: "Main Page"

       AppText {
         text: "Hello World"
         anchors.centerIn: parent
       }
     }

   }
 }

The resulting app includes a blue navigation bar with white title text and a white status bar on iOS.

This will look like the following on iOS and Android:

iOS Android

Fonts

V-Play components make use of two different fonts, the Theme::normalFont and the Theme::boldFont. By default these fonts match the platform's default font for V-Play Apps components.

If you want to explicitly provide your own font you can override the Theme properties with a FontLoader object:

 import VPlayApps 1.0
 import QtQuick 2.5

 App {

   onInitTheme: {
     Theme.normalFont = arialFont
   }

   FontLoader {
     id: arialFont
     source: "fonts/Arial.ttf" // loaded from your assets folder
   }

   Page {
     AppText {
       text: "I'm in Arial"
     }
   }
 }

Make sure to add your custom fonts to your app's assets and to provide the correct path in the FontLoader object.

You can then also use the custom font in your own app components, like the following example:

 Text {
   // Set reference to the global app font
   font.family: Theme.normalFont.name

   text: "Custom text item"
 }

Further Reading

V-Play Apps includes components for developing cross-platform apps with a native look and feel to interfaces and user experience patterns.

In addition to V-Play Apps components, you will probably make use of components from the QtQuick module provided by the Qt framework itself.

Writing applications with V-Play Apps Components

QML and QtQuick documentation

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