List

Материал из Flexipedia

Содержание

1 Введение
2 Размеры List
3 Создание List
4 Использование labelFunction
5 Отображение DataTips
6 Отображение ScrollTips
7 Вертикальное выравнивание текста в рядах List
8 Задание переменной высоты ряда и перенос текста в List
- 8.1 Использование custom item renderer
  - 8.1.1 Определение иконки виджета List
9 Цвета рядов List
10 Взаимодействие с пользователем

[править] Введение

List представляет из себя вертикальный список элементов. Он похож на тег SELECT в HTML. Пользователь может выбирать один или несколько элементов из списка.

HorizontalList, TileList, DataGrid, Menu и Tree наследуются от List или его родителя - класса ListBase. То есть, вся информация о виджете List применима и к этим элементам.

См. также List в Adobe Flex 2 Language Reference.

На следующем рисунке изображен List:

http://livedocs.macromedia.com/flex/2/docs/images/list-example.jpg

[править] Размеры List

List имеет следующие размеры по умолчанию:

Размер по умолчанию - ширина, достаточная для самой широкой надписи первых семи видимых элементов и высота, равная высоте этихеми элементов, высота каждого из которых равна 20 px.

Минимальный размер - 0

Максимальный размер - 5000 х 5000

Если задать horizontalScrollPolicy="on", ширина по умолчанию не изменится; она все еще достаточно широка для самого широкого элемента. Если задать horizontalScrollPolicy="on" и определить ширину виджета в пикселях, можно использовать метод measureWidthOfItems(), чтобы убедится, что вся информация уместиться. Дополнительные 5 px гарантируют правильное отображение последнего символа:

<mx:List width="200" id="li2" horizontalScrollPolicy="on"
maxHorizontalScrollPosition="{li2.measureWidthOfItems() - li2.width +
5}">

Предыдущий пример гарантирует, что при самом правом положении скроллбара будет полностью отображен самый широкий элемент. Использование этой техники понизит производительность приложения, поэтому лучше использовать фиксированные размеры.

Списки и все подклассы класса ListBase могут определять свои размеры при изменении стилей или данных источника данных (ИД).

Если задать ширину меньшую, чем ширина самого широкого элемента и выключить горизонтальную прокрутку (horizontalScrollPolicy="off"), текст этого широкого элемента будет обрезан.

[править] Создание List

Для создания List используется тег <mx:List>. Задайте значение id, если необходимо ссылаться на элемент из кода.

List использует списочный ИД.

Данные для List задаются в атрибуте dataProvider. Так как dataProvider является атрибутом виджета по умолчанию, то нет необходимости определять тег <mx:dataProvider> внутри <mx:List>. В простом случае для создания статичного List надо поместить теги <mx:String> внутри тегов виджета. Flex также автоматически интерпритирует несколько тегов <mx:String> как массив строк, как в следующем примере:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:List> 
        <mx:dataProvider>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
            <mx:String>AR</mx:String>
        </mx:dataProvider>
    </mx:List>
</mx:Application>

Индексирование элементов List начинается с 0. Значением элемента является его текст.

В следующем примере используется обработчик события change. Flex генерирует событие flash.events.Event.CHANGE при изменении значения виджета.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
  [as3]
           public function changeEvt(event:flash.events.Event):void {
               forChange.text=event.currentTarget.selectedItem.label + " " +
               event.currentTarget.selectedIndex;
           }
          
        ]]>
    </mx:Script>

    <mx:List width="35" change="changeEvt(event)"> 
        <mx:Object label="AL" data="Montgomery"/>
        <mx:Object label="AK" data="Juneau"/>
        <mx:Object label="AR" data="Little Rock"/>
    </mx:List>
    <mx:TextArea id="forChange" width="150"/>
</mx:Application>

В этом примере используются два атрибута List - selectedItem и selectedIndex. При каждом изменении в виджете появляется информация о соответствующем элементе в TextArea.

Атрибут target содержит ссылку на виджет List. Можно ссылаться на любое свойство виджета, с помощью атрибута currentTarget. Поле currentTarget.selectedItem содержит копию выбранного элемента. Если List был наполнен массивом строк, currentTarget.selectedItem содержит строку. Если List наполнен массивом объектов, currentTarget.selectedItem содержит объект и в этом случае currentTarget.selectedItem.label соответствует полю label выбранного элемента.

[править] Использование labelFunction

Функция labelFunction используется для задания текста элементов виджетов и имеет следующую сигнатуру:

