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

Рейтинг поста: 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..Есть вариант как это сделать?

Добавить комментарий: