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
BBSJdev
Posts: 6,116
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Part of Mapview frame see through

Rather than pseudocode can you post your actual code?


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Part of Mapview frame see through

[ Edited ]

Here's the main.qml:

 

import bb.cascades 1.0

// The root node has to inherit from AbstractPane -- in this case a TabbedPane.
// There is always only ONE root not in a QML file and it is typically
// an AbstractPane object like Page.
//! [0]
TabbedPane {
    onCreationCompleted: {
        _app.setStorageLocation.App.StoreInFile;
    }
    id: root
    attachedObjects: [
        Invocation {
            id: rateApp
            query {
                invokeTargetId: "sys.appworld"
                uri: "appworld://content/34825892"
                invokeActionId: "bb.action.OPEN"
            }
        },
        InfoPage {
           id: infoSheet 
        },
        HelpPage {
           id: helpSheet 
        }
    ]
    showTabsOnActionBar: false
    Menu.definition: MenuDefinition {
        actions: [
            ActionItem {
                title: qsTr("Help") + Retranslate.onLanguageChanged
                imageSource: "asset:///images/ic_help.png"
                onTriggered: {
                    helpSheet.open()
                }
            },
            ActionItem {
                title: qsTr("Info") + Retranslate.onLocaleOrLanguageChanged
                imageSource: "asset:///images/ic_info.png"
                onTriggered: {
                    infoSheet.open()
                }
            },
            ActionItem {
                title: qsTr("Rate App") + Retranslate.onLocaleOrLanguageChanged
                imageSource: "asset:///images/ic_add_entry.png"
                onTriggered: {
                    rateApp.trigger("bb.action.OPEN")
                }
            }
        ]
    }
    Tab {
        id: tab1
        title: qsTr("Location") + Retranslate.onLanguageChanged
        imageSource: "asset:///images/ic_map.png"
        MapPage {
            
        }
    }
    Tab {
        id: tab2
        title: qsTr("Saved Locations") + Retranslate.onLanguageChanged
        imageSource: "asset:///images/url.png"
        ListPage {    
        }
    }
}

 here's the MapPage.qml:

 

import bb.cascades 1.0
import QtMobility.sensors 1.2
import bb.cascades.maps 1.0
import QtMobilitySubset.location 1.1
import bb.platform 1.0
import bb.data 1.0
import bb.system 1.0
import bb.multimedia 1.0
import bb.cascades.multimedia 1.0
 
Page { 
    id: popUp
    objectName: "popUp"
    property  bool firstRun: _app.getValueFor(popUp.objectName, true)
    actions: [
        .....
    ]
    Container {
        contextActions: [
            ....
        ]
        id: mapViewContainer
        layout: DockLayout {
        }
        //! [1]
        MapView {
            touchPropagationMode: TouchPropagationMode.None
            id: mapview
            objectName: "mapViewObj"
            altitude: 3000
            preferredWidth: 768
            preferredHeight: 1280
            
            onLatitudeChanged: {
                lat.setText(qsTr("%1").arg(newLat));
            }
            onLongitudeChanged: {
                lon.setText(qsTr("%1").arg(newLon));
            }
            
            attachedObjects: [
                ....
            ]
        }
        //! [3]
        Container {
..... } onCreationCompleted: { //when the main.qml is created (app is launched) we check the bool property to see if the //tutorial needs to run or not if (firstRun != false) { //So if the bool property isn't false, the tutorial sheet will automatically open tutorialSheet.open() } } //! [0] }

 

Developer
BBSJdev
Posts: 6,116
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Part of Mapview frame see through

Okay you obviously missed the part I wrote about tying in to the tabbedPaneChanged signal...

 

import bb.cascades 1.0

// The root node has to inherit from AbstractPane -- in this case a TabbedPane.
// There is always only ONE root not in a QML file and it is typically
// an AbstractPane object like Page.
//! [0]
TabbedPane {
    onCreationCompleted: {
        _app.setStorageLocation.App.StoreInFile;
    }
    id: root
    attachedObjects: [
        Invocation {
            id: rateApp
            query {
                invokeTargetId: "sys.appworld"
                uri: "appworld://content/34825892"
                invokeActionId: "bb.action.OPEN"
            }
        },
        InfoPage {
           id: infoSheet 
        },
        HelpPage {
           id: helpSheet 
        }
    ]
    showTabsOnActionBar: false
    Menu.definition: MenuDefinition {
        actions: [
            ActionItem {
                title: qsTr("Help") + Retranslate.onLanguageChanged
                imageSource: "asset:///images/ic_help.png"
                onTriggered: {
                    helpSheet.open()
                }
            },
            ActionItem {
                title: qsTr("Info") + Retranslate.onLocaleOrLanguageChanged
                imageSource: "asset:///images/ic_info.png"
                onTriggered: {
                    infoSheet.open()
                }
            },
            ActionItem {
                title: qsTr("Rate App") + Retranslate.onLocaleOrLanguageChanged
                imageSource: "asset:///images/ic_add_entry.png"
                onTriggered: {
                    rateApp.trigger("bb.action.OPEN")
                }
            }
        ]
    }
    Tab {
        id: tab1
        title: qsTr("Location") + Retranslate.onLanguageChanged
        imageSource: "asset:///images/ic_map.png"
        ControlDelegate {
            id: mapPage
            source: "MapPage.qml"
            delegateActive: true
        }
    }
    Tab {
        id: tab2
        title: qsTr("Saved Locations") + Retranslate.onLanguageChanged
        imageSource: "asset:///images/url.png"
        ListPage {    
        }
    }

    onActivePaneTransitionEnded: {
         mapPage.delegateActive = (root.activeTab == 1);
    }
}

 

Obviously I can't test this but in essence this is what you can do (disregarding any minor bugs :smileyhappy:).

 

This will then destroy and create the page as you switch between tabs obviously this should be expanded to do all the tab pages but I'll leave that up to you.

 

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
BBSJdev
Posts: 6,116
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Part of Mapview frame see through

In 10.2 this gets a lot easier with Delegate handling the page destruction as well...

 

http://developer.blackberry.com/native/documentation/cascades/ui/navigation/multiple_screens_tabs.ht...


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Part of Mapview frame see through

Thanks so much! I will mark solved if this works out. I appreciate you taking so much of your time to help me and others on this board. It really does help us a lot.
Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Part of Mapview frame see through

Unfortunately the controlDelegate method doesn't work as you've shown,  apparently the controlDelegate needs to be inside a Page or Container.  I couldn't manage to get it to work yet.

Developer
Zmey
Posts: 1,512
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Part of Mapview frame see through

Hi! ControlDelegate appeared in 10.2 only, is your project 10.2 based?

For 10.0.x you can declare the WebView as ComponentDefinition and create it using createObject, then destroy it when another Tab becomes active.

Andrey Fidrya, @zmeyc on twitter
Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Part of Mapview frame see through

I am working in 10.1 so it looks like this must be the issue.  As for implementing it would I go something like this?:

 

NavigationPane{

Tab1 {

onTriggered{

var contentpage = contentPageDefinition.createObject();

}

attachedObjects:[

ComponentDefinition {
                id: contentPageDefinition
                source: "MapPage.qml"
            }

]

}

Tab2 {

onTriggered{

contentPageDefinition.destroy()

}

}

}

 

Developer
Zmey
Posts: 1,512
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Part of Mapview frame see through

[ Edited ]

Seems I was wrong. As BBSJdev said, Delegate was introduced in 10.2, but ControlDelegate was available in 10.0.

 

I've modified his code from this post a bit and it does work:

http://supportforums.blackberry.com/t5/Native-Development/Part-of-Mapview-frame-see-through/m-p/2614...

 

Basically I've moved the ControlDelegate inside of Page. I've also replaced QMLs with ComponentDefinitions, but it should work with external QMLs like in original code.

 

The only side effect I now see is when switching back to the original page, old MapView screen flashes briefly. This might require another workaround. :smileysad:

 

import bb.cascades 1.0
import bb.cascades.maps 1.0 

TabbedPane {
    id: tabbedPane
    showTabsOnActionBar: true
    Tab {
        id: firstTab
        onTriggered: {
            
        }
        title: qsTr("Tab 1") + Retranslate.onLocaleOrLanguageChanged
        Page {
            ControlDelegate {
                    id: tab1Delegate
                    delegateActive: tabbedPane.activeTab == firstTab
	            sourceComponent: page1Factory
	            onDelegateActiveChanged: {
                	if (active)
                	{
                	    // call C++ code to initialize mapView
                	} 
                    }
	        }
        }
    } //End of first tab
    Tab {
        id: secondTab
        title: qsTr("Tab 2") + Retranslate.onLocaleOrLanguageChanged
        Page {
            ControlDelegate {
                id: tab2Delegate
                delegateActive: tabbedPane.activeTab == secondTab
                sourceComponent: page2Factory
            }
        }
    } //End of second tab
    attachedObjects: [
        ComponentDefinition {
            id: page1Factory
            Container {
	            MapView {
	                touchPropagationMode: TouchPropagationMode.None
	                objectName: "mapViewObj"
	                longitude: -79.4042;
	                latitude: 43.6481;
	                altitude: 3000
	                preferredWidth: Infinity
	                preferredHeight: Infinity
	            }
	        }            
        },
        ComponentDefinition {
            id: page2Factory
            Container {
                Label {
                    text: qsTr("Second tab") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    ]
}

 

 

 


Andrey Fidrya, @zmeyc on twitter
Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Part of Mapview frame see through

Thanks I will let you guys know if it works!