Потребовалось отображать табличные данные на чистом as3 без использования компонентов Flex (типа DataGrid) или Flash. Как обычно, первым на очереди был гугл. Но, к своему удивлению, ничего бесплатно-приемлемого найти не удалось. Изваял свой. Старался сделать компонент максимально простым в использовании. Можно загрузить swc-файл и подключать к любому проекту. Версия Flash-плеера не меньше 10-й. Если у кого-то появится заинтересованность, то функционал можно разширить. Пока мне для своих нужд того что уже сработал вполне достаточно.
Можно потестить на примере ниже (другие компоненты GUI, кроме таблицы — замечательная библиотека Кита Питерса (Keith Peters) MinimalComps).
Компонент поддерживает следующие стили ячеек:
- width
- height
- padding
- spacing
- borderColor
- backgroundColor
- fontColor
- fontSize
- backgroundOpacity
- border
- bold
- wordWrap
- fontFamily
- aling
Стили можно независимо назначить на всю таблицу (DEFAULT_CELL_STYLE), на хедер (HEADER_ROW_STYLE), на четные/нечетные строки (EVEN_ROW_STYLE и ODD_ROW_STYLE) и на каждый столбец ("1", "2" ...)
Подключается к проекту инструкцией:
import ru.pixeltyumen.controls.SimpleTable;
Далее компонент во многом наследуют поведение класса Sprite. Т.е. примерно так:
var t:SimpleTable = new SimpleTable([ ["1-1", "1-2", "1-3"], ["2-1", "2-2", "2-3"], ["3-1", "3-2", "3-3"] ]); t.setHeader(["Колонка 1", "Колонка 2", "Колонка 3"]); t.setStyle( { spacing:5, padding:5 }, SimpleTable.DEFAULT_CELL_STYLE); t.setStyle({align: "center", bold: true, height: 52}, SimpleTable.HEADER_ROW_STYLE); t.setStyle({align: "center", width: 100}, "1"); t.setStyle({align: "left", width: 300}, "2"); t.setStyle({align: "center", width: 100}, "3"); addChild(t);
Интерфейс компоненты SimpleTable:
- Статические переменные DEFAULT_CELL_STYLE, HEADER_ROW_STYLE, EVEN_ROW_STYLE и ODD_ROW_STYLE - маркеры стилей.
- Конструктор SimpleTable(array2d:Array = null, style:Object = null) принимает (можно не передавать, а назначить позже) двумерный массив данных (хедер таблицы определяется отдельно) и объект, формирующий стиль DEFAULT_CELL_STYLE (который, к слову, всегда можно переопределить).
- Метод setData(array2d:Array, style:Object = null):void несет такую же смысловую нагрузку как и конструктор за исключением того, что аргумент array2d должен передаваться в обязательном порядке.
- Метод setHeader(stringArray:Array, style:Object = null):void подобен методу setData, но определяет не двумерную сетку данных, а одномерный массив строк столбцов хедера таблицы, которую впрочем можно и не назначать.
- Метод setStyle(style:Object, type:String = DEFAULT_CELL_STYLE):void позволяет назначить кастомный стиль.
- Метод style(name:String):Params принимает имя стиля и возвращает объект стиля, если такой существует, иначе null.
- Метод draw(e:Event = null):void перерисовывает таблицу. Хотя таблица и перерисовывается автоматически при изменении стилей, но при изменении данных её перерисовку всё же нужно вызвать вручную.
- Свойство version — номер версии компоненты.
Свойства width и height класса SimpleTable блокированы. Ширина и высота рассчитывается из размеров ячеек таблицы.
Загрузить библиотеку компоненты можно здесь.
За информацией о всех изменениях следите в этом блоге.
PS 12.05.2013: Теперь доступна документация по адресу http://www.pixel-tyumen.ru/simpletable-docs/.
5 комментариев:
у мн проблемы с определением этого класса.
как подключить этот swc?
есть ли аналог для Flash?
> как подключить этот swc?
- можно посмотреть здесь: http://www.google.ru/search?q=flashdevelop+%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D1%8C+swc
> есть ли аналог для Flash?
- во Flash IDE и фреймверке Flex, конечно же, есть свои компоненты (искать как DataGrid). Этот компонент был создан именно для использования вне Flex и Flash IDE.
Спасибо ОГРОМНОЕ!!! Перерыл кучу инфы, но это просто моё спасение, всё отлично работает!
Всегда рад, когда кому-то полезно.
Отправить комментарий