Blackberry 10 Cascades — выпадающий список поиска + поле тега

Мой вопрос связан с запросом Филипе Фигейредо (см.: Каскады Blackberry 10 - изображения внутри текста Площадь)

Для приложения My Cascades BB10 требуется раскрывающийся список с упреждающим поиском, в котором можно выбрать несколько элементов и отобразить их в виде полей тегов. Внешний вид и поведение такие же, как поле адреса «Кому» в электронной почте BB10, но с другими данными (например, названиями стран).

Вопросы:

  1. Есть ли способ сделать это с помощью компонентов/элементов управления Cascades? (FlowListLayout не соответствует точным требованиям)
  2. Можем ли мы добиться этого, используя QML + javascript?
  3. Или есть способ использовать C++ и QML для достижения этого?
  4. Существует ли рынок компонентов для приобретения пользовательских элементов управления для каскадов?

Мое развитие остановилось. Пожалуйста помоги.


qml blackberry blackberry-10 blackberry-cascades
person sathyan    schedule 20.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это должно быть возможно. Это прототип. Это не очень хорошо работает, но это идея. Вот как это выглядит: введите здесь описание изображения

Код (да, это плохо, но должно работать из коробки):

import bb.cascades 1.2

Page {
    Container {
        ListView {
            id: tagList
            dataModel: tagModel

            layout: FlowListLayout {
                headerMode: ListHeaderMode.None
            }
            preferredHeight: 200

            function itemType(data, indexPath) {
                return (data.add == 1 ? 'add' : '');
            }
            function mload(text) {
                myList.load(text);
            }
            function showDropDown() {
                myList.visible = true;
            }
            listItemComponents: [
                ListItemComponent {
                    type: "add"

                    Container {
                        id: myAdd
                        TextField {
                            id: searchBox
                            preferredWidth: 300
                            onTextChanging: {
                                myAdd.ListItem.view.mload(searchBox.text);
                            }
                            onFocusedChanged: {
                                if (focused)
                                    myAdd.ListItem.view.showDropDown();
                            }
                        }
                    }
                },
                ListItemComponent {
                    Container {
                        background: Color.create("#660000FF")
                        leftPadding: 10
                        rightPadding: 10
                        topPadding: 10
                        bottomPadding: 10
                        leftMargin: 10
                        bottomMargin: 10
                        Label {
                            id: country
                            textStyle.fontSize: FontSize.Medium
                            text: ListItemData.country
                        }
                    }
                }
            ]

            onTriggered: {
                //todo: make it possible to remove a tag
                console.log("item touched.. yay!")
            }

            attachedObjects: [
                ArrayDataModel {
                    id: tagModel
                }
            ]
        }

        ListView {
            id: myList
            visible: false
            dataModel: mdataModel
            preferredHeight: 400
            attachedObjects: [
                ArrayDataModel {
                    id: mdataModel
                }
            ]

            onTriggered: {
                var selected = dataModel.data(indexPath);
                var tmp = new Object();
                tmp.country = selected;
                tagModel.insert(tagModel.size() - 1, tmp);
                console.log("removing: " + (tagModel.size() - 1 ) + " at size " + tagModel.size())
                visible = false;
            }

            function load(text) {
                var cities = [ "Slovenia", "Italy", "Slovakia", "Croatia", "Sweden", "Norway", "Poland", "Finland", "Spain",
                    "Indonesia", "Ireland" ]
                var tmp = [];
                for (var i = 0; i < cities.length; i ++) 
                    if (cities[i].toLowerCase().indexOf(text.toLowerCase()) >= 0)
                        tmp.push(cities[i]);
                mdataModel.clear();
                mdataModel.insert(0, tmp);
            }
            function insertEdit() {
                var edit = new Object();
                edit["add"] = "1";
                tagModel.insert(tagModel.size(), edit);
            }
        }
    }
    onCreationCompleted: {
        myList.load("");
        myList.insertEdit(); // insert item with TextField
    }
}
person Bojan Kogoj    schedule 21.04.2014