Значит, так. На этот раз мы рассмотрим сразу два
способа реализации Drag&Drop на странице.

Способ №1

Сначала мы рассмотрим стандартный способ. Создайте новую страничку. Далее необходимо заполнить её контентом – дело в том, что панели "ездят", то есть двигаются только внутри самой страницы (что понятно), а посему не могут двигаться там, где страницы уже нет . Как вариант – сделать большой div и запихнуть всё в него. Я лично для просмотра границ всяких div‘ов пользую Web Developer Toolbar – хороший плагин для Firefox.

Допустим, у нас есть заполненная страничка. Теперь нужно проделать довольно-таки стандартную процедуру – поместить на страницу ScriptManager. Думаю, это Вы умеете. Теперь давайте сделаем две панельки.

Красивыми они у нас не будут – я сейчас не в настроении пускаться в дизайнерские изыски:

<asp:Panel ID="FirstPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="FirstLabel" runat="server" Text="Это область, которую можно таскать мышкой " />
</asp:Panel>
<asp:Panel ID="SecondPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="SecondLabel" runat="server" Text="Это область, которую можно таскать мышкой " />
</asp:Panel>

Теперь объявим класс CSS floatPanel:

.floatPanel
{
cursor:move;
background-color:#a50;
border-style:solid;
border-width:1px;
height:160px;
width:160px;
}

Кстати, если не поставить background-color, то панель будет прозрачной.

У нас есть страница и две панели. Что с ними делать? Нам нужно добавить к ним поведение Drag&Drop, то есть, чтобы их можно было двигать по всеёй странице.

Для этого мы добавим на страницу ещё один контрол Atlas: DragOverlayExtender.

Этот контрол является чем-то сродни AutoCompleteExtender (как мы потом узнаем, они на самом деле родня ближе чем по Control‘у).

Внутри него может быть помещён (и не один) тег DragOverlayProperties (да-да, это аналог AutoCompleteProperties). В нашем случае это будет выглядеть так:

<atlas:DragOverlayExtender ID="MyDragOverlayExtender" runat="server">
<atlas:DragOverlayProperties TargetControlID="FirstPanel" Enabled="True" />
<atlas:DragOverlayProperties TargetControlID="SecondPanel" Enabled="True" />
</atlas:DragOverlayExtender>

Кстати, самое интересное, что при добавлении extender’а на страницу у панели появляется свойство DragOverlay с теми же параметрами – оно связывается с DragOverlayProperties.

Вот и готова наша страница! Теперь две панели могут перемещаться по всей области страницы.

Способ №2

Этот способ подразумевает наличие у Вас Atlas Controls Toolkit, о котором я говорил несколькими постами выше.

Он является более удобным и совершенным.

Давайте чуточку видоизменим панели. Для начала, уберите из стиля строку

cursor:move;

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

Добавим по "заголовку" в панели:

<asp:Panel ID="FirstPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="FirstHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="FirstLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>
<asp:Panel ID="SecondPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="SecondHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="SecondLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>

Собственно, объявим класс CSS panelHeader так:

.panelHeader
{
font-weight:bold;
cursor:move;
}

Это будет та область, за которую можно "таскать" мышкой панель.

Ну и самое главное – необходимо объявить DragPanelExtender из Atlas Control Toolkit. В нашем случае это объявление выглядит так:

<atlasToolkit:DragPanelExtender ID="MyDragPanelExtender" runat="server">
<atlasToolkit:DragPanelProperties TargetControlID="FirstPanel" DragHandleID="FirstHeader" />
<atlasToolkit:DragPanelProperties TargetControlID="SecondPanel" DragHandleID="SecondHeader" />
</atlasToolkit:DragPanelExtender>

Всё очень просто. Вот мы и познакомились с техникой создания Drag&Drop на странице.

Полный код страницы (я пишу только для варианта № 2, для первого надо чуть изменить):

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag&Drop</title>
<style type="text/css">
.floatPanel
{
background-color:#a50;
border-style:solid;
border-width:1px;
height:160px;
width:160px;
}
.panelHeader
{
font-weight:bold;
cursor:move;
}
</style>
</head>
<body>
<form id="mainForm" runat="server">
<div id="content" style="text-align: center;">
<atlas:ScriptManager ID="MyScriptManager" runat="server" />
<asp:Panel ID="FirstPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="FirstHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="FirstLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>
<asp:Panel ID="SecondPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="SecondHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="SecondLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>
<atlasToolkit:DragPanelExtender ID="MyDragPanelExtender" runat="server">
<atlasToolkit:DragPanelProperties TargetControlID="FirstPanel" DragHandleID="FirstHeader" />
<atlasToolkit:DragPanelProperties TargetControlID="SecondPanel" DragHandleID="SecondHeader" />
</atlasToolkit:DragPanelExtender>
Здесь должен находиться контент страницы
</div>
</form>
</body>
</html>

