ListItemComponent

Similar Questions

• How to upgrade an item in the ListView ListItemComponent

  Hello

  I have a ListView that uses an ArrayDataModel and a ListItemComponent to display a list of items. One of the elements which is display is a photo that takes place is specified as a URI.  In some cases, this URI is empy and I need to go out and scratch a few location data in real time.  Within the netscrape2:nEffectuer slot, I am trying to take this new found data (URL location to the new location of the photo) and replace it in my ListView. ListItemComponent...

  Any help would be greatly appreciated.  Thanks in advance...

  Container {
              leftPadding: 10.0
              rightPadding: 10.0
              topPadding: 40.0
              ListView {
                  function scrapePicture( ExternalUrl, source, mListItemIndexPath )
                  {
                      console.log("Start Search scrapePicture(): " + ExternalUrl );
                      console.log("Start Search scrapePicture() Index: " + Index );
                      netscrape2.scrapeSite(ExternalUrl, source, mListItemIndexPath );
                  }
                  id: searchListView
                  dataModel: searchDataModel
                  listItemComponents: [
                      ListItemComponent {
                          id: listComponentSearchResultsListItem
                          type: ""    // I do this because its Array datamodel
                          SearchResultsListItem {
                              title: ListItemData.Title
                              pubDate: ListItemData.TimeStamp + " - " + ListItemData.Location
                              previewImage: ( ListItemData.PreviewImage == "" ) ? ListItem.view.scrapePicture( ListItemData.ExternalUrl, ListItemData.Source, ListItem.indexPath ) : ListItemData.PreviewImage
                          }
                      }
                  ]
                  onTriggered: {
                      console.log("Invoke Second Page");
                      var feedItem = searchDataModel.data(indexPath);
                      // invoke second page...
                  }
                  attachedObjects: [
                      ScrapeHttp {
                          id: netscrape2
                          onComplete: {
                              // this is where I want to replace the picture...
  
                              var data =  listComponentSearchResultsListItem.ListItem.view.dataModel.data(netscrape2.mListItemIndexPath);
                              console.log("netscrape2.data: " + data);
                              data.PreviewImage = netscrape2.adImageURL;
                              console.log("netscrape2.data2: " + data);
                              listComponentSearchResultsListItem.ListItem.view.dataModel.replace(0, data);
                          }
                      }
  
                  ]
              } // end of ListView
  

  Why all this way?

  listComponentSearchResultsListItem.ListItem.view.
  

  The above code is only necessary when you want to access the data of ItemComponent, but you try to change DataModel.

  You must change the value in your DataModel, in your case, its ID is searchDataModel. No what you have to do is something like this in your onComplete:

  var tmpData = searchDataModel.data(indexPath);
  tmpData.PreviewImage = netscrape2.adImageURL;
  searchDataModel.updateItem(indexPath, tmpData);
  

  Now I don't know what is ScrapeHttp, but it sounds like a weird way of this row.

  netscrape2.mListItemIndexPath
  

• How to access the properties of the ListItemComponent Page in QML

  Hello

  I'm new to BB10 development. I need help for the problem mentioned (in red) below

  {Page}

  ID: page

  property storage storage / / this is a C++ class that is registered for access from pages QML

  {Of container

  {To ListView

  listItemComponents: {ListItemComponent}

  {CustomListItem}

  ImageButton {}

  text: "Save."

  onClicked: {}

  Storage.Save)

  I am not able to get the reference of the storage property defined in the Page. It is always [NULL], I get the mention very well outside the ListView

  }}}}}}

  PS: I only provided the necessary code

  I found the solution

  added CustomListItem id as

  ID: customCell

  now

  customCell.ListView.view.parent.parent.storage

