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
joelajean
Posts: 119
Registered: ‎01-25-2010
My Carrier: Bell
Accepted Solution

App World GridListLayout control with more tab...

Hi,

 

I'm planning to memic one of the common search result control found in BB10. The control is as per below, it usually displays the first 6 to 12 records in a Grid View, if more records, the gray tab enables the user to get more records which fires off a new pages with a full listview.

I have a few idea's how to implement it, but before I start coding and to avoid re-inventing the wheel I was woundering the following...


  1. Is this control part of the UI base controls ? I did snoop arround but never found any sample or code example in the documentation.

  2. If it needs to be created via custom controls... Any suggestions / guidelines how it could implemented ?

  3. Anybody aware of existing open source control that would be similar to this one ?

Thanks


 IMG_00000020.png

 

 

Please use plain text.
Developer
BBSJdev
Posts: 4,906
Registered: ‎07-05-2012
My Carrier: Orange

Re: App World GridListLayout control with more tab...

[ Edited ]

I answered this recently in another thread.

 

1) No.

 

3) No.

 

2) You could do it by a CustomControl but really there is no need as it is just one control overlayed on top of another.

 

A simple DockLayout which has;

On the bottom a simple GridListLayout ListView with snapMode enabled and horizontalAlignment 4 colums 2 rows.

On the top (set to bottom right) a simple Image or ImageButton that when clicked increments the listVew by 8 (scollToItem).

 


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.
Please use plain text.
Developer
joelajean
Posts: 119
Registered: ‎01-25-2010
My Carrier: Bell

Re: App World GridListLayout control with more tab...

[ Edited ]

Thanks BBSJDev,

 

I'm real close to have the desired UI but I have one caveat.. My page is set up with multiple header / listview. For each list view, if the datamodel contains more than two row of data, the listview can be scrolled...

How can I turn off the scolling and is it possible to have the header snapping at the top of the page has the user scroll down.. Also, do you have the URL for the other thread which you mentionned above...

Please use plain text.
Developer
BBSJdev
Posts: 4,906
Registered: ‎07-05-2012
My Carrier: Orange

Re: App World GridListLayout control with more tab...

Have you tried setting the columncount?
Multiple ListViews, why?

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.
Please use plain text.
Developer
joelajean
Posts: 119
Registered: ‎01-25-2010
My Carrier: Bell

Re: App World GridListLayout control with more tab...

