• Home
• Felgo
• FelgoIOSView

FelgoIOSView

FelgoIOSView shows Felgo QML content inside a native iOS application. More...

• List of all members, including inherited members

Properties

• qmlContent : NSString
• qmlInitBlock : id
• qmlSource : NSURL

Methods

• void addSignalHandler:handler:(NSString *name, id handler)
• void callQmlMethod:value:(NSString *name, NSArray *params)
• id getQmlProperty:(NSString *name)
• void setQmlProperty:value:(NSString *name, id value)

Detailed Description

This item is available in native iOS code.

The FelgoIOSView can load and show Felgo QML content from within a native iOS application. Be sure to initialize the Felgo runtime with FelgoIOS before using an instance of this class.

Add QML Files to Your Project

You can load QML files from anywhere. All you need a URI to 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 resources. To do so, add your .qml files to your project resources in Xcode. You can also use subfolders inside resources and reference files relatively from within QML.

Add Felgo View

You can display QML content using the class FelgoIOSView. You can add an instance of the view in code or in an interface builder file.

Using Interface Builder

You can add FelgoIOSView using the Xcode Interface Builder. Add an empty View to your interface and set the custom class to FelgoIOSView:

To access the view from source code, add an IBOutlet property to your ViewController implementation:

 #import "FelgoIOSView.h"

 @interface ViewController

 @property (weak, nonatomic) IBOutlet FelgoIOSView *felgoView;

 @end

You can then add a referencing outlet by right-clicking the view in Interface Builder:

Programmatically

You can also add FelgoIOSView to another view in code. Example from within a ViewController implementation:

 #import "FelgoIOSView.h"

 @interface ViewController()

 @property (strong, nonatomic) FelgoIOSView *felgoView;

 @end

 @implementation ViewController

 // more methods...

 - (void)addQMLView {
   self.felgoView = [FelgoIOSView new];
   self.felgoView.frame = self.view.bounds;
   [self.view addSubview:self.felgoView];
 }

 @end

Load QML Content

To load QML content, assign a URI to the property FelgoIOSView::qmlSource. You can use any URI, for example to a web resource, a local file or a project resource.

This example loads Main.qml from your project resources:

 - (void)loadQML {
   self.felgoView.qmlSource = [[NSBundle mainBundle] URLForResource:@"Main" withExtension:@"qml"];
 }

You can also load QML directly from an NSData or NSString object. For this, assign to the property FelgoIOSView::qmlContent:

 - (void)loadQML {
   // obtain QML content from anywhere...
   NSString *content = @"import Felgo; App { AppText { text: 'Direct QML content' } }";

   self.felgoView.qmlContent = [content dataUsingEncoding:NSUTF8StringEncoding];
 }

Interact with QML

You can interact with the QML application directly from native code. FelgoIOSView provides methods for this. You can read and write properties on the QML root item with [FelgoIOSView setQmlProperty:value:] and [FelgoIOSView getQmlProperty:. You can call a JavaScript function on the root item with [FelgoIOSView callQmlMethod:value:]. You can react to QML signals with [FelgoIOSView addSignalHandler:handler:].

You can use these methods after loading a QML file with either FelgoIOSView::qmlSource or FelgoIOSView::qmlContent. The QML scene is loaded asynchronously. You can react to the QML file being loaded completely with the property FelgoIOSView::qmlInitBlock.

Example

The following example shows how to set up interaction between Objective C 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()
         }
     }
 }

ViewController.mm

 #import "ViewController.h"

 #import "FelgoIOSView.h"

 @interface ViewController ()

 @property (strong, nonatomic) FelgoIOSView *felgoView;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
   [super viewDidLoad];

   self.felgoView = [FelgoIOSView new];
   self.felgoView.frame = self.view.bounds;
   [self.view addSubview:self.felgoView];

   QMLSignalHandler btnHandler = ^(NSArray * _Nonnull signalParameters) {
     NSLog(@"QML button pressed!");
   };

   self.felgoView.qmlInitBlock = ^{
     [self.felgoView setQmlProperty:@"qmlText" value:@"Hello QML from Objective C!"];

     [self.felgoView addSignalHandler:@"btnPressed" handler:btnHandler];
   };

   // Load QML file from project resources:
   self.felgoView.qmlSource = [[NSBundle mainBundle] URLForResource:@"Main" withExtension:@"qml" subdirectory:@"qml"];
 }

 @end

For more information, see Native App Integration: Integrate Felgo and Qt with Existing Android and iOS Applications.

Property Documentation

 self.felgoView.qmlContent = @"import Felgo; App { AppText { text: 'Hello Felgo' } }";

 self.felgoView.qmlInitBlock = ^{
     NSLog(@"QML app loaded!");
 };

 self.felgoView.qmlSource = [[NSBundle mainBundle] URLForResource:@"Main" withExtension:@"qml" subdirectory:@"qml"];

Method Documentation

 App {
   signal mySignal(string param)
 }

 id handlerBlock = ^(NSArray *params) {
   NSLog(@"My signal emitted with param: %@", params[0]);
 };

 [self.felgoView addSignalHandler:@"mySignal" handler:handlerBlock];

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

 [self.felgoView callQmlMethod:@"hello" value:@["@"P1 value", @"P2 value"] ];
 // output: "Hello JS! P1 value P2 value"
 

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

 NSString *message = [self.felgoView getQmlProperty:@"message"];
 // message now contains "Hello Felgo!"

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

 [self.felgoView setQmlProperty:@"message" value:"@"Hello iOS!"];
 // QML property now contains "Hello iOS!"