Работа над инструментом глобального поиска - так же, как на MAC - PullRequest
0 голосов
/ 18 января 2010

Привет, я работаю над инструментом поиска для моего сайта во Flex. Я хочу, чтобы он работал точно так же, как инструмент «Spotlight» на рабочем столе MAC. "http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png" Ссылка на изображение прожектора.

Я хочу создать почти то же самое в FLEX. Сейчас у меня есть поле «Автозаполнение», и я получаю в нем все данные, которые хочу. Код для автозаполнения ниже:

<auto:AutoComplete borderStyle="none" id="txt_friends_search" 
        textAlign="left" prompt="Search Friends" dataProvider="{all_friends_list}" 
        allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true" 
        backspaceAction="remove" labelField="label"
        autoSelectEnabled="false" matchType="anyPart" 
        height="23" right="400"  top="1" dropDownItemRenderer="{new ClassFactory(weather.index_cloud_global_search_item_renderer)}" />

А мой ItemRenderer выглядит так:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%" 
    verticalGap="0" horizontalGap="0"
    creationComplete="init()"
    verticalScrollPolicy="off" horizontalScrollPolicy="off" 
    verticalAlign="middle">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import com.hillelcoren.utils.StringUtils;
            import mx.utils.StringUtil;
            import mx.events.FlexEvent;
            import mx.controls.List;

        public function init():void
        {

        }                                                           
    ]]>
</mx:Script>

<mx:HBox width="100%" verticalGap="0" horizontalGap="0">
    <mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
        <mx:Label id="type"  text="{data.type}" fontSize="12"/> 
    </mx:HBox>
    <mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
        <!--mx:Label id="nameLabel"  text="{data.label}" fontSize="12"/-->
        <mx:List id="names" dataProvider="{all}"    
    </mx:HBox>      
</mx:HBox>      

<!--mx:Box id="colorBox" borderStyle="solid" width="50" height="25"/-->
<mx:Spacer width="15"/>

Показывает тип и метку всего, например:

  • Друзья ABC
  • Друзья XYZ
  • Сообщения Это сообщение
  • Пример сообщений для сообщений
  • Files filename1
  • Файлы filename123

Полагаю, вы меня поняли.

Но я хочу создать что-то вроде:

Друзья ABC XYZ Сообщения Это сообщение пример для сообщений Файлы filename1 filename123 MoreFiles

Может кто-нибудь PLZ помочь мне в этом. Я на самом деле понятия не имею, как двигаться вперед в этом.

Дайте мне знать, если вы хотите получить больше разъяснений.

С уважением Zeeshan

Ответы [ 2 ]

2 голосов
/ 25 января 2010

Поскольку вы предлагаете вознаграждение, я отправлю другой ответ (так как предыдущий технически действителен).

Шаг № 1: Загрузите Adobe Autocomplete Компонент интегрирует класс в ваш проект.

Шаг № 2: Создайте новый компонент, производный от автозаполнения (я назвал мой SpotlightField.mxml )

<?xml version="1.0" encoding="utf-8"?>
<AutoComplete 
    xmlns="com.adobe.flex.extras.controls.*" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="init()"
    labelField="value"  
    itemRenderer="SpotlightFieldRenderer">

    <mx:Script>
        <![CDATA[

            private function init() : void
            {
                this.filterFunction = substringFilterFunction;
            }                                                       

            private function substringFilterFunction(element:*, text:String):Boolean
            {
                var label:String = this.itemToLabel(element);
                return(label.toLowerCase().indexOf(text.toLowerCase())!=-1);
            }
        ]]>
    </mx:Script>        
</AutoComplete>

Шаг № 3: Создайте ItemRenderer, который вы хотите применить к этому новому компоненту (я назвал мой SpotlightFieldRenderer.mxml ). Обратите внимание, что код такой же, как и в предыдущем примере, но я опубликую его снова для полноты.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[

        ]]>
    </mx:Script>

    <mx:HBox width="100%">
        <mx:Label width="100" text="{data.type}" />
        <mx:Label text="{data.value}" />
    </mx:HBox>
</mx:Canvas>

Шаг № 4: Обновите класс AutoComplete.as следующим образом:

