28 июня 2011 г.

Компонент Table на ActionScript 3

Потребовалось отображать табличные данные на чистом 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?

Ivan Sergeev комментирует...

> как подключить этот 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.

Bambr комментирует...

Спасибо ОГРОМНОЕ!!! Перерыл кучу инфы, но это просто моё спасение, всё отлично работает!

Ivan Sergeev комментирует...

Всегда рад, когда кому-то полезно.

Отправить комментарий