Simple horizontal listview in cascades

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.

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

• 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

• 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)));
  

• How to get the item to the index by the listview in qml programming

  Hi guys.

  I'm sorry my English not good level.

  At the point of selection Android listview to index easylly, I call ListView.selectionPosition (int index)

  But when you use ListView on cascades qml, I think point get in way to the index.

  Hope you help me.

  For a simple DataModel with a single level of items, you can access the item at a specific position with code of God:
  int position = 0
  var MonElement = myDataModel.data ([position])-requires one [of QVariantList]

• 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)
      }
  }
  

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

• 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

• CSS Horizontal Menu features

  I have studied tutorials and messages of the forum and cannot find an answer, so I'm posting my question here.

  I have a simple horizontal menu. It's awesome to watch. But it is not functional - mainly because there are no hyperlinks in the < li > code. But if I put hyperlinks in the < a href = "" > tags where I expected them to go, the feature does not improve.

  (BTW, my page CSS using display: block and display: inline and float: left).

  Here is the HTML code, coded according to the instructions in the tutorials:

  < div id = "navbar" > < ul >
  < li > < a href = "#" > < span id = "nav" > home </span > < /a > < /li >
  < li > < a href = "#" > < span id = "nav" > playground products </span > < /a > < /li >
  < li > < a href = "#" > < span id = "nav" > Gallery </span > < /a > < /li >
  < li > < a href = "#" > < span id = "nav" > about us / contact us < / span > < /a > < /li > < /ul >
  < / div >

  I want each element of list as clickable text - to make a link to another page on the web site. I don't see any place in the previous example the hyperlink information. When I put it in a logical place (to me) as in the code below, it has still no functionality in Firefox, Opera or Chrome. by clicking on these pieces of text doesn't do anything: the cursor does not change even. However, in IE7, I get a "flickering" version of the menu feature. (In other words, the words of text clickable moving to the right and the left as the mouse passes on.) What's wrong? And where the hyperlink to go, if not bracketing the clickable text that launches the hyperlink?

  < div id = "navbar" > < ul >
  < li > < a href = "index.html" > < span id = "nav" > home </span > < /a > < /li > ""
  < li > < a href = "products.htm" > < span id = "nav" > playground products </span > < /a > < /li > ""
  < li > < a href = "gallery.htm" > < span id = "nav" > Gallery </span > < /a > < /li > ""
  < li > < a href = "about.htm" > < span id = "nav" > about us / contact us < / span > < /a > < /li > < /ul > ""
  < / div >

  Thank you very much.

  And if I want to use the text in red twice and the text marine twice, I guess that I really need to get back to classes, right?

  Well Yes.

  padding: 0

  is exactly the same as

  padding: 0px;

  Padding: 0pt;

  Padding: 0em;

  padding: 0%;

  Padding: none;

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB
  http://ALT-Web.blogspot.com

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

• Error with ListItemProvider - undefined reference to build

  I'm tying to add a ListItemProvider for my project, but without success.

  If I add the following class extends from ListItemProvider to my project, it fails to build - this from the log from the console:

  "o-g/.obj/TripListItemProvider.o.rodata._ZTV20TripListItemProvider [_ZTV20TripListItemProvider](+0x3c): refers to 'TripListItemProvider::updateItem(bb::cascades::ListView*, bb::cascades::VisualNode*, QString const&, QList const&, QVariant const&)' the undefined".

  I tried recreating it from scratch and comment on different things.  I can build OK, if I comment out the function updateItem call, but that's really what I want to use, that kind of defeats the purpose of the ListitemProvider.

  I tried to recreate a number of times and also different levels of SDK.  If I drop the class in a sample as Battambang, island generation fails in a similar way.  But if I have him drop it into C++ Cookbook sample, it compiles OK.  I compared to the building, in particular the included libraries and can not see the difference.  I don't know there is a, only I don't know where to look.

  Any help gratefully received.

  TIA.

  /*
   * TripListItemProvider.cpp
   *
   */
  
  #include "TripListItemProvider.h"
  
  using namespace bb::cascades;
  
  TripListItemProvider::TripListItemProvider() {
      // TODO Auto-generated constructor stub
  
  }
  
  TripListItemProvider::~TripListItemProvider() {
      // TODO Auto-generated destructor stub
  }
  
  bb::cascades::VisualNode * TripListItemProvider::createItem(ListView* list, const QString &type) {
      return NULL;
  }
  
  void updateItem(ListView* list, VisualNode *listItem, const QString &type, const QVariantList &indexPath, const QVariant &data) {
  }
  

  /*
   * TripListItemProvider.h
   *
   */
  
  #ifndef TRIPLISTITEMPROVIDER_H_
  #define TRIPLISTITEMPROVIDER_H_
  
  #include 
  // #include 
  // #include 
  // #include 
  // #include 
  
  using namespace bb::cascades;
  
  class TripListItemProvider: public ListItemProvider {
  public:
      TripListItemProvider();
      virtual ~TripListItemProvider();
  
      bb::cascades::VisualNode * createItem(bb::cascades::ListView* list, const QString &type);
      void updateItem(ListView* list, VisualNode *listItem, const QString &type, const QVariantList &indexPath, const QVariant &data);
  
  };
  
  #endif /* TRIPLISTITEMPROVIDER_H_ */
  

  Hey there...

  My guess would be

  /*
   * TripListItemProvider.cpp
   *
   */
  
  void TripListItemProvider::updateItem(ListView* list, VisualNode *listItem, const QString &type, const QVariantList &indexPath, const QVariant &data) {
  }
  