До скорых встреч!

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, atlas, Microsoft, Технологии, Статьи про MS Atlas, Библиотеки и фреймворки.

Итак, дано: существует база данных, в которой хранятся сообщения от клиентов менеджерам и обратно. Список сообщений хранится в MS SQL и выводится хранимой процедурой. Конкретное сообщение также получаем через хранимую процедуру, принимающую один параметр. Плюс, на странице будет возможность переключить тип сообщения – входящий или исходящий.

Итого нам потребуется: DropDownList с выбором типа сообщения, GridView со списком сообщений и FormView для просмотра сообщения. Что ж, начнем с дропдауна.

Для DropDownList руками вводим 2 пункта: «Входящие» и «Исходящие», значения, соответственно, 1 и 2. AutoPostBack выставляем true.

Теперь давайте займемся GridView. Для него нам важно настроить DataSource.

Целиком процесс я показывать не буду: уверен, что все, кто работает с ASP.Net 2.0 это видели далеко не раз, а новичкам не даст заблудиться толковый визард. Нас в этом заинтересует лишь вкладка с параметрами, передаваемыми хранимой процедуре. Нам необходимо выставить, что тип сообщения передается от дропдауна, который мы настроили раньше.

После настройки DataSource автоматом будет создан список колонок с названиями, соответствующими названиям полей в базе. В свойствах грида укажем, что он поддерживает сортировку, пейджинг и выбор.

Затем отредактируем список колонок и поменяем их названия.

Укажем ключевое поле, по которому у нас будет отбираться в дальнейшем сообщение (DataKeyNames)

.

Что ж, настала очередь FormView. Для него нам тоже потребуется настроить DataSource. На сей раз параметр для хранимой процедуры передается из уже настроенного GridView.

После настройки DataSource автоматически формируются шаблоны. Опять же, мы их немного поправим.

Костяк страницы у нас готов. Мы можем запустить и посмотреть результат. Всё должно работать.

Наверняка вы спросите: а при чем здесь AJAX? Всё, что мы только что сделали – обычная страница ASP.Net 2.0, и ничего нового и интересного тут нет. Что ж, давайте займемся AJAX, а точнее – MS Atlas.

Для начала на страницу нам потребуется добавить AtlasScriptManager:

<atlas:ScriptManager ID="AJAX_ScriptManager" EnablePartialRendering="True" runat="server" />

А теперь наступает пора уже упоминавшегося контрола UpdatePanel. Дропдаун, грид и FormView мы поместим в обертку этого контрола:


<atlas:UpdatePanel ID="произвольный_id" runat="server">
<ContentTemplate>

</ContentTemplate>
</atlas:UpdatePanel>

А теперь… А теперь всё, можете открыть страницу и проверить. Все наши запросы теперь проходят асинхронно без перезагрузки страницы. Как вы видели, всю страницу мы собрали практически не касаясь руками кода и совсем не влезая в code behind. Работа с контролами, входящими в Atlas Toolkit тоже проста до невозможности и хорошо задокументирована. В большинстве случаев вам будет достаточно просто добавить контрол на страницу и затем указать объект, функциональность которого необходимо «расширить».

Ну и текст получившейся страницы целиком:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="message_demo.aspx.cs" Inherits="message_demo" %>

</div>
</form>
</body>
</html>

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, atlas, Microsoft, Технологии, Статьи про MS Atlas, Библиотеки и фреймворки.

• Dojo
• Zimbra Kabuki Ajax Toolkit
• Google Web Toolkit
• Open Rico and Prototype
• Microsoft Atlas
• Yahoo Ajax Library

Наверное, на первый взгляд обзор покажется чрезмерно кратким и поверхностным. Но самое интересное скрыто в скринкастах. Там находятся достаточно подробные демонстрации каждого фреймворка. Демонстрация того же MS Atlas действительно понравилась. Думаю, для составления первого мнения о лидерах это будет полезно.

ps f4ee11f1-057e-4d13-b671-e9c7b775cd24

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, atlas, Google, Java, Microsoft, Ruby on Rails, Yahoo, Технологии, Библиотеки и фреймворки.

Итак, для начала нам нужно создать Web-сервис, предоставляющий список строк для автозаполнения. Это сделать нетрудно.

Вот код этого сервиса:

Namespace AtlasTest
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class WebService
Inherits System.Web.Services.WebService
Private members As String() = _
{"arilou", "mr.DUDA", "chipset", "alir", "Exception", "Wowa", "Vit", _
"Poseidon", "2man", "Akina", "cardinal", "DezmASter", "bagira", _
"SoWa", "Kagor", "Pegas", "sergej.z", "Gannibal", "ivashkanet", _
"VisualProgrammerNET", "asdf", "oleg1973", "Guedda"}
Private _prefixText As String
<WebMethod()> _
Public Function GetWordList(ByVal prefixText As String, ByVal count As Integer) As String()
_prefixText = prefixText
Dim resultArray(count) As String
resultArray = Array.FindAll(members, AddressOf ArrayFilter)
Return resultArray
End Function
Private Function ArrayFilter(ByVal item As String) As Boolean
Return item.StartsWith(_prefix, StringComparison.InvariantCultureIgnoreCase)
End Function
End Class
End Namespace

