|
Модераторы: gambit |
|
Exception |
|
|||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Приветствую всех!
Собственно говоря, не знаю, что меня сподвигло на написание этого цикла, наверное желание поделиться опытом... Хотелось бы, чтобы люди не повторяли тех ошибок, которые допускал я и очень хотелось бы ознакомить людей с новой технологией, которая зовётся Web 2.0 или AJAX. Вступление Что же такое AJAX? AJAX буквально расшифровывается как Asynchronous JavaScript And XML - асинхронный JavaScript и XML. Что это за чудо? Думаю, лучше всего об этом написано в Википедии. Я лишь приведу цитату:
Приложение AJAX состоит из двух частей:
Обычная схема вхаимодействия такова:
Таким образом, появляется возможность писать Rich UI для Web! Благодаря AJAX мы можем сделать страницу, поддерживающую Drag&Drop, всплывающие меню и даже автозаполнение TextBox'ов. Что самое приятное - страница совсем не перезагружается во время работы с пользователем! Что же такое Atlas? Atlas - это свободная реализация AJAX от Microsoft для ASP .NET. В чём её преимущества?
Это было вступление. Следом за ним идёт вторая часть, которая покажет простейший пример использования Atlas. Оставайтесь с нами ! |
|||
|
||||
Exception |
|
|||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
К сожалению, вторая часть статьи, только что мною написанная, умерла ввиду того, что уроды-электрики отрубили свет во всём доме. Теперь буду сохраняться каждую минуту :angry
Так что ждите сегодня вечером или завтра. |
|||
|
||||
Exception |
|
||||||||||||||||||||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Сдерживая злость на электриков, пишу вторую часть...
Приготовления На данный момент Atlas находится в состоянии разработки. Но это вовсе не значит, что им ещё рано пользоваться. Напротив - чем раньше Вы начнёте использовать его, тем лучше. На данный момент Atlas распространяется свободно (и будет распространяться), скачать самый новый дистрибутив всегда можно здесь. Hello, World! После того, как Вы установили Atlas, в шаблонах сайтов в Visual Studio появится новая иконка - ASP .NET 'Atlas' Web Site. Нажмите "ОК". У Вас появится страница Default.aspx, папка ScriptLibrary и библиотека Microsoft.Web.Atlas.dll в папке Bin. Также Atlas модифицирует файл web.config. Собственно говоря, в папке ScriptLibrary хранятся все скрипты, необходимые для работы Atlas. В библиотеке Microsoft.Web.Atlas.dll хранятся серверные компоненты, о них мы поговорим позднее. Для начала, мы создадим простенький Web-сервис a la Hello, World. Добавьте в проект новый Web-сервис и назовите его WebService.asmx. В codebehind этого сервиса добавьте следующие строчки:
Как видно, наш Web-сервис содержит один лишь метод HelloWorld(), который возвращает строку "Hello, World!". Далее, напишите в самом asmx-файле сервиса следующую строку:
Всё, наш Web-сервис готов! Теперь зайдите в Source странички Default.aspx. И немного наберитесь терпения. Для начала нам необходимо познакомиться с самым важным компонентом Atlas - ScriptManager. Его работа - управлять скриптами Atlas и подключать необходимые к странице. Тег <atlas:ScriptManager> имеет три внутренних тега. Сейчас мы их рассмотрим чуть поближе.
Прекрасно, мы подключили Web-сервис к нашей странице. Теперь добавьте на страницу следующий код:
У нас появится два новых элемента на странице - кнопка "Послать запрос" и div. Как Вы, наверное, уже догадались по его неоднозначному имени, в нём будет отображаться результат запроса. При нажатии на кнопку вызывается функция JavaScript, которую мы сейчас напишем. Добавьте в секцию head пустой тег script:
Теперь можно писать функции. Код JavaScript выглядит так:
Как видно, код прост до невозможности. Как и ожидалось, после нажатия кнопки под ней повилась надпись "Hello, World!". Проверить асинхронность можно очень легко: модифицируйте Web-сервис, добавив в код Web-сервиса команду
Вы можете спокойно просматривать страницу, а в это время код JavaScript ожидает ответа от сервера. В следующей статье мы поговорим об автозаполнении TextBox'ов, как в Gmail. Полный код страницы:
Успехов! Это сообщение отредактировал(а) Exception - 11.4.2006, 15:24 |
||||||||||||||||||||
|
|||||||||||||||||||||
Exception |
|
|||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Пока я разбираюсь с автозаполнением (не такая простая вещь ), представлю несколько новых контролов Atlas "на закуску"
CascadingDropDown - асинхронный дропдаун CollapsiblePanel - понелька, умеющая сворачиваться ConfirmButton - позволяет добавить диалог типа "Вы уверены?" к кнопочкам DragPanel - панель, которую можно таскать по странице HoverMenu - типа менюшки, выскакивающей при наведении мыши PopupControl - extender, позволяющий добавить к элементам popup-поведение ReorderList - назначение понятно, лист позволяет перемещать элементы внутри себя TextBoxWaterMark - текстбокс с фоном ToggleButton - чекбокс с картинкой Качать всё это счастье можно здесь. Радуйтесь, а я пока пойду разбираться с автозаполнением . |
|||
|
||||
Exception |
|
||||||||||||||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Автозаполнение
Разобрался наконец-то . Итак, для начала нам нужно создать Web-сервис, предоставляющий список строк для автозаполнения. Это сделать нетрудно. Вот код этого сервиса:
Работа этого сервиса проста. Если смотреть на него, как на "чёрный ящик", то можно составить такое описание метода GetWordList: GetWordList Параметры:
Например, если пользователь наберёт "c" на клавиатуре, то в ответ ему придут "chipset" и "cardinal", если, конечно, count больше или равен двум. Хорошо, мы написали сервис. Что дальше? Как обычно, добавьте на страницу контрол ScriptManager:
Далее, добавьте на форму самый что ни на есть обыкновенный TextBox:
Теперь приступим к самому главному. Для добавления к полю AutoComplete-поведения нобходимо объявить соответствующий элемент:
Этот контрол позволяет расширять любой TextBox на странице путём добавления соответствующего тега:
Всё просто, не так ли? Всё, автозаполнение работает! Полный код страницы:
В следующем обзоре мы рассмотрим, как сделать Drag&Drop на странице Успехов! Это сообщение отредактировал(а) Exception - 15.4.2006, 12:46 |
||||||||||||||
|
|||||||||||||||
Exception |
|
||||||||||||||||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Drag & Drop
Значит, так. На этот раз мы рассмотрим сразу два способа реализации Drag&Drop на странице. Способ №1 Сначала мы рассмотрим стандартный способ. Создайте новую страничку. Далее необходимо заполнить её контентом - дело в том, что панели "ездят", то есть двигаются только внутри самой страницы (что понятно), а посему не могут двигаться там, где страницы уже нет . Как вариант - сделать большой div и запихнуть всё в него. Я лично для просмотра границ всяких div'ов пользую Web Developer Toolbar - хороший плагин для Firefox. Допустим, у нас есть заполненная страничка. Теперь нужно проделать довольно-таки стандартную процедуру - поместить на страницу ScriptManager. Думаю, это Вы умеете . Теперь давайте сделаем две панельки. Красивыми они у нас не будут - я сейчас не в настроении пускаться в дизайнерские изыски:
Теперь объявим класс CSS floatPanel:
Кстати, если не поставить background-color, то панель будет прозрачной. У нас есть страница и две панели. Что с ними делать? Нам нужно добавить к ним поведение Drag&Drop, то есть, чтобы их можно было двигать по всеёй странице. Для этого мы добавим на страницу ещё один контрол Atlas: DragOverlayExtender. Этот контрол является чем-то сродни AutoCompleteExtender (как мы потом узнаем, они на самом деле родня ближе чем по Control'у). Внутри него может быть помещён (и не один) тег DragOverlayProperties (да-да, это аналог AutoCompleteProperties). В нашем случае это будет выглядеть так:
Кстати, самое интересное, что при добавлении extender'а на страницу у панели появляется свойство DragOverlay с теми же параметрами - оно связывается с DragOverlayProperties. Вот и готова наша страница! Теперь две панели могут перемещаться по всей области страницы. Способ №2 Этот способ подразумевает наличие у Вас Atlas Controls Toolkit, о котором я говорил несколькими постами выше. Он является более удобным и совершенным. Давайте чуточку видоизменим панели. Для начала, уберите из стиля строку
Мы сделаем так, чтобы двигать панель можно было только за определённый участок. Добавим по "заголовку" в панели:
Собственно, объявим класс CSS panelHeader так:
Это будет та область, за которую можно "таскать" мышкой панель. Ну и самое главное - необходимо объявить DragPanelExtender из Atlas Control Toolkit. В нашем случае это объявление выглядит так:
Всё очень просто . Вот мы и познакомились с техникой создания Drag&Drop на странице. Полный код страницы (я пишу только для варианта № 2, для первого надо чуть изменить):
До скорых встреч! P.S. В следующий раз мы рассмотрим ещё парочку контролов из Atlas Control Toolkit, в частности, CollapsiblePanelExtender. Это сообщение отредактировал(а) Exception - 15.4.2006, 15:23 |
||||||||||||||||
|
|||||||||||||||||
TheAviator |
|
|||
Бывалый Профиль Группа: Участник Сообщений: 219 Регистрация: 28.9.2003 Где: Николаев-Киев Репутация: нет Всего: нет |
I'm sorry
А разве в ASP.NET 2.0 поддержка динамического обновления не встроена стандарным компонентам типа выпадающего списка и т.д? А зачем тогда Atlas ? |
|||
|
||||
Exception |
|
|||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Не встроена.
|
|||
|
||||
celarent |
|
|||
Новичок Профиль Группа: Участник Сообщений: 1 Регистрация: 14.7.2006 Где: SPb Репутация: нет Всего: нет |
здорово! на русском информации, связанной с Atlas мало. Так, в порядке интереса: не хотите этот текст таки отдельной статьей на AJAX Planet повесить? icq 59375609
|
|||
|
||||
Pankon |
|
|||
Опытный Профиль Группа: Участник Сообщений: 739 Регистрация: 2.6.2005 Репутация: 2 Всего: 5 |
Куда девается результат запроса (Atlas), если страница приемник была закрыта пользователем?
И как отследить, что страница приемник была закрыта пользователем? Ну и до кучи - как организовать timeout для запросов при использовании atlas? |
|||
|
||||
Exception |
|
||||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
Пожалуйста, с такими вопросами -- в личку. Посмотрим.
Никуда он не девается. Это же не материальный объект, чтобы ему куда-то деваться Никак. Потому что сервер ничего не знает о приёмнике. И не должен -- тут своеобразная разделённая архитектура -- ведь клиентом web-сервера может быть и Atlas-страница и десктопное приложение и т.п. Это точно можно сделать, но не помню, как |
||||
|
|||||
Pankon |
|
|||
Опытный Профиль Группа: Участник Сообщений: 739 Регистрация: 2.6.2005 Репутация: 2 Всего: 5 |
Впринципе, информацию можно назвать "материальной" (остальное в форуме по философии ) Это-то понятно. Все-таки хотелось бы найти решение следующей проблемы.
|
|||
|
||||
Exception |
|
|||
Эксперт Профиль Группа: Участник Клуба Сообщений: 4525 Регистрация: 26.12.2004 Репутация: 9 Всего: 186 |
По сути, никак. Это вообще нереализуемо в web.
|
|||
|
||||
Pankon |
|
|||
Опытный Профиль Группа: Участник Сообщений: 739 Регистрация: 2.6.2005 Репутация: 2 Всего: 5 |
|
|||
|
||||
mr.DUDA |
|
|||
3D-маньяк Профиль Группа: Экс. модератор Сообщений: 8244 Регистрация: 27.7.2003 Где: город-герой Минск Репутация: 5 Всего: 232 |
Другое дело если используются Rich Client Applications ;)
-------------------- |
|||
|
||||
Прежде чем создать тему, посмотрите сюда: | |
|
Используйте теги [code=csharp][/code] для подсветки кода. Используйтe чекбокс "транслит" если у Вас нет русских шрифтов. Если Вам понравилась атмосфера форума, заходите к нам чаще! С уважением, Любитель, Mymik, mr.DUDA. |
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | Разработка под ASP.NET | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |