horizontal ListView

import bb.cascades 1.0

Page {
    Container {
        background: Color.create("#52c1b1")
        ListView {
            layout: StackListLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            objectName: "customList"
            id: customList
            listItemComponents: [
                ListItemComponent {

                   Container {
                       verticalAlignment: VerticalAlignment.Fill
                       horizontalAlignment: HorizontalAlignment.Fill
                       Label {
                           text:  ListItemData.fieldName
                       }
                   }
                }
            ]
        }

    }
}

How can I set each item in the listview to take full width? I like to set up a pager... will put indicators page as well.

Hi babakar,.

For an implementation of a listview horizontal, please order the application expanded sample available in the Cascades-sample on Github repo: the sample link

To make each item take the entire width, you must set the property flickMode to your ListView to SingleItem.

Tags: BlackBerry Developers

Similar Questions

  • Cascades of Horizontal ListView - is not Possible?

    Hi, I would like to have a horizontal list, but cannot figure out how to use the libraries of stunts.  I can see how it's done using the regular QT libraries, there is an orientation property but it does not exist in the Cascades ListView.

    Does anyone know how to make using the stunts?

    OK, it can be done in C++:

    Using the example of Cookbook program, I declared a variable StackListLayout in ListView * CascadesCookbookApp::createRecipeListView() and it happened in the ListView:

    StackListLayout * sll = new StackListLayout (LayoutDirection::LeftToRight);

    ListView * recipeListView = new ListView (sll);

    I still prefer to have a solution within QML, but at least I know that this is possible.

  • Simple horizontal listview in cascades

    Hello

    I'm trying to implement a simple horizontal list in the containing element, which is a delegate of another listview. I did several tests but failed. Can anyone help?

    EDIT: I wrote a wrong code, which I corrected.

    import bb.cascades 1.0
    NavigationPane {
        id: nav
        Page {
            Container {
                ListView {
                    dataModel: customModel
                    listItemComponents: [
                        ListItemComponent {
                            Container {
                                ListView {
                                    dataModel: XmlDataModel {
                                        source: "data.xml"
                                    }
                                    layout: StackListLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    listItemComponents: [
                                        ListItemComponent {
                                            Label {
                                                text: ListItemData.item.name
                                            }
                                        }
                                    ]
                                }
                            }
                        }
                    ]
                }
            }
        }
    }
    

    You can close this thread off then as it's really a different issue with a different answer.

    In the new thread specify what animation you want to do and how the labels are placed in the container.

  • Why my ListView items cannot display on a single line?

     ListView {
           preferredHeight: ui.du(20)
           id: keyItemList
           dataModel: _nao.keyItemList
    
           leftPadding: 20
           rightPadding: 20
        //
           layout: StackListLayout {
               orientation: LayoutOrientation.LeftToRight
               headerMode: ListHeaderMode.None
           }
    
           listItemComponents: [
    
               ListItemComponent {
                   type: 'item'
                   Container {
                       preferredHeight: ui.du(20)
                       preferredWidth: ui.du(20)
                       KeyItem {
                           name: ListItemData.name
                           nowPic: ListItemData.nowPic
                           dot: ListItemData.dot
                           rate: ListItemData.rate
                       }
                       topMargin: ui.du(1.0)
                       leftMargin: ui.du(1.0)
                       rightMargin: ui.du(1.0)
                       bottomMargin: ui.du(1.0)
                  }
              }
          ]
    
          verticalAlignment: VerticalAlignment.Center
          horizontalAlignment: HorizontalAlignment.Center
    }
    

    If I put prop of listview layout. Items being passed.

    If I didn't put any accessories page layout, the elements present, but vertically.

    It can be a little difficult to get the horizontal listviews to behave, dimensions should be set correctly if I remember correctly.

    See https://github.com/oniongarlic/bb10-hlv-example/blob/master/assets/main.qml for an example code.

  • How can I place a listview in a listview?

    Hello everyone.

    I do an application on my website and I would like to have an area featured inside, but I found a big problem when I try to add the recommended area to the main Listview (where the post is loaded).

    It is an example of what he would like to see inside my application:

    So I want to spend the "Star box" and "Feeding zone" at the same time, when the user tries to scroll vertically.

    I tried to use a ScrollView but the priority of scrolling is in vertical listview and the recommended area does not scroll only when the vertical scroll listview is finished.

    Could someone give me a suggestion?

    See you soon!

    I don't think we have an example that does exactly what you want, but basically, you could create a CustomListItem contains inner ListView.  You would need a second source of data for inner ListView or have the first element of your main data source to be another source of data.

    The main ListView could choose the ListItem to display based on a type item in the data source main or you could rely on the position. forumThreadList.qml shows how you can override the itemType method to select the type of item (if it is not defined in the original data source).  This example also shows how to use a CustomListItem, but not one that contains a ListView.

    Here is another example that shows a part of the implementation.  It would have a horizontal ListView in all the ranks of the main list.  If you combine these two you should be able to get what you are looking for.  Let me know if you have any questions along the way.

    import bb.cascades 1.2
    
    // creates one page with a label
    Page {
        attachedObjects: [
            //ComponentDefinition doesn't work because DataModel doesn't extend BaseObject
            ArrayDataModel {
                id: dm2
            },
            ArrayDataModel {
                id: dm3
            }
        ]
        Container {
            ListView {
                dataModel: ArrayDataModel {
                    id: dm
                }
                listItemComponents: [
                    ListItemComponent {
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.TopToBottom
                            }
                            ListView {
                                preferredHeight: 100
                                //Thankfully the QVariant is a DataModel, so this works :)
                                dataModel: ListItemData
                                layout: StackListLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                listItemComponents: [
                                    ListItemComponent {
                                        Container {
                                            layout: StackLayout {
                                                orientation: LayoutOrientation.LeftToRight
                                            }
                                            Label{
                                                text: ListItemData +"\t|\t"
                                            }
                                        }
                                    }
                                ]
                            }
                            Divider {}
                        }
                    }
                ]
            }
        }
        onCreationCompleted: {
            dm2.append(["This is","another list","inside of","the first one"])
            dm3.append(["<( \" <) <( \" <) <( \" <)","(^\"^) (^\"^) (^\"^)","(> \" )> (> \" )> (> \" )>","(^\"^) (^\"^) (^\"^)","(> \" )><( \" )><( \" <)","(^\"^) (^\"^) (^\"^)","<( \" <) (>\"<) (> \" )>","(v' 'v) (v' 'v) (v' 'v)"])
    
            dm.append(dm2)
            dm.append(dm3)
        }
    }
    
  • ListView doesn't show up until the key event occurs

    I have a set of vertical ListViews in a horizontal ListView control. The problem I have is that content displayed only after the user has touched the screen. I thought it's maybe because I've flooded the event thread too so I tried only show a LV in the VG master and always the content displays only when the screen is touched. It's starting to look like a bug in the operating system.

    I found the solution. In one of my containers is the container root for each element of the list, there was no set of preferred height. Preferred height setting stopped the madness. I don't know what preferred height is related to visibility is disabled until the screen is touched, but whatever.

    Thank you

    Scott

  • Any view by scanning available control?

    BB10 has its own version of the view of iOSs page control where the user can drag to view different pages?

    You can make the same effect, but will not be a shot or pages...

    What you do is create a horizontal ListView (https://developer.blackberry.com/native/reference/cascades/bb__cascades__listview.html) and set the flickMode (https://developer.blackberry.com/native/reference/cascades/bb__cascades__flickmode.html) single element. Then do each list item the size of a page. For folds/UX layout manually add these dots at the bottom of each page to give the appearance to the page 1 - X or any other style you want to give the ux similarly.

  • Cascades - how to get the actual size of the item?

    Hi all

    Is it possible to get the actual width/height of the Visual element in cascade? I developed before Qt Quick applications and Qt Quick solution was simple - there's width and height properties which was always updated to the size of the real thing, and you could use them when necessary. In Silverlight, there are ActualHeight() and ActualWidth() for all visible elements. However, in the Cascades, as I see it, there are only minHeight, maxHeight, and preferredHeight and the same width, but there is no property that references element real width or height.

    I need, for example, to assign the size appropriate to the ListView items - I want to create horizontal ListView which shows only a single element (that is, the image) at a time, correctly resizes this image to fit, and works for a screen resolution and orientation. Qt Quick, I solved this by linking the width and the height to the width of the container of the element of the list element and (Rectangle) height of ListView and using the good snapMode (i.e. SnapOneItem). This works perfectly for any screen size & resolution. How can I do something like this in stunts without Hardcoding the 'magic numbers' preferredWidth and preferredHeight?

    Thanks in advance for your answer.

    You can get the width and height by using LayoutUpdateHandler of the element:

    https://developer.BlackBerry.com/Cascades/reference/bb__cascades__layoutupdatehandler.html

    LayoutUpdateHandler::create(scrollView)
        .onLayoutFrameChanged(this, SLOT(handleLayoutFrameUpdated(QRectF)));
    
  • Index of the current visible item ListView

    Hello

    Maby someone here knows how to do this

    I have a ListView that shows only 1 point in time (scroll in a horizontal direction)

    What signal to use or how to get the index of the currently selected item

    This is necessary because of this example:

    |--------------------|
    |        listview        |
    |         item 1        |
    |--------------------|
               1/10
    
    |--------------------|
    |        listview        |
    |         item 4        |
    |--------------------|
               4/10
    

    THX

    ListScrollStateHandler can be used to find the first visible element:

    http://developer.BlackBerry.com/Cascades/reference/bb__cascades__listscrollstatehandler.html#propert...

    Two items can be displayed simultaneously during scrolling, so I guess that extra code will be needed to determine who occupies the largest part of the screen.

  • Alignment and Listview header history

    I want to display header of the listview to centerd horizontally and give it a background color? I tried but its not working

    Hello

    Please given the size container means a full width based on the width of the screen. I hope that they conver the part with the gray color.

    Thank you

    Umang.

  • How to make a horizontal pagination in cascades of BB?

    I am developing my application from BB 10 using Momentics 2.1.2.

    I want to ask: is it possible to build a horizontal paging like in the picture below inside a container to substitute a listview with a grid view? If so, is there an example to follow?

    I made a tutorial example of application once, it follows the page that you are currently viewing, but it is not displayed to the user. It can easily be changed to display paging as pictured. I use a StackListLayout with direction to LeftToRight.

    https://github.com/RodgerLeblanc/tutorial

  • ListView - elements that are currently visible?

    Hello!

    I was unable to find a method how to check what a listview items are currently visible on the screen and which are hidden. Is there a method since beta 3 or is this planned for the Beta4?

    ScrollToItem and scrollToPosition are since the Beta3 implemented. But how to read that data?

    Any ideas?

    Well, after a night sleeping on it I retried it with your approach a second time.

    This is my solution for a horizontal scrolling list view in which each item in the list is exactly as big as the screen, so there is always only one item which is the most visible element in the list:

    listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
                attachedObjects: LayoutUpdateHandler {
                    id: luhPosition
                    onLayoutFrameChanged: {
                        lblTest.text = "XXX" + luhPosition.layoutFrame.x + " - " + Qt.pageHandler.layoutFrame.width
                        if (luhPosition.layoutFrame.x >= - Qt.pageHandler.layoutFrame.width / 2 && luhPosition.layoutFrame.x <= Qt.pageHandler.layoutFrame.width / 2) {
                            //call here a C++ routine to deliver the ID of the currently visible panel in the ListView:
    
                            testArea.background = Color.Blue
    
                        } else {
                            testArea.background = Color.DarkRed
                        }
                    }
                }
            }
            Container {
                preferredHeight: Qt.pageHandler.layoutFrame.height
                preferredWidth: Qt.pageHandler.layoutFrame.width
                background: Color.Green
                id: testArea
                Label {
                    id: lblTest
                    text: "Test"
                }
            }
        }
    ]
    

    I created a second LayoutUpdatehandler at the level of the container root in which my ListView is incorporated to get the screen resolution and provide the object inside the Listview using:

    onCreationCompleted: {
        Qt.pageHandler = pageHandler;
    }
    
  • ListView showing no data

    version 12.1.3

    I am building a test page to the CEP a responsive design. I have an employee table that I display tabular ADF in desktop/tablet, but want to display as a ListView when the page is loaded from a smartphone.

    I use panelGridLayout as a base container on the page. It has two rows, first row has available to desktop/tablet and second row has mobile layout. CSS has a defined media query that determines which page layout to display.

    It all works very well!

    The problem I've seen is the I am falling the same employee of the data control in the page, a table of the ADF and the other as ListView. When I run the page and do a search on employeeId, the result is displayed on the

    table, but not on the ListView. But, if I select a row in the table and navigate to edit the page and back, the data are displayed in the tables and ListView. It seems that the listView is not load/refresh when I query data.

    Any ideas on how to solve this problem? Here my snippet for tables and lists.

    Table:

    < af:table value = "#{bindings.employee.collectionModel}" var = 'row' "

    Rows = "#{Bindings.Employee.rangeSize} '"

    emptyText = "#{bindings.employee.viewable?" "{'No data to display.': 'Access Denied.'}".

    rowBandingInterval = '1 '.

    selectedRowKeys = "#{bindings.employee.collectionModel.selectedRow} '"

    selectionListener = "#{bindings.employee.collectionModel.makeCurrent} '"

    rowSelection = 'unique' fetchSize = "#{bindings.employee.rangeSize} '"

    filterModel = "#{bindings.employeeQuery.queryDescriptor} '"

    filterVisible queryListener = "#{bindings.employeeQuery.processQuery}" = 'false' "

    varStatus = 'vs' id = "t1" autoHeightRows = "0" columnStretching = "multiple".

    verticalGridVisible = "false" contentDelivery = "immediate" scrollPolicy = "scroll".

    immediate = "true" >

    < af:column sortProperty = "#{bindings.employee.hints.userName.name}"blockable = 'true' "

    sortable = "true" headerText = "Username" id = "c1" width = '% 7 '.

    minimumWidth = "12" >

    < af:outputText value = "#{row.userName} '"

    shortDesc = "#{bindings.employee.hints.userName.tooltip}" id = 'ot1' "

    inlineStyle = "do-family: Verdana, Arial, Helvetica, without serif;" font-size: small; "/ >

    < / af:column >

    < af:column id = "c7" width = "5%" displayIndex = minimumWidth '-1' = "12" >

    < af:panelGroupLayout id = "pgl6" layout = "horizontal" >

    "{[< af:button id ="b2"action ="├editer"icon =" #{resource ['images: update_ena.png]} "]}".

    immediate = "true" / >

    < / af:panelGroupLayout >

    < / af:column >

    < / af:table >

    ListView:

    < af:listView id = value = "#{bindings.employee.collectionModel"lv1"} ' var = 'row'"

    selectionListener = "#{bindings.employee.collectionModel.makeCurrent} '"

    selection = 'unique' immediate = "true" >

    < name f: facet = "groupHeaderStamp" / >

    < af:listItem id = 'li1' >

    < af:outputText value = "#{row.userName}" id = "ot7" / > "

    < / af:listItem >

    < / af:listView >

    I got it to work after adding pointers to search text boxes in the partial trigger of the ListView. Kind of interesting because I can't do that, if it fell in a table instead of ListView.
    "partialTriggers =": it2: it3: it1.

  • Help!  I hate the new update.  I love type horizontally when replying to text messages, and now I can't!

    I hate the new updates!  I love type horizontally when I text and now I cannot since this morning when I did the update.  When I turn the screen all these pre's words come as 'Hello' help!  I want to go back before update!

    srvhtv wrote:

    I hate the new updates!  I love type horizontally when I text and now I cannot since this morning when I did the update.  When I turn the screen all these pre's words come as 'Hello' help!  I want to go back before update!

    Sorry, downgrade ios only is not supported by Apple.

    You can leave feedback here http://www.apple.com/feedback/

  • Controls horizontal volumen in macOs Sierra

    Hello

    With the new volume control available under macOs Sierra (horizontal slider) now you can't click and drag the volume control that I used to do! Was perhaps than me, but I used this technique (click and drag) a lot of time for speed and simplicity.

    If it's a matter of UI design, I think it's pretty easy to keep the cursor in the vertical volume with a list of outputs available on the right side like this:

    So please! go back to the vertical!

    FWIW. the horizontal slider works for me.

    I doubt that the problem you are experiencing has nothing to do with the orientation of the slider.

    It is a technical user support site, Apple isn't here. You can let them know here...

    http://www.Apple.com/feedback/

Maybe you are looking for