• ListItemComponent data type c ++

  In my application, I have a ListView that displays a ListItemComponent

  I have reproduced a slightly simplified version here as I'm sure you don't want to see all the containers that show that more than data.

  ListView { objectName: "alarmList" id: alarmList accessibility.name: "alarmList"   ListItemComponent {
      Container {
          horizontalAlignment: HorizontalAlignment.Fill
          bottomMargin: 1
          background: Color.White
  
          Container {
              layout: StackLayout {
                  orientation: LayoutOrientation.LeftToRight
              }
              Label {
                  text: ListItemData.lineOne
                  textStyle.color: ListItemData.alarmColour
                  horizontalAlignment: HorizontalAlignment.Fill
                  layoutProperties: StackLayoutProperties {
                      spaceQuota: 1
                  }
              }
          }        contextActions: [            ActionSet {                title: ListItemData.source                actions: [                    ActionItem {                        title: "Show on Web"                        imageSource: "asset:///images/ic_browser.png"                        onTriggered: {                            ListItemData.ViewOnWeb()                        }                    }                ]            }        ]
      }  }}
  

  It works fine and I can see all my data in the collection of C++ to help

  m_root->findChild("alarmList")->setDataModel(&m_alarmDataList);
  

  So far so good.

  Now what I really want to be able to do, is customize the contextActions.  In some cases I could wish no and I'm likely only going to have two to choose from.

  I came up with the idea to put the guy on the ListItemComponent then to have the object C++ report a different type so that it could choose the appropriate layout and the custom action.

  The problem with this is that I can't know what the type is connected.  There are many examples on the web when dealing with xml, but not much I can find when you use a C++ object.  I tried adding the type and naming it identical to my class but I have not drawn containers.

  Is the name of class or another property, can I configure use?

  I think you are looking for the itemType function that discerns between different ListItems.

  something like this:

  function itemType(data, indexPath) {
      if (indexPath.toString().indexOf(",") != -1) {
          return "item";
  
      } else {
          return "header";
      }
  }
  

  You can check the properties of the item to see what type should be used for each item and can add a contextMenuHandler to each.

• ListItemComponent switch when running

  Hello!

  I have a ListView showing some Favorites to my user. I want to have two different representations of these favorites, the user can choose between with a button. So I think I should just change the property listItemComponents of my ListView at run time. But so far, as I have not found a way to store a ListItemComponent on a variable, I don't see how I can achieve. I would like to avoid having two ListView, indicated and the other hidden.

  Thank you.

  You can reuse the same ListView, but with two different ListItemComponents (one for each display mode). A ListItemComponent manages the itemType elements "View1", the other "view2".

  When a user selects a different view, simply change the itemTypes returned by the DataModel.

• ListView Access of ListItemComponent context action onTriggered model

  Consider following piece of code:

              ListView {
                  id: listView
                  dataModel: model
                  listItemComponents: ListItemComponent {
                      content: StandardListItem {
                          title: ListItemData.name
                          contextActions: ActionSet {
                              actions: ActionItem {
                                  title: "Delete"
  
                                  onTriggered: {
                                      //ListItem.view.model .... doesn't work
                                  }
                              }
                          }
                      }
                  }
               }
          }
  

  When the user chooses to delete a line, I would like to access the listview model and remove the line given. But I can't get my hands on the model (as it is now defined as attached property).

  Docs say:

  ListItem.view - The ListView in which this item is visible. The item is in a context separate from the ListView, so any symbols from the ListView context that are to be accessible from items must be placed as dynamic properties on the ListView
  

  But to be honest I don't understand what I need to do to make it work (ie. have access to the parent listView.

  Any help would be greatly appreciated.

  Oh, I would do this without falling back into C++ code. I know how to solve this problem with c ++.

  Thank you

  You must reference it in your ListItemComponent ListItem:

  myItem.ListItem.view.dataModel
  

• To access the instance of the ListView onTriggered event ListItemComponent

  Hello

  I'm pulling out my hair with this!

  I have a ListItemComponent in my ListView, and I want to access the component instance in the onTriggered of my ListView. I have the row, but I can't work on how to find the actual view.

  Simple example:

  {To ListView

  ID: myListView

  dataModel: myDataModel

  layout: {FlowListLayout}
  listItemComponents:]
  {ListItemComponent}
  type: 'imageItem.
  {GalleryImages}
  }

  ]

  onTriggered: {}

  It's easy

  var point = dataModel.data (row);

  BUT HOW to ACCESS the GalleryImages instance for the row?

  }

  ...

  I'm sure it's really simple, but have been hitting my head against it for 2 days!

  C

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

  your variable 'point' reference the underlying data in the datamodel - it does not refer to the list Visual element (i.e. ListItemComponent).

  You need to move your manager in the ListItemComponent - and probably change in notecard or anything that supports your component of GalleryImages.

