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
Regular Contributor
Posts: 64
Registered: ‎03-04-2010
My Device: 9930
My Carrier: VZN
Accepted Solution

Collapsible List Help

[ Edited ]

Hello,

 

Help QML and Javascript pro's.  So far things work okay, I can get the list to load and collapse but I cant edit the styles of the components.  When I debug it seems to skip the component settings I have.  I used the example code from this Blackberry Dev Blog post to lead me to what I have now.

 

I have tried several different things and currently have the following runnable code (just not doing what I want):

 

main.qml

import bb.cascades 1.0

Page {    
    id: homeScreen
    
	//Background container        
	Container {
		objectName: "mind_template_preferences"
		topPadding: 200
		
		//Background 
		background: backgroundPaint.imagePaint            
		attachedObjects: [
		    ImagePaintDefinition {
		        id: backgroundPaint
		        imageSource: "img/editingBG.png"
		        repeatPattern: RepeatPattern.XY
		    }
		]//End Background
	        
	    //Elements
	    Container {
	        ExpandableItem {
	            prefHeader: "Data To Track"
	            prefList: "models/trackData.xml"
	            expandImage: "img/plus.png";
	            collapseImage: "img/minus.png";
	            prefVisible: false
	        }
	        ExpandableItem {
	            prefHeader: "Auto Reports"
	            prefList: "models/trackData.xml"
	            expandImage: "img/plus.png";
	            collapseImage: "img/minus.png";
	            prefVisible: true
	        }
	    }//End Elements
	}//End Background Container
}//End Page

 ExpandableItem.qml

import bb.cascades 1.0

Container {
    property alias prefHeader: btnHeader.text
    property alias prefList: modelSource.source
    property alias prefVisible: xmlBody.visible
    property string collapseImage
    property string expandImage
    onPrefVisibleChanged: {
        if (prefVisible) {
            btnHeader.imageSource = collapseImage;
        } else {
            btnHeader.imageSource = expandImage;
        }
    }
    
    Button {
        id: btnHeader
        text: "default header"
        preferredWidth: maxWidth
        imageSource: collapseImage
        onClicked: {
            if (prefVisible) {
                xmlBody.visible = false;
                btnHeader.imageSource = expandImage;
            } else {
                xmlBody.visible = true;
                btnHeader.imageSource = collapseImage;
            }
        }
    }
    
    ListView {
        id: xmlBody
        dataModel: XmlDataModel {
            id: modelSource
                       source: "model default"}
       //List of Components
       listItemComponents: [  
                               
	       //Component One    
	       ListItemComponent {
	           type: listItem
	           Container {
               Label { text: ListItemData.title
	                   textStyle.color: Color.create("#ff0173ff")}
	           CheckBox {
                checked: false}       
	           }
	       }//End Component One
	       
       ]//End List of Components
    }//End List View
}

 dataTrack.xml

<root>
	<listItem title="Time"/>
	<listItem title="Distance"/>
	<listItem title="Fuel Consumption"/>
		<listItemSub title="Gas"/>
		<listItemSub title="Electricity"/>
</root>

 

Brandon Clark
The Mind Company | www.themindspot.com

Regular Contributor
Posts: 64
Registered: ‎03-04-2010
My Device: 9930
My Carrier: VZN

Re: Collapsible List Help

Okay I got it.  Simple boo-boo.  Forgot quotation marks around xml item name.

 

This was the fix:

	       //Component One    
	       ListItemComponent {
	           type: "listItem"
	           Container {}}

 

Brandon Clark
The Mind Company | www.themindspot.com