namespace AtlasTest
[WebService(Namespace="http://tempuri.org/")] _
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{
private string members[] =
{"arilou", "mr.DUDA", "chipset", "alir", "Exception", "Wowa", "Vit",
"Poseidon", "2man", "Akina", "cardinal", "DezmASter", "bagira",
"SoWa", "Kagor", "Pegas", "sergej.z", "Gannibal", "ivashkanet",
"VisualProgrammerNET", "asdf", "oleg1973", "Guedda"};
private string _prefix;
[WebMethod]
public string[] GetWordList(string prefixText, int count)
{
_prefix = prefixText;
string[] resultArray = new string[count];
resultArray = Array.FindAll(members, new System.Predicate<string>(ArrayFilter));
return resultArray;
}
private bool ArrayFilter(string item)
{
return item.StartsWith(_prefix, StringComparison.InvariantCultureIgnoreCase);
}
}
}

Работа этого сервиса проста. Если смотреть на него, как на “чёрный ящик”, то можно составить такое описание метода GetWordList:

GetWordList

Параметры:

* prefixText – текст, набранный пользователем
* count – количество результатов

Результирующее значение: массив, состоящий из не более count строк, начинающихся с префикса prefixText.

Например, если пользователь наберёт “c” на клавиатуре, то в ответ ему придут “chipset” и “cardinal”, если, конечно, count больше или равен двум.

Хорошо, мы написали сервис. Что дальше? Как обычно, добавьте на страницу контрол ScriptManager:

<atlas:ScriptManager ID="MyScriptManager" runat="server" />

Далее, добавьте на форму самый что ни на есть обыкновенный TextBox:

<asp:TextBox ID="MyTextBox" runat="server" />

Теперь приступим к самому главному.

Для добавления к полю AutoComplete-поведения нобходимо объявить соответствующий элемент:

<atlas:AutoCompleteExtender runat="server" ID="MyAutoCompleteExtender">
</atlas:AutoCompleteExtender>

Этот контрол позволяет расширять любой TextBox на странице путём добавления соответствующего тега:

<atlas:AutoCompleteProperties TargetControlID="MyTextBox" Enabled="True" ServicePath="WebService.asmx"
ServiceMethod="GetWordList" MinimumPrefixLength="1" />

Всё просто, не так ли?

Всё, автозаполнение работает!

Полный код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yo</title>
</head>
<body>
<form id="mainForm" runat="server">
<atlas:ScriptManager ID="MyScriptManager" runat="server" />
<div id="content">
<asp:TextBox ID="MyTextBox" runat="server" />
<atlas:AutoCompleteExtender runat="server" ID="MyAutoCompleteExtender">
<atlas:AutoCompleteProperties
TargetControlID="MyTextBox" Enabled="True"
ServicePath="WebService.asmx" ServiceMethod="GetWordList"
MinimumPrefixLength="1" />
</atlas:AutoCompleteExtender>
</div>
</form>
</body>
</html>

В следующем обзоре мы рассмотрим, как сделать Drag&Drop на странице.

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, atlas, Технологии, Статьи про MS Atlas, Библиотеки и фреймворки.

Очень много вещей вы можете сделать буквально за секунды, удобно, комфортно, не копаясь в необозримых пространствах JavaScript-овых библиотек. И, что удивительно, то что у вас работает сразу, действительно работает! Работает и в Internet Explorer, и в Mozilla Firefox. Скажу честно — я не тестировал работоспособность в Opera и Safari, но всё, что я тестировал в моих основных браузерах, работает. На проблемы, упомянутые ранее, я не натолкнулся. Очень радует уровень интеграции с Visual Studio 2005.

Всё это хорошо, но в какой-то момент вы натыкаетесь на баг/недоработку/архитектурное ограничение (зачастую сложно определить, что же это) и всё. Сделать с этим что-то практически невозможно. Документация многие вещи пока либо не описывает, либо описывает очень кратко. Не факт, что вы сможете найти пример, где выполняется задача, над которой вы сейчас работаете. Сообщество пользователей пока небольшое, вопрос, заданный на форуме имеет большие шансы остаться без ответа.

Одно радует — библиотека действительно развивается, а многие вещи уже сейчас работают прекрасно. Да и интеграция с прочими микрософтовскими продуктами на высоте. Так что, если вы используете ASP.Net 2.0, выбора у вас практически не будет, хорошо это или плохо.

© AJAX Planet, 2006. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, atlas, Microsoft, Компании, Технологии, Библиотеки и фреймворки.