/**
 *  @private
 *  Updates the dataProvider used for showing suggestions
 */
private function updateDataProvider():void
{
    dataProvider = tempCollection;
    collection.filterFunction = templateFilterFunction;
    collection.refresh();

    sort_and_filter(collection);

    //In case there are no suggestions, check there is something in the localHistory
      if(collection.length==0 && keepLocalHistory)
      {
        var so:SharedObject = SharedObject.getLocal("AutoCompleteData");
        usingLocalHistory = true;
        dataProvider = so.data.suggestions;
        usingLocalHistory = false;
        collection.filterFunction = templateFilterFunction;
        collection.refresh();
      }
  }

private function sort_and_filter(source:Object):Object
{
    if (source && source.length > 1) {   
        trace (source.length);  
        source.sortOn('type', Array.CASEINSENSITIVE);           
        var last:String = "";
        for each(var entry:Object in source) {      
            var current:String = entry.type;
            if (current != last)            
                last = current      
            else
                entry.type = "";
            last = entry.type;
        }
    }

    return source;
}  

Вы заметите, что функция sort_and_filter определена и вызывается для коллекции в updateDataProvider . Приложение теперь выглядит так:

Screenshot

Вот и все. Пример приложения теперь выглядит следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var items:Array = [
                { type:'friends', value:'abc' },
                { type:'friends', value:'xyz' },
                { type:'messages', value:'this is the message' },
                { type:'messages', value:'example for messages' },
                { type:'files', value:'filename1' },
                { type:'files', value:'filename123' },
            ];
        ]]>
    </mx:Script>        
    <local:SpotlightField dataProvider="{items}" width="400" />
</mx:Application>

Дайте мне знать, если у вас есть дополнительные вопросы. В зависимости от того, как вы хотите отобразить результаты, вам еще предстоит проделать определенную работу, но это даст вам 95% пути;)

2 голосов
/ 20 января 2010

Вы можете попробовать что-то вроде этого. Это всего лишь пример, который я подготовил, но вы можете ознакомиться с основными принципами его решения. То, что он делает, - это создание пользовательского рендера элемента (как вы уже сделали), но контейнер, который он рендерит, немного настраивает набор данных в наборе dataProvider, чтобы сортировать и фильтровать.

Screenshot

Очевидно, что вы можете расширить это, добавив обычные значки, форматированный текст ... и т. Д. У средства визуализации есть явная ширина, установленная для первого текста "столбца". Это для лучшего выравнивания результатов, но, вероятно, это следует делать во время построения списка (на основе длин строк значений в наборе результатов). Ура;)


Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
 <mx:Script>
  <![CDATA[
   [Bindable]
   private var items:Array = [
    { type:'friends', value:'abc' },
    { type:'friends', value:'xyz' },
    { type:'messages', value:'this is the message' },
    { type:'messages', value:'example for messages' },
    { type:'files', value:'filename1' },
    { type:'files', value:'filename123' },
   ];
  ]]>
 </mx:Script>
 <local:SpotlightComboBox 
  dataProvider="{items}"   
  width="400" />
</mx:Application>

SpotlightComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox 
 xmlns:mx="http://www.adobe.com/2006/mxml"
 itemRenderer="SpotlightComboBoxItemRenderer">

 <mx:Script>
  <![CDATA[   
   override public function set dataProvider(value:Object):void 
   {
    super.dataProvider = sort_and_filter(value as Array);
   } 

   private function sort_and_filter(source:Array):Array
   {
    if (source && source.length > 1) {     
     source.sortOn('type', Array.CASEINSENSITIVE);
     var last:String = "";
     for each(var entry:Object in source) {      
      var current:String = entry.type;
      if (current != last)            
       last = current      
      else
       entry.type = "";
      last = entry.type;
     }
    }

    return source;
   }     
  ]]>
 </mx:Script>

</mx:ComboBox>

SpotlightComboBoxItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[

  ]]>
 </mx:Script>

 <mx:HBox width="100%">
  <mx:Label width="100" text="{data.type}" />
  <mx:Label text="{data.value}" />
 </mx:HBox>
</mx:Canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...