Ласкаво просимо до dev.net.ua Увійти | Приєднатися | Допомога
Облако тегов на странице ASP.NET с помощью Flash

На днях случайно обнаружил очень красивое "живое" облако тегов на флеше:

WP Cumulus

Само облако тегов написано на флеше, встраивается в страницу с помощью SWFObject, а данные для визуализации берет из набора передаваемых флеш-объекту параметров. Изначально данный плагин предназначался для WordPress, однако мой пытливый ум сразу сказал - "Мне такое надо! Причем на страницах ASP.NET!"

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

text/javascript">
var widget_so9010252 = new SWFObject("tagcloud.swf?r=1510412", "tagcloudflash", "160", "160", "9", "#f8f8f8");
widget_so9010252.addParam("allowScriptAccess", "always");
widget_so9010252.addVariable("tcolor", "0x5391d0");
widget_so9010252.addVariable("tcolor2", "0x333333");
widget_so9010252.addVariable("hicolor", "0x5391d0");
widget_so9010252.addVariable("tspeed", "100");
widget_so9010252.addVariable("distr", "true");
widget_so9010252.addVariable("mode", "tags");
widget_so9010252.addVariable("tagcloud", ".....");
widget_so9010252.write("wpcumuluswidgetcontent");

Вот и вся магия :) Основная проблема была в том, что параметры облака тегов очень плохо документированы, и пришлось немало порыться, прежде чем все заработало так как надо.

Остальное дело техники. Наибольшую трудность вызывает формирование параметра tagcloud, так как туда требуется передать строку с XML особого вида, где все пробелы заменены символом +.

Итак, поехали:

[assembly: WebResource("wpCumulus.swfobject.js", "text/javascript")]
[assembly: WebResource("wpCumulus.tagcloud.swf", "application/x-shockwave-flash")]

Флеш-объект и необходимый JS-код встроены в сборку как ресурсы, так что контрол является полностью самодостаточным и не требует для работы никаких дополнительных файлов.


Создаем новый UserControl, который будет уметь рендерить в себе нужный нам JS код:

[ToolboxData("")]
public class WPCumulus : DataBoundControl
{
        ....
        
        protected override void CreateChildControls()
        {
            ClearChildViewState();
            Controls.Clear();
            Page.ClientScript.RegisterClientScriptResource(GetType(), "wpCumulus.swfobject.js");
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            var hiddenContentId = ClientID + ClientIDSeparator + "HiddenContent";

            var tagCloud = GenerateTagCloud();
            var script = CreateScriptString(tagCloud, hiddenContentId);

            output.Write(String.Format("
", hiddenContentId)); output.Write(""); output.Write(script); output.Write(""); } .... }

Как видно из кода, наш класс наследуется от DataBoundControl, что позволяет нам использовать DataBinding для построения списка тегов на основании произвольного источника данных. Для отображения тега в облаке нам необходимы три параметра - Имя Тега, его вес (число ссылок по теме) и ссылка на целевую страницу. За маппинг этих параметров из источника данных отвечают три свойства в классе:

DataTextField - Указывает имя свойства, которое соответствует имени тега.

DataCountField - Указывает имя свойства, которые указывает вес тега.

DataUrlField - Указывает имя свойства, которое соответствует ссылке для данного тега.

Для настройки внешнего вида облака тегов нам доступны следующие параметры:

BackColor - Цвет фона.

TagColor1 - Указывает основной цвет шрифта тега.

TagColor2 - Вспомогательный цвет тега (используется для градиентного перехода при уходе тега на задний план).

HiColor - Цвет тега, когда над ним находится указатель мыши.

TagSpeed - Задает скорость вращения облака (Единицы измерения - попугаи. Оптимальные значения - 20..500 попугаев)

Distr - Булевый параметр отвечает за равномерное распределение тегов по облаку. True - чтобы все было красиво.

MinimumTagSize - Минимальный размер шрифта у тега (для тега с минимальным весом).

MaximumTagSize - Максимальный размер шрифта у тега (для тега с максимальный весом).

Применение контрола:

Сперва опишем наш элемент управления в коде ASPX:
<cc1:WPCumulus ID="WPCumulus1" runat="server" DataCountField="Count" 
        DataTextField="Text" DataUrlField="Link" Width="400" Height="400" 
        BackColor="#CCCCCC" HiColor="#66FF33" TagColor1="Red" TagColor2="Blue"  Distr="True"  />
Теперь в файле отделенного кода мы можем привязаться к облаку тегов:
WPCumulus1.DataSource = new[]{
                              new {Text = "Silverlight", Count = 10, Link="/Tags/Silverlight" },
                              new {Text = "IIS 7", Count = 11, Link="http://iis.net" },
                              new {Text = "IE 8", Count = 12, Link="/Tags/IE8" },
                              new {Text = "C#", Count = 13, Link="/Tags/C#" },
                              new {Text = "Azure", Count = 13, Link="?Tag=Azure" }
                             };
WPCumulus1.DataBind();

В результате должно получиться что-то такое:

image 

Приятного использования!

Исходники контрола и демо можно скачать тут: http://flashtagcloud.codeplex.com/

Вместо заключения

Уже после написания контрола нашел в сети аналог для BlogEngine. Но во-первых, их версия заточена под движок и, следовательно, не реюзабельна. Во-вторых написана ногой через голову.

Ограничения Фичи

1) Облако "падает" при большом количестве тегов (Более 400).

2) Не поддерживается кирилица.

Posted: Wednesday, April 15, 2009 3:48 PM від Eugene Khvedchenya
Помічено як: , ,

Коментарі

Manzhyk сказав:

Пишу вперше, тому не судіть строго... Можливо хтось переглядав статтю Облако тегов на странице ASP.NET

# April 23, 2009 3:32 AM

igorA сказав:

Це не з того ж першоджерела взяте?

http://bohdan.com.ua/

# May 14, 2009 8:30 PM

Bosti1904 сказав:

Hi!

I was looking your source code in like you it does not supporte cyrilic or other character. Could the solution be in tagcloud.fla? I found out that if you have tagcloud.fla which forms tagcloud.swf you could embed new character in including cyrilic. I was wondering if you can publish the tagcloud.fla file or send it to me.

Thank you!

Boštjan

# August 31, 2009 4:29 AM

cabrilio сказав:

Библиотеку с поддержкой кирилицы можно скачать по ссылке

http://blog.isupov.com/files/wpcumulus.rar

# January 29, 2010 12:35 PM

dionisiyboss сказав:

Помогите с библиотекой с поддержкой кириллицы!

# March 7, 2010 10:36 AM

dionisiyboss сказав:

а то ссылки все не рабочие!!!

# March 7, 2010 10:40 AM

MustLive сказав:

У віджеті FlashTagCloud має місце уразливість (http://websecurity.com.ua/4213/). Про що я вчора написав в себе на сайті та вже повідомив автору віджета.

Уразливість ідентичная уразливості в WP-Cumulus (як і в усіх інших веб додатках, що використовують tagcloud.swf), про яку я писав ще в листопаді 2009 і яку розробник WP-Cumulus виправив, після мого повідомлення, ще в листопаді.

Тому розробнику FlashTagCloud і всім користувачам потрібно оновити флешку до останньої версії. Але розробник WP-Cumulus виправив лише XSS, але не HTML Injection, на що повинні звернути увагу, як розробник WP-Cumulus, так і всі інші розробники, що використовують дану флешку.

# May 20, 2010 7:01 AM
Анонімні коментарі деактивовані. Увійдіть або Зареєструйтесь щоб мати доступ до ресурсів Спільноти.