TabStops и простой способ вывода табличных данных в ActionScript

Иногда в flash-приложениях возникает необходимость вывода каких-то данных в виде таблицы. В этих случаях, обычно, таблицу имитируют с помощью нескольких текстовых полей. Это проверенный способ, но, честно говоря, весьма громоздкий. Можно, конечно, облегчить себе жизнь и воспользоваться уже готовыми решениями (смотри «Table Engine: создание таблиц средствами ActionScript 3.0»). Но в ряде случаев не стоит создавать себе лишние трудности и достаточно воспользоваться свойством/атрибутом TabStops для вывода табличных данных.

TabStops - это свойство класса TextFormat и атрибут у тега <textformat> (это весьма специфический тег для разметки текста в языках ActionScript). TabStops определяет позицию табуляции в текстовом поле. Звучит не очень понятно и это лучше рассмотреть на конкретном примере.

1.) Использование атрибута TabStops.

Атрибут TabStops выглядит довольно необычно. Дело в том, что в качестве значения этот атрибут принимает массив (!) со значениями позиций табуляции в текстовом поле. Например, у нас есть данные следующего вида

Данные:

№ - Нас. пункт - Население 1 - Псков - 203,3 2 - Великие Луки - 98,8 3 - Остров - 21,7 4 - Невель - 16,3 5 - Опочка - 11,6 6 - Печоры - 11,2 7 - Порхов - 10,6 8 - Дно - 9,1 9 - Дедовичи - 8,8 10 - Струги Красные - 8,4 11 - Новосокольники - 8,1 12 - Себеж - 6,4 13 - Пыталово - 5,8 14 - Пушкинские Горы - 5,2 15 - Идрица - 5,0 16 - Пустошка - 4,6 17 - Гдов - 4,4 18 - Бежаницы - 4,3 19 - Локня - 3,9 20 - Красногородск - 3,9 21 - Серёдка - 3,8 22 - Новоржев - 3,7 23 - Плюсса - 3,5 24 - Кунья - 3,1 25 - Усвяты - 3,0

Удобнее всего эти данные вывести именно в виде таблицы. И эту таблицу мы создадим с помощью атрибута tabstops у тега textformat...

Код ActionScript 3.0:

var txtField:TextField = new TextField(); txtField.width = 500; txtField.height = 350; txtField.x = 25; txtField.y = 25; txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.htmlText = '<textformat tabstops="[50,100,300]">'; txtField.htmlText += '\t№\tНас. пункт\tНаселение'; txtField.htmlText += '\t1\tПсков\t203,3'; txtField.htmlText += '\t2\tВеликие Луки\t98,8'; txtField.htmlText += '\t3\tОстров\t21,7'; txtField.htmlText += '\t4\tНевель\t16,3'; txtField.htmlText += '\t5\tОпочка\t11,6'; txtField.htmlText += '\t6\tПечоры\t11,2'; txtField.htmlText += '\t7\tПорхов\t10,6'; txtField.htmlText += '\t8\tДно\t9,1'; txtField.htmlText += '\t9\tДедовичи\t8,8'; txtField.htmlText += '\t10\tСтруги Красные\t8,4'; txtField.htmlText += '\t11\tНовосокольники\t8,1'; txtField.htmlText += '\t12\tСебеж\t6,4'; txtField.htmlText += '\t13\tПыталово\t5,8'; txtField.htmlText += '\t14\tПушкинские Горы\t5,2'; txtField.htmlText += '\t15\tИдрица\t5,0'; txtField.htmlText += '\t16\tПустошка\t4,6'; txtField.htmlText += '\t17\tГдов\t4,4'; txtField.htmlText += '\t18\tБежаницы\t4,3'; txtField.htmlText += '\t19\tЛокня\t3,9'; txtField.htmlText += '\t20\tКрасногородск\t3,9'; txtField.htmlText += '\t21\tСерёдка\t3,8'; txtField.htmlText += '\t22\tНоворжев\t3,7'; txtField.htmlText += '\t23\tПлюсса\t3,5'; txtField.htmlText += '\t24\tКунья\t3,1'; txtField.htmlText += '\t25\tУсвяты\t3,0'; txtField.htmlText += '</textformat>'; addChild(txtField)