• Why can't I access object inside the ListItemComponent.onCreationCompleted C++... ?

  Hello world

  My application has a HTTP connection to retrieve the XML stream and insert data to the ListView using DataSource and DataModel, and I want to hear at each of its ListView ListItem is created and completely to use a ListItemData for my c++ object. So I write my code like this

  In main.cpp

  int main (int argc, char * argv)

  {

  App app (argc, argv);

  new MyApp (&app);)

  returnApplication::exec();

  }

  In MyApp.cpp

  MyApp::MyApp (bb::cascades:Application * app): //constructor

  {QObject (app)}

  QmlDocument * qml = QmlDocument::create("asset:///main.qml").parent(this);

  QML-> setContextProperty ("app", this);

  AbstractPane * stream = qml-> createRootObject)

  App-> setScene (NCA);

  }

  void MyApp::doMyFunction (const QString & someData) {}

  qDebug()< "yes!!="">

  }

  In main.qml
  {Page}

  {Of container

  {To ListView

  dataModel: myDataModel

  listItemComponents:]

  {ListItemComponent}

  type: 'point '.

  {Of container

  onCreationCompleted: {}

  Console.log ("-LISTITEM ONCREATION COMPLETED");

  app.doMyFunction (ListItemData.someData);    //<  but="" console="" print="" about="" "can't="" find="" variable="" "app"="">

  }

  }

  }

  ]

  } //end listview

  } //end container

  onCreationCompleted: {}

  myDataSource.load ();

  }

  attachedObjects:]

  {GroupDataModel}

  ID: myDataModel

  },

  DataSource {}

  ID: myDataSource

  Source: "some URLs to get RSS... blah blah."

  type: DataSource.Xml

  onDataLoaded: {}

  myDataModel.clear ();

  myDataModel.insertList (data);

  }

  ]

  }

  I try to run mycode. But a console is printed on "can't find variable: app". " How can I solve this problem?

  Thanks for any suggestions.
  MAZ

  Its because the listitem is not in the same document as the Page tree really, he lives with ListView and does not have direct access to the elements of the Page.

  What you can do is create a javascript function in the ListView, and then the listitemcomponent facing, which in turn can relay to your environment variable "app."

  int listitemcomponent add id: itemContainer your container can
  itemContainer.ListItem.view.someFunctionDefinedInTheListView (data)

  in the listview:

  function somefunctiondefinedinlistview (data) {}
  app.doMyFunction (data)
  }

