ListView with GridListLayout

Similar Questions

• ListView with GridListLayout will not display items

  I can easily create a ListView that displays its items.

  The following XML code:

  And here's the QML:

              ListView {
                  dataModel: XmlDataModel {
                      source: "asset:///test.xml"
                  }
  
                  listItemComponents: [
                      ListItemComponent {
                          type: "header"
                          Header {
                              title: ListItemData.title
                          }
                      },
                      ListItemComponent {
                          type: "item"
                          Label {
                              text: ListItemData.name
                          }
                      }
                  ]
              }
  

  The result looks like this:

  

  But what I really want are the items to display in a grid. To do this, I put the ListView layout property to a GridListLayout:

                  layout: GridListLayout {
                  }
  

  When I do that, it shows more elements, only the headers:

  

  What I am doing wrong?

  In the end I tried to get this working using a custom LitemItemProvider that uses images for the elements, but even once, it would display only the headers.  So I simplified my example as much as I can above to try to identify the problem.  I don't know how to do the simple example.  I am able to get my original code works fine even with the GridListLayout if I do not activate the grouping - as soon as I activate the grouping (so that the data has headers and elements), it starts to behave like that.

  The display of the grid is not compatible with the Group?  The application of native images only grouping with a grid view, and I am trying to imitate that.  Super confused.

  You must set headerMode

  https://developer.BlackBerry.com/native/reference/Cascades/bb__cascades__gridlistlayout.html#propert...

• ListView with lines divided into two sections

  Hi guys,.

  How can I develop a listview with rows in two separate sections, as below:

  - - - - - - - -

  Section 1

  - - - - - -- -

  Line a1

  Line a2

  .

  .

  Line am

  - - - - - - - -

  Section 2

  - - - - - - - -

  Line b1

  Line b2

  .

  .

  Line bn

  use two separate fields

• Using ListView with ArrayDataModel displays only the first element in each QVariantMap within the matrix

  I have this QML who have a ListView with datasource to a full ArrayDataModel from the CPP file for creationcompleted, I loop in the table to add the hour together to appear as a label on the page, what works. However, when I want to view these items in the list, it will display only the first element of the QVariantMap within the table, no error on the log of the device. Also, triggered more does not work, but when I click it, it will have a blue border surrounding it, but the onTriggered does not fire.

  Here is an excerpt of the CPP on the table fill

  This-> eventsModel = new ArrayDataModel();

  QVariantMap event;

  event ['EventName'] = "Event1";

  event ["EventHour"] = "00";

  event ["EventMinute"] = "01";

  event ["EventSecond"] = '02 ";

  QML-> setContextProperty ("eventsModel", it-> eventsModel);

  Here's the QML

  {Of container

  ID: eventListContainer

  {To ListView

  ID: eventList

  dataModel: eventsModel

  Use a ListItemComponent to customize the appearance of the list view

  listItemComponents:]

  {ListItemComponent}

  type: 'point '.

  {StandardListItem}

  Title: 'Event' + ListItemData.EventName;

  Description: "time:" + ListItemData.EventHour + ":" + ListItemData.EventMinute + ":" + ListItemData.EventSecond; "»

  }

  }

  ]

  onTriggered: {}

  var selectedEvent = dataModel.data (row);

  var eventDetailPage = eventDetailDefinition.createObject ();

  eventDetailPage.txtEventName.text = selectedEvent ['EventName'];

  eventDetailPage.pickEventTime.value = picker.dateFromTime(selectedEvent["EventHour"]+":"+selectedEvent["EventMinute"]+":"+selectedEvent["EventSecond"]);

  eventDetailPage.open ();

  }

  }

  Any help would be appreciated.

  Thank you.

  ListView determines ItemType of the element by calling the function itemType of the dataModel. By default, an ArrayDataModel returns an empty string for this call (see https://developer.blackberry.com/cascades/reference/bb__cascades__arraydatamodel.html).

  This leaves you with a few options:

  (1) If you have no header and all the elements are the same, you can make

  ListItemComponent {
       type: ""
       ...
  

  (2) If you have headers or different elements, you can extend ArrayDataModel and implement your own function of itemType

  (3) you can define a function of ItemType on your ListView in QML. Documentation:

  ListView called DataModel::itemType() for each item in order to know the type. QML, this can be overridden by declaring the itemType function (data, row) on the ListView element. ListView then call this function instead of the function DataModel.

  Here's how to create a list in QML which creates a header for all items on the high level and aStandardListItem for each item below the top level:

• ListView with TextField inside the component and requestFocus()

  Hello

  I'm trying to implement the logical: when the page with ListView is indicated - start editing (see the keyboard) in the field of specific text that is part of the agenda of the ListView.

  TextField.requestFocus () works very well if it is called some time later, after loading the page (assuming that when ListView load model and created the UI elements).

  How to identify when requestFocus() is success? onCreationCompleted for TextField/ListView does not work.

  It can be done with QTimer but I want to keep it as a backup plan.

  Thank you

  Can you try to add to your Page (or your ListView):
  attachedObjects:]
  {RenderFence}
  raised: true
  onReached: textFieldName.requestFocus)
  }
  ]