labelFunction(item:Object):String

Параметр item содержит объект списка. Функция возвращает строку для отображения в качестве текста элемента.

Многие подклассы класса ListBase имеют атрибут labelFunction. Для DataGrid и DataGridColumn синатура метода следующая:

labelFunction(item:Object, dataField:DataGridColumn):String

где item содержит объект элемента, а dataField - колонка DataGrid.

В следующем примере используется labelFunction для определения текста элементов:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script><![CDATA[
 [as3]
       public function myLabelFunc(item:Object):String {
           return item.data + ", " + item.label; 
       }
      
    ]]></mx:Script>

    <mx:ArrayCollection id="myDP">
        <mx:source>
            <mx:Object label="AL" data="Montgomery"/>
            <mx:Object label="AK" data="Juneau"/>
            <mx:Object label="AR" data="Little Rock"/>
        </mx:source>
    </mx:ArrayCollection>        

    <mx:List dataProvider="{myDP}" labelFunction="myLabelFunc"/>
</mx:Application>

Результат примере показан на рисунке:

http://livedocs.macromedia.com/flex/2/docs/images/labelFunc2.jpg

В этом примере используется объект ArrayCollection в качестве ИД. Желательно использовать коллекции в качестве ИД, если данные источников изменяются динамически.

[править] Отображение DataTips

DataTips похожи на ToolTips, но отображают текст при наведении мыши на ряд виджета List. Известно, что текст, по ширине превышающий виджет, обрезается, но DataTips могут решить эту проблему, отображая полный текст. Если включить их отображение (showDataTips="true"), то подсказки будут всплывать только для неуместившихся элементов.

Чтобы использовать DataTips с DataGrid, необходимо задавать атрибут showDataTips для каждой DataGridColumns.

По умолчанию, showDataTips отображает текст label. Но можно использовать dataTipField и dataTipFunction, чтобы опрелять информацию для отображения в DataTip. Атрибут dataTipField ведет себя также, как и labelField; он определяет имя поля ИД, используемого в качестве подсказки. dataTipFunction ведет себя также как и labelFunction.

В следующем примере используется showDataTips для List:

<mx:List id="myList" dataProvider="{myDP}" width="220" height="200"  showDataTips="true"/>

http://livedocs.macromedia.com/flex/2/docs/images/datatip3.jpg

[править] Отображение ScrollTips

ScrollTips отображают информацию о том, где сейчас находится бегунок прокрутки. Подсказки появляются только при скроллинге. ScrollTips полезны при liveScrolling = false. По умолчанию, showScrollTips = false.

По умолчанию, showScrollTips отображает индекс верхнего видимого элемента. С помощью scrollTipFunction можно определять содержимое для отображения в ScrollTip. scrollTipFunction ведет себя так же, как labelFunction property.

В следующем примере используются showScrollTips и scrollTipFunction виджета HorizontalList. scrollTipFunction определяет функцию, которая получает значения атрибута description текущего элемента.

<mx:HorizontalList id="list" dataProvider="{album.photo}" width="100%"
    itemRenderer="Thumbnail" columnWidth="108" height="100"
    selectionColor="#FFCC00" liveScrolling="false" showScrollTips="true"
    scrollTipFunction="scrollTipFunc"
    change="currentPhoto=album.photo[list.selectedIndex]"/>

http://livedocs.macromedia.com/flex/2/docs/images/scrolltip4.jpg

[править] Вертикальное выравнивание текста в рядах List

Стиль verticalAlign используется для вертикального выравнивания текста по верхней границе, нижней границе и центру ряда. По умолчанию, выравнивание идет по верхней границе.

В следующем примере атрибут verticalAlign = bottom:

<mx:List id="myList" dataProvider="{myDP}" width="220" height="200" verticalAlign="bottom"/>

[править] Задание переменной высоты ряда и перенос текста в List

Атрибут variableRowHeight используется для задания высоты ряда исходя из высоты содержимого. Значение по умолчанию - false. Если задать variableRowHeight = true, атрибут rowHeight будет проигнорирован, а rowCount будет только для чтения.

В следующем примере задано variableRowHeight = true:

<mx:List id="myList" dataProvider="{myDP}" width="220" height="200" variableRowHeight="true"/>

Атрибут wordWrap используется для включения возможности переноса длинного текста при variableRowHeight = true.

В следующем примере значения wordWrap и variableRowHeight равны true:

