• Home
• Felgo
• FelgoAndroidFragment

FelgoAndroidFragment

FelgoAndroidFragment shows Felgo QML content in a native Android application. More...

• List of all members, including inherited members

Methods

• void addSignalHandler(String name, Object handler)
• void callQmlMethod(String name, Object... params)
• Object getQmlProperty(String name)
• void setQmlContent(String qmlContent, String qmlBaseUrl)
• void setQmlInitializedListener(Object listener)
• void setQmlProperty(String name, Object value)
• void setQmlSource(Context context, var source)

Detailed Description

This Native App Integration item is available in native Android code.

FelgoAndroidFragment can load and show Felgo QML content from within a native Android application. Any Activity in your app that shows an instance of FelgoAndroidFragment should be a subclass of FelgoAndroidActivity.

To show QML content from a lightweight View instead, use FelgoAndroidView.

Add QML Files to Your Project

You can load QML files from anywhere. All you need is the text content of the QML file. This lets you even load QML files from the web at runtime.

The most common use case is loading QML files from your project assets. To do so, place your .qml files under your projects assets directory (usually <project-dir>/src/main/assets). You can also use subfolders inside assets and reference files relatively from within QML.

Load QML Content

You can load any QML content using the class FelgoAndroidFragment. You can add an instance of the Fragment in code or in a layout XML file.

Using a Layout XML File

You can add FelgoAndroidFragment to any layout .xml file:

 <fragment
     android:id="@+id/felgo_fragment_container"
     class="com.felgo.ui.FelgoAndroidFragment"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:qml_source="qml/Main.qml"/>

This loads the file qml/Main.qml from your project assets.

Using FragmentManager

To programmatically add a FelgoAndroidFragment to an Activity, you can use FragmentManager:

 void loadQml() {
   try {
     getFragmentManager().beginTransaction()
         .replace(R.id.felgo_fragment_container, new FelgoAndroidFragment()
                 .setQmlSource(getApplicationContext(), "qml/Main.qml"),
             null)
         .addToBackStack(null)
         .commit();
   } catch (IOException ex) {
     // QML file not found
     Log.w("MainActivity", "Could not load QML file", ex);
   }
 }

Here R.id.fragment_container is the ID of an existing view to place the new Fragment into. This loads the file qml/Main.qml from your project assets. You can also load content from other places.

Use the method setQmlSource(Context context, var source) to load QML from a local file. The source parameter can be any file:// URI. In this case, relative resource lookup within QML starts at the source file's directory. To load a file from your app's assets, use a String with the asset file path. For example, a call like setQmlSource(context, "qml/Main.qml").

Use the method setQmlContent(String qmlContent, String qmlBaseUrl) to load QML content directly from a source string. The parameter qmlBaseUrl is an optional virtual URL for relative resource lookup within QML. For example, you can use file:///android_asset/qml/Main.qml as base URL. This lets you use lookup e.g. "../images/image.png" from within QML. Which would result in the image being loaded from your app's assets/images folder.

Interact with QML

You can interact with the QML application directly from native code. FelgoAndroidFragment provides methods for this. You can read and write properties on the QML root item with setQmlProperty() and getQmlProperty(). You can call a JavaScript function on the root item with callQmlMethod(). You can react to QML signals with addSignalHandler().

You can use these methods after loading a QML file with either setQmlSource() or setQmlContent(). The QML scene is loaded asynchronously. You can react to the QML file being loaded completely from your native app. Either override FelgoAndroidActivity::onQmlInitialized() or use FelgoAndroidFragment::setQmlInitializedListener(). The callbacks are invoked on the Android UI thread.

Example

The following example shows how to set up interaction between Java and QML:

assets/qml/Main.qml

 import Felgo
 import QtQuick

 App {
     property string qmlText: ""

     signal btnPressed

     Column {
         AppText {
             text: qmlText
         }

         AppButton {
             text: "Click me!"
             onClicked: btnPressed()
         }
     }
 }

MainActivity.java

 package com.felgo.nativeintegrationexample;

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.Toolbar;
 import android.util.Log;

 import com.felgo.ui.FelgoAndroidActivity;
 import com.felgo.ui.FelgoAndroidFragment;

 import org.qtproject.qt5.android.bindings.QtFragment;

 import java.io.IOException;

 public class MainActivity extends FelgoAndroidActivity {

   private FelgoAndroidFragment m_felgo;

   @Override protected void onCreate(@Nullable Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);

     m_felgo = new FelgoAndroidFragment();

     // show QML fragment and load assets/qml/Main.qml:
     try {
       m_felgo.setQmlSource(getApplicationContext(), "qml/Main.qml");
     } catch (IOException ex) {
       // qml file not found
       Log.w("MainActivity", "Could not load QML file", ex);
     }

     getSupportFragmentManager().beginTransaction()
         .replace(android.R.id.content, m_felgo,null)
         .addToBackStack(null)
         .commit();
   }

   @Override
   public void onQmlInitialized() {
     m_felgo.setQmlProperty("qmlText", "Hello QML from Java!");

     m_felgo.addSignalHandler("btnPressed", new QtFragment.QmlSignalHandler() {
       @Override
       public void onSignalEmitted(Object[] signalParameters) {
         Log.d("MainActivity", "QML button pressed!");
       }
     });
   }
 }

For more information, see Native App Integration.

Method Documentation

 App {
   signal mySignal(string param)
 }

 felgoFragment.addSignalHandler("mySignal", new QtFragment.QmlSignalHandler() {
   @Override
   public void onSignalEmitted(Object[] objects) {
     Log.d("Felgo Examples", "mySignal emitted with param: " + objects[0]);
   }
 });

 App {
   function hello(p1, p2) {
     console.log("Hello JS!", p1, p2)
   }
 }

 felgoFragment.callQmlMethod("hello", "P1 value", "P2 value");
 // output: "Hello JS! P1 value P2 value"

 App {
   property string message: "Hello Felgo!"
 }

 String message = felgoFragment.getQmlProperty("message");
 // message now contains "Hello Felgo!"

 felgoFragment.setQmlInitializedListener(new FelgoAndroidFragment.QmlInitializedListener() {
   @Override
   public void onQmlInitialized() {
     Log.d("Felgo Examples", "QML initialized!");
   }
 });

 App {
   property string message: "Hello Felgo!"
 }

 felgoFragment.setQmlProperty("message", "Hello Android!");
 // QML property now contains "Hello Android!"