Веб-элемент управления TreeView
В этой статье приводятся общие сведения об использовании элемента управления TreeView при разработке веб-страниц. Этот элемент управления упрощает создание элементов пользовательского интерфейса, служащих для отображения иерархических наборов данных, списков папок и других подобных структур данных. Он реализует ряд полезных возможностей, включая поддержку привязки данных и расширений функциональности динамического HTML (DHTML) в браузерах более поздних версий. В большинстве ситуаций элемент управления Toolbar может быть создан декларативно. Однако он также может быть запрограммирован с помощью расширенного сценария на стороне клиента или сервера. Данный документ содержит следующие разделы.
Введение TreeView — это элемент управления ASP.NET, который служит для создания элементов пользовательского интерфейса, предназначенных для представления иерархических данных. Так же как и другие веб-элементы управления Windows Internet Explorer, элемент управления TreeView предоставляет HTML-код в соответствии с типом браузера. Для браузеров более ранних версий элементы управления ASP.NET TreeView предоставляют содержимое страницы в формате HTML 3.2, а в браузерах более поздних версий HTML-страницы также используют расширения функциональности DHTML, которые представляют собой клиентские компоненты, определяющие пользовательские элементы. Для веб-элементов управления браузерами более поздних версий являются Microsoft Internet Explorer 5.5 и более поздние версии, а браузерами более ранних версий являются Internet Explorer 5.01 или более ранней версии, а также любые браузеры, отличные от Internet Explorer. Данный обзор содержит практические примеры, демонстрирующие создание и использование элементов управления TreeView. TreeView является одним из четырех веб-элементов управления. Поэтому при разработке веб-страниц с использованием любого из этих элементов управления действуют одинаковые требования. Общие сведения о веб-элементах управления, включая инструкции по загрузке и установке, см. в разделах Веб-элементы управления Internet Explorer и Разработка веб-форм с использованием веб-элементов управления. Веб-элементы управления представляют собой элементы управления ASP.NET, включающие ряд расширений функциональности DHTML, которые повышают удобство работы пользователей в браузерах более поздних версий. Для каждого веб-элемента управления расширение функциональности DHTML предоставляет объектную модель на стороне клиента, достаточно точно соответствующую объектной модели на стороне сервера, реализуемой элементом управления ASP.NET. Архитектуры компонентов в Internet Explorer 5.5 и ASP.NET имеют явные различия, поэтому клиентская и серверная объектные модели немного различаются. Возможность использования как клиентских, так и серверных компонентов означает, что при разработке веб-страниц использовать элемент управления TreeView можно двумя способами. В ASP.NETвозможно написание веб-форм, предоставляющих содержимое в соответствии с возможностями браузера. При этом в браузерах более поздних версий используются расширения функциональности. На таких страницах могут использоваться сценарии на стороне сервера, написанные на одном из языков CLR. Для Internet Explorer 5.5 и более поздних версий возможно написание веб-страниц, использующих расширения функциональности DHTML со сценариями на стороне клиента. Предварительные требования Для полноценной работы с этой статьей необходимо быть знакомым с базовыми типами ASP.NET и способами их использования при разработке простейших страниц веб-форм. Также необходимы некоторые познания в области написания сценариев для браузеров и расширений функциональности DHTML, так как веб-элементы управления используют расширения функциональности в браузерах более поздних версий. Образцы кода в этой статье приводятся на языках C# и Microsoft Visual Basic .NET. Веб-разработчикам эти образцы должны показаться простыми для понимания, даже если они только начинают осваивать ASP.NET и среду CLR. Дополнительные сведения о требованиях конфигурации, предъявляемых при размещении веб-страниц с использованием ASP.NET и веб-элементов управления, см. в статье Веб-элементы управления Internet Explorer. Терминология
Объекты TreeView В этом разделе кратко описаны основные сходства и различия между клиентской и серверной реализациями элемента управления TreeView. Ссылки на справочную документацию по клиентским и серверным объектам, предоставляемым элементом управления TreeView, см. на странице Справка по элементу управления TreeView. Для создания элемента управления TreeView также можно воспользоваться редактором TreeView в Visual Studio .NET. В этой статье основное внимание уделено способам разработки содержимого вручную с использованием элемента управления TreeView. Дополнительные сведения о визуальном редактировании с использованием элемента управления TreeView см. в статье Использование конструктора TreeView в Visual Studio .NET. Элемент управления TreeView может быть создан декларативно или программно с помощью сценария на стороне клиента или сервера. При декларативном создании элементы и атрибуты, поддерживаемые клиентскими и серверными компонентами, очень похожи. Поэтому примеры декларативного создания, приведенные в данной статье, работают как на страницах на основе веб-форм, использующих элементы управления ASP.NET TreeView, так и на HTML-страницах, использующих расширение функциональности TreeView. Вследствие различий в языках программирования, поддерживаемых в ASP.NET и Internet Explorer, для клиентских и серверных компонентов приводятся отдельные наборы документации. Элементы управления ASP.NET Наиболее полнофункциональная модель программирования для элемента управления TreeView предоставляется элементами управления ASP.NET. Использовать элементы управления ASP.NETрекомендуется в ситуациях, когда веб-страницы должны отображаться в различных браузерах. Причина этого заключается в том, что веб-элементы управления определяют тип браузера и для более ранних версий браузеров предоставляют содержимое в формате HTML 3.2. Дополнительные сведения см. в статье Справка по серверным элементам управления ASP .NET. Клиентское расширение функциональности Если необходимо оптимизировать производительность клиента в Internet Explorer 5.5 или более поздних версиях, можно воспользоваться расширением функциональности TreeView. Веб-формы ASP.NET, использующие веб-элементы управления, автоматически загружают расширение функциональности TreeView в браузеры более поздних версиях. Поэтому при написании клиентских HTML-страниц расширение функциональности TreeView может использоваться независимо от ASP.NET. Представления в виде деревьев, используемые во многих приложениях Windows, имеют широкий набор функциональных возможностей. Например, узлы TreeView можно разворачивать и сворачивать с помощью мыши или клавиатуры. Расширение функциональности TreeView поддерживает все эти возможности и позволяет реализовывать привязку данных в клиентских и серверных веб-страницах. Элементы TreeView Для реализации элемента управления TreeView можно использовать один или несколько из следующих элементов, которые поддерживаются как клиентскими, так и серверными компонентами TreeView.
Подробные сведения по использованию элементов управления ASP.NET TreeView и расширения функциональности TreeView при разработке веб-страниц можно найти в справочной документации. Дополнительные сведения см. на странице Справка по элементу управления TreeView. Элемент TreeView служит контейнером для элементов TreeNode и TreeNodeType. Вместе они определяют структуру, макет и оформление представления в виде дерева. Элемент управления TreeView не может содержать иного содержимого HTML, кроме этих трех элементов. Элемент TreeView может содержать неограниченное число элементов TreeNodeType при условии, что на клиентском компьютере и сервере имеется достаточно ресурсов. Элементы TreeNodeType служат для определения стилей, изображений и других возможностей элементов TreeNode. Элементы TreeNode могут группироваться по типу, что делает возможным их форматирование и изменение с помощью элемента TreeNodeType. Элементы TreeNodeType должны являться дочерними по отношению к элементу TreeView и использоваться в коде перед первым элементом TreeNode. Элемент TreeNode может содержать только другие элементы TreeNode. Однако в элемент управления TreeView можно включать содержимое HTML, задавая его в качестве значения свойства Text элемента TreeNode. Значение свойства Text элемента TreeNode отображается как HTML, а не как обычный текст. Создание простого элемента управления TreeView В этом разделе приводятся пошаговые инструкции по созданию простого элемента управления TreeView. Все действия можно выполнить в любом текстовом редакторе. Для выполнения следующей процедуры необходимо установить веб-элементы управления. Дополнительные сведения см. в обзорной статье Веб-элементы управления Internet Explorer.
На следующем рисунке показан первоначальный вид элемента управления TreeView при открытии.
Теперь в элементе управления TreeView отображается корневой узел с возможностью развертывания. Чтобы развернуть или свернуть узел, необходимо щелкнуть его. Примечание. Данный пример демонстрирует то, что по умолчанию узел в элементе управления TreeView является свернутым. Начальное состояние узла можно изменить путем настройки свойства Expanded. На этом создание простейшего элемента управления TreeView завершено. Далее приведены примеры, демонстрирующие дополнительные свойства и возможности элемента управления TreeView. Форматирование В этом разделе рассматриваются некоторые полезные приемы, используемые для настройки внешнего вида пользовательского интерфейса TreeView. Форматирование может применяться к отдельным элементам TreeNode или к группам элементов с одинаковым значением атрибута Type. Часто бывает необходимо использовать особое оформление для каждого уровня иерархии в элементе управления TreeView. Иногда необходимо настроить внешний вид отдельных узлов вне зависимости от их глубины вложения в дереве и стиля родительских элементов. Элемент управления TreeView предоставляет свойства для реализации всех этих возможностей. Определение элемента TreeNodeType В следующем примере создается элемент управления TreeView, включающий ряд штатов и городов. На первом этапе настройки внешнего вида узлов элемент TreeNodeType используется для определения атрибута Type узла Folder. <%@ import namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <html> <head> </head> <body> <form id="myform" runat="server" > <mytree:treeview runat="server" ChildType="Folder"> <mytree:treenodetype Type="Folder" ExpandedImageUrl="./images/folderopen.gif" ImageUrl="./images/folder.gif" /> <mytree:treenode Text="Michigan"> <mytree:treenode Text="Detroit" /> <mytree:treenode Text="Farmington" /> <mytree:treenode Text="Southfield" /> </mytree:treenode> <mytree:treenode Text="Washington" > <mytree:treenode Text="Bellevue" /> <mytree:treenode Text="Redmond" /> <mytree:treenode Text="Woodinville" /> </mytree:treenode> </mytree:treeview> </form> </body> </html> В этом примере демонстрируется использование элемента TreeNodeType, который является удобным средством для форматирования и настройки макета и внешнего вида элемента управления TreeView. Атрибут ChildType определен как Folder для элемента TreeView. Так как атрибут ChildType определен для элемента управления TreeView, являющегося контейнером для всего дерева, это равносильно заданию атрибута Type со значением Folder для всех элементов TreeNode. Очевидно, что такой подход более эффективен по сравнению с заданием атрибута Type для каждого узла. Объявив атрибут ChildType со значением Folder для элемента управления TreeView, необходимо определить этот тип с помощью элемента TreeNodeType. В этом примере для элемента TreeNodeType задан атрибут Type с тем же значением Folder. Свойства ExpandedImageUrl и ImageUrl переопределяют изображения, используемые для узлов TreeView в развернутом и свернутом состоянии соответственно. Настройка узлов дерева в соответствии с глубиной вложения В следующем примере в приведенный выше код внесены небольшие изменения, благодаря которым на каждом уровне иерархии TreeView используются особые значки папок. В следующем примере используются два уровня элементов TreeNode. В этом случае узлы, представляющие города, вложены в узлы, представляющие штаты. <mytree:treeview runat="server" ChildType="Folder"> <mytree:treenodetype Type="Folder" ChildType="City" ExpandedImageUrl="folderopen.gif" ImageUrl="folder.gif" /> <mytree:treenodetype Type="City" ImageUrl="html.gif" /> <mytree:treenode Text="Michigan"> <mytree:treenode Text="Detroit" /> <mytree:treenode Text="Farmington" /> <mytree:treenode Text="Southfield" /> </mytree:treenode> <mytree:treenode Text="Washington" > <mytree:treenode Text="Bellevue" /> <mytree:treenode Text="Redmond" /> <mytree:treenode Text="Woodinville" /> </mytree:treenode> </mytree:treeview> Обратите внимание, что атрибут ChildType используется для элемента управления TreeView и первых элементов TreeNodeType. Для дочерних элементов элемента управления TreeView определен тип Folder, а для дочерних элементов первого элемента TreeNodeType определен тип City. В этом случае второй элемент TreeNodeType не имеет атрибута ChildType, так как этот элемент определяет TreeNodeType с самым глубоким уровнем вложения в элементе управления TreeView. Применение стилей Веб-элементы управления имеют расширенные возможности, и при отображении в браузерах более поздних версий они поддерживают операции с мышью и клавиатурой. Это означает, что в зависимости от действий пользователя элементы пользовательского интерфейса TreeView могут иметь различные состояния. Веб-элементы управления предоставляют специальные свойства, упрощающие настройку внешнего вида элементов в соответствии с текущим состоянием. С помощью каждого из этих свойств можно определить одну или несколько пар атрибут-значение CSS. Используемый формат аналогичен формату стандартного атрибута CSS style. Веб-элементы управления поддерживают наиболее распространенные, однако не все стили CSS, используемые для применения шрифтов, цветов и размеров. <mytree:treenode Text="My Stylish Node" DefaultStyle="background:#CCCCCC;border:solid 1px;color:black;font-size:8pt" HoverStyle="color:blue;font-name:Arial" SelectedStyle="color:red;font-name:Arial;font-weight:bold-italic" /> Другим способом форматирования текста является применение HTML-тегов непосредственно к атрибуту Text. <mytree:treenode Text="<i>Italicized Text</i> and <b>Bold Text</b>" /> Привязка данных Элемент управления TreeView также поддерживает привязку данных, которая обеспечивает создание динамического содержимого. В следующих примерах элемент управления TreeViews реализуется так же, как и в предыдущих, но вместо статического содержимого используются XML-файлы в качестве источника данных. В данном примере атрибут TreeNodeSrc используется для привязки к файлу state_city.xml, данные из которого вносятся в элемент управления TreeView. <mydbtree:treeview runat="server" SystemImagesPath="../images/" AutoPostBack="true"> <mydbtree:treenode Text="North America" AutoPostBack=true imageurl="./images/root.gif" Expanded="true" TreeNodeSrc="https://localhost/webcontrols/treeview/state_city.xml"> </mydbtree:treenode> </mydbtree:treeview> Фрагмент кода демонстрирует, насколько лаконичной может быть разметка в файле ASPX. Файл state_city.xmlсодержит следующий код. <TREENODES> <treenode Text="Michigan"> <treenode Text="Detroit" /> <treenode Text="Farmington" /> <treenode Text="Southfield" /> </treenode> <treenode Text="Washington" > <treenode Text="Bellevue" /> <treenode Text="Redmond" /> <treenode Text="Woodinville" /> </treenode> </TREENODES> В следующем примере демонстрируется использование атрибута TreeNodeTypeSrc с XML. В этом примере используются два XML-файла: один для узлов дерева, а второй для типов узлов. Он основан на предыдущем примере, но в него добавлены дополнительные настройки пользовательского интерфейса. В разметке веб-страницы используется только один элемент TreeView, как показано ниже. <mytree:treeview runat="server" SystemImagesPath="/webcontrols/images" AutoPostBack="true" TreeNodeTypeSrc="https://localhost/webcontrols/TreeView/TreeNodeTypes.xml" TreeNodeSrc="https://localhost/webcontrols/TreeView/country_state_city.xml"> </mytree:treeview> Содержимое файла TreeNodeTypes.xml выглядит следующим образом. <TREENODETYPES> <TreeNodeType type="file" imageUrl="./images/html.gif" /> <TreeNodeType type="folder" imageUrl="./images/folder.gif" /> <TreeNodeType type="root" imageUrl="./images/root.gif" /> </TREENODETYPES> Привязка данных с помощью шаблонов XML и XSL В некоторых сценариях может понадобиться использовать XML-данные с доступом только для чтения. Кроме того, эти данные могут иметь формат, который нельзя использовать для привязки к элементу управления TreeView. Элемент управления TreeView также поддерживает шаблоны XSL, которые позволяют преобразовывать XML-файлы в соответствующий формат. XSL может использоваться для преобразования XML-файлов с целью обеспечения привязки данных как к элементам TreeNode, так и к элементам TreeNodeType. Следующий пример демонстрирует использование XML и XSL для заполнения данных в элементе управления TreeView. Приведена разметка элемента TreeView, связанного с XML-файлом (nodes.xml) и XSL-файлом (template.xsl). <myxmltree:treeview id="tree1" runat="server" TreeNodeSrc = "nodes.xml" TreeNodeXsltSrc = "template.xsl" /> Файл nodes.xml имеет следующее содержимое. <?xml version="1.0" ?> <HelpTOC> <HelpTOCNode Title="Web Sites"> <HelpTOCNode Title = "Microsoft" Url = "http://www.microsoft.com"> </HelpTOCNode> <HelpTOCNode Title = "MSDN" Url = "http://msdn.microsoft.com"> </HelpTOCNode> </HelpTOCNode> </HelpTOC> Файл template.xsl имеет следующее содержимое. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'> <xsl:template match="/"> <TREENODES> <xsl:for-each select="HelpTOC/HelpTOCNode"> <xsl:element name="TreeNode"> <xsl:attribute name="Text" ><xsl:value-of select="@Title"/></xsl:attribute> <xsl:attribute name="NavigateUrl" ><xsl:value-of select="@Url"/></xsl:attribute> <xsl:attribute name="TARGET" >main</xsl:attribute> <xsl:for-each select="HelpTOCNode"> <xsl:element name="TreeNode"> <xsl:attribute name="Text" ><xsl:value-of select="@Title"/></xsl:attribute> <xsl:attribute name="NavigateUrl" ><xsl:value-of select="@Url"/></xsl:attribute> <xsl:attribute name="Target" >main</xsl:attribute> </xsl:element> </xsl:for-each> </xsl:element> </xsl:for-each> </TREENODES> </xsl:template> </xsl:stylesheet> Шаблон XSL преобразует исходный файл XML в правильный формат для элемента управления TreeView. Внимание! Чтобы привязка данных к элементу управления TreeView выполнялась правильно, элементы TREENODES и TREENODETYPES в документе-источнике должны быть написаны прописными буквами. Привязка к данным из нескольких XML-файлов Если XML-данные для элемента управления TreeView разделены на несколько файлов, можно выполнить привязку данных к нескольким источникам. Например, отдельные элементы TreeNode могут быть связаны с отдельными файлами XML и XSL. Также можно определить атрибуты TreeNodeTypeSrc, TreeNodeSrc и TreeNodeXsltSrc в XML-файле, с которым осуществляется связывание. Если XML-данные содержат атрибуты, указывающие на другие XML-файлы, они могут быть преобразованы в соответствующую разметку TreeView с помощью XSL. При создании элемента управления TreeView, связанного с несколькими XML-файлами, привязанные к данным узлы дерева загружаются не одновременно. Если для элемента TreeNode задано свойство TreeNodeSrc, содержимое узла связывается с XML-источником только при развертывании узла. Если элемент TreeView связывается с источником данных, он извлекает данные из XML-источника для всех корневых узлов. Если для корневых узлов также заданы атрибуты TreeNodeSrc, эти атрибуты игнорируются до тех пор, пока пользователь не развернет корневой узел. После этого развернутый узел связывается с источником данных, а его дочерние элементы загружаются и отображаются. Это делает возможным динамическое связывание дочернего элемента узла с XML источником, если при создании родительским узлом XML-данных для дочерних узлов XML-данные содержат атрибут TreeNodeSrc, используемый дочерним элементом для привязки данных. Свойство TreeNodeSrc узла игнорируется до тех пор, пока узел не будет развернут. Атрибут TreeNodeSrc можно изменять динамически перед развертыванием узла. При первом развертывании узла он связывается с XML-данными, на которые указывает текущий атрибут TreeNodeSrc. Привязка к данным XML и SQL Server Веб-элементы управления поддерживают также другие поставщики XML-данных, как показано в следующем примере. <ie:treenode Text="root" type="tree" Expanded="true" TreeNodeSrc="https://localhost/mySQLXML?sql=execute+sp_GenMyXML+@pid=1" /> В этом примере используется более сложный прием. В качестве значения атрибута TreeNodeSrc указывается URL-адрес, который запускает хранимую процедуру в базе данных Microsoft SQL Server, динамически генерирующую область данных XML. Приведенные примеры показывают, насколько просто реализовать привязку данных при использовании элемента управления TreeView. Наследование от пространства имен при использовании привязки данных При связывании веб-элементов управления с областями данных XML в содержимом XML, используемом для заполнения элементов управления, не должен использоваться префикс пространства имен. Это связано с тем, что пространство имен подразумевается элементом, выступающим в роли получателя данных. Более подробные пояснения см. в описании атрибутов TreeNodeTypeSrc и TreeNodeSrc. Программирование Приведенные ранее примеры показывают, что в большинстве случаев для написания полнофункционального элемента пользовательского интерфейса не требуется программирования. В это разделе приведены краткие сведения о некоторых простых приемах написания сценариев для элемента управления TreeView. События TreeView События, связанные с взаимодействием с пользователем, могут перенаправляться непосредственно на сервер путем задания для свойства AutoPostBack значения true. Сценарий на стороне сервера должен использоваться при обработке событий для браузеров как более поздних, так и более ранних версий, так как расширения функциональности DHTML, используемые Internet Explorer 5.5 или более поздними версиями, не используются в содержимом страниц более ранних версий. Основным способом взаимодействия пользователя с элементом управления TreeView на веб-странице является развертывание и свертывание узлов дерева для просмотра содержимого. В следующем образце кода демонстрируется обработка событий onexpand, oncollapse и onselectedindexchange в веб-форме с помощью C#. <script language="C#" runat="server"> void myExpandFn(object sender, TreeViewClickEventArgs e) { mylabel.InnerText += "Expanded (Node Index= " + e.Node.ToString() + ")"; } void myCollapseFn(object sender, TreeViewClickEventArgs e) { mylabel.InnerText += "Collapsed (Node Index = " + e.Node.ToString() + ")"; } void mySelectChangeFn(Object sender, TreeViewSelectEventArgs e) { mylabel.InnerText += "Selected " + e.NewNode.ToString() + " (old Node Index=" + e.OldNode.ToString()+")" ; } </script> В этом сценарии необходимо наличие элемента с атрибутом id, имеющим значение mylabel. <div id=mylabel runat="server">Event Log: </div> Примечание. Этот тег также необходимо поместить внутри элемента FORM, используемого элементом управления TreeView. Функции в сценарии C# могут быть связаны с событиями программным способом или с помощью атрибутов элемента управления TreeView, как показано в следующем примере. <mytree:treeview onexpand="myExpandFn" oncollapse="myCollapseFn" onselectedindexchanged="mySelectChangeFn" autopostback="true" runat="server"> </mytree:treeview> При написании программного кода для элемента управления TreeView часто используются события onexpand и oncollapse. В этом примере сценарий добавляется к свойству innerText элемента div при каждом свертывании или развертывании узла. Инструкции include на стороне сервера Так как веб-элементы управления создаются с помощью ASP.NET, также поддерживаются инструкции include на стороне сервера. В следующих примерах демонстрируется их использование. <mytree:treeview runat="server"> <!-- #Include file="nodes.txt" --> </mytree:treeview> Файл nodes.txt используется для заполнения элемента управления TreeView, а в следующем примере включенные файлы используются для заполнения двух отдельных ветвей TreeNode дерева TreeView. <mytree:treeview runat="server"> <mytree:treenode Text="Books" > <!-- #Include file="Books.txt" --> </mytree:treenode> <mytree:treenode Text="Magazines" > <!-- #Include file="magazines.txt" --> </mytree:treenode> </mytree:treeview> В отличие от правил использования префиксов пространства имен, применяющихся при привязке к XML-данным, включаемый файл должен содержать элементы с тем же префиксом тега, что и родительские элементы. Поэтому элементы в файлах books.txt и magazines.txt должны использовать префикс тега mytree. Советы по оптимизации производительности В этом разделе приводятся практические рекомендации по использованию элемента управления TreeView. Размер дерева Не рекомендуется использовать одну область данных TreeView для отображения очень больших наборов иерархических данных. Как правило, число узлов в дереве не должно превышать 1000. При каждом обновлении пользовательского интерфейса элемента управления TreeView, например при развертывании или свертывании узла, к состоянию просмотра добавляются дополнительные данные, с помощью которых ведется история изменений состояния на веб-странице. Это означает, что при каждом обновлении представления с большой областью данных, объем данных, прикрепленных к истории состояния просмотра, увеличивается. В ASP.NET имеется ограничение на размер состояния просмотра, поэтому при частых обновлениях деревьев с большими наборами иерархических данных могут возникать проблемы с производительностью, и в некоторых случаях часть истории может быть утеряна. Связанные разделы |
Примечание
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
.gif)
.gif)