<mx:List id="myList" dataProvider="{myDP}" width="220" height="200" variableRowHeight="true" wordWrap="true"/>

Результат показан на рисунке:

http://livedocs.macromedia.com/flex/2/docs/images/list-example-vrh5.jpg

[править] Использование custom item renderer

item renderer - это объект, отображающий элементы виджета List. Простым способом использования custom item renderer является определение MXML компонента в качестве значения атрибута itemRenderer. При использовании компонента в качестве item renderer, он может содержать другие контейнеры и виджеты. Можно также использовать ActionScript класс в качестве custom item renderer.

В следующем примере значению атрибута itemRenderer устанавливается компонент FancyCellRenderer.

<mx:List id="myList1" dataProvider="{myDP}" width="220" height="200" itemRenderer="FancyItemRenderer" variableRowHeight="true"/>

[править] Определение иконки виджета List

Можно задать иконку для каждого элемента List:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
  [as3]
            [Embed(source="icon_asterisk.jpg")] 
            public var iconSymbol1:Class; 
            [Embed(source="www.jpg")] 
            public var iconSymbol2:Class; 
         
        ]]>
    </mx:Script>

    <mx:List iconField="myIcon"> 
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="AL" data="Montgomery" myIcon="iconSymbol1"/>
                <mx:Object label="AK" data="Juneau" myIcon="iconSymbol2"/>
                <mx:Object label="AR" data="Little Rock" myIcon="iconSymbol1"/>
            </mx:Array>        
        </mx:dataProvider>
    </mx:List>
</mx:Application>

В этом примере используется атрибут iconField для задания иконки. Для импорта иконок используется метатег Embed.

Можно также использовать атрибут iconFunction для задания функции определения иконок. iconFunction имеет следующую сигнатуру:

iconFunction(item:Object):Class

Параметр item содержит объект элемента списка. Функция возвращает класс иконки для отображения в List.

В следующем примере показано использование iconFunction для отображения иконок:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[    
  [as3]
           // внедрение иконок.
           [Embed("icon_asterisk.jpg")] 
           public var pavementSymbol:Class; 
           [Embed("www.jpg")] 
           public var normalSymbol:Class;     
       
           // определение ИД
           private var myDP: Array;
           private function initList():void {
               myDP = [
                   {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
                   {Artist:'Pavarotti', Album:'Twilight', Price:11.99},
                   {Artist:'Other', Album:'Other', Price:5.99}];
   
               list1.dataProvider = myDP;
           }
   
           // функция отображения иконок в зависимости от поля Artist 
           private function myiconfunction(item:Object):Class{
               var type:String = item.Artist;
               if (type == "Pavement") {
                   return pavementSymbol;
               } 
               return normalSymbol;            
           }
          
        ]]>
    </mx:Script>
    
    <mx:VBox >
        <mx:List id="list1" initialize="initList()" labelField="Artist" 
            iconFunction="myiconfunction" />
    </mx:VBox>
</mx:Application>

[править] Цвета рядов List

Атрибут alternatingItemColors задает массив, содержащий цвета для рядов виджета. Массив должен содержать два и более цвета. После использования всех цветов, они повторяются сначала.

В следующем примере используются два цвета - #66FFFF и #33CCCC:

<mx:List alternatingItemColors="[#66FFFF, #33CCCC]".../ >

[править] Взаимодействие с пользователем

Пользователь может выбирать один или несколько элементов (удерживая Control и Shift). Не забудьте установить allowMultipleSelection = true.

Выбор с помощью клавиатуры и мыши генерирует событие change. Для мыши данное событие генерируется при отпускании кнопки мыши.

Если allowDragSelection = true, виджет скроллится вверх или вниз при нажатии мыши над одним или несколькими рядами, при удержании кнопки мыши нажатой и выведении мыши за пределы виджета и при перемещении мыши вверх и вниз.

List поддерживает следующие клавиатурные сокращения:

Стрелка Вверх - перемещает выделение вверх.

Стрелка Вниз - перемещает выделение вниз.

Page Up - перемещает выделение вверх на страницу (0..10, 9-19 и т.п.)

Page Down - перемещает выделение вниз на страницу.

Home - перемещает выделение на верх списка.

End - перемещает выделение вниз списка.

Буквенно-цифровые клавиши - перемещают выделение на элемент с именем, начинающимся на этот символ.

Control - при удержании позволяет выделять и снимать выделение нескольких элементов.

Shift - при удержании позволяет выделять и снимать выделение нескольких элементов.