• Unable to fill ListView with vector

  I'm using a sample I got on the internet to create a listfield

  that contains an image and the data contained in a vector.

  Data are obtained from a JSON array that is created from a script php accessing a mysql database.

  The problem is that the listfield poster not only any content, even if there are items in the table.

  This is the code I use to get the JSON array data :

  JSONArray items_array=job.getJSONArray("items");
                      for(int i=0;i
  The code for the ListFieldCallback:
  class MyListModel implements ListFieldCallback
         {
  
             private ListField _view;
             private int _defaultRowHeight=32;
             private int _defaultRowWidth=_defaultRowHeight;
             private int _txtImagePadding=5;
             private Bitmap _bitmap;
              private Vector _data;
             public MyListModel(ListField list,Vector data)
                   {
                       _view=new ListField();
                      _data=new Vector();
                       _data=MyScreen.data_vec;
                       _view=list;
                       list.setCallback(this);
                      // _view.setSize(_data.size());
                       _view.setRowHeight(_defaultRowHeight);
                       _bitmap=null;
  
                       //list.setSize(_data.size());                     
  
                       }
  
             public void drawListRow(ListField list,Graphics g,int index,int y,int w)
             {
                 Items itemToDraw=(Items)this.get(list,index);
                 String name=itemToDraw.getName();
                 g.drawText(name,_defaultRowWidth+_txtImagePadding,y,DrawStyle.LEADING|DrawStyle.ELLIPSIS,w-_defaultRowWidth-_txtImagePadding);
  
                 g.drawBitmap(0,y,_bitmap.getWidth(),_bitmap.getHeight(),_bitmap,0,0);
  
                 }
  
  The code for the method of success which must now fill listview:
  public void success(final Vector listboys)
          { 
  
            UiApplication.getApplication().invokeLater(new Runnable()
            {public void run()
            {
               data_vec=new Vector();
            data_vec=listboys;
            Items it1=(Items)data_vec.elementAt(0);
            error("Vector Main Screen " +it1.getName());
                               final MyListField myListView=new MyListField();
        final  MyListModel myListModel=new MyListModel(myListView,data_vec);
       myListView.addToContextMenu(myListModel.getAddMenuItem(0,0));
      myListView.addToContextMenu(myListModel.getRemoveMenuItem(0,0));
      myListView.addToContextMenu(myListModel.getModifyMenuItem(0,0));
      myListView.addToContextMenu(myListModel.getEraseMenuItem(0,0));
  
      {
          Manager vfm=getMainManager();
          vfm.add(myListView);
          vfm.add(new SeparatorField(SeparatorField.LINE_HORIZONTAL));
          setTitle("List Demo Title");
  
          }
  
  The listview is always empty. I don't see where data is passed to display. Whenever I call:
  list.setSize(_data.size());
  
  I always get a null pointer exception. How can I get the listview to display the data contained in the vector itemsholder. Thank you
  			 
  using images in a listfield is not difficult, to improve that worked for you.
  You can use drawBitmap to draw the image in the listfield.
  		   

• ListView with InvokeActionItem

  Hi everyone, I am creating a list including an invokeactionitem to share something.

  However, I found that the invokeactionitem query is not accurate. Does anyone have an idea?

  Here's my simplified coding.

  {To ListView

  dataModel: myDataModel / / coding datamodel created by c ++

  ListItemComponents:]

  {ListItemComponent}

  {Of container

  {Label

  text: ListItemData.content

  }

  contextActions:]

  ActionSet {}
  {InvokeActionItem}
  query {}
  mimetype: "text/plain".
  data : ListItemData.content / / data not always as same one I want to share
  invokeActionId: "bb.action.SHARE".
  }
  }
  }
  ]

  }

  }

  ]

  onCreationCompleted: {}

  myDataModel.loadData (); loadData is a function to insert an item in the datamodel

  }

  }

  I already found a solution.

  InvokeActionItem is created after the creation of the ListItemComponent. Thus, the query can get different data of ListItem.

  For example, the ListView creates #21 ListItem. But the InvokeActionItem of #19 ListItem is just started to create. Finally, it will get a bad data from the ListItemData.

  Instead of using InvokeActionItem, directly using ActionItem, it's much better since the period created the ActionItem is as even the ListItem. If the ActionItem can always get the current ListItemData.

  Here is the code that I currently use and it always returns the correct value for my InvokeQuery.

  http://supportforums.BlackBerry.com/T5/Cascades-development/dynamic-InvokeQuery/m-p/2084381#M10730

  {To ListView

  dataModel: myDataModel / / coding datamodel created by c ++

  ListItemComponents:]

  {ListItemComponent}

  {Of container

  {Label

  text: ListItemData.content

  }

  contextActions:]

  ActionSet {}
  {ActionItem}

  Title: qsTr ("action")

  onTriggered: {}
  query.mimeType = "text/plain".
  Query.Data & Colon = ListItemData.content / / data not always as same one I want to share
  query.updateQuery ();
  }

  attachedObjects:]

  {Of invocation

  ID: Summoner

  query: InvokeQuery {/ / show editor QML here has the error, but it's correct coding}

  ID: query

  Here must be empty and not a query is complete, otherwise the function onArmed will be reported once the object is created.

  }

  onArmed: {}

  Trigger ("BB.action.Share");

  }

  }

  ]
  }
  }
  ]

  }

  }

  ]

  onCreationCompleted: {}

  myDataModel.loadData (); loadData is a function to insert an item in the datamodel

  }

  }

