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
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook
My Carrier: Rogers
Accepted Solution

Best Practices for ControlDelegates and ComponentDefinitions

I'm struggling to use ControlDelegates and ComponentDefinitions.  My problem with ControlDelegates is that any actions have to be attached to the page.  The control delegate is also attached to the page so any function or id names in the loaded qml page are lost to you because of scope.

 

So I thought to use ComponentDefinition to just load it but am having no luck.  The following is my code I'm trying to use:

 

NavigationPane {
    id: navPaneid
    Page {
        id: pageid
        Container {
            id: rootContainer
            attachedObjects: [
                ImagePaintDefinition {
                    id: backgroundPaint
                    imageSource: "asset:///images/Tile_nistri_16x16.amd"
                    repeatPattern: RepeatPattern.XY
                }
            ]

            Label {
                id: labelID
                text: "test"

            }           
        }
        onCreationCompleted: {
            cd_testshow.delegateActive = true
            cd_slidetip.delegateActive = true
            var createdControl = compDef.createObject();
            pageid.add(createdControl);
// navPaneid doesn't have any effect either } actions: [ ActionItem { id: playid title: "Play" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { navPaneid.push(testshow) } imageSource: "images/playimage.png" objectName: "Play" }, ActionItem { title: "Quit" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { navPaneid.push(slidetip) } imageSource: "images/xdarkimage.png" }, ActionItem { title: "CompDef" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { navPaneid.push(compDef) // Nothing happens } imageSource: "images/xdarkimage.png" } ] } attachedObjects: [ Page { id: testshow objectName: "testshow" ControlDelegate { id: cd_testshow source: "testshowPages/testshowCont.qml" delegateActive: false } actions: [ ActionItem { title: "Hyperout" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { animslide.hyperout() } imageSource: "images/stamps/Columbus_Thumb.png" }, ActionItem { title: "Change" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { } objectName: "Change" } ] }, testshowPage { id: slidetip objectName: "slidetip" }, ComponentDefinition { id: compDef source: "testshowPage.qml" } ] }

 I have 3 buttons on the page to try all 3 methods.  The testshowPage{} method but I lose the advantages of preloading everything.    The ControlDelegate method doesn't work because it doesn't recognize the variable animslide - which is within testshowPage.qml.  I can't seem to get the componentDefinition to work.  Not sure if I'm attaching it correctly. 

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook
My Carrier: Rogers

Re: Best Practices for ControlDelegates and ComponentDefinitions

[ Edited ]

Here is a piece of code that will work - allowing you to push dynamically loaded pages from both a Menu and an action bar.

 

import bb.cascades 1.0

//-- introduce custom C++ object registered in app.cpp

NavigationPane {
    id: navPaneid
    Menu.definition: MenuDefinition {
        // Add a Help action
        helpAction: HelpActionItem {
            // do something there
            onTriggered: {
            }
        }
        actions: [
            ActionItem {
                id: play1id
                title: "Play"
                onTriggered: {
                    var page = getSecondPage();
                    console.debug("pushing detail " + page)
                    navPaneid.push(page);
                }
                imageSource: "images/playimage.png"
                objectName: "Play"
            }
        ]
    }
    Page {
        id: pageid
        Container {
            Label {
                text: "testing"
            }
        }
        actions: [
            ActionItem {
                id: playid
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                imageSource: "images/playimage.png"
                objectName: "Play"
                onTriggered: {
                    var page = getSecondPage();
                    console.debug("pushing detail " + page)
                    navPaneid.push(page);
                }
            }
        ]
    }
    property Page secondPage
    function getSecondPage() {
        if (! secondPage) {
            secondPage = secondPageDefinition.createObject();
        }
        return secondPage;
    }
    attachedObjects: [
        ComponentDefinition {
            id: secondPageDefinition
            source: "DetailsPage.qml"
        }
    ]
}

 

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.
New Contributor
geoidesic
Posts: 9
Registered: ‎12-26-2012
My Device: Q5
My Carrier: Vodacom (Vodaphone)

Re: Best Practices for ControlDelegates and ComponentDefinitions

Did you find a way to reference variables and functions in the included file's scopes?

Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook
My Carrier: Rogers

Re: Best Practices for ControlDelegates and ComponentDefinitions

It might be possible, however I didn't in my program.  I did access functions within the CompDef using this 

                onTriggered: {
                    if (playlistviewid.size()>0) {
                        var page = getSlideshowPage();                        
                        page.restart()
                        _tiledApp.activateIdleMode();
                        navPaneid.push(page)
                    } else {
                        noPlaylistToast.show()
                    }
                }

 

restart() is a custom function within the scope of the the loaded page.   You should be able to access other properties of the page using that same technique.   For the most part if i needed to get access to variables I'd just set them in the setcontextproperty (eg._tiledApp.).

 

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.