Border of element listview

I was wondering how do you add border of ListView items?

Also, is it possible to change the background of the listview item to choose?

The following code example illustrates adding a container that will simulate a border and highlighting the container for the background of the list item selected.

    content: Container {
        layout: DockLayout {
        }
        ListView {
            property variant nIndex
            id: listView
            objectName: "listView"
            horizontalAlignment: HorizontalAlignment.Center
            dataModel: MyListModel {
                id: myListModel
            }
            listItemComponents: [
                ListItemComponent {
                    Container {
                        layout: DockLayout {
                        }
                        preferredWidth: 768
                        preferredHeight: 70
                        background: Color.create("#000000")
                        Container {
                            layout: DockLayout {
                            }
                            preferredWidth: 768
                            preferredHeight: 60
                            background: Color.create("#ffffff")
                            id: highlightContainer
                            Label {
                                text: ListItemData.text
                            }
                        }
                        ListItem.onSelectionChanged: {
                            if (selected) {
                                highlightContainer.background = Color.create("#75b5d3");
                            } else {
                                highlightContainer.background = Color.create("#ffffff");
                            }
                        }
                    }
                }
            ]
            onTriggered: {
                listView.select(indexPath, true);
                listView.select(nIndex, false);
                nIndex = indexPath;
            }
        }
    }

The QmlListViewAttached object is what provides the ListItem property:

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

Tags: BlackBerry Developers

