CODEWITHSUNDEEP
qtblackberryqmlblackberry-10
Mohamed Jihed Jaouadi
Mohamed Jihed Jaouadi

Reputation: 1517

How can I set container content with a .qml page?

I'm devolopping a Blackberry 10 mobile application using the BB Native SDK.

All I want is to set a dynamic 'Container' which is a part of a specific (.qml) page like below (main.qml), that will be filled by choice with differents qml pages from assets (for example like "content1.qml")

Is that possible ? if so, how I can do that ?

main.qml :

import bb.cascades 1.2

Page {
    Container {
        layout: DockLayout {}
        //Todo: fill me with QML
      Header {
          title: "Hello Boys  ;)"
          horizontalAlignment: HorizontalAlignment.Fill
          verticalAlignment: VerticalAlignment.Top
      }

       Container {
         id: selectedCont
         objectName: "selectedContObj"
       }

       Footer {
           title: "Hi Girls  ;)"
           horizontalAlignment: HorizontalAlignment.Fill
           verticalAlignment: VerticalAlignment.Bottom
       }

    }
}

content1.qml :

Container {
    Label{
        text: "Hello World"
    }
    Button {
        text: "Submit"
    }
    Button {
        text: "Cancel"
    }
}

Upvotes: 0

Views: 1203

Answers (2)

nbilal
nbilal

Reputation: 1099

First you need to give your Container in content1.qml an id, let's say id: container1.

Since a Container is a Control (Container inherits from Control), you can simply add container1 to selectedCont:

selectedCont.removeAll();
selectedCont.add(content1.container1);

You can also use replace if you already have a container in selectedCont:

selectedCont.replace(0, content1.container1);

This assumes that main.qml and content1.qml are in the same folder.

If you want to achieve the same from C++, you need to load the qml file using:

QmlDocument *qml1 = QmlDocument::create("asset:///container1.qml").parent(this);
Container* container1 = qml1->createRootObject<Container>();

To get a pointer to your selectContObj you can do:

QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
AbstractPane *root = qml->createRootObject<AbstractPane>();
Container* selectCont = root->findChild<bb::cascades::Container*>("selectContObj");

Upvotes: 1

hyarion
hyarion

Reputation: 2251

You can use a ControlDelegate. These are designed to replace content with qml files.

Container {
    layout: DockLayout {}

  Header {
      title: "Hello Boys  ;)"
      horizontalAlignment: HorizontalAlignment.Fill
      verticalAlignment: VerticalAlignment.Top
  }

   ControlDelegate {
        id: selectedContDelegate
    }

   Footer {
       title: "Hi Girls  ;)"
       horizontalAlignment: HorizontalAlignment.Fill
       verticalAlignment: VerticalAlignment.Bottom
   }

}

Then in your button or wherever you want to change it you do this:

selectedContDelegate.source = "Content1.qml"

Upvotes: 1

Related Questions