Значит, так. На этот раз мы рассмотрим сразу два
способа реализации 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, Технологии, Библиотеки и фреймворки.