Блог proграммиста

Мне лично, да и многим людям понравилось облако тегов на флэше wp_cumulus.

В интернете я нашел всего несколько страниц, которые описывают как сделать такое облако тэгов на ASP.net.

В качестве первоисточника возьмем статью http://dev.net.ua/blogs/eugenekhvedchenya/pages/8134.aspx

(Не уверен, что это первоисточник, но другой статьи под рукой не оказалось)

Итак.

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

Само облако тегов написано на флеше, встраивается в страницу с помощью 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();

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

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

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

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

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

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

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

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

Я предлагаю Вам скачать библиотеку wp_cumulus уже с поддержкой кирилицы.

wp_cumulus for ASP.net with Cyrylic