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
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later
Accepted Solution

How can I build this in list view

 JsonDataAccess jda;
			QVariant jsonva = jda.load(QDir::currentPath() +
			    	                         "/app/native/assets/employees.json");

			QVariantList list = jsonva.toList();
				Container* conts = root->findChild<Container*>("customList");
			    for (QList<QVariant>::iterator it = list.begin(); it != list.end(); it++)
				{
			    	//Key-value pairs from list item put into a map
			    	QVariantMap map = it->toMap();

			    	//search key-value pairs for specific key of the array, in this case "contactInfo"
			    	QVariant childJsonva = map.value("firstName");
			    	QVariant childJsonva2 = map.value("lastName");
			    	QVariant childJsonva3 = map.value("employeeNumber");
			   
			    	//Take the key-value pairs from the variant above and put into QList


			    	Container* cont = new Container();
			    	Container* cont2 = new Container();

			    	Label* lb1 = new Label();
			    	lb1->setText(childJsonva.toString());

			    	Label* lb2 = new Label();
			    	lb2->setText(childJsonva2.toString());
			    	lb2->setHorizontalAlignment(HorizontalAlignment::Right);
			    	Label* lb3 = new Label();
			    	lb3->setText(childJsonva3.toString());

			    	StackLayout* layout = new StackLayout;
			    	layout->setOrientation(LayoutOrientation::LeftToRight);
			    	cont->setLayout(layout);
			    	lb1->setLayoutProperties( StackLayoutProperties::create()
			        .spaceQuota(1));
			    	lb2->setLayoutProperties(StackLayoutProperties::create()
			        .spaceQuota(1));
			    	lb2->textStyle()->setTextAlign(TextAlign::Right);
			    	cont->add(lb1);
			    	cont->add(lb2);

			    	cont2->add(lb3);
			    	conts->add(cont);
			    	conts->add(cont2);
				}

 

  Container {
                objectName: "customList"
                preferredWidth: Infinity
                leftPadding: 20
                rightPadding: 20
                bottomPadding: 20
                topPadding: 20
                layout: StackLayout {
                    orientation: LayoutOrientation.TopToBottom
                }
                
            }

 

 

Simple code I done.

 

 

I parse a json file, and i do 2 containers.

first continer from left to right i put 2 labels one on left and the other on right

then another container i put it below the first one..

 

i loop again, and do same thing over and over.

 

thus i create a list of mine...

 

But this way its too heavy, i dont know how to work this one out in listview.. can someone help me in it?

How can I have a list view... first name on left last name on right, and below them employee number.

I dont wanna do it a list of many containers inside one big container.

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

Re: How can I build this in list view

You can do yyour own custom container.

 

If you are building to 10.2 you can use this...

 

http://developer.blackberry.com/native/reference/cascades/bb__cascades__customlistitem.html

 

Before 10.2 you can do the same thing using your own Container but you lose the highlighting of need to implement it yourself.

 

Do a search in these forums for highlight and listitem if you are interested in doing it the second way.

 

 


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

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: How can I build this in list view

so the way i do it is right?

Can I create around 500 containers in my page?

Also how can I make a container scrollable?
scrollview not helping
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: How can I build this in list view

Within a ListView yes but depending on the complexity of your container you might like to investigate some caching strategies or making image loading asynchronous.


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

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: How can I build this in list view

Okey man, here is what I did

 

 

 ListView {
                objectName: "customList"
                
                leftPadding: 20
                rightPadding: 20
                bottomPadding: 20
                topPadding: 20
                listItemComponents: [
                    ListItemComponent {
                         Container {
                            id: itemRoot    
                            layout: StackLayout {
                                orientation: LayoutOrientation.TopToBottom
                            }
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                 Label { 
	                                text: ListItemData.firstName
	                                horizontalAlignment: HorizontalAlignment.Left
	                                layoutProperties: StackLayoutProperties {
                                     spaceQuota: 1
                                 }
	                                }
	                            Label { 
	                                text: ListItemData.lastName 
	                                horizontalAlignment: HorizontalAlignment.Right
                                    layoutProperties: StackLayoutProperties {
                                        spaceQuota: 1
                                    }
	                                textStyle
	                                {
	                                    textAlign: TextAlign.Right
	                                }
	                                }
                            }
                            Container {
                                
                                Label {text: ListItemData.employeeNumber}
                            }
                        }
                    }
                ]
                
            }

 

 JsonDataAccess jda;
			QVariant jsonva = jda.load(QDir::currentPath() +
			    	                         "/app/native/assets/employees.json");

			QVariantList list = jsonva.toList();
			bb::cascades::QVariantListDataModel *listModel = new QVariantListDataModel();
				ListView* custList = root->findChild<ListView*>("customList");
			    for (QList<QVariant>::iterator it = list.begin(); it != list.end(); it++)
				{
			    	//Key-value pairs from list item put into a map
			    	QVariantMap map = it->toMap();

			    	//search key-value pairs for specific key of the array, in this case "contactInfo"
			    	QVariant childJsonva = map.value("firstName");
			        QVariant childJsonva2 = map.value("lastName");
			    	QVariant childJsonva3 = map.value("employeeNumber");
			    	listModel->append(map);


				}

			    custList->setDataModel(listModel);

 

 

So I get first name on left, last name on right and below them employee number.

However, there is no seperator line drawn between an item component and another?  why so?

and how can I add seperator line between one row and the other?

 

Plus how can I trigger a function on click of a row?

Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: How can I build this in list view

I added sthg called divider
var selectedItem = dataModel.data(indexPath);

How can I color the selected row?
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: How can I build this in list view

Give the container a background colour or background image.

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

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: How can I build this in list view

 ListItem.onSelectionChanged: {
                        itemRoot.background = Color.DarkBlue;
                    }

 

I did this, but it gives 0 effect. it never detects selection change

 

I want to highlight row selected, and remove highlight when another row selected.

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

Re: How can I build this in list view

[ Edited ]

http://supportforums.blackberry.com/t5/Native-Development/Listview-Highlight-Selected-Index/m-p/2336...

 

Happy New Year.


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

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: How can I build this in list view

happy new year as welll

but that solution doesnt work for me

because if specify type..neither first name or last name show..just employee number

similar to this problem i guess http://stackoverflow.com/questions/15300452/listview-isnt-using-custom-listitemcomponent