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

Web and WebWorks Development

Reply
Developer
Posts: 101
Registered: ‎03-02-2013
My Device: Dev Alpha

Search in Image List

Is there a supported search function for Image List? Like the one we have in the contacts app.

Developer
Posts: 101
Registered: ‎03-02-2013
My Device: Dev Alpha

Re: Search in Image List

Something like this on BB10:

IMG_00000051.png

BlackBerry Development Advisor
Posts: 43
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: Search in Image List

I assume you are talking about bbUI.js since you are using an imageList. There is no such functionality, but there is a feature request open for something similar https://github.com/blackberry/bbUI.js/issues/833

--
Senior Systems Software Developer - Enterprise R&D

@roryboy

1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)
Developer
Posts: 208
Registered: ‎05-08-2012
My Device: PlayBook 64 Gb and Z10 LE
My Carrier: Vodafone

Re: Search in Image List

I use this for search:

 

function find() {
var txtButton = document.getElementById('findScreen');
if (txtButton.textContent == 'Find') {
try {
blackberry.ui.dialog.standardAskAsync("Text to find:", blackberry.ui.dialog.D_PROMPT, dialogCallBackScreen, {title : "Find in titles"});
}catch (e) {
// alert("Exception in standardDialog: " + e);
}
}
else {
var zukka = "cancel";
dialogCallBackScreen(zukka);
}
};

 

FUNCTION CALLBACK

 

function dialogCallBackScreen(selection) {
var testopulsante = document.getElementById('cercaScreen');
if (testopulsante.textContent == 'Find') {
if (selection.return == "Ok" && selection.promptText != null) {
var stringa = selection.promptText;
stringa = stringa.toLowerCase();
var lista = document.getElementById('dataList');
var elementi = lista.getItems();
document.getElementById('dataList').clear();
for (i=0; i<elementi.length; i++) {
var titoloOriginale = elementi[i].getTitle();
var titolo = elementi[i].getTitle();
var linkforum = elementi[i].getAttribute('data-bb-link');
var imgForum = elementi[i].getImage();
titolo = String(titolo);
titolo = titolo.toLowerCase();
var esiste = titolo.indexOf(stringa);
if (esiste != -1) {
listItem2 = document.createElement('div');
listItem2.style.height = 'auto';//'219px';
listItem2.id = i;
listItem2.setAttribute('data-bb-link',linkforum);
listItem2.setAttribute('data-bb-title',titoloOriginale);
listItem2.setAttribute('data-bb-type', 'item');
listItem2.setAttribute('data-bb-img', imgForum);
listItem2.onclick = function() { onItemSelected('test'); };
dataList.appendItem(listItem2);
document.getElementById('dataList').refresh();
document.getElementById('myPanel').refresh();
}
var cercatopik = document.getElementById('cercaScreen');

cercatopik.setCaption('Cancel Find');
cercatopik.setImage('images/ic_cancel.png');
document.getElementById('itemscreen').innerText = "";
document.getElementById('itemscreen').onclick = function() {
}
} //fine for
}
}
else {

document.getElementById('dataList').clear();
var xmlhttp=new XMLHttpRequest();
url = 'http://www.MySite.com';
xmlhttp.open("GET",url,false);
xmlhttp.send();
var str=xmlhttp.responseText;
var cercatopik = document.getElementById('cercaScreen');
cercatopik.setCaption('Find');
cercatopik.setImage('images/ic_search.png');
var message = 'Annullamento in corso ...';
blackberry.ui.toast.show(message);
dataOnLoad_initialLoadSito(str);
}
};

_______________________________________________

If U like my post click on LIKE Smiley Wink
Developer
Posts: 101
Registered: ‎03-02-2013
My Device: Dev Alpha

Re: Search in Image List

Thanks @Zukka. I will give this code a try.

 

Meanwhile I hope the GitHub issue will get enough votes that it will be supported in the near future.

It looks like WebWorks (bbUI.js) is not as mature as the Native SDK (Cascades). Next time I will definitely choose Cascades on top of WebWorks, but now it is too late to switch.

Developer
Posts: 208
Registered: ‎05-08-2012
My Device: PlayBook 64 Gb and Z10 LE
My Carrier: Vodafone

Re: Search in Image List

If you need a easy function I rewrite it for you Smiley Wink
_______________________________________________

If U like my post click on LIKE Smiley Wink
Developer
Posts: 101
Registered: ‎03-02-2013
My Device: Dev Alpha

Re: Search in Image List

That would be a great help for me and the community. Thanks in advance @Zukka!

Developer
Posts: 208
Registered: ‎05-08-2012
My Device: PlayBook 64 Gb and Z10 LE
My Carrier: Vodafone

Re: Search in Image List

Ok Smiley Happy

I write a simple htm page and a function for search in image List.

 

In Screen.htm I insert an scroll panel, a dataList, an item (if you have a problem with a scrolling this revolve the iusse) and in action bar only a button.

 

