Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Developer
Posts: 16
Registered: ‎04-11-2013
My Device: z10
My Carrier: Verizon
Accepted Solution

ListItemData does not have any way to wrap the StandardListItem :description

Hi ,

Does anybody know how to wrap the description obtained from List item Data Moel

 

For eg.  I can display the app Description in the following way

 

StandardListItem {
title: ListItemData.appName
description: ListItemData.appDescp
bottomMargin: 50.0
textFormat: TextFormat.Plain
}

 

 

but the problem here is if the "ListItemData.appDescp"  is too long to fit in one line than there is no method which can either wrap it or bring the remaining words in next line

It just simply fades out the remaiing words which doesn't get fit in device with.

 

 

Thanks 

Puneet

Developer
Posts: 358
Registered: ‎04-13-2013
My Device: Z10
My Carrier: Telus

Re: ListItemData does not have any way to wrap the StandardListItem :description

[ Edited ]

You can create a custom listitem and build a UI with a label that has a multiline: true in it.

 

Look at the TL;DR or Built for BlackBerry Showcase sample to see what I mean.

 

https://github.com/blackberry/Cascades-Samples/tree/master/BfB-Showcase

 

ListView {
            id: feedsList
            property variant listImageManager: feedImageManager
            dataModel: feedModel
            layout: GridListLayout {
                headerMode: ListHeaderMode.StickyOverlay
                columnCount: 2
                cellAspectRatio: 1
                horizontalCellSpacing: 0
                verticalCellSpacing: 0
            }
            listItemComponents: [
                ListItemComponent {
                    type: "imageItem"
                    ImageItem {
                        contextActions: ActionSet {
                            title: ListItemData.title
                            InvokeActionItem {
                                objectName: "readMore"
                                id: readMore
                                title: qsTr("Read More") + Retranslate.onLanguageChanged
                                ActionBar.placement: ActionBarPlacement.OnBar
                                imageSource: "file:///usr/share/icons/bb_action_open.png"
                                query {
                                    invokeTargetId: "sys.browser"
                                    // A valid URI is needed for the action item to appear.
                                    // We will change the URI when an item is selected.
                                    uri: "http://www.blackberry.com/"	// TODO:: add real link?
                                    // We have to tell it to tell it to watch for updates,
                                    // since the URI is dynamic (see the ListView onTriggered).
                                    onQueryChanged: readMore.query.updateQuery()
                                }
                            }
                            InvokeActionItem {
                                objectName: "shareArticle"
                                id: shareArticle
                                title: qsTr("Share Article") + Retranslate.onLanguageChanged
                                ActionBar.placement: ActionBarPlacement.InOverflow
                                query {
                                    mimeType: "text/plain"
                                    data: "..." // TODO:: add real text and link to share?
                                    invokeActionId: "bb.action.SHARE"
                                }
                                onTriggered: {
                                    // First, convert unicode string before calling invoke; the
                                    // receiver app will have to call decodeURIComponent(escape(str))
                                    // to get the unicode string back. BBM, Browser, etc. all do this.
                                    //
                                    // The replacements here convert any numeric entities in the
                                    // form of   into their proper characters, to have more
                                    // WYSIWYG output when sharing. Note that this doesn't clean
                                    // up HTML entities such as & and " nor does it clean
                                    // up HTML tags such as <a> and <p>.
                                    // Those are exercises for the reader, as Cascades doesn't do it.
                                    data = unescape(encodeURIComponent(chosenItem.title.replace(/&#(\d*);/g, function (m, c) {
                                                    return String.fromCharCode(c)
                                    }) + ": " + chosenItem.description.replace(/&#(\d*);/g, function (m, c) {
                                        return String.fromCharCode(c)
                                    }) + " " + chosenItem.link))
                                }
                            }
                        }
                    }
                },
                ListItemComponent {
                    type: "textItem"
                    TextItem {

//This is another qml being referenced that handles the UI for items that are text only
} }
, ListItemComponent { type: "header" Header { id: header property string headerDate : (ListItemData.toDateString() != undefined) ? ListItemData.toDateString() : "" onHeaderDateChanged: { var today = new Date(); var yesterday = new Date(today.getTime()-(1000*60*60*24)); if (headerDate == today.toDateString()) {headerDate = "Today"} if (headerDate == yesterday.toDateString()) {headerDate = "Yesterday"} } title: headerDate contextActions: ActionSet { ActionItem { title: qsTr("To Top") + Retranslate.onLanguageChanged // TODO:: add icon onTriggered: { header.ListItem.view.scrollToPosition(ScrollPosition.Beginning, ScrollAnimation.Smooth) } } ActionItem { title: qsTr("To Bottom") + Retranslate.onLanguageChanged // TODO:: add icon onTriggered: { header.ListItem.view.scrollToPosition(ScrollPosition.End, ScrollAnimation.Smooth) } } } } } ] onTriggered: { // Check so that the triggered item is not a header if (indexPath.length > 1) { // Get the data from the triggered item chosenItem = dataModel.data(indexPath); // Create the drill down page and add populate it with the list item data var page = detailPage.createObject() page.chosenItem = chosenItem page.listImageManager = feedsList.listImageManager nav.push(page) } } // Item type-mapping function itemType(data, indexPath) { if (indexPath.length == 1) { return 'header'; } else { if (data.imageSource != "") { // The data contain an image return an item that can display an image. return 'imageItem' } else { // No image in the data display a text item. return 'textItem' } }
//Returns either the image item or text item depending on if data.imageSource has an image or not
} attachedObjects: [ // Images from the internet are tracked via a NetImageTracker and it // in turn NetImageManager to make requests and cache images. Be careful // not to use NetImageManager with many different cacheId:s since the cached // images are stored and use up disk space on the device. NetImageManager { // TODO:: replace with better image cache id: feedImageManager cacheId: "feedImageManager" }, ComponentDefinition { id: detailPage source: "DetailPage.qml" } ] }

 

Developer
Posts: 358
Registered: ‎04-13-2013
My Device: Z10
My Carrier: Telus

Re: ListItemData does not have any way to wrap the StandardListItem :description

Or conversely just do this and replace your standard lisitem:

 

ListItemComponent {
                    type: "textItem"
                    Label {
                     text: ListItemData.text
                     multitline: true

                    }
                }

 

New Developer
Posts: 16
Registered: ‎04-11-2013
My Device: z10
My Carrier: Verizon

Re: ListItemData does not have any way to wrap the StandardListItem :description

Thanks @bmorr for reply
I know in Label I can have multiline true, but I want to have the "app Name" in first line and below it the description about it
If i use the Label than these two will get seprated which is not the proposed UI Design i am working on
the Label can have text in one Label and the text's description in another , I tried that before posting this query ..
Developer
Posts: 358
Registered: ‎04-13-2013
My Device: Z10
My Carrier: Telus

Re: ListItemData does not have any way to wrap the StandardListItem :description

You can do one of the following:

 

Label{

text: ListItemData.text + ": " + ListItemData.Description
Multline: true
}


OR

Container{
layout: StackLayout{
   orientation: layoutorientation.TopToBottom
}
Label{
//App name
}
Label{
//Description
}

}

 

New Developer
Posts: 16
Registered: ‎04-11-2013
My Device: z10
My Carrier: Verizon

Re: ListItemData does not have any way to wrap the StandardListItem :description

Thanks @bmorr
I was confused with sone other values in Label field ,
this is working for me

Puneet