Получится следующее:

Тег TEXTFORMAT, как уже упоминалось, является специфическим тегом для разметки текста средствами ActionScript. У этого тега имеется несколько столь же специфических атрибутов, но нас сейчас интересует только атрибут tabstops. Данный атрибут в приведённом выше коде имеет в качестве значения массив из трёх элементов. Причём эти элементы массива являются положительными целыми числами (!).

Если взглянуть на готовый флеш-ролик, то можно понять, как используются значения данного массива: они определяют отступ ячеек нашей таблицы от левого края текстового поля.

Но как Flash Player узнаёт, где начинаются и кончаются ячейки нашей таблицы? Очень просто. Наши ячейки отделены друг от друга знаком табуляции (\t).

То есть, фактически, значение-массив у атрибута tabstops описывает, на каком расстоянии от левого края текстового блока находится каждая из колонок таблицы. В нашем примере колонок три (№, Нас. пункт, Население) и, соответственно, массив имеет три значения (50, 100 и 300). Здесь:

- 50 - это расстояние в пикселах от левого края текстового поля до первого столбца таблицы;

- 100 - это расстояние в пикселах от левого края текстового поля до второго столбца таблицы;

- 300 - это расстояние в пикселах от левого края текстового поля до последнего столбца таблицы.

Ну, надеюсь, понятно объяснил :-)

Кстати, это будет работать не только в ActionScript 3.0, но и в ActionScript 2.0...

Код ActionScript 2.0:

_root.createTextField("txtField", _root.getNextHighestDepth(), 25, 25, 500, 350); txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.html = true; txtField.htmlText = '<textformat tabstops="[50,100,300]">'; txtField.htmlText += '\t№\tНас. пункт\tНаселение'; txtField.htmlText += '\t1\tПсков\t203,3'; txtField.htmlText += '\t2\tВеликие Луки\t98,8'; txtField.htmlText += '\t3\tОстров\t21,7'; txtField.htmlText += '\t4\tНевель\t16,3'; txtField.htmlText += '\t5\tОпочка\t11,6'; txtField.htmlText += '\t6\tПечоры\t11,2'; txtField.htmlText += '\t7\tПорхов\t10,6'; txtField.htmlText += '\t8\tДно\t9,1'; txtField.htmlText += '\t9\tДедовичи\t8,8'; txtField.htmlText += '\t10\tСтруги Красные\t8,4'; txtField.htmlText += '\t11\tНовосокольники\t8,1'; txtField.htmlText += '\t12\tСебеж\t6,4'; txtField.htmlText += '\t13\tПыталово\t5,8'; txtField.htmlText += '\t14\tПушкинские Горы\t5,2'; txtField.htmlText += '\t15\tИдрица\t5,0'; txtField.htmlText += '\t16\tПустошка\t4,6'; txtField.htmlText += '\t17\tГдов\t4,4'; txtField.htmlText += '\t18\tБежаницы\t4,3'; txtField.htmlText += '\t19\tЛокня\t3,9'; txtField.htmlText += '\t20\tКрасногородск\t3,9'; txtField.htmlText += '\t21\tСерёдка\t3,8'; txtField.htmlText += '\t22\tНоворжев\t3,7'; txtField.htmlText += '\t23\tПлюсса\t3,5'; txtField.htmlText += '\t24\tКунья\t3,1'; txtField.htmlText += '\t25\tУсвяты\t3,0'; txtField.htmlText += '</textformat>';

Знаю, многие скажут, что использования \t для разграничения ячеек таблицы - это очень неудобно. Действительно, такая запись табуляции неудобна для чтения и редактирования. Но на этот случай существует возможность замены \t на специальный тег <tab>.

Код ActionScript 3.0:

var txtField:TextField = new TextField(); txtField.width = 500; txtField.height = 350; txtField.x = 25; txtField.y = 25; txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.htmlText = '<textformat tabstops="[50,100,300]">'; txtField.htmlText += '<tab>№<tab>Нас. пункт<tab>Население'; txtField.htmlText += '<tab>1<tab>Псков<tab>203,3'; txtField.htmlText += '<tab>2<tab>Великие Луки<tab>98,8'; txtField.htmlText += '<tab>3<tab>Остров<tab>21,7'; txtField.htmlText += '<tab>4<tab>Невель<tab>16,3'; txtField.htmlText += '<tab>5<tab>Опочка<tab>11,6'; txtField.htmlText += '<tab>6<tab>Печоры<tab>11,2'; txtField.htmlText += '<tab>7<tab>Порхов<tab>10,6'; txtField.htmlText += '<tab>8<tab>Дно<tab>9,1'; txtField.htmlText += '<tab>9<tab>Дедовичи<tab>8,8'; txtField.htmlText += '<tab>10<tab>Струги Красные<tab>8,4'; txtField.htmlText += '<tab>11<tab>Новосокольники<tab>8,1'; txtField.htmlText += '<tab>12<tab>Себеж<tab>6,4'; txtField.htmlText += '<tab>13<tab>Пыталово<tab>5,8'; txtField.htmlText += '<tab>14<tab>Пушкинские Горы<tab>5,2'; txtField.htmlText += '<tab>15<tab>Идрица<tab>5,0'; txtField.htmlText += '<tab>16<tab>Пустошка<tab>4,6'; txtField.htmlText += '<tab>17<tab>Гдов<tab>4,4'; txtField.htmlText += '<tab>18<tab>Бежаницы<tab>4,3'; txtField.htmlText += '<tab>19<tab>Локня<tab>3,9'; txtField.htmlText += '<tab>20<tab>Красногородск<tab>3,9'; txtField.htmlText += '<tab>21<tab>Серёдка<tab>3,8'; txtField.htmlText += '<tab>22<tab>Новоржев<tab>3,7'; txtField.htmlText += '<tab>23<tab>Плюсса<tab>3,5'; txtField.htmlText += '<tab>24<tab>Кунья<tab>3,1'; txtField.htmlText += '<tab>25<tab>Усвяты<tab>3,0'; txtField.htmlText += '</textformat>'; addChild(txtField);

или

Код ActionScript 2.0:

_root.createTextField("txtField", _root.getNextHighestDepth(), 25, 25, 500, 350); txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.html = true; txtField.htmlText = '<textformat tabstops="[50,100,300]">'; txtField.htmlText += '<tab>№<tab>Нас. пункт<tab>Население'; txtField.htmlText += '<tab>1<tab>Псков<tab>203,3'; txtField.htmlText += '<tab>2<tab>Великие Луки<tab>98,8'; txtField.htmlText += '<tab>3<tab>Остров<tab>21,7'; txtField.htmlText += '<tab>4<tab>Невель<tab>16,3'; txtField.htmlText += '<tab>5<tab>Опочка<tab>11,6'; txtField.htmlText += '<tab>6<tab>Печоры<tab>11,2'; txtField.htmlText += '<tab>7<tab>Порхов<tab>10,6'; txtField.htmlText += '<tab>8<tab>Дно<tab>9,1'; txtField.htmlText += '<tab>9<tab>Дедовичи<tab>8,8'; txtField.htmlText += '<tab>10<tab>Струги Красные<tab>8,4'; txtField.htmlText += '<tab>11<tab>Новосокольники<tab>8,1'; txtField.htmlText += '<tab>12<tab>Себеж<tab>6,4'; txtField.htmlText += '<tab>13<tab>Пыталово<tab>5,8'; txtField.htmlText += '<tab>14<tab>Пушкинские Горы<tab>5,2'; txtField.htmlText += '<tab>15<tab>Идрица<tab>5,0'; txtField.htmlText += '<tab>16<tab>Пустошка<tab>4,6'; txtField.htmlText += '<tab>17<tab>Гдов<tab>4,4'; txtField.htmlText += '<tab>18<tab>Бежаницы<tab>4,3'; txtField.htmlText += '<tab>19<tab>Локня<tab>3,9'; txtField.htmlText += '<tab>20<tab>Красногородск<tab>3,9'; txtField.htmlText += '<tab>21<tab>Серёдка<tab>3,8'; txtField.htmlText += '<tab>22<tab>Новоржев<tab>3,7'; txtField.htmlText += '<tab>23<tab>Плюсса<tab>3,5'; txtField.htmlText += '<tab>24<tab>Кунья<tab>3,1'; txtField.htmlText += '<tab>25<tab>Усвяты<tab>3,0'; txtField.htmlText += '</textformat>';