<div data-bb-type="screen" data-bb-effect="fade" data-bb-scroll-effect="off" >
    <div data-bb-type="round-panel">
        <div data-bb-type="scroll-panel" style="height:970px" id = "myPanel" >
               <div data-bb-type="image-list" data-bb-image-effect="fade" >
                    <div data-bb-type="image-list" id="dataList"></div>

                          <div data-bb-type="item" style="height:110px" align="center" id = "itemscreen" data-bb-link="" data-bb-title=""></div>


               </div>
        </div>
    </div>
    <div id="myActionBar" data-bb-type="action-bar" data-bb-img="images/iconmenu.png">
         <div id="cercaScreen" data-bb-type="action" data-bb-style="button" data-bb-img="images\ic_search.png"                       onclick="cercaScreen()">Cerca</div>
    </div>
</div>

 

In Index.html insert this code for dialog window for search 

 

function cercaScreen() {
     //testopulsante checking if the text button in screen.htm is "Cerca" (FIND)

    // if is true display a dialog

     var testopulsante = document.getElementById('cercaScreen');
     if (testopulsante.textContent == 'Cerca') {
      try {
              blackberry.ui.dialog.standardAskAsync("Text to find:", blackberry.ui.dialog.D_PROMPT,  dialogCallBackScreen, {title : "Search in titles"});
      }catch (e) {
             // alert("Exception in standardDialog: " + e);
      }
  }
  else {

       // If testopulsante <> "Cerca" I setting a variable and call dialogCallBackScreen (function)
       var pippo = "annulla";
        dialogCallBackScreen(pippo);
}
};

 

//The dialogCallBackScreen

 

function dialogCallBackScreen(selection) {
      var testopulsante = document.getElementById('cercaScreen');
      //Check the text button in screen.htm
      if (testopulsante.textContent == 'Cerca') {
           //Check the return "OK" and text is not NULL from dialog (function cercaScreen())
           if (selection.return == "Ok" && selection.promptText != null) {
                // setting text to find and titles in lowercase because the search is uppercase sensitive
                var stringa = selection.promptText;
               stringa = stringa.toLowerCase();
               // var lista and var elementi I use to GET all data from dataList in screen.htm
               var lista = document.getElementById('dataList');
               var elementi = lista.getItems();
               //clear my dataList in screen.htm
               document.getElementById('dataList').clear();
               for (i=0; i<elementi.length; i++) {
                   // save data in variable because if I find a title I use this for repopolate the dataList in Screen.htm

                   var titoloOriginale = elementi[i].getTitle();
                   var titolo = elementi[i].getTitle();
                   var linkforum = elementi[i].getAttribute('data-bb-link');
                   var imgForum = elementi[i].getImage();
                   titolo = String(titolo);
                   titolo = titolo.toLowerCase();
                   var esiste = titolo.indexOf(stringa);
                   // If I find a string in a title I append this item in the dataList
                   if (esiste != -1) { 
                         listItem2 = document.createElement('div');
                         listItem2.id = i;
                         //my link
                         listItem2.setAttribute('data-bb-link',linkforum);
                         //my title
                         listItem2.setAttribute('data-bb-title',titoloOriginale);
                         //setting for item type
                         listItem2.setAttribute('data-bb-type', 'item');
                         //my image
                         listItem2.setAttribute('data-bb-img', imgForum);
                         //my event onclick on the item (this is an another Function)
                         listItem2.onclick = function() { onItemSelected('test'); };
                         dataList.appendItem(listItem2);
                         document.getElementById('dataList').refresh();
                         document.getElementById('myPanel').refresh();
                    }
                    var cercatopik = document.getElementById('cercaScreen');
                    //When I finish to search I set the button for Cancel Find this for prevent an error in refresh

                    //page from another function
                    cercatopik.setCaption('Annulla Ricerca'); //Cancel Search
                    cercatopik.setImage('images/ic_cancel.png');
                    document.getElementById('itemscreen').innerText = "";
                    document.getElementById('itemscreen').onclick = function() {
               }
             } //end for
       }
  }
  else {
         //This is for Cancel Search and refresh my imageList in screen.htm
         document.getElementById('dataList').clear();
         // My data is from site and I use a XMLHttpRequest to repopolate my dataList
         var xmlhttp=new XMLHttpRequest();
         url = 'http://www.mysite.com';
         xmlhttp.open("GET",url,false);
         xmlhttp.send();
         var str=xmlhttp.responseText;
         //Set the image and text button with "Cerca" and this is now enable for new search
         var cercatopik = document.getElementById('cercaScreen');
         cercatopik.setCaption('Cerca');
         cercatopik.setImage('images/ic_search.png');
        // Push a toast message for "Cancel Search in progress..."
        var message = 'Annullamento in corso ...';
        blackberry.ui.toast.show(message);
        //Call my function to repopolate my imageList and var "str"
        //is my data to elaborate in function and display
        dataOnLoad_initialLoadSito(str);
   }
};

 

 

This is the code.

So I think is very simple and easy, if you have a problem contact me Smiley Happy

 

Ps: sorry for my bad english in comment Smiley Happy

_______________________________________________

If U like my post click on LIKE Smiley Wink
Highlighted
Developer
Posts: 208
Registered: ‎05-08-2012
My Device: PlayBook 64 Gb and Z10 LE
My Carrier: Vodafone

Re: Search in Image List

and now I go to bed Smiley Very Happy

_______________________________________________

If U like my post click on LIKE Smiley Wink