블랙 베리 10 폭포 -

Question

내 질문은 필리페 Figueiredo의의 질의와 관련된 검색 미리 드롭 다운 + 태그 필드 (참조 : Blackberry 10 Cascades - Images inside Text Area를)

내 캐스케이드 BB10 앱이 가지고있는 능력을 가진 검색 미리 드롭 다운을 필요로 여러 항목이 선택되어 태그 필드로 표시됩니다. & BB10 이메일 작성자의 "받는 사람"주소 입력란과 동일한 느낌과 행동을 보였으 나 다른 데이터 (예 : 국가 이름)를 사용하십시오.

질문 :

1. 이 사용하는 캐스케이드 구성 요소/제어 할 수있는 방법이 있나요? (FlowListLayout이 정확한 요구 사항을 충족하지 않음)
2. QML + javascript를 사용하여이 문제를 해결할 수 있습니까?
3. 또는이를 달성하기 위해 C++ 및 QML을 사용하는 방법이 있습니까?
4. 계단식 커스텀 컨트롤을 조달하기위한 컴포넌트 시장이 있습니까?

내 개발이 지연되었습니다. 도와주세요.

Answer 1

가능해야합니다. 이것은 프로토 타입입니다. 그것은 잘 작동하지 않지만 아이디어입니다. (. 그래, 그것은 나쁜하지만이 상자 밖으로 작동합니다)

코드 : 이것은 모습입니다

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