2.) Использование свойства TabStops класса TextFormat.

Принцип тот же, но кода придётся написать чуть больше :-)

Код ActionScript 3.0:

var txtField:TextField = new TextField(); txtField.width = 500; txtField.height = 350; txtField.x = 25; txtField.y = 25; txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.text = '\t№\tГород\tНаселение\n'; txtField.appendText('\t---\t------------\t------------\n'); txtField.appendText('\t1\tПсков\t203,3\n'); txtField.appendText('\t2\tВеликие Луки\t98,8\n'); txtField.appendText('\t3\tОстров\t21,7\n'); txtField.appendText('\t4\tНевель\t16,3\n'); txtField.appendText('\t5\tОпочка\t11,6\n'); txtField.appendText('\t6\tПечоры\t11,2\n'); txtField.appendText('\t7\tПорхов\t10,6\n'); addChild(txtField); var txtFormat:TextFormat = new TextFormat(); txtFormat.tabStops = [50,100,300]; txtField.setTextFormat(txtFormat);

Результат:

То же самое, но на ActionScript 2.0...

Код ActionScript 2.0:

_root.createTextField("txtField", _root.getNextHighestDepth(), 25, 25, 500, 350); txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.text = '\t№\tНас. пункт\tНаселение\n'; txtField.text += '\t---\t------------\t------------\n'; txtField.text += '\t1\tПсков\t203,3\n'; txtField.text += '\t2\tВеликие Луки\t98,8\n'; txtField.text += '\t3\tОстров\t21,7\n'; txtField.text += '\t4\tНевель\t16,3\n'; txtField.text += '\t5\tОпочка\t11,6\n'; txtField.text += '\t6\tПечоры\t11,2\n'; txtField.text += '\t7\tПорхов\t10,6\n'; var txtFormat:TextFormat = new TextFormat(); txtFormat.tabStops = [50,100,300]; txtField.setTextFormat(txtFormat);

Конечно, таблицы, созданные с помощью TabStops выглядят очень простенько и старомодно, но свою главную функцию выполняют: отформатированный таким способом текст читать удобно и приятно.

Кстати, никто не мешает нам, используя теги и свойства форматирования текста в языке ActionScript, сделать нашу таблицу более удобной и даже довольно симпатичной :-)

Код ActionScript 2.0:

var txtField:TextField = new TextField(); txtField.width = 500; txtField.height = 350; txtField.x = 25; txtField.y = 25; txtField.border = true; txtField.borderColor = 0xcccccc; txtField.multiline = true; txtField.wordWrap = true; txtField.htmlText = '<textformat leading="5" tabstops="[20,70,300,400]">'; txtField.htmlText += '<u>\t<b>№</b>\t<b>Нас. пункт</b>\t<b>Население</b>\t</u>'; txtField.htmlText += '<u>\t1\tПсков\t203,3\t</u>'; txtField.htmlText += '<u>\t2\tВеликие Луки\t98,8\t</u>'; txtField.htmlText += '<u>\t3\tОстров\t21,7\t</u>'; txtField.htmlText += '<u>\t4\tНевель\t16,3\t</u>'; txtField.htmlText += '<u>\t5\tОпочка\t11,6\t</u>'; txtField.htmlText += '<u>\t6\tПечоры\t11,2\t</u>'; txtField.htmlText += '<u>\t7\tПорхов\t10,6\t</u>'; txtField.htmlText += '<u>\t8\tДно\t9,1\t</u>'; txtField.htmlText += '<u>\t9\tДедовичи\t8,8\t</u>'; txtField.htmlText += '<u>\t10\tСтруги Красные\t8,4\t</u>'; txtField.htmlText += '<u>\t11\tНовосокольники\t8,1\t</u>'; txtField.htmlText += '<u>\t12\tСебеж\t6,4\t</u>'; txtField.htmlText += '<u>\t13\tПыталово\t5,8\t</u>'; txtField.htmlText += '<u>\t14\tПушкинские Горы\t5,2\t</u>'; txtField.htmlText += '<u>\t15\tИдрица\t5,0\t</u>'; txtField.htmlText += '<u>\t16\tПустошка\t4,6\t</u>'; txtField.htmlText += '<u>\t17\tГдов\t4,4\t</u>'; txtField.htmlText += '<u>\t18\tБежаницы\t4,3\t</u>'; txtField.htmlText += '<u>\t19\tЛокня\t3,9\t</u>'; txtField.htmlText += '<u>\t20\tКрасногородск\t3,9\t</u>'; txtField.htmlText += '<u>\t21\tСерёдка\t3,8\t</u>'; txtField.htmlText += '<u>\t22\tНоворжев\t3,7\t</u>'; txtField.htmlText += '<u>\t23\tПлюсса\t3,5\t</u>'; txtField.htmlText += '<u>\t24\tКунья\t3,1\t</u>'; txtField.htmlText += '<u>\t25\tУсвяты\t3,0\t</u>'; txtField.htmlText += '</textformat>'; addChild(txtField);

Результат:

А у меня на сегодня всё :-)

Автор: admin

Дата добавления: 2012-02-22

Просмотров: 4684

Рейтинг поста: +6-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-04-15
Да, setTextFormat() надо вызывать каждый раз после того, как обновилось содержание текстового поля :-)
Комментатор
Комментарий добавил(а): Ched
Дата добавления: 2013-04-15
Благодарю! Так тоже подходит) а со своим кодом разобрался) (почему-то в комментах не отобразилась косая черта и t)
var myformat:TextFormat = new TextFormat();
myformat.tabStops = [80];
btn.onPress = function() {
t1.text = Number(5*5)+" ";
t1.setTextFormat(myformat);
};
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-04-14
Возможно, я чего-то не понимаю, но почему нельзя так:


var myformat:TextFormat = new TextFormat();
myformat.leftMargin = 10;
myTextField.text = "my text";
myTextField.setTextFormat(myformat);
btn.onPress = function() {
myTextField.text = 5*5;
myTextField.setTextFormat(myformat);
};
Комментатор
Комментарий добавил(а): Ched
Дата добавления: 2013-04-14
Подскажите, как настроить отступ для одного символа, который пока не прописан в текстовом поле.
Вот код, пытался настроить отступ, не получается.
var myformat:TextFormat = new TextFormat();
myformat.tabStops = [80];
t1.text = " ";
t1.text.setTextFormat(myformat);
btn.onPress = function() {
t1.text = Number(5*5)+" ";
}
};
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-05-25
Описанный здесь способ - это для простых случаев. Если вас он не устраивает - пишите собственное решение для таблиц. Или воспользуйтесь уже готовыми библиотеками для генерации таблиц в ActionScript. В начале данного поста есть ссылка на статью с подробным описанием одного из таких готовых решений.
Комментатор
Комментарий добавил(а): Андрей
Дата добавления: 2012-05-24
А вот напрмиер если вместо Пскова написать большую строку, то перенос слов будет осуществляться с начала а не со 100 по х и идти дальше. Логичнее же, чтобы текст шел со 100 до 300 и происходил перенос опять так же со 100 до 300..Есть вариант как это сделать?
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика