Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Highlighted
Contributor
Posts: 30
Registered: ‎05-02-2010
My Device: Torch 9800
My Carrier: Claro Dominican Republic
Accepted Solution

Dynamic Component and layoutProperties for AbsoluteLayout

In my QML app I have a "Tile.qml" where I define a custom component.

 

It works fine when I create it explicitly (as shown in the example below), but I'm going to have 24 Tiles which I dont want to create manually. 

 

// This is main.qml

NavigationPane { id: app property int tiles: 16 property int tileSize: 192 property int rows: 4 property int columns: 6 firstPage: Page { id: pgMain content: Container { id: root layout: AbsoluteLayout { } // Tile 1; uses "Tile.qml" declaratively Tile { text: "1"; tile_x: 0; tile_y: 0 layoutProperties: AbsoluteLayoutProperties { positionX: 0 positionY: 0 } }
...

 I have added the following to main.qml to accomodate for dynamic creation onf Tile components:

 

        attachedObjects: [                  
                ComponentDefinition {                      
                    id: component_Tile                       
                    source: "Tile.qml"             
                }
        ]
                    
        onCreationCompleted: {
            
            var newTile = component_Tile.createObject(  );
            newTile.text = "7"
            newTile.tile_x = 0
            newTile.tile_y = 0

            root.add( newTile );
                         
        }

 I works fine for adding one tile, but here's my issue: In the "declarative" version, I defined the absolute location of the tile in the container by adding the following to the Tile object "layoutProperties: AbsoluteLayoutProperties { positionX: 0  positionY: 0  }"

 

Now, I don't know how to achieve this (specifiyng the layout obtions to place the component in absolute positions within its container) when creating the conponent dynamically!

 

Is there a way? Am I missing something?

 

Your help is greately appreciated!

 

--jlb

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Dynamic Component and layoutProperties for AbsoluteLayout

[ Edited ]

Hi,
Try declaring AbsoluteLayoutProperties in Tile.qml setting positionX and positionY to 0. Then after a call to createObject in main.qml update them:
newTile.layoutProperties.positionX = newPosition;

 

If that won't work try giving AbsoluteLayoutProperties an id then reference it by id:

 

newTile.layoutPropertiesId.positionX = ...

 


Andrey Fidrya, @zmeyc on twitter
Contributor
Posts: 30
Registered: ‎05-02-2010
My Device: Torch 9800
My Carrier: Claro Dominican Republic

Re: Dynamic Component and layoutProperties for AbsoluteLayout

I tried those 2 options before posting, without success Smiley Sad

 

I even tried this inside Tile.qml:

 

    property alias layoutProperties: lp
    property alias pos_x: lp.positionX
    property alias pos_y: lp.positionY
    
    layoutProperties: AbsoluteLayoutProperties {
        id: lp
        positionX: 0 
        positionY: 0
    }

 

I tried the layoutProperties alias because I believe that once you create a Component, anything from inside of it you want to reference should be exposed as a property. And this property should be of the name the famework expects.

 

Also tried referencing it directly by id (lp.posotionX) but that didn't help either.

 

Smiley Sad

 

I guess I have to take the tedious way for now (declaratively creating the 24 Tiles) but wan't to be able to figure this out anyway...

 

Thanks.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Dynamic Component and layoutProperties for AbsoluteLayout

[ Edited ]

I've done some experiments and this code seems to work, even without aliases:

 

main.qml

 

// Navigation pane project template
import bb.cascades 1.0

Page {
    Container {
        id: root
        layout: AbsoluteLayout { }
    }
    
    onCreationCompleted: {
        for (var i = 0; i < 4; ++i)
        {
            var newTile = component_Tile.createObject(  );
            newTile.text = "TEST" + i;
            newTile.layoutProperties.positionX = i * 150;
            root.add(newTile);
        }
    }
    
    attachedObjects: [                  
        ComponentDefinition {                      
            id: component_Tile                       
            source: "Tile.qml"             
        }
    ]
}

 Tile.qml

import bb.cascades 1.0

Label {
    id: label
    text: qsTr("Label")
    layoutProperties: AbsoluteLayoutProperties { }
}

 

UPD:

 

Found out another interesting thing...

If you don't want to force the tile to have AbsoluteLayout, then the following will also work:

 

main.qml:

 

newTile.layoutProperties = Qt.createQmlObject('import bb.cascades 1.0;AbsoluteLayoutProperties{}', newTile, 'main.qml');
newTile.layoutProperties.positionX = i * 150;

This line can be removed from Tile.qml:

 

    layoutProperties: AbsoluteLayoutProperties { }

 

UPD 2:

Found an even simpler way:

 

attachedObjects: [
...,
ComponentDefinition { id: absoluteLayoutPropertiesFactory content: AbsoluteLayoutProperties {} }
] ... newTile.layoutProperties = absoluteLayoutPropertiesFactory.createObject(newTile, {}); newTile.layoutProperties.positionX = i * 150;

 

 UPD 3:

Just for completeness, Qt Quick's components work too. Smiley Happy

 

import QtQuick 1.0
...
attachedObjects: [
..., Component { id: absoluteLayoutPropertiesFactory AbsoluteLayoutProperties {} } ] ... newTile.layoutProperties = absoluteLayoutPropertiesFactory.createObject(newTile, {}); newTile.layoutProperties.positionX = i * 150;

 


Andrey Fidrya, @zmeyc on twitter
Contributor
Posts: 30
Registered: ‎05-02-2010
My Device: Torch 9800
My Carrier: Claro Dominican Republic

Re: Dynamic Component and layoutProperties for AbsoluteLayout

Thanks, Zmey! I rebuilt the files from scratch step by step and now it's working! I'm not completely sure what I was doing wrong, but now it's fixed.

Thanks for your help and the alternative options/solutions. Sure did learn from them.