Решение проблемы выделения цветом посещенных ссылок

Одним из часто критикуемых несоответствий, созданных при помощи Flash-сайтов, устоявшимся в более традиционных Web-технологиях принципом usability является отсутствие выделения цветом посещенных ссылок. В случае HTML-сайтов пользователь может точно определить, посещал ли он адресуемый ссылкой ресурс в обозримом прошлом, так как стиль отображения ранее задействованной ссылки отличается от того, как визуализируется ссылка, по которой переход еще не осуществлялся. Это достигается за счет того, что у браузера имеется база данных, в которой хранится информация о посещенных ресурсах. У Flash-плейера такой базы, увы, нет. Более того, он не может использовать базу истории браузера, так как она, в целях приватности, недоступна посредством JavaScript. Однако, применяя класс SharedObject, мы можем создать для сайта индивидуальную базу истории. Исходя из нее довольно несложно сделать стиль посещенных ссылок отличным от стиля ссылок, который используется по умолчанию.

Чтобы реализовать нашу задумку, нужно преодолеть несколько чисто технических сложностей.

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


Автор остановился на следующем: каждую ссылку следует связать с индивидуальным классом CSS (называть эти классы мы будем s1,s2,s3, ...,sN). При инициализации фильма будем проверять, имеется ли в базе истории указатель на этот класс (он будет туда помешаться при нажатии ссылки). Если да, то связываем с классом правило, соответствующее стилю посещенной ссылки, а затем добавляем его в таблицу стилей, исходя из которой форматируется текст в полях. Если же ссылка ранее не нажималась, то правило для класса не создается. При этом ссылка отобразится в стиле, заданном для тега <А>.

• Во-вторых, как «отловить» момент нажатия ссылки и узнать при этом, какая именно ссылка была задействована? Для этого воспользуемся псевдопротоколом asfunction, который позволяет вызывать при нажатии ссылки функцию ActionScript. В качестве параметра ей будет передаваться имя соответствующего ссылке класса CSS и адрес сайта, который должен быть открыт, объединенные в строку и разделенные символом «_». Например:

"(а class='s2'
href='asfunction:press, s2-http://www.flash-ripper.com')Новости на русском языке
(/a)"

Итак, приступим. Как всегда, вначале следует создать код инициализации:

var text_arr:Array=null, cookies:SharedObject=null;
funсtion init():Void {
// Массив, хранящий ссылки на поля, содержащие гиперссылки
text_arr=[];
// В файле links-sol будет храниться база посещенных ссылок
cookies=SharedObject.getLocal("links");
// Проверяем, имеется ли объект base, исполняющий роль базы данных.


Если его
// нет (фильм открывается впервые), то создаем его.
if (cookies.data.base==undefined) {
cookies.data.base=();
cookies.flush();
}
}
init();

Теперь нужно написать функцию, которая будет вызываться при нажатии ссылки. Основная ее задача будет сводиться к занесению имени идентифицирующего ссылку CSS-класса в базу истории.

Эта база будет представлять собой обычный объект, свойствами которого являются имена CSS-классов:

function press(par:String):Void {
// Выделяем из переданной строки имя класса и адрес ресурса
var name:String=par.substring(0, par.indexOf("-"));
var link:String=par.substring(par.indexOf("-")+1);
// Проверяем, имеется ли в Сазе элемент с именем name (он уже может в ней
// быть, если ссылка нажималась ранее). Если его нет, то создаем его.
if (cookies.data.base[name]==undefined) {
cookies.data.base[name]=true;
cookies.flush();
}
getURL(link, "_blank"); // Открываем сайт, на который указывает ссылка
setStyle(text_arr); // Обновляем вил ссылок (стиль только что
// нажатой ссылки должен измениться)

Наиболее сложной с технической точки зрения будет функция setStyle(), непосредственно задающая стиль для гиперссылок.


Ее алгоритм будет следующим. Создается таблица стилей, содержащая правила для таких «обычных» тегов, как <р> или <а>. Затем запускается цикл for-in и в эту таблицу дописываются правила для всех CSS-классов, соответствующие которым свойства имеются в объекте базы истории. Далее полученная таблица применяется по отношению ко всем текстовым полям, содержащим гиперссылки. В результате нажатые ссылки меняют свой вид, не задействованные же ранее сохраняют стиль, принятый по умолчанию.

// В качестве параметра функции передается массив со ссылками на поля,
// в тексте которых имеются гиперссылки
function setStyle(arr:Array):Void {
var style_string:String=""; // Строка будет хранить таблицу стилей
// Текст будет отображаться 14 кеглем
style_string+="p {font-size:14}";
// Стиль для гиперссылок
style_string+="a {color:#0000FF; text-decoration; underline;
font-style:italic; margin-left:20)";
// Добавляем правила для CSS-классов, адресующих нажатые ранее ссылки
var base:Object=cookies.data.base;
for (var i in base) {
style_string+="\r."+i+"{color:#FF0000; display:inline)\r";
}
// Применяем созданную таблицу стилей по отношению к полям с гиперссылками
var style:TextField.StyleSheet=new TextField.Stylesheet();
style.parseCSS(style_string);
for (var j=0; j arr[j].styleSheet=style;
}
}

Готово. Созданный код обладает высокой переносимостью, поэтому вы можете использовать его в любых своих проектах. Для примера создадим текстовое поле со ссылками на интересные для любого флешера ресурсы:

this.createTextField("links", 0, 100, 100, 350, 200);
links.htm1=links.border=true;
text_arr[0]=links;
setStyle(text_arr); // Применяем к полю CSS-стиля
var text:String = "<р>Посетите следующие сайты:\n";
text+="Лучший форум на русском языке\n";
text+="
Новости на русском языке\n";
text+="
Сайт компании Macromedia\n";
text+="";
text+="
Сайт издательства \"Питер\"";
text+="

";
links.text=text;

Набрав данный код, запустите режим тестирования и щелкните по любой из пяти ссылок. Она тут же изменит цвет, а в новом окне браузера будет открыт адресуемый ею ресурс. Выйдите из режима тестирования, а затем войдите в него повторно. Задействованная ссылка окажется красной. Отлично!

Завершая наш минипроект, создадим кнопку, которая будет зачищать базу истории. Для этого с ней нужно связать следующий код:

but.onPress=function():Void {
cookies.data.base={};
cookies.flush();
setStyle(text_arr); // Обновляем вид ссылок
};

Зайдите в режим тестирования и нажмите кнопку but. При этом все ссылки приобретут принятый по умолчанию вид.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Action Script на эту тему:
Взаимодействие с принтером
Взаимодействие со средой разработки
Взаимодействие со средствами чтения с экрана
Объект CustomActions
Определение размеров фильма и величины окна плейера