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
Developer
Posts: 112
Registered: ‎10-10-2010
My Device: Torch
My Carrier: Verizon

How to load qml page using a button

I could have sworn I did this before but I can't seem to get it on my new project.

 

Is there a sample app that shows it? Can't seem to find any at all that uses buttons to open nav panes

 

How would I go about with the onClicked:  { } method?

 

Thanks,

Cozz

 

 

 

 

______________________________________________
Android dev jumping ship to BB. Cascade newbie. Any help would be great. Miss the Visual Basic days.

Updated my pin
Developer
Posts: 112
Registered: ‎10-10-2010
My Device: Torch
My Carrier: Verizon

Re: How to load qml page using a button

main.qml

import bb.cascades 1.0
import "Common"

NavigationPane {
    id: navigationPane
    
    Page {
        id: mainListPage
        content: Container {
                     
            layout: DockLayout {
            }
           
        ImageView {
                imageSource: "asset:///images/background.png"
                 preferredWidth: 768.0
                preferredHeight: 1280.0
                      }


        Container {

        Button {
            text: "Everything Automotive"
            onClicked: {
                       }
            preferredWidth: 768.0
                       }
                
        ProgressIndicator {
                    value: 1.0
                    state: ProgressIndicatorState.Progress
                    minWidth: 768.0
                    opacity: 0.2
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Center
                    toValue: 1.0
                    fromValue: 0.0
                               }
                       } // End Top container
                    
        Container {
                topPadding: 160.0
                ListView {
                    id: brandList
                    dataModel: XmlDataModel {
                        source: "brands/brandlist.xml"
                    }
                    listItemComponents: [
                        ListItemComponent {
                            type: "brandlist"
                            MainList {
                                     }
                                          }
                                        ]  
                  }  // End XML container
                
         Container {
               topPadding: 11
               
         ProgressIndicator {
               value: 1.0
               state: ProgressIndicatorState.Progress
               minWidth: 768.0
               opacity: 0.4
               toValue: 1.0
               fromValue: 0.0
                            }
         Button {
                minWidth: 768.0
                text: "About"
                onClicked: {                   
                    var page = getAboutPage();
                    navigationPane.push(page);
                           }
                
                    property Page aboutPage
                    function getAboutPage() {
                    if (! aboutPage) {
                        aboutPage = aboutPageDefinition.createObject();
                                      }
                    return aboutPage;
                                              }
                attachedObjects: [
                    ComponentDefinition {
                        id: aboutPageDefinition
                        source: "about.qml"
                                        }
                                  ]            
                                   }
                                    }        
                                }
                            }
            }    
        }

 

MainList.qml

import bb.cascades 1.0

Container {
    id:itemList
  
      leftPadding: 200.0
 
    Button {
        id: buttonID   
        text: ListItemData.title
            }
       
      

 

This is a snippet of brandlist.xml

<root>
    <brandlist title="Acura"        		 file="acura.qml"/>
    <brandlist title="Audi"  		     	 file="audi.qml"/>
    <brandlist title="BMW"               	 file="bmw.qml"/>   
    <brandlist title="Buick"          		 file="buick.qml"/>
    <brandlist title="Cadillac"              file="cadillac.qml"/>

 

I'm having issues opening a pane for any of the selected buttons. The buttons are titled via xml

 

The about button works just fine. Just those made with xml are the issue.

 

Ignore the progress bars as I used them for visual referrence between containers.

______________________________________________
Android dev jumping ship to BB. Cascade newbie. Any help would be great. Miss the Visual Basic days.

Updated my pin
Developer
Posts: 100
Registered: ‎10-01-2012
My Device: BB10 Dev Alpha
My Carrier: Roger

Re: How to load qml page using a button