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" }
Tags: BlackBerry Developers
Similar Questions
-
Notify the ListView data in the model have changed
Hello!
I know this question has been asked several times, but I have yet to find anything satisfactory.
I have a ListView, filled with a QListDataModel.
After some time I update an element of the model. So far, the only way I found to the ListView so that this change is to delete the model and then reappend all elements. But the problem with this approach is that ListView Flash and scroll to the top of the page. Is there anything better to just say ListView that it should update the visible elements?
Thank you
Well, I just signal myself in the WRITE method and it works.
-
Change the image, click the Listview item
Hi all
I want to change the image of the listview element. When I touch on the element of the list the image is modified and after leave the key event the modified image remains same. Please solve my problem.
Thank you & best regards
Sanjit
remove the other part of the setHighlight function. This means that when you leave the touch, the other party will not perform.
Press on as if that solves your problem.
-
How to change the layout of the listview in javascript?
I need show listview two different data schemas.
can I change the listview.layout of js?
my code is like this:
{Page 1
function aaa (type) {}
if(type=="List")
listschema = StackListLayout (); new StackListLayout();
on the other
listschema = new GridListLayout();
listschema.cellAspectRatio = 3 / 4;
listschema.horizontalCellSpacing = 5;
listschema.verticalCellSpacing = 5;
listschema.columnCount = 2;}
{page 2
property alias listschema lista.layout
....
ListView {...}
....
}
Thank you...
Hello
You can set the layout for the listview dynamically from javascript by doing like this.
Page { Container { ListView { id: listview dataModel: GroupDataModel { grouping: ItemGrouping.None } /*layout: StackListLayout { orientation: LayoutOrientation.LeftToRight }*/ listItemComponents: [ ListItemComponent { type: "item" Container { id: cont preferredWidth: 500 preferredHeight: 100 background: Color.Gray Label { text: ListItemData.title } Label { text: ListItemData.description } } } ] onTriggered: { console.debug("listview triggered"); } onCreationCompleted: { listview.layout = layout } } } attachedObjects: [ /*StackListLayout { id:layout orientation: LayoutOrientation.LeftToRight }*/ GridListLayout { id: layout columnCount: 2 } ] }
Kind regards
Naresh Kodumuri.
-
ListView, title change to header based on the stored value.
Hello
I'm new to native development, always trying to get a hang of how things are done in QML. I was wondering how it was possible to format the header in the ListView based on the value of the header. For example, the datamodel is sorted by name and status. Status is stored as an integer 0,1,2,3,4,5 in the database. Whenever the ListView displays the headers, I want to show the actual title of the State (for example in progress, completed) instead of display 0 or 1.
Thank you for your help.
If... else if... else must have worked well, please send your code.
-
changing value of text with the cursor
Hi you all
I need a help from your side
I have created a slider and change the size of the listview text with the cursor
Here is my code
Slider { id: slider fromValue: 8.0 toValue: 16.0 value: 8.0 layoutProperties: StackLayoutProperties { spaceQuota: 0.1 } preferredWidth: 200.0 maxWidth: 250.0 preferredHeight: 20.0 visible: true enabled: false horizontalAlignment: HorizontalAlignment.Center onImmediateValueChanged: { // descriptionText is the id of label descriptionText.textStyle.fontSize = FontSize.PointValue descriptionText.textStyle.fontSizeValue = immediateValue } } /***********************************************************************// i am adding data to listview using remote source Container { id: listviewContainer layout: StackLayout { } ListView { id: myListView1 dataModel: dataModel1 //{ // source: "asset:///models/xmldata.xml" // } // Use a ListItemComponent to determine which property in the // data model is displayed for each list item listItemComponents: [ ListItemComponent { type: "item" Container { rightPadding: 20 leftPadding: 20 horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center layout: StackLayout { orientation: LayoutOrientation.TopToBottom } Container { topPadding: 40 horizontalAlignment: HorizontalAlignment.Fill layout: DockLayout { } // The Item content container Container { verticalAlignment: VerticalAlignment.Top horizontalAlignment: HorizontalAlignment.Right layout: StackLayout { orientation: LayoutOrientation.RightToLeft } } } // Description text label Label { id: descriptionText // // objectName: descriptionText // leftMargin: 20 horizontalAlignment: HorizontalAlignment.Right verticalAlignment: VerticalAlignment.Top text : ListItemData.des textStyle.color: Color.create("#868686") textStyle.textAlign: TextAlign.Justify multiline: true textFormat: TextFormat.Plain textStyle.fontSizeValue: 8.0 } } } ] } attachedObjects: [ GroupDataModel { id: dataModel1 // Sort the data in the data model by the "pubDate" field, in // descending order, without any automatic grouping sortingKeys: [ "date" ] //[ "pubDate" ] sortedAscending: false grouping: ItemGrouping.None }, DataSource { id: dataSource1 objectName: "" // Load the XML data from a remote data source, specifying that the // "item" data items should be loaded source:"http://10.121.10.139/simplehtmldom/getdescnews.php?newsid="+dataSource1.objectName query: "/news/property/" type: DataSourceType.Xml onDataLoaded: { // After the data is loaded, clear any existing items in the data // model and populate it with the new data dataModel1.clear(); dataModel1.insert(data) myIndicator12321.setRunning(false); myIndicator12321.setVisible(false); // dataModel.insert(data) } } ] } // in the end i am calling on creating complete onCreationCompleted: { // When the top-level Page is created, direct the data source to start // loading data dataSource1.load(); }
problem I am facing is, it does not find the descriptionText variable, which is the id of the label
can someone help?
OK, the problem is that listItemComponents attached to a control, such as ListView have their own context. ListItemComponent documentation refers to what I think. If you must do the following:
1. do you have a property that is defined as an attribute of the ListView
2 bind your fontSizeValue to listItemComponent tag to the ListView. Note, however, to do this, you need to get a reference to the ListView using your label ListItem.view is found in the container. Not obvious, I know.
3. do you have your cursor to update the property you have defined for the ListView.
Cursor---> p_font_size ListView property<---------->---------->
Like this:
{To ListView
ID: myListView1
property real p_font_size: 10listItemComponents:]
{ListItemComponent}
type: 'point '.
ID: sample{Of container
ID: mainListViewContainer{Label
ID: descriptionText..........
textStyle.fontSize: FontSize.PointValue
textStyle.fontSizeValue: mainListViewContainer.ListItem.view.p_font_size}
and elsewhere on your page
Slider {}
ID: sliderfromValue: 8.0
toValue: 16.0
value: 8.0
layoutProperties: {StackLayoutProperties}
spaceQuota: 0.1
}
preferredWidth: 200.0
maxWidth: 250,0
preferredHeight: 20.0
visible: true
enabled: true
horizontalAlignment: PonImmediateValueChanged: {}
myListView1.p_font_size = immediateValue
}
}I test it and it works. Please make this response as the solution if it works for you too :-)
-
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 dataThe 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
-
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 } }
-
How to refresh the Listview after adding a new item
Hello
I have the following list:
ListView { id: channelsList dataModel: categoryModel listItemComponents: [ ListItemComponent { type: "item" StandardListItem { title: ListItemData.name // Channel name imageSource: ListItemData.imageFile status: ListItemData.id id: channelItemId contextActions: [ ActionSet { //title: contentView.title ActionItem { title: "Add to Favorites" onTriggered: { console.log(ListItemData.id + " will be added to the Favorites"); //categoryModel.addFavorite(ListItemData.name, ListItemData.imageFile, ListItemData.id); channelItemId.ListItem.view.viewTriggered(ListItemData.name, ListItemData.imageFile, ListItemData.id); } } } ] } } ] onTriggered: { var chosenChannel = dataModel.data(indexPath); console.log("indexPath: " + indexPath); var playingPage = playpagedef.createObject(); playingPage.chname = chosenChannel.name; playingPage.cid = chosenChannel.id; playingPage.init(); Qt.nav.push(playingPage); } attachedObjects: [ // The bucket categoryModel is a non visible object so it is set up as an attached object. // The categoryModel itself is a QListDataModel defined in categorymodel.h and registered // as a type in the creation of the application. CategoryModel { id: categoryModel // The path to the JSON file with initial data, this file will be moved to // the data folder on the first launch of the application (in order to // be able to get write access). jsonAssetPath: "models/channels.json" // The filtering is initially set to "Category 1" to show category channels filter: label.text }, ComponentDefinition { id: playpagedef source: "PlayingPage.qml" } ] function viewTriggered(name, imageFile, id) { categoryModel.addFavorite(name, imageFile, id); categoryModel.clear(); } }
and the categoeymodel.h is as follows:
#ifndef _CATEGORYMODEL_H #define _CATEGORYMODEL_H #include
#include #include #include using namespace bb::data; // The category categoryModel is based on the QListDataModel template, which in turn // implements the abstract DataModel class. typedef bb::cascades::QListDataModel CategoryListModel; /* CategoryModel Description: * * CategoryModel class for the Category List application, the data categoryModel * reads and write from a JSON file that keeps all item data * for the list. */ class CategoryModel: public CategoryListModel { Q_OBJECT Q_PROPERTY(QString filter READ filter WRITE setFilter NOTIFY filterChanged) Q_PROPERTY(QString jsonAssetPath READ jsonAssetPath WRITE setJsonAssetPath NOTIFY jsonAssetPathChanged) public: /** * Constructor that sets up the recipe * @param parent The parent Container, if not specified, 0 is used */ CategoryModel(QObject *parent = 0); ~CategoryModel(); QString filter(); void setFilter(const QString filter); QString jsonAssetPath(); void setJsonAssetPath(const QString jsonAssetPath); signals: void filterChanged(QString filter); void jsonAssetPathChanged(QString jsonAssetPath); public slots: void addFavorite(QString channelName, QString channelImageFile, int channelId); private: bool jsonToDataFolder(); // Property variables QString mFilter; QString mJsonAssetsPath; QString mJsonDataPath; // A list containing all data read from the JSON file QVariantList mData; //Invocation variables bb::cascades::Invocation* mInvocation; }; #endif // ifndef _CATEGORYMODEL_H My problem is that the listview is not get automatically updated when a new item is added to the datamodel (a favorite channel is added). I have to exit the application and restart to see the updated list.
categoryModel.addFavorite(name, imageFile, id); categoryModel.clear();
categoryModel.clear ();
does not work. I get:
Asset: / / / hand. QML:180: TypeError: result of expression 'categoryModel.clear' [undefined] is not a function.
I would like to know how to achieve using approach "more correct".
QListDataModel does not expose its internal storage directly. It is possible to reconstruct the map by performing an iteration in a loop (with the help of data() and size() methods), the dataModel entries:
http://developer.BlackBerry.com/Cascades/reference/bb__cascades__qlistdatamodel.html
but I don't see how this could help. If the filtered data is changed, it must be merged with the original sort data.
Why the original approach has not worked?
I could not understand from the description appearance of the interface user, please post a screenshot if possible.
-
Spacing between the delegates of the listview
Hello
I have this layout on a Page
ListView { id: listView dataModel: modelData listItemComponents: [ ListItemComponent { Container { background: Color.Cyan Label { } } } ] }
I want to insert a space between each listitem, how can I do this?
I have created a new model of the ListView project and experimented a bit. The following seems to work:
ListView { dataModel: XmlDataModel { source: "data.xml" } function itemType(data, indexPath) { return "item" } listItemComponents: [ ListItemComponent { type: "item" Container { topMargin: 50 bottomMargin: 50 background: Color.Cyan Label { text: ListItemData.name } } } ] }
Don't forget to return a good itemType, otherwise default ListItemComponent will be used and the changes are not visible.
-
Created in the ListView lost when C++ ListItem custome context reference
Hi all
I have a listview that generates a list of the custome listviewItems (ie the containers). Containers have a setContextProperty to my database object. But when they are added to the list view, I can't access the database context property. I realize that the listview is not in the same context as the page but I don't understand why when I bind context for the real item the reference he lost?
Error: asset:///WorkoutListItem.qml:17: ReferenceError: can't find variable: _Dal
List.QML
Page { Container { ListView { id: workoutList horizontalAlignment: HorizontalAlignment.Fill dataModel: _Dal.ListofWorkouts listItemComponents: [ ListItemComponent { type: "item" WorkoutListItem { workoutId: ListItemData.id workoutName: ListItemData.name } } ] }//End List }//End root }//EndPage
WorkoutListItem.qml
Container { id:root property int workoutId: -1 property variant workoutName: "" layout: StackLayout { orientation: LayoutOrientation.LeftToRight } Button { id: workoutDelete text: "Delete" onClicked: { var result = _Dal.DeleteWorkout(root.workoutId) } } Label { id: workoutNumberLabel text: root.workoutId } Label { id: workoutNameLabel text: root.workoutName } Button { id: workoutEdit text: "Edit" onClicked: { //TODO: Open workout page } }}
application.cpp
QmlDocument *WorkoutListItem = QmlDocument::create("asset:///WorkoutListItem.qml").parent(this); WorkoutListItem->setContextProperty("_Dal", dal);
Thanks in advance for any help
-J
itemRoot.ListItem.view.yourFunction(ListItemData)
yourFunction (data) is defined in the ListView itself
from there, you have access to your context
-
How do I paste into the ListView?
I have a text field which I would like to get suggestions, which should be above him. For this I need ListView sticking inside, like this:
the first item so should one just above the text field. When changes to data and ListView is greater that the amount of available space, I want to align at the bottom. How can I do?
So far, I tried to do this in two ways:
1. turn the ListView upside (rotationZ: 180) and each ListItem also upside down to make it readable. It works fine, but the shot is reversed (slide upward moves ListView downstairs and vice versa). The screenshot comes from there.
2. something like this:
ScrollView { horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill Container { horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill layout: DockLayout {} ListView { verticalAlignment: VerticalAlignment.Bottom preferredHeight: myModel.content.length * itemHeight } } }
I had to reverse the data in my data model and call scrollView.scrollToPoint (0, infinite) each time when the changed data. The code was this very complicated and ugly. The problem was that ListView or ScrollView anime oddly when data is modified.
Is it a normal solution to this?
Hi, I'm not in front of my computer, but it looks promising. Maybe by setting StackListLayout.orientation I could achieve this. I'll try it soon.
-
Cannot create aliases form container in the listview
I tabpane wich call page of the listview. If a tab is trigerred the container property will change (as the background) based on the value I initialize in tab pane with alias:
But I can't create aliases to change the ListView:
Like this:
Page{ id: page property alias color: containerColor.background Container{ Listview{ listItemComponents: [ ListItemComponent { type: "item" Container { id: containerColor //other code } } ] } } }
What should I do?
Thank you.
Unlike ListItemData, ListItem is defined only for top-level ListItemComponent element. I think it should work:
ListItemComponent { type: "listItem" Container { id: topContainer // <----------- added line
...
background: topContainer.ListItem.view.getBackgroundColor()
-
How to refresh the listview that is in another function
Hi all,
I have a problem with a refreshing of the listview.I have 3 features in the application, let's say 'feature A' 'feature B' and 'C'.
I also have 2 tables and sqlite db (local) .and 1 view their names are 'A table', 'table B' and 'see C.
View C is like this:
create view C as
Select a.oneColumn
Table has a
Union
Select b.oneColumn
Table B b;
Each function has the main amx.page and each of them has listview values from the (local) sqlite DB.
According to A, I can add new row to the database (line update or delete) and the list is updated with the help of the "ProviderChangeSupport".Same thing happens in the function (B) everything is ok so far. But according to C, there also listview. When I delete operation or update functionality or B.
the listview in C function is not updated.
I hope you all can easily understand the problem and help me with the solution. Oracle Mobile Application Framework.
Hello
you need to reset a feature - navigating it--you want to ensure the functionality and so refreshes the view. The change of supplier support works in the ClassLoader (feature film) it is issued to. You can use a listener to refresh the controls collection of data used by a list, but it does not work automatically.
Frank
-
I have try change item in the ListView. But ListView refreshed only after add a new point.
How can I refresh the ListView?
My code:@Override public void start(Stage stage) throws Exception { buildForm(stage); stage.show(); } //-------------------------------------------- void buildForm(Stage stage) { BorderPane root = new BorderPane(); Scene scene = new Scene(root, 800, 650); stage.setScene(scene); items.add(new SimpleStringProperty("1")); i++; items.add(new SimpleStringProperty("Line" + i)); i++; list.setItems(items); root.setCenter(list); HBox buttons = new HBox(); root.setBottom(buttons); Button buttonChange = new Button("Change"); buttonChange.setOnAction(new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { String value = items.get(0).get(); if(value.length() == 1) items.get(0).setValue("-1"); else items.get(0).setValue("1"); //not refresh } }); Button buttonAdd = new Button("Add item"); buttonAdd.setOnAction(new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { items.add(new SimpleStringProperty("Line" + i)); i++; //refresh } }); buttons.getChildren().addAll(buttonChange, buttonAdd); }
?
Maybe you are looking for
-
export bookmarks from one Mac laptop to another
-
T440 - Sound does not switch between the internal speakers and headphones listening or return
Hello community, Let me first explain how I assumed that the switch between headset and speakers should work:I turn on the music or anything else and if no headphones are connected, all sound from the internal speakers. Now if I plug headphones then
-
Aspire AS5742-6682 disk size hard max?
Hello Just bought an Acer Aspire AS5742-6682 and would like to know what is the biggest hard drive I can stuff into it. It currently has OEM 320, but I would like to get the bigger disk into it as possible. See you soon! Robbie
-
Why I can't open my PDF files or download?
The last two months, I can't open a PDF or download an attachment sent to me on email.
-
Sometimes my printer does not work. Test page printed but then later new application has no print