Similar Questions

  • Get rid of the borders on the legends above fields

    Hi, (uber-noob alert)

    How can I get rid of black borders on the left, right and above a field when the legend is above the field?forms-borders.jpg

    The borders of the field are set to 'none '. I could have no. subtitle and place captions as simple text blocks, but seems useless workaround.

    Tahnks in advance,


    Simon.

    Hello

    a textfield has two parameters of borders.

    A for all of the object and the other for the text change user interface element type you in the text.

    The border of objects is available from the border palette and must be set to none.

    The border of elements of the user interface is under the object palette in the visibility dialog box (select Customize...).

    Here you also select None for the edges and white for the text fill change UI element.

  • Parameters of borders in a table

    Sorry to ask this again but it's driving me nuts trying to find a way to remove the color just to the border of the upper part of a square of color in an html table.

    Is the answer in the CSS I've tried different ways to solve my problem, but the CSS code is in conflict with the border = & bordercolor = elements in the body?

    Example of a label of single red color in a table;

    < body >
    < table width = "50%" border = "1" bordercolor = "#FF0000" cellspacing = "0" cellpadding = "0" >
    < b >
    < td > < table >
    < /tr >
    < /table >
    < / body >

    If you add this to a new html page all you see is framed by a red line.

    All I have to do is to remove the red line from the top, leaving the left, right and down red lines?

    I know I could create it by adding a gif but I'm curious to know or to find out if it is obtained by inserting elements in the html code or css.

    I'm sure there is an easy solution?

    Any comments or help would be appreciated.

    Thank you
    Gary

    I thank Murray

    The CSS code is what I was looking for.

    Concerning
    Gary

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

  • Specific text of color in the listview element

    Hello

    I have in my application:

      ListView {
            id: myListViewAya
    
            dataModel: dataModelAya
    
            listItemComponents: [
    
            ListItemComponent {
                    type: "item"
                    id: listItemComponent_Aya
               Container {
                  // background: Color.create("#75b5d3")
                   Label {
                       id:label_Aya
                       text: ListItemData.id
                       textStyle.color: Color.Blue
                   }
                }// end of Container
            } // end of ListItemComponent 
    
            ] // end of listItemComponents list
    }end of ListView 
    

    I want the text 'label_Aya' (the second element in the listview) and all other elements of color in 'red '.

    Blue

    Please help me

    Thank you very much

    as it works well:

      ListView {
            id: myListViewAya
    
            dataModel: dataModelAya
    
            listItemComponents: [
    
            ListItemComponent {
                    type: "item"
               Container {
                id: listItemComponent_Aya
                  // background: Color.create("#75b5d3")
                   Label {
                       id:label_Aya
                       text: ListItemData.id
                textStyle.color:(listItemComponent_Aya.ListItem.indexPath[1] == 1) ? Color.Red : Color.Blue
                   }
                }// end of Container
            } // end of ListItemComponent 
    
            ] // end of listItemComponents list
    }end of ListView
    

    Thank you thank you thank you...

  • API for open action for the listview element menu.

    Hello!

    Is there an API to open the action menu with elements of action for CustomListItem?

    A possible solution is to create a custom menu like ActionMenu standard with managers and signals defined by the user.

    Anybody know standard way?

    There is no way to open ContectMenu programmatically, but one of the solutions to use the selection of the element (with listview onTriggered slot) and ActionMenu.

  • Prevention of ListView, select the element for multi select

    How do you keep a user to select specific items during a statement select multi. You can use the MultiSelectHandler to do?

    I have essentially two types of elements. Setting caching and QUERIES.  When the user performs a Multi Select on a cached item... I want only their selection to other cached items.  Even if the user is running a Multi Select statement on an item not cached... I want only their selection of other items not cached.

    Is anyway to do this?  Been Googling for half an hour and can't find that everything about this use case.

    Since I use an element of custom list, I went to this subject a little differently. My CustomListItem implements a ListItemListener. I've implemented the select method as such.

    void CustomStandardListItem::select(bool select) {
        bb::cascades::ListItemListener* lil = static_cast(m_sli);
        bb::cascades::ListView * view = qobject_cast(this->parent());
    
        if (view->multiSelectHandler()->isActive()) {
            bool isCached = view->property("isMultiSelectTypeCached").toBool();
    
            if (m_cachedImageView->isVisible() && isCached) { // is cached.. allow selection of other cached objects only
                lil->select(select);
            }
            else if (!m_cachedImageView->isVisible() && !isCached) { // is not cached.. allow selection other cached objects only
                lil->select(select);
            }
        }
        else {
            lil->select(select);
        }
    }
    

    The dynamic property 'isMultiSelectTypeCached' is just a bool on ListView value that gets defined the type of ListItemComponent. It could have just as well been the type of ListItemComponent.

  • BB10: ListView problem background elements

    Hi guys,.

    I have a listview which elements have origins are different colors (see figure). Each element background color depends on a specific element of the element in the data model (say ListItemData.color).

    But for some reaason, when I scroll to the bottom of the list and scroll to the top, the background changes color. I do not understand this weird behavior.

    People you have an idea about what is happening on or at least how to solve?

    Thank you!

    Hi all

    I solve it by doing this:

    Label
    {
        visible: false
        text: ListItemData.id
    
        onTextChange:
        {
            root.background = ListItemData.color;
        }
    }
    

    It's not elegant at all, but at least it works. The 'id' the ListItem is the only single member. So evertytime this invisible label text changes with the new id, it resets the background for that particular item.

    It is a pity I have to use such a solution for this problem.

    Thank you all!

  • ListView - elements that are currently visible?

    Hello!

    I was unable to find a method how to check what a listview items are currently visible on the screen and which are hidden. Is there a method since beta 3 or is this planned for the Beta4?

    ScrollToItem and scrollToPosition are since the Beta3 implemented. But how to read that data?

    Any ideas?

    Well, after a night sleeping on it I retried it with your approach a second time.

    This is my solution for a horizontal scrolling list view in which each item in the list is exactly as big as the screen, so there is always only one item which is the most visible element in the list:

    listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
                attachedObjects: LayoutUpdateHandler {
                    id: luhPosition
                    onLayoutFrameChanged: {
                        lblTest.text = "XXX" + luhPosition.layoutFrame.x + " - " + Qt.pageHandler.layoutFrame.width
                        if (luhPosition.layoutFrame.x >= - Qt.pageHandler.layoutFrame.width / 2 && luhPosition.layoutFrame.x <= Qt.pageHandler.layoutFrame.width / 2) {
                            //call here a C++ routine to deliver the ID of the currently visible panel in the ListView:
    
                            testArea.background = Color.Blue
    
                        } else {
                            testArea.background = Color.DarkRed
                        }
                    }
                }
            }
            Container {
                preferredHeight: Qt.pageHandler.layoutFrame.height
                preferredWidth: Qt.pageHandler.layoutFrame.width
                background: Color.Green
                id: testArea
                Label {
                    id: lblTest
                    text: "Test"
                }
            }
        }
    ]
    

    I created a second LayoutUpdatehandler at the level of the container root in which my ListView is incorporated to get the screen resolution and provide the object inside the Listview using:

    onCreationCompleted: {
        Qt.pageHandler = pageHandler;
    }
    
  • ProgressIndicator in ListView's border and white background. Why?

    Hello

    If I "embed" one ProgressIndicator inside a ListView, there an ugly border and a white background. Looks like there is a TextField below the ProgressIndicator.

    Why should he behave like this and how to fix it so that the progress indicator is transparent.

    Thank you!

    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.scene.Scene;
    import javafx.scene.control.ListCell;
    import javafx.scene.control.ListView;
    import javafx.scene.control.ProgressIndicator;
    import javafx.stage.Stage;
    import javafx.util.Callback;
    
    public class TestApp2 extends Application {
    
        public static void main(String[] args) {
            launch(args);
        }
    
        @Override
        public void start(final Stage stage) throws Exception {
    
            ListView<String> listView = new ListView<>();
            listView.setItems(FXCollections.observableArrayList("test", "test"));
            listView.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
                @Override
                public ListCell<String> call(ListView<String> param) {
                    return new ListCell<String>() {
                        @Override
                        protected void updateItem(String item, boolean empty) {
                            super.updateItem(item, empty);
                            if (!empty) {
                                setGraphic(new ProgressIndicator());
                            } else {
                                setGraphic(null);
                            }
                        }
                    };
                }
            });
            Scene scene = new Scene(listView);
            stage.setScene(scene);
            stage.show();
        }
    }
    

    Hmm. I'm also on a Mac... It is probably a transient bug in one of the first versions of 8u40. Update to solve this problem?

  • Box border on gridContainer element?

    Hello!

    I use the grid system of fluid of DW on a site and it works very well for me.

    I put a thick border on the gridContainer element, to conform to the specification of design for this site. This also works well for my needs. He has just one problem:

    When displayed on a window mobile, part of this thick border gets cut on the edges of the viewport. I tried to change the box-sizing to the border box, by Nancy O here excellent post: using the box-border and padding in fluid grid

    This fixes the display problem, but I lose the characteristics of fluid-grid DW (as resize handles on the elements of fluid, etc.). Commenting on the box-sizing css on the gridContainer takes back the characteristics of the fluid grid, but it's a pain to continue to do that for my workflow.

    A small annoyance, but no one knows why put border-box on the gridContainer breaks the interface liquid-grid?

    Thank you!

    Bart

    bart_mc wrote:

    Thanks for your replies.

    osgood, I tried to put a div inside the gridContainer internal wrapper, but adding a border makes the larger inner div unless the box-sizing is the border-box. When I change the box-sizing border on the internal div box, he interrupts the characteristics of fluid-grid DW.

    Can paste you the html and css code in the forum so I can take a look and see if I can reproduce the problem?

    I inserted successfully an Interior

    and apply a border inside the gridContainer without any width being added.

    PUBLISHED:

    Mind you I wouldn't do that now I tried it as I found out that it disables the fluid

    handles - lmfao this jumble of Adobe has been well tested, not. so very bad.

    PUBLISHED:

    Right, I see in reading your post again once I posted earlier in my first edit, that's what you experience as well - the resizing handlles disappear from the grid.

  • How can I change the color of the border or Basel around 9 elements

    The white border around the edge of the elements bad my eyes while working on a photo.  How can I change the color so that it will not so bright?

    [Photoshop Elements only not part of the cloud, I propose that on this forum... MOD]

    Photoshop elements Forum http://forums.Adobe.com/community/photoshop_elements

    I don't know how to do a screen shot.  I know that my old vs 6-dark gray, I changed the border like yours, but could not find a path in vs. 9.  I may need to be updated soon.

    Bob Hill

  • Change the border color of the elements required

    Adobe Livecycle Designer ES v8.2.1

    Dynamic PDF

    I spent the last hour searching the tangential broken links and tutorials. I have a group of required exclusion (radio buttons), and the user must select one of the values so that the form is valid. The problem is, I have hundreds of boxes, and they all have a gigantic red border stuck around them. There is no highlight when it is not verified and the form is submitted, they are all simply bright red.

    Here is what I tried:

    Group of exclusion on "initialize".

    This.Border.Presence = "invisible";

    This.Border.Edge.Presence = "invisible";

    This.Border.Fill.Presence = "invisible";

    this.borderColor.fillColor = "invisible";

    this.borderColor.presence = "invisible";

    this.fillColor.presence = "invisible";

    Group of exclusion on 'form::ready '.

    This.Border.Presence = "invisible";

    This.Border.Edge.Presence = "invisible";

    This.Border.Fill.Presence = "invisible";

    this.borderColor.fillColor = "invisible";

    this.borderColor.presence = "invisible";

    this.fillColor.presence = "invisible";

    Group of exclusion on 'layout::ready '.

    This.Border.Presence = "invisible";

    This.Border.Edge.Presence = "invisible";

    This.Border.Fill.Presence = "invisible";

    this.borderColor.fillColor = "invisible";

    this.borderColor.presence = "invisible";

    this.fillColor.presence = "invisible";

    None of them work. Is there honestly no way to control the border color / visibility of a required element? I can do him point together disappear pretty easy but that solves nothing. If the default value is not an option that the customer wants to ensure that all fields have been reviewed by the "clicked".

    Thanks for your time.

    Hello

    LC Designer ES2 has improved handling for Forms validation. It does not require the user to have version 9 of Acrobat/Reader.

    So, for these features, you must upgrade to LC Designer ES2 and you need be happy that your users would have version 9 of Acrobat/Reader.

    If this isn't the case, then you can enable and disable highlighting. However, this applies to all fields. Also you can change the color of the highlighted field using script, you can change the color of the Red manditory border. See: http://assure.ly/ * 6tn.

    John Brinkman has several examples of custom/scripted validation models, with samples:

    http://blogs.Adobe.com/formfeed/2008/11/validation_patterns_part_1.html

    http://blogs.Adobe.com/formfeed/2008/11/validation_patterns_part_2.html

    http://blogs.Adobe.com/formfeed/2008/11/validation_patterns_part_3.html

    Hope that helps,

    Niall

  • Remove border from 1px white around rendering element

    fringe.jpg

    This screen shot is from a 3D animation - hopefully, you can see the 1 pixel border that surrounds the rendering. I have an ambient occlusion pass (all of multiply) by main render RBG pass and this creates unwanted border. I'm not much of experience with After Effects and do not know how to remove the white border, I tried Matte Choker etc but could not find the right settings. Maybe I'm looking in the wrong place altogether. Which could suggest people?

    Ignore Alpha, compose your layers, reintroduce the Alpha using it as a stencil Alpha / Alpha Matte.

    Mylenium

  • When you edit a Web Page in border Animate, how can I incorporate elements of edge in pre-existing DIV?

    I created a basic with a few boxes layout in Dreamweaver. I put the Overflow property on them to "hidden". Then, I opened the page in dashboard animate. However I noticed that when I import stuff, like a picture, then try to slip into one of the existing DIV, it won't work. He remains on top of all the other DIV however if I create a box or some other sort of DIV directly on board animate, I can drag the Image element in this, so he is locked up in this division

    I guess that workaround seems to be to embed the image in the DIV tag in Dreamweaver first, then open the page on the edge. However, it would be nice not to have to keep popping back like that. Is there a way to make this beachfront animate?

    Also, I've noticed when I select one of the DIVs, I did in Dreamweaver, most of the properties, such as corners, shadows and filters are missing. These can be used on DIV only created directly in Edge animate?

    Hi, neohtom-

    What you see, is the difference between what we define as a static div (that is defined outside of Animate) and a managed div (that is defined inside Animate).  Due to the fact that we expect other products to change a static div, limit us the amount of changes you can make to a public static div.  Because we "manage" a div that is created inside of animate it, we allow a lot more changes to a div.  Hope that answers your question!  I suggest you to create divs in Animate, if you want to eventually change to have corners, etc..

    See you soon,.

    -Elaine

Maybe you are looking for

  • Deleted message drama

    Hello world I made a huge mistake and something friend messaged that certainly wasn't for her. I crossed the border of friendship (I know its bad) and deleted the message from his phone and laptop thread. Is there a way this can be recovered? Or is i

  • A non programmable power supply with LabVIEW + additional programming hardware

    My company is interested in the use of LabVIEW to automate a non programmable DC power supply. The instrument in question is the U8001A device, but the idea must be the same, regardless of the manufacturer (the instrument was purchased while I was hi

  • Cannot find bluetooth HP Notebook G82

    I have a HP G62 Notebook PC win 7 64 bit model CNF1010S49 and I don't have bluetooth.  Where is he?  Also, browsers crash much more in Facebook - no idea why?

  • AAA / adding additional ACS server

    Hello guys,. You need to install AAA proposed plan as attaché. We used the current configuration for a very long time for our facilities and data centre devices. Now we want to add a more updated ACS apart from the existing two and need to point out

  • HP games fail msg of error on the game does not

    try to use hp games, whenever I click the icon it says on the work of reading. can you help me as iam anovice