On the ListView component

Hi all

I have already created a simple list of 2 level (header, item) to an XML file.
The default ListView displays the headers and elements. I want to know if it is possible to do sizable, I mean I want my list just presenting the elements of headers when the user clicks on an element of the header, the second level is displayed (and if they click the header again, he second level cache).
Do you think I can handle this kind of list with Qml?

Thanks for your help,
Laurent

The attached example illustrates the use of a custom data model to populate a list.

The style is bad, then it comes in the form of light text on a pale background.

If you click on 'Hello' then 'Hello' expands.  Click again and it collapses.

Ditto for "the world".

Is - this pretty much what you're looking for?

Stuart

Tags: BlackBerry Developers

Similar Questions

  • ListView component with jDev 12.1.3

    Hi all, I am using the ListView component with jDev 12.1.3. Display data works fine, but when I try to use the operation of setCurrentRowWithKeyValue, I get an error of Houston-35011. Any ideas?

    IN my scenario, I want to show a set of data in a list view. Then I would show the details of the selected record in a second page. I used the same approach to the Table component, but it does not work. Can you please help?

    Thanks in advance,

    Marco

    As I said in the previous answer, place just selection = "single" and selectionListener = "#{bindings." Question1.treeModel.makeCurrent}"on the af:listView component (this will automatically selected in your VO line).

    And af: link button navigate to this page to another.

    If there is still a problem, you need to provide more details about it (because it's probably not related to the selection of lines in the af:listView element).

    Dario

  • I can rearrange the email component and seen to be side by side rather than stacked?

    I can rearrange the email component and seen to be side by side rather than stacked?

    What does that mean?

  • How can I measure the continuous component of the tension a SMU-4496 with LabView

    Hello

    I use an SMU-1073 NI with an SMU-4496 for several applications. In one of them, I would need the blood, maintain the continuous component (this is an accelemeter of MEMS). It's standing vertical, it gives, for example, + 2V and I need to keep reading this almost constant value.

    However, with the DAQ Assistant in LabView, it seems that it only reads the component changing signal, as is it doesn´t to move, it reads almost 0. If it moves, the, the DAQ system takes the change but then returns to zero.

    Is this normal? Read the constant part of the signal?

    (I'm a mechanical engineer and I'm not at all an expert in acquisition of signals or data, so probably just something basic is missing me)

    I have attached an example in which, after a change, it goes back to zero and the configuration in the DAQ assistant

    Thank you

    AC coupling is the culprit-it allows to block all components of steady state DC.

    -AK2DM

  • Take the real component of the logarithms of negative numbers

    I'm taking the log of a number, and I need the real component. For example: log(-5) = 0.698970004 + 1.36437635 i

    I have to be able to take the 0.698970004 and use it, while just Labview says his NAN.

    I just figured as a CPD, I can throw the entries, but then I still don't know how to convert with only the real component.

    Ideas?

    Thank you

    The trick is to define the representation of the data type of the lap number in the primitive logarithm. After that, it is easy to divide the complex number in real and imaginary components:

  • How to get the ActiveX component value change event?

    Hi all

    LV 8.6.1

    I try to get the ActiveX component value change event. I covered forum and through examples, but I can't get an idea of how "Recalling vi. For example, in the example 'ActiveX event Callback for IE.vi' it is used "recall vi". I've added an example where the change event of value with the mouse to the bottom of the event are scheduled to the structure of the event. Mouse down event OK work but change the value no. Can anyone describe what I need to add to my example vi who value the change event works fine?

    BR, Jim

    Here is the solution! "Value changed event" is not performed in the structure of the event, but in "Reminder VI".

  • Windows Installer cannot find the Destination component

    After wash starts the Windows Installer window if poster once finished top of desktop. The process takes about a minute. Windows Installer message is, "Preparation for installation." Then, the Destination component appears with message "Please wait while Windows configures the destination component", and shows the progress bar. Then, the Destination component window appears with the message, "an installation package to the Destination of the product component is not found. Try the installation again using a valid copy of the installation package, "Destination. msi´."

    This package is not in my computer. This happens everytime I turn on the computer. The whole process is very long. How can I fix it so that the message?

    Thank you for your help.

    Hi lmcrae,

    Put your computer in a clean boot configuration to determine which product is responsible for this. Clean boot is a way convenient, safer to change the options for startup in the registry; You can turn individual items or disable freely to try various combinations up to that narrow you the problem. Once you find out, post details about the same so that we can take additional measures.

    Please see this article for detailed information on how to do it.

    How to troubleshoot a problem by performing a clean boot in Windows Vista or in Windows 7

    Note: Ensure that you switch your computer to normal startup mode after completing the troubleshooting steps. Steps are available in the article above.

    Kind regards

    Shinmila H - Microsoft Support

    Visit our Microsoft answers feedback Forum and let us know what you think.

  • Specific text of color in the listview element

    Hello

    I have in my application:

      ListView {
            id: myListViewAya
    
            dataModel: dataModelAya
    
            listItemComponents: [
    
            ListItemComponent {
                    type: "item"
                    id: listItemComponent_Aya
               Container {
                  // background: Color.create("#75b5d3")
                   Label {
                       id:label_Aya
                       text: ListItemData.id
                       textStyle.color: Color.Blue
                   }
                }// end of Container
            } // end of ListItemComponent 
    
            ] // end of listItemComponents list
    }end of ListView 
    

    I want the text 'label_Aya' (the second element in the listview) and all other elements of color in 'red '.

    Blue

    Please help me

    Thank you very much

    as it works well:

      ListView {
            id: myListViewAya
    
            dataModel: dataModelAya
    
            listItemComponents: [
    
            ListItemComponent {
                    type: "item"
               Container {
                id: listItemComponent_Aya
                  // background: Color.create("#75b5d3")
                   Label {
                       id:label_Aya
                       text: ListItemData.id
                textStyle.color:(listItemComponent_Aya.ListItem.indexPath[1] == 1) ? Color.Red : Color.Blue
                   }
                }// end of Container
            } // end of ListItemComponent 
    
            ] // end of listItemComponents list
    }end of ListView
    

    Thank you thank you thank you...

  • Find the child component of the root in C++

    Hi all

    In my application I am after this architecture for creating interface user TabbebedPane then in the first tab of TabbedPane I a NavigationPage then I created a page in the navigation page and then there is a listview in the page.

    I am facing following problems

    1 when I push the Navigation pane by setting ActiveTab property to set the first tab as the active tab Page does not freeze it.

    2. when I try to find this listview in C++ code to bind GroupDataModel to display the data I get server.

    I use this code to get the listview

    ListView * listview = Application::instance()->findChild ("listview");

    Help, please

    Concerning

    Thank you all,

    Problem solved. I made a mistake. I was binding qml with the navigation pane using ComponentDefinition that create dynamic components of QML, and that's why I wasn't getting ListView using ObjectName or id of the list.

    The solution to this problem is: the tab like this Setcontent

    Code snippet

    TabbedPane{
    Tab {
            id: tab
            objectName: "Tab1"
            title: qsTr("TITLE")
            imageSource: "asset:///images/Chat.png"
            content: NextPage{
                id:test
            }
        }
    .....
    ...
    ....
    
    }
    

    Thanks and greetings

  • Scrolling of the ListView in the end does not work

    Hi, when creating completed page, I add items to listview and scrolltoposition (end, smooth) but it does not work. How can I auto-scroll down entering the page?

    It's almost a year, but it was the first match in google for my problem.

    I solved it by changing the orientation of my layout of the ListView and the sort order of my model.

    ListView {
        layout: StackListLayout {
            orientation: LayoutOrientation.BottomToTop
        }
    }
    
  • Highlight the item selected in the ListView

    Hello guys,.
    I have a list view and you want to highlight the element select when I click on it, for all clicked items.

    Thank you.

    esam_tec wrote:

    Hello guys,.
    I have a list view and you want to highlight the element select when I click on it, for all clicked items.

    Thank you.

    There are different ways to do

    eg.:

    in your container of ListItem:

    background: ListItem.selected || ListItem.active ? Color.Magenta : Color.Transparent
    

    in your onTriggered of the ListView:

    // select line
                    myListView.select(indexPath, true)
    

    Remember, if your work has been done:

    // clear the selection
                myListView.clearSelection()
    
  • To access the values from the row outside the ListView ListItem

    Hello

    I spent two hours browsing the forums and documentation with no chance of finding a solution on how to access the list item data from outside the listview.

    Let explain me my code. It is marked with I work and what does not work and its expected behavior.

    Should work behavior


    Tapping & getting data

    The arrayDataModel is filled with 4 rows. Firstly the list item, second item in the list... etc.

    • Tapping on the order of the day, label with the id of triggeredText displays the value of a threaded list item.
    • The index of the tapped icon appears in the label with the id of triggerredIndex.

    Incrementing Index using ActionItems onBar

    By pressing action items 'previous' and 'next', you can increment the index value to the label with the id of triggeredIndex. The order of the index is 0-4, even as total of the items in the list.

    How to extract data from the index when the value of triggeredIndex?

    Buttons

    The buttons at the bottom of the screen... Select 1, select the 2nd, 3rd Select should select indexes 0,1,2 of the list and display the value in triggeredText and triggeredIndex. They do not work.

    How did I pull the values when you click the buttons?

    import bb.cascades 1.3
    
    TabbedPane {
        id: root
        showTabsOnActionBar: false
    
        Tab {
            id: mainTab
            title: "Test List"
                Page {
                    id: mainPage
                    titleBar: TitleBar {
                        title: "List Traversal Test"
                    }
                    actions: [
                        ActionItem {
                            title: "Previous"
                            ActionBar.placement: ActionBarPlacement.OnBar
                            onTriggered: {
                                // get current selected index from list=
                                var currentIndex = parseInt(triggeredIndex.text);
    
                                if(currentIndex <= 0){
                                    //do nothing already at first item
                                }else{
                                    // subtract 1 from index ( ci - 1) ?
                                    var newIndex = parseInt(triggeredIndex.text) - 1;
    
                                    // show data from new selected index
                                    // ???
    
                                    // triggeredItem.text = XXX // the data
                                    // ???
    
                                    // triggeredIndex.text = X // the current index
                                    triggeredIndex.text = newIndex;
                                }
                            }
                        },
                        ActionItem {
                            title: "Next"
                            ActionBar.placement: ActionBarPlacement.OnBar
                            onTriggered: {
                                // get current selected index from list=
                                var currentIndex = parseInt(triggeredIndex.text);
    
                                if(currentIndex == 4){
                                    //do nothing already at lastitem
                                }else{
                                // add 1 to index ( ci + 1) ?
                                var newIndex = parseInt(triggeredIndex.text) + 1
    
                                // show data from new selected index
                                // ???
    
                                // triggeredItem.text = XXX // the data
                                // ???
    
                                // triggeredIndex.text = X // the current index
                                triggeredIndex.text = newIndex;
                            }
                            }
                        },
                        ActionItem {
                            title: "Clear"
                            ActionBar.placement: ActionBarPlacement.OnBar
                            onTriggered: {
                                // set current index to 0 (top item in list)
                            }
                        }
    
                    ]
                    Container {
                        preferredHeight: maxHeight
                        layout: StackLayout {
                            orientation: LayoutOrientation.TopToBottom
                        }
    
                        Label{
                            id: triggeredItem      // value of listitem from current index
                            text: "0"
                        }
                        Label{
                            id: triggeredIndex    // current index
                            text: "0"
                            onTextChanged: {
                                // set triggeredItem.text to contents of selected ListItem with same index
                                // STUCK HERE cannot access ListItem.dataModel(indexPath) from here....
                            }
    
                        }
                        Container{
                            ListView {
    
                                id: theList
                                objectName: "dalist"
                                dataModel: ArrayDataModel {
                                    id: theListModel
                                }
                                listItemComponents: ListItemComponent {
                                    StandardListItem {
                                        id: itemRoot
                                        title: ListItemData
                                    }
    
                                }
                                onTriggered: {
                                    var si = dataModel.data(indexPath);
                                    triggeredItem.text = "LIST ITEM CONTENT: " + si;  //set content when user taps on item
                                    triggeredIndex.text = "LIST ITEM INDEX INDEX: " + indexPath;  // set index when user taps
                                }
    
                                onSelectionChanged: {
                                    //console.log(selected);
                                }
    
                                onCreationCompleted: {
    
                                    //add some data to the listview
                                    theListModel.append("First List Item");
                                    theListModel.append("Second List Item");
                                    theListModel.append("Third List Item");
                                    theListModel.append("Fourth List Item");
                                }
                            }
    
                        }
                        Container{
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                        Button{
                            text: "Select 1st"
                            onClicked: {
                                theList.clearSelection();
                                theList.select(0);
    
                            }
                        }
                        Button{
                            text: "Select 2nd"
                            onClicked: {
                                theList.clearSelection();
                                theList.select(1);
    
                            }
                        }
    
                        Button{
                            text: "Select 3rd item"
                            onClicked: {
    
                                //expected behaviour is to show data from Third List Item
    
                                // triggeredIndex.text = INDEX 3
                                // triggeredText.text = (DATA FROM THIRD LIST ITEM)
    
                                // THIS IS NOT WORKING ....
                                theList.clearSelection();
                                theList.select(2);
                                console.log(theList.dataModel(3));
                                triggeredItem.text = theListModel.dataModel(3);
    
                            }
                        }
                    }
                   }
                }
            }//tab
    }
    

    Thank you and have a happy and healthy 2015!

    Your help will be greatly appreciated.

    I ran and got this:

    asset:///main.qml:161: TypeError: Result of expression 'theList.dataModel' [bb::cascades::ArrayDataModel(0x1091a838)] is not a function.
    

    But it works

    theListModel.data([3])
    

    But this isn't the solution, you have a more serious problem. You select a value, you trigger. If you add this in onTriggered you select it (and you can see that it changes color when it is selected).

    theList.select(indexPath);
    

    If you want to use option to deselect

    theList.select(indexPath, !theList.isSelected(indexPath));
    

    And if you want to have that one chose this

    theList.clearSelection();
    theList.select(indexPath);
    

    Inside the button 'Select the 3rd point' allows to select programmatically

    theList.select([2]);
    

    It works but I'm not sure what you're trying to do

  • How to apply filters to the Listview created using GroupDataModel?

    Hello

    I have created a listview with groupdatamodel, now I want to apply filters for listview. How to do this?

    Please help me. (As looking for contacts)

    Kind regards

    Naresh Kodumuri.

    Hello

    I found the solution for the application of filters to the listview.

  • [Explanation necessary] Clears the listview data and fill it again with new data

    Hello

    I correctly filled a listview in c ++, data analysed and does interesting things with it. However, I am drunk stumbling, unable to find a way delete and repopulate my display of the list...

    Question 1:

     

    1. How can after I insert data in the list view, I clear the list data and run again the same method (init) who populated the list view with the data in the first place?

    Here are the docs that I referenced and I don't understand how to implement the methods in my code.

    QList - clear() method

    https://developer.BlackBerry.com/Cascades/reference/QList.html#clear

    Using the data access Code, example
                              
    data_access/using_data_source

    GroupDataModel - Clear()

    https://developer.BlackBerry.com/Cascades/reference/bb__cascades__groupdatamodel.html#clear

    CODE

    Here is my code - filling of the display of the list of C++ and display of data in a ListView.

    MyApp.cpp

    MyApp::MyApp(bb::cascades::Application *app)
    : QObject(app){
        // create scene document from main.qml asset
            // set parent to created document to ensure it exists for the whole application lifetime
            QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
    
                AbstractPane *root = qml->createRootObject();
                qml->setContextProperty("yoyo",this);
                //grab references
                list_view = root->findChild("listView");
    
                // set created root object as a scene
                app->setScene(root);
    
                mNetworkAccessManager = new QNetworkAccessManager(this);
                bool result = connect(mNetworkAccessManager, SIGNAL(finished(QNetworkReply*)), this, SLOT(requestFinished(QNetworkReply*)));
    
                 Q_ASSERT(result);
                 Q_UNUSED(result);                 json = new QFile("data/file.json");
    }
    
    void MyApp::init(){
        QNetworkRequest request = QNetworkRequest();
         // i call some service here
         mNetworkAccessManager->get(request);
    }
    
    void MyApp::requestFinished(QNetworkReply *reply){
        qDebug() << reply->error();
        qDebug() << reply->errorString();
        if (reply->error() == QNetworkReply::NoError) {
            qDebug() << "No error";
    
                    QByteArray data = reply->readAll();
    
                    if (!json->open(QIODevice::ReadWrite)) {
                        qDebug() << "Failed to open file";
                        return;
                    }
                    json->write(data);
    
            bb::data::JsonDataAccess jda;
            QVariantMap results = jda.loadFromBuffer(data).toMap();
                    QVariantList lst = jda.loadFromBuffer(data).toList();
                GroupDataModel *m = new GroupDataModel();
                       m->insertList(lst);
                       m->setGrouping(ItemGrouping::None);
                       if(list_view) list_view->setDataModel(m);
    
        }else{
            showDialog("Boo",reply->errorString());
        }
    }
    

    MyApp.hpp

    // Tabbed pane project template
    #ifndef MyApp_HPP_
    #define MyApp_HPP_
    
    #include 
    #include 
    #include 
    #include 
    #include 
    #include 
    
    namespace bb {
    namespace cascades {
    class Application;
    }
    }
    namespace bb {
    namespace data {
    class Application;
    }
    }
    
    /*!
     * @brief Application pane object
     *
     *Use this object to create and init app UI, to create context objects, to register the new meta types etc.
     */
    class MyApp: public QObject {
    Q_OBJECT
    public:
        MyApp(bb::cascades::Application *app);
        virtual ~MyApp() {
        }
        Q_INVOKABLE
        void init();
    private slots:
        void requestFinished(QNetworkReply *reply);
    private:
        QNetworkAccessManager *mNetworkAccessManager;
        QNetworkRequest *request;
        QFile *json;
        bb::cascades::ListView *list_view;
    };
    
    #endif /* MyApp_HPP_ */
    

    hand. QML

    import bb.cascades 1.0
    
    Page{
    Container {
                            background: Color.White
                            ListView {
                                id: listView
                                preferredHeight: maxHeight
                                objectName: "listView"
                                listItemComponents: [
                                    ListItemComponent {
                                        type: "item"
                                        Container {
                                            Container {
                                                Label {
                                                    text: ListItemData.id
                                                }
                                            }
    
                                        }
                                    }
                                ]
                                onTriggered: {
                                    console.log("selected_index: " + indexPath)
                                }
                                horizontalAlignment: HorizontalAlignment.Center
                                verticalAlignment: VerticalAlignment.Center
                            }
    
    }
    }
    

    Question 2:

    How reference to the ListView object with the name "listView" in different parts of the MyApp.cpp file? Is there anything else I should add to the header file to make the accessible listView?

    Question 3:

    What happens when you call the clear() method? How the data model is affected? How the user interface is affected? What happens in memory?

    Question 4:

    How do you verify that the data in the list has been deleted so that you can go ahead and fills again with new data? What is the cheque that I perform?

    I would also like to know how you manage multiple views of lists and data sources in your applications. Best practices or ideas?

    Thank you

    I was able to clear the listview with the following code, if anyone is interested.

    listView.dataModel = null
    

    The dataModel must be set to "null".

  • Pass a variable value set to the selector to the Listview

    This was probably picked several times on the forum, but I'm going crazy with research and try to do things with my code.

    Everything I'm doing is to expose the variable rssmobileEnabled defined in the SELECTOR, so that I can go and test it in my LISTVIEW onSelectedValueChanged IF statement, according to the code below.

    I did the variable in "BOLD" below to indicate. This must be a simple solution, after all how it can be difficult to just define a global variable...

    The SELECTOR code:

     Picker {
        id: picker
        title: "Select Feed"
        dataModel: XmlDataModel {
         source: "models/blackberry.xml"
        }
    
          pickerItemComponents: [
              PickerItemComponent {
                    type: "rsslink"
                    content: Container {
                    layout: DockLayout {
                    }
                         Label {
                             multiline: false
                             text: pickerItemData.text
                             textStyle {
                                  base: SystemDefaults.TextStyles.SubtitleText
                             }
                          }
                      }
                 }
            ]
    
       onSelectedValueChanged: {
           var rsslinktext = (dataModel.data([ 0, picker.selectedIndex(0) ]).text);
           var rsslink = (dataModel.data([ 0, picker.selectedIndex(0) ]).rssSource);
           var rsslinkquery = (dataModel.data([ 0, picker.selectedIndex(0) ]).rssQuery);
           var rssmobileEnabled = (dataModel.data([ 0, picker.selectedIndex(0)]).mobileEnabled);
    
            //Load the selected feed
            dataSource.load();
       }
    } // Picker
    

    Code of the LISTVIEW:

                ListView {
                    id: myListView
    
                    // Associate the list view with the data model that's defined in the
                    // attachedObjects list
                    dataModel: dataModellist
                    layout: StackListLayout {}
                    listItemComponents: [
                        ListItemComponent {
                            id: header
                            type: "header" //"item"
    
                            //custom components used instead of standardlistitem
                            Container {
                                Label {
                                    id: emptytextheader
                                    text: ""
                                }
                            }
                        },
                        ListItemComponent {
                            id: item
                            type: "item" //"description"
    
                            Container {
                                layout: DockLayout {}
                                //custom components used instead of standardlistitem
    
                                Container {
                                    id: itemdetails
                                    Label {
                                        id: title
                                        text: ListItemData.title
                                        //textStyle.fontWeight: FontWeight.Bold
                                        multiline: true
                                        textStyle.color: Color.Cyan
                                    }
                                    Label {
                                        id: pubdate
                                        text: ListItemData.pubDate
                                        textStyle.color: Color.create("#ff00c200")
                                        textStyle.fontSize: FontSize.XSmall
                                    }
                                    Label {
                                        id: description
                                        text: ListItemData.description
                                        textStyle.fontSize: FontSize.Small
                                        multiline: true
                                        textStyle.color: Color.Yellow
                                        maxHeight: 130.0
                                    }
                                }
                            }
                        }
                    ]
    
                    onTriggered: {
                        var feedItem = dataModel.data(indexPath);
                        var page = detailsPage.createObject();
    
                        if (rssmobileEnabled == "y")
                            {
                                .....
                            }
                    }
                }
    

    Hello

    "var rssMobileEnabled" declares a local variable, is not available in onTriggered.

    Declare it as a property instead:

    TopLevelItem
    {
       property bool rssMobileEnabled
       (or 'property string' if it's a character)
    

    reference it without prefix "var":

    rssMobileEnabled =...

    You can also declare the property on another element (not necessarily higher level) and reference it by id:

    elementId.rssMobileEnabled

Maybe you are looking for