• ListView with custom headers (sections)

  Hello

  I need custom headers (basically something like sections QML native ListView component http://doc.qt.nokia.com/4.7-snapshot/qml-listview.html#section.criteria-prop) in my ListView. In my case, I have list of comments that I want to be sorted by DateTime and contain headers: «Today, yesterday, last 7 days, Older» Source of ListView is GroupDataModel (QVariantList of SqlDataAccess).

  Any ideas?

  Thank you

  Jan

  As far as I'm concerned, I think that's not possible!

  Likewise, you cannot sort on key on a second key in DESC and ASC.

  In addition, the title of the header section is the value used to sort data

  So in anticipation, I add a prefix to my field in the QML and sort, I have re - format text.

  In your case, I do "1-Today", "2-Yesterday", "3-Last..." » ; then I sort on this key. and I don't value.substring (...) in QML

  To remove my prefix.

  Nicolas

• ListView with Image that downloads from web

  Hello.

  Are there examples out there how it just download an image on the web and show it to a list view. All the examples I found only uses the images of the current folder. Simply assign the imageSource with a http address didn't work...

  It is for native Blackberry 10 + waterfall.

  Thank you

  Johan

  RIM recently published a sample on this, click on the link below:

  https://github.com/BlackBerry/Cascades-samples/tree/master/TLDR

• ListView with edges rounded in blackberry 10

  Hi all

  I am trying to achieve something like that...

  http://i.stack.imgur.com/H0ejl.jpg

  in blackberry 10 use qml, is this possible? What should I do? ListView cannot, because it seems fullscreen in bb10? Thank you

  It is not necessarily full screen. You can put it in a container and adjust its size (preferredSize) according to your needs.

  For rounded corners, I would try to place a 9-patch image above using DockLayout or DispositionAbsolue.

• Appearance to highlight the Image of GridListLayout

  Hello

  Small Question. Try to get a ListView with GridListLayout containing ImageView. When I choose a picture, it does not display automatically a point hard as happens with a standard ListView. Is - not manipulate automatically? If not, what is the best way to deal with? StandardListItem with a container or a CustomListitem with appearance of point high?

  Thank you

  Finally found one of my old posts which had the answer.

                  listItemComponents: [
                     ListItemComponent {
                          type: "item"
                          CustomListItem {
                              dividerVisible: false
                              highlightAppearance: HighlightAppearance.Default
                              Container {
                                  layout: DockLayout {
                                  }
                                  ImageView {
                                      imageSource: ListItemData.image
                                      scalingMethod: ScalingMethod.AspectFill
                                      contextActions: [
                                          ActionSet {
                                              title: "Photographs"
                                              ActionItem {
                                                  title: qsTr("Favorite")
                                                  imageSource: "asset:///icons/actions/favorite.png"
                                                  onTriggered: {
                                                  }
                                              }
  
                                          }
                                      ]
                                      verticalAlignment: VerticalAlignment.Fill
                                      horizontalAlignment: HorizontalAlignment.Fill
                                  }
                                  ImageView {
                                      id: selectedAppearance
                                      imageSource: "asset:///amd/ImageSelectedAppearance.amd"
                                      scalingMethod: ScalingMethod.Fill
                                      verticalAlignment: VerticalAlignment.Fill
                                      horizontalAlignment: HorizontalAlignment.Fill
                                      visible: false
                                  }
                              }
                              ListItem.onSelectionChanged: {
                                  if (selected) {
                                      selectedAppearance.visible = true;
                                  } else {
                                      selectedAppearance.visible = false;
                                  }
                              }
  
                          }
                      }
                  ]
  

  It is the image I've used.

  

  And the file associated with AMD.

  #RimCascadesAssetMetaData version=1.0
  source: "ImageSelectedAppearance.png"
  sliceMargins: 9 9 9 9
  

  This replica of what is in the photos app.

• [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".

• Tap the spread with ListView

  Hello

  I have a ListView with a learn a more clickable label at the bottom right of the list item.  However, when I click on learning more label ListView consumes also to the touch...

  
  ListView {
   listItemComponents: [
  
    ListItemComponent {
  
     Container {
  
        Label: {
          text: "Description"
        }
        Label: {         id: label2
           onTouch: {
              if (event.isUp()) {
                  //Child Label do Something
                  //Point A
              }
           }
        }
     }
    }
   ]
  
   onTriggered: {
       //Point B
       delegate.itemSelected(indexPath);
   }
  }
  

  My problem is although label2 is clicked the touch event is also handled by the ListView method onTriggered.  Does anyone know I can keep the ListView of the manipulation to the touch even when label2 manages to touch?

  Thank you

  Hello

  You can check this code it will help for you. I think that this will solve your problem.

  import bb.cascades 1.0
  
  Page {
      Container {
          ListView {
              id: listview
              dataModel: GroupDataModel {
                  grouping: ItemGrouping.None
              }
              listItemComponents: [
                  ListItemComponent {
                      type: "item"
                      Container {
                          id: cont
                          preferredWidth: 500
                          preferredHeight: 100
                          background: Color.Gray
                          Label {
                              text: ListItemData.title
                          }
                          Label {
                              text: ListItemData.description
                              touchBehaviors: TouchBehavior {
                                  eventReactions: TouchReaction {
                                      eventType: TouchType.Down
                                      phase: PropagationPhase.AtTarget
                                      response: TouchResponse.StartTracking
                                  }
                              }
                              onTouch: {
                                  if (event.propagationPhase == PropagationPhase.AtTarget) {
                                      if (event.isDown()) {
                                          console.log("label at target phase");
                                      }
                                  }
                              }
                          }
                      }
                  }
              ]
              onTriggered: {
                  console.debug("listview triggered");
              }
              onCreationCompleted: {
                  for (var i = 0; i < 5; i ++) listview.dataModel.insert({
                          "description": "description",
                          "title": "listitem"
                      });
              }
          }
      }
  }
  

  If you touch the first label it will trigger the display of the list and if you touch the second label does not trigger the ListView.

• GridListLayout using text

  Hello.

  This is my first post for help.

  I'm working on my first app and I encountered a problem.

  This app is also developed for Android and iOS by some friends. We want to show the names of the developers for each platform to the 'About' tab button.

  I created an XML file with the headers and numbers for names:

  My problem is that when I try to create a list using the GridListLayout and do show such as this example, I just can't. Only the header appear.

  The code I have so far:

  Container {
        translationY: 800.0
        ListView {
            layout: GridListLayout {}
            dataModel: XmlDataModel {
            source: "data.xml"
            }
               listItemComponents: [
                 ListItemComponent {
                 type: ""
  
                    }
                 ]
         }
  }
  

  Any help will be appreciated.

  Just got the solution to this problem.

  If someone has this problem

  see this link:

  http://supportforums.BlackBerry.com/T5/tkb/DashboardPage

  Thanks Magnumopus

• Change stacklayout to gridlayout in the listview

  How can I change to battery/grid listview layout? Or how a list replacing with lines from the list of tiles? Can anyone help? Thank you!

  Thanks for the inspiration!

  I did this way:

  Page {
      ListView {
          id: listView
          layout: (mainPage.listviewLayout == "stack") ? stackListLayout : gridListLayout
      }
      attachedObjects: [
              GridListLayout {
                  id: gridListLayout
                  headerMode: ListHeaderMode.None
              },
              StackListLayout {
                  id: stackListLayout
                  headerMode: ListHeaderMode.None
              }
          ]
      actions: [
              ActionItem {
                  title: "Change layout"
                  onTriggered: {
                      if (mainPage.listviewLayout == "stack") {
                          mainPage.listviewLayout = "grid";
                          listView.layout = gridListLayout;
                      } else {
                          mainPage.listviewLayout = "stack";
                          listView.layout = stackListLayout;
                      }
  
                  }
              }
          ]
      property string listviewLayout: "stack"
  }