• Timeline zoom

  I'm looking to create a website that will feature an interactive component on one of its pages. What I need is a simple horizontal calendar which can be zoomed in to see in small increments of time. Let's say he would otherwise show a timeline spanning 1 month (with 30 daily present side by side). The user of the site must be able to easily zoom in on it, until the week day, hour, etc to see the pieces of information (historical data that is associated with the period of history, which is what is talking about the site).

  How this would be difficult to create? I know very little about the design of Web sites and coding, but I'm trying to teach myself. My only guess is that you can use flash (I have a little experience with). I am in the right place to ask this question? If anyone can offer me advice that could be very useful. Thank you!

  Yes.

  You have a very long road ahead of you, if you use the Javascript coding customized from scratch with no experience but all power to you if you want to try it.

  Take the time to learn it. Plugins take seconds.

  Good luck with your project.

• Problem of menu drop-down submenu

  I have a simple horizontal navigation with a few drop-down submenus. I made the bounding for the main elements of nav intentionally big so I could include an ideolocator above the words with the appropriate room. Given that the framework encompassing is large, the submenu down the bottom of the bounding box that is well below where I really want to fall down. I can move individual submenu plu top, however when I change any other submenus that that I just moved back to its original position. I see no work around, I almost tried everything.

  I think it is a problem with Muse because the submenu will look like it is the right place, then I change something else and it will immediately where she was. Someone at - it similar problems?

  * edit: I think the real problem here is that you cannot change the submenu separately from the nav element. even if you get the bounding around her box, you can only size differently, no option to move it around

  You can use the 'Space' down the submenu. (Windows/spacing)

  

• Help save Progressive layers such as video or files

  Hi, I am interested in creating a video of animation with Photoshop. I have 80 + layers, each building on the last. For example, layer 1 is a simple horizontal line (-). Layer 2 is a simple vertical line (|). With two layers on, they form a cross (+). Layer 1 should be visible for layer 2 to make sense in the context of the video. Thus, each previous layer must remain visible when the next layer is enabled. Then the other, then the other.

  Previously, I have saved manually layer 1 as a jpg, turned on the layer 2 and saved the new file, turned on layer 3, recorded the following new file and so on, until I go through all the layers. Then, I used video editing software to put files in order and make it as a video.

  I'm hoping that PS (CS5) can help me. I need to make a video with each layer light (perhaps a delay seconde.03, as in the band of the animation), but with all the previous layers standing on. Maximum layers of onion skin is 8, so this does not work for me.

  If I can't make the video directly from PS, how can I create an action that will

  1. save the file without displaying message in jpg with the name of the layer as the file name in the directory where resides the PSD file

  2. making visible the next layer upwards (or downwards, whatever)

  3. Repeat until all layers are complete, no matter how many layers

  Try this.  keep all the layers in a single file with the last layer you want to 'turn on' at the top.  Turn off all the layers except the bottom layer visibility.  Remove any current timeline or animation fram, but open the window of limeline or the palette.  Run this script in the attached link.  It will create a new image for each layer in your document.  It will not detect layers in groups, in order to keep all of your layers to a certain level.

  https://files.Acrobat.com/preview/c86cb04f-65bb-42d7-B8de-6771c9d22a58

  Edit: once you get all created frames, you can always convert to a sequence of editing and add transititions etc.