• Can't access (outside) QML elements of ListItemComponent

  Hello

  I have a problem to access the variables of a ListItemComponent in my QML.

  My QML is a container that contains a ListView with several ListItemComponents.

  I updated my QML list as a contextProperty data model:

  QML-> setContextProperty ("_dataModel", homeDataModel);

  My data model has Q_INVOKABLE I want to call from my QML.

  The problem is that, in ListItemComponent, I can not access or "_dataModel", or all the elements that are outside the component itself.

  I found a solution that would use extended Qt such as:

  onCreationCompleted: {}

  Qt.homePage = home page;

  Qt.homeList = homeList;

  }

  Using it, I could access variable outside of my ListItemComponent. The problem is that the scope of the Qt interval is too large. In effect, if I create multiple instances of the Pages using the QML, Qt.homePage/Qt.homeList will have the value given by the last instance of Page. This isn't a good solution for me because I use it to access the dataModel of the list and the dataModel has an associated NavigationPane.

  Anyway, you know other solutions to access my data from my ListItemComponent model?

  Thank you

  I just hit this same question today...

  You can get a handle to the item list to the view and from there, get what you need...

  In my component list item:

                  listItemComponents: [
                      ListItemComponent {
                          Container {
                              id: itemRoot...
  

  You can then refer to the root element and finally the view... Here is a button that is located in my list item... Dumping a bunch of things and call for trigger on the list view...

                             Button {
                                  text: qsTr("Go!")
                                  horizontalAlignment: HorizontalAlignment.Center
                                  onClicked: {
                                      console.debug("ListItemData: " + ListItemData);
                                      console.debug("itemRoot: " + itemRoot);
                                      console.debug("itemRoot.ListItem: " + itemRoot.ListItem);
                                      console.debug("itemRoot.ListItem.view: " + itemRoot.ListItem.view);
                                      console.debug("itemRoot.ListItem.view: " + itemRoot.ListItem.view.dataModel);
                                      console.debug("itemRoot.ListItem.view.trigger: " + itemRoot.ListItem.view.triggered(ListItemData.indexPath));...
  

• question of functions call listItemComponent

  Hi all, how to call the function (which is defined outside the ListView) in listItemComponent?

  Container {
      id: cont
      function getColor() {
          return Color.Black
      }
      ListView {
         id: colorList
         listItemComponents: [
             ListItemComponent {
             type: "listItem"
             Container {
             id: item
             background: ???.getColor();
  

  If you want to do this, you need a double function call

  Container {
      id: cont    function getColor(){        return Color.Black;    }
      ListView {
         id: colorList       function getColor(){           return cont.getColor();       }
         listItemComponents: [
             ListItemComponent {
             type: "listItem"
             Container {
             id: item
             background: item.ListItem.view.getColor();
  

• ListView display data without ListItemComponent

  Hello

  It's one of the strangest problems ListView, I've had over the last months (I used a lot for my app)!

  Thus, the heart of the problem is when I put the dataModel for a ListView (from Qt), I see the data values for one of the keys, even if I did not use this key in listItemComponent to display the results

  If all goes well, the following sequence of sense:

  (1) application of the data (in JSON) from a URL

  (2) convert the received data toList()

  (3) Insert the list() to a GroupDataModel

  (4) use "findChild" to find the listView

  (5) once the ListView is found

  (6) setDataModel for the listView to list()

  (7) now I have nothing in the listItemComponent, but I still have the results of one of the keys to the list()

  the problem is 7) and so he keeps me to display the data values for other keys

  make sense?

  Please let me know if I'm not clear in any stage, I can try to explain further.

  Help much appreciated!

  Thank you!

  This code snippet shows ListItemComponents of type "header" for the elements of the dataModel at the level of 'root' and 'article' for the following type ListItemComponents.

  In GroupDataModel it works differently. It includes elements based on its configuration (parameters collection).

  What type of model you are using?

  itemType() function is called for each row to determine how ListItemComponent should be used for this row.

  If it is not implemented, implementation of the DataModel of this function is used instead.

  As test, try:

      function itemType(data, indexPath) {
          return 'item'
      }
  

  It displays only the ListItemComponents of type 'section '.

  p.s. for GroupDataModel you need to create the header & point ListItemComponents and set up the model. ItemType() statement is not necessary, the model already implements.

• [QML] redefine properties when ListItemComponent is reused

  When ListItemComponents are reused in the ListView, the properties of the controls are not reset. So if for example, you to scale or rotate control, then many other articles in the list will be also scaling or rotation. Is there a signal I can listen to that will tell me when the content of the ListItemComponent has been changed (which would be when it is re-used), so I can reset the properties?

  The solution is to listen to a change event on one of the controllers of the listItemComponent. So, for example, if you have a picture where you set the imageSource with data of the DataModel, then listen to onImageChange to reset the properties.

  {To ListView
  dataModel: _seenit.model
      
  listItemComponents: {ListItemComponent}
  ImageView {}
  ID: img
  Image: ListItemData.image
  onImageChanged: {}
  img.scaleX = 1;
  img.scaleY = 1;
  img.translationX = 0;
  img.translationY = 0;
  }
  }
  }
  }

• How update the "ListItemComponent" view in ListView?

  Hi all

  I do samples of listview. Is it possible to refresh the view a list (ListItemComponent). If so, please provide guidance or a link.

  Thanks in advance.

  If your data are dynamic, it's like BBSJdev said, the changes made to the model. And if the template is changed, you must react accordingly with a trigger

• How to make a container to fill a ListItemComponent?

  Hello

  I have the following ListItemComponent:

  ListItemComponent {
                          type: "folder"
                          Container {
                              layout: DockLayout {}
                              layoutProperties: {
                                  horizontalAlignment: HorizontalAlignment.Fill
                              }
                              Label {
                                  text: ListItemData.title
                                  textStyle {
                                      base: SystemDefaults.TextStyles.BigText
                                      fontWeight: FontWeight.Bold
                                      color: Color.White
                                  }
                                  verticalAlignment: VerticalAlignment.Center
                                  horizontalAlignment: HorizontalAlignment.Left
                              }
                              Label {
                                  text: ListItemData.numberOfComics
                                  verticalAlignment: VerticalAlignment.Center
                                  horizontalAlignment: HorizontalAlignment.Right
                              }
                          }
                      }
  

  However the second label (which is supposed to be in contact with the right edge of the screen, only for the sticks at the end of the first label. My guess is that the container does not have the width available to it. How can ensure me that the tank fills it?

  Oops, looks like I need to do a more thorough search. This topic has helped my dose it.

• Cannot access ActionItem in contextActions in a ListItemComponent

  Hello

  I have several ListItemComponents, each with their own contextActions. However, I can't access it. What I am doing wrong?

  TabbedPane {
      id: tabbedPane
      showTabsOnActionBar: true
      Menu.definition: MenuDefinition {
          actions: [
              ActionItem {
                  objectName: "scanItem"
                  title: "Scan"
              },
              ActionItem {
                  objectName: "aboutItem"
                  title: "About"
              }
          ]
      }
  
      Tab {
          title: "Grid"
          imageSource: "asset:///images/grid.png"
          content: NavigationPane {
              objectName: "gridNavigationPane"
              peekEnabled: false
              backButtonsVisible: false
              Page {
                  content: Container {
                      background: backgroundPaint.imagePaint
                      layout: StackLayout {}
                      ListView {
                          objectName: "coverListView"
                          layout: GridListLayout {
                              columnCount: 2
                              horizontalCellSpacing: 6
                          }
                          listItemComponents: [
                              ListItemComponent {
                                  type: "normal-read"
                                  Container {
                                      layout: StackLayout {
                                          orientation: LayoutOrientation.TopToBottom
                                      }
                                      ImageView {
                                          objectName: "listItemComponent"
                                          imageSource: ListItemData.imagePath
                                          scalingMethod: ScalingMethod.AspectFit
                                          horizontalAlignment: HorizontalAlignment.Center
                                      }
                                      Label {
                                          text: ListItemData.title
                                          horizontalAlignment: HorizontalAlignment.Center
                                          textStyle {
                                              base: SystemDefaults.TextStyles.SmallText
                                              color: Color.create(0.9, 0.9, 0.9)
                                          }
                                      }
                                      contextActions: [
                                          ActionSet {
                                              ActionItem {
                                                  objectName: "normal1OpenAction"
                                                  title: "Open"
                                                  imageSource: "asset:///images/openbook.png"
                                              }
                                              ActionItem {
                                                  objectName: "normal1MarkAsFavorite"
                                                  title: "Mark as favorite"
                                                  imageSource: "asset:///images/favorite.png"
                                              }
                                              ActionItem {
                                                  objectName: "normal1MarkAsUnread"
                                                  title: "Mark as unread"
                                                  imageSource: "asset:///images/unread.png"
                                              }
                                              ActionItem {
                                                  objectName: "normal1ShareAction"
                                                  title: "Share"
                                                  imageSource: "asset:///images/share.png"
                                              }
                                              DeleteActionItem {
                                                  objectName: "normal1DeleteAction"
                                                  title: "Delete"
                                                  imageSource: "asset:///images/trash.png"
                                              }
                                          }
                                      ]
                                  }
                              }
                          ]
                      }
                  }
              }
          }
      }
  
      Tab {
          title: "List"
          imageSource: "asset:///images/list.png"
          content: Page {
              content: ListView {
                  objectName: "listView"
                  listItemComponents: [
                      ListItemComponent {
                          type: "image"
                          StandardListItem {
                              imageSource: ListItemData.imagePath
                              title: ListItemData.title
                          }
                      }
                  ]
              }
          }
      } 
  
      Tab {
          title: "Settings"
          imageSource: "asset:///images/settings.png"
          content: Page {
              content: Container {
                  background: backgroundPaint.imagePaint
              }
          }
      }
      attachedObjects: [
          ImagePaintDefinition {
              id: backgroundPaint
              imageSource: "asset:///images/shelfbackground.png"
              repeatPattern: RepeatPattern.XY
          }
      ]
  }
  

  This is my code to access the ActionItems.

  QmlDocument *qmlDocument = QmlDocument::create("asset:///main.qml");
      if (!qmlDocument->hasErrors())
      {
  qmlDocument->setContextProperty("comicsApp", this);
  rootPane = qmlDocument->createRootObject();
  ActionItem* actionItem = rootPane->findChild("normal1OpenAction");
      connect(actionItem, SIGNAL(triggered()), this, SLOT(handleOpenComic()));
  }
  

  I connect other objects QML their signals with the slots in the same way, but it will not keep. Anyone has any idea why?

  I ended up writing a ListItemProvider in C++ code. Works like a charm!

• How to add a contextActions to a ListItemComponent custom in ListView?

  ContextActions can be added to a StandardListItem. However when I don't do not use StandardListItem and rather have my own containers and other items in ListItemComponent I am not able to specify any ContextActions, as it is a property of StandardListItem which is not used.

  How can I add a contextActions in this case?

  Take a look at WeatherGuesser app. The WeatherPage.qml has a ListView that includes WeatherItem (which is a custom component) in the ListItemComponent of type 'point' and does not StandardListItem.

  How would go and add contextActions on this page so that every day can be selected and performed some actions on?

  contextActions for the custom list item works fine for me... maybe show the code so that we can help you?

  and also contextActions can be added to any container, not only of the components of the list item.