GridListLayout.columnCount is set to 4, and the ListView.preferredHeight is set to only show first x numbers of rows (because I don't see any properties related to limit the numbers rows within the listview)...

 

The reason for multiple listview, the data is fetch from different datasources... I was thinking about merging the datasources and only utilize one listView, but I figured there was a simplier way to implement via UI without going throught a datasource merger...

Please use plain text.
Developer
BBSJdev
Posts: 4,906
Registered: ‎07-05-2012
My Carrier: Orange

Re: App World GridListLayout control with more tab...

You're going to have to post your code at this point because I'm struggling to envisage how you are doing it using just words.

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.
Please use plain text.
Developer
joelajean
Posts: 119
Registered: ‎01-25-2010
My Carrier: Bell

Re: App World GridListLayout control with more tab...

[ Edited ]

Always hard to explain via words... Here is a full working qml snippet. I've used google, yahoo and radio canada rss news feed to memic the different datasources. Google listview is displayed as a normal list view and the two others are displayed using a GridListLayout

Just a note, in my control, the StandardListItem is replaced by a CustomListItem. But for the example, it should not differ...


I really want to avoid using the preferredHeight... this will cause unwanted behavior especially for user using different font sizes.

Google News should display the first 3 records
Yahoo News should display the first 6 records (in a GridListLayout)
Radio Canada News should display the first 6 records (in a GridListLayout)

and the more button, is made visible if the corresponding datasources has more records that it is currenlty displaying !

 

import bb.cascades 1.0
import bb.data 1.0

Page 
{
    Container 
    {
        id: containerSearchResults
        
        ScrollView 
        {
            scrollViewProperties.overScrollEffectMode: OverScrollEffectMode.OnScroll
            
            Container 
            {
                
                Header 
                {
                    id: headerDataSource1Results
                    title: "Google News"
                }
                
                
                Container 
                {
                    topPadding: 20
                    leftPadding: 20
                    rightPadding: 20
                    layout: DockLayout {}
                    
                    ListView 
                    {
                        id: myListView1
                        snapMode: SnapMode.LeadingEdge
                        scrollRole: ScrollRole.None
                        preferredHeight: 350
                        
                        // Associate the list view with the data model that's defined in the
                        // attachedObjects list
                        dataModel: dataModel1

                        
                        listItemComponents: [
                            
                            ListItemComponent 
                            {
                                type: "item"
                                
                                // Use a standard list item to display the data in the data
                                // model
                                StandardListItem {
                                    //reserveImageSpace: false
                                    title: ListItemData.title
                                    description: ListItemData.pubDate
                                }
                            }
                        ]
                    }
                    
                    ImageButton 
                    {
                        verticalAlignment: VerticalAlignment.Bottom
                        horizontalAlignment: HorizontalAlignment.Right
                        defaultImageSource: "asset:///images/moretab.png"
                        pressedImageSource: "asset:///images/moretab.png"
                        
                        onClicked: 
                        {
                            // Load new page with full list view
                        }
                    }  
                }
                
                
                Header 
                {
                    id: headerDataSource2Results
                    title: "Yahoo News"
                }
                
                Container 
                {
                    topPadding: 20
                    leftPadding: 20
                    rightPadding: 20
                    layout: DockLayout {}
                    
                    ListView 
                    {
                        id: myListView2
                        snapMode: SnapMode.LeadingEdge;
                        scrollRole: ScrollRole.None
                        preferredHeight: 600
                        scrollIndicatorMode: ScrollIndicatorMode.None
                        
                        // Associate the list view with the data model that's defined in the
                        // attachedObjects list
                        dataModel: dataModel2
                        
                        layout: GridListLayout 
                        {
                            columnCount: 3
                            headerMode: ListHeaderMode.None
                            cellAspectRatio: 0.8
                            spacingAfterHeader: 20
                            spacingBeforeHeader: 20
                            verticalCellSpacing: 10
                            horizontalCellSpacing: 10
                        }
                        
                        listItemComponents: [
                            
                            ListItemComponent 
                            {
                                type: "item"
                                
                                // Use a standard list item to display the data in the data
                                // model
                                StandardListItem {
                                    //reserveImageSpace: false
                                    title: ListItemData.title
                                    description: ListItemData.pubDate
                                }
                            }
                        ]
                        
                        
                        
                    }
                    
                    ImageButton 
                    {
                        verticalAlignment: VerticalAlignment.Bottom
                        horizontalAlignment: HorizontalAlignment.Right
                        defaultImageSource: "asset:///images/moretab.png"
                        pressedImageSource: "asset:///images/moretab.png"
                        
                        onClicked: 
                        {
                            // Load new page with full list view
                        }
                    }  
                }
                
                
                
                Header 
                {
                    id: headerDataSource3Results
                    title: "Radio Canada News"
                }
                
                Container 
                {
                    topPadding: 20
                    leftPadding: 20
                    rightPadding: 20
                    layout: DockLayout {}
                    
                    ListView 
                    {
                        id: myListView3
                        snapMode: SnapMode.LeadingEdge;
                        scrollRole: ScrollRole.None
                        preferredHeight: 600
                        scrollIndicatorMode: ScrollIndicatorMode.None
                        
                        // Associate the list view with the data model that's defined in the
                        // attachedObjects list
                        dataModel: dataModel3
                        
                        layout: GridListLayout 
                        {
                            columnCount: 3
                            headerMode: ListHeaderMode.None
                            cellAspectRatio: 0.8
                            spacingAfterHeader: 20
                            spacingBeforeHeader: 20
                            verticalCellSpacing: 10
                            horizontalCellSpacing: 10
                        }
                        
                        listItemComponents: [
                            
                            ListItemComponent 
                            {
                                type: "item"
                                
                                // Use a standard list item to display the data in the data
                                // model
                                StandardListItem {
                                    //reserveImageSpace: false
                                    title: ListItemData.title
                                    description: ListItemData.pubDate
                                }
                            }
                        ]
                    
                    
                    
                    }
                    
                    ImageButton 
                    {
                        verticalAlignment: VerticalAlignment.Bottom
                        horizontalAlignment: HorizontalAlignment.Right
                        defaultImageSource: "asset:///images/moretab.png"
                        pressedImageSource: "asset:///images/moretab.png"
                        
                        onClicked: 
                        {
                            // Load new page with full list view
                        }
                    }  
                }
            }
        }
    }
    
    
    
    attachedObjects: [
        
        GroupDataModel 
        {
            id: dataModel1
            
            // Sort the data in the data model by the "pubDate" field, in
            // descending order, without any automatic grouping
            sortingKeys: ["pubDate"]
            sortedAscending: false
            grouping: ItemGrouping.None
        },
        
        
        GroupDataModel 
        {
            id: dataModel2
            
            // Sort the data in the data model by the "pubDate" field, in
            // descending order, without any automatic grouping
            sortingKeys: ["pubDate"]
            sortedAscending: false
            grouping: ItemGrouping.None
        },
        
        
        GroupDataModel 
        {
            id: dataModel3
            
            // Sort the data in the data model by the "pubDate" field, in
            // descending order, without any automatic grouping
            sortingKeys: ["pubDate"]
            sortedAscending: false
            grouping: ItemGrouping.None
        },
        
        DataSource 
        {
            id: dataSource1
            
            // Load the XML data from a remote data source, specifying that the
            // "item" data items should be loaded
            source: "http://news.google.com/news?topic=h&output=rss"
            query: "/rss/channel/item"
            type: DataSourceType.Xml
            
            onDataLoaded: 
            {
                // After the data is loaded, clear any existing items in the data
                // model and populate it with the new data
                dataModel1.clear();
                dataModel1.insertList(data)
                headerDataSource1Results.subtitle = dataModel1.childCount(0) + " new(s)";
            }
        },
    
        DataSource 
        {
            id: dataSource2
            
            // Load the XML data from a remote data source, specifying that the
            // "item" data items should be loaded
            source: "http://news.yahoo.com/rss/"
            query: "/rss/channel/item"
            type: DataSourceType.Xml
            
            onDataLoaded: 
            {
                // After the data is loaded, clear any existing items in the data
                // model and populate it with the new data
                dataModel2.clear();
                dataModel2.insertList(data)
                headerDataSource2Results.subtitle = dataModel2.childCount(0) + " new(s)";
            }
        },
        DataSource 
        {
            id: dataSource3
            
            // Load the XML data from a remote data source, specifying that the
            // "item" data items should be loaded
            source: "http://rss.radio-canada.ca/fils/nouvelles/nouvelles.xml"
            query: "/rss/channel/item"
            type: DataSourceType.Xml
            
            onDataLoaded: 
            {
                // After the data is loaded, clear any existing items in the data
                // model and populate it with the new data
                dataModel3.clear();
                dataModel3.insertList(data)
                headerDataSource3Results.subtitle = dataModel3.childCount(0) + " new(s)";
            }
        }
    
    ]
    
    onCreationCompleted: 
    {
        // When the top-level Page is created, direct the data source to start
        // loading data
        dataSource1.load();
        dataSource2.load();
        dataSource3.load();
    }
}

 

Please use plain text.
Developer
joelajean
Posts: 119
Registered: ‎01-25-2010
My Carrier: Bell

Re: App World GridListLayout control with more tab...

Final solution are per most of the recomendations... One ListView, I took the different dataModels and merged them into one mergedDataModel. Set the sorting keys, grouping and the sort order and bang !!! The listview displays the result as per requirment.

Please use plain text.