Урок 1. Знакомимся с Ext.NET

Краткое введение в Ext.NET 2.0 beta


Дорогой читатель, давайте поговорим о таком приятном и полезном ASP.NET Фреймворке как Ext.NET. Он основывается на известном JS Фреймворке – Sencha Ext JS. Он сильно облегчает многим ASP.NET разработчикам жизнь, избавляя от необходимости изучения Ext JS, а потом еще прикручивания его к своему ASP.NET приложению. Ext.NET предоставляет удобные и простые контролы, но не только. В нем есть очень много других полезных вещей, но об этом позже.

Текущая версия Ext.NET 2.0 beta предоставляет почти все возможности Ext JS 4.1.0 и включает в себя некоторые очень приятные плагины. Если вы думаете использовать Ext.NET в своем реальном проекте, я бы рекомендовал вам обратиться к версии Ext.NET 1.3, она более стабильная и почти не вызывает нареканий, функционально конечно слабее, но не принципиально. Многое, что тут написано применимо и к ней, хотя между ними нет совместимости. А если все же решили использовать Ext.NET 2.0 beta, то помните, что пометка beta, как раз и подразумевает, что все еще может поменяться по нескольку раз и работает местами нестабильно. Но все же именно версия Ext.NET 2.0 beta, это будущее и необходимо изучать именно ее. В ней разработчики добавили много нового, полный список изменений вы можете посмотреть тут.

Зачем мне это?

Давайте сначала глянем на наиболее интересные примеры, которые предоставляют авторы, чтобы вы поняли насколько хорош Ext.NET. Перейдите на страницу examples.ext.net, вы увидите большое дерево примеров.
Выберите Desktop -> Introduction -> Overview. Перед вами появится полноценный рабочий стол, вроде того что находится в MS Windows. Окна, кнопка Start, графики и многое другое доступно вам. Не правда ли, интересные возможности?

image

Далее обратите внимание на Layout -> BorderLayout -> Complex in CodeBehind. Все проблемы с отображением элементов в данном окне берет на себя Ext.NET. Можете практически забыть о верстке и проблемах с кроссбраузерностью, они тут уже решены.

image

Думаю на этом я закончу с примерами, т.к. дальше вы и сами разберетесь. Особенное внимание я хочу чтобы вы обратили на разделы Chart, DataView, GridPanel, Layout, Miscellaneous.
Если вы думаете, зачем вам Ext.NET, когда есть jQuery UI, Telerik Controls и множество других наборов контролов, которые дают похожий функционал. И вы будете правы, у Ext.NET, есть и свои плюсы и минусы. Рассмотрим плюсы:

  1. С помощью Ext.NET вы получаете готовые ASP.NET и ASP.NET MVC контролы, которые не надо учить работать с этими платформами. Контролы, каждый из которых «вещь в себе» и имеет богатый функционал. Всего контролов порядка 100! А еще их можно расширить, написать плагин или создать свой контрол. В общем, тут целый свой мир;
  2. Весь процесс рендеринга Ext.NET берет на себя и о такой проблеме как разметка, вы можете забыть. Вам надо просто указать, что и где отображать, посредством такого понятия как Layout и Container;
  3. Готовые темы, которые можно расширить или создать новую;
  4. Легкий и простой способ реагирования на события через DirectEvent и DirectMethod;
  5. Огромные возможности по отображению различных массивов данных;
  6. Готовые HTML5 графики, основанные на Raphael;
  7. Сообщество Ext.NET довольно живое и немаленькое, всегда можно задать вопрос на форуме и спокойно ожидать ответа.


Но конечно у Ext.NET есть и свои минусы.

  1. Он применим в основном для корпоративных или закрытых проектов, в сфере небольших Интернет-проектов думаю, вся его мощь не пригодится. Для этого есть, по крайней мере, три причины.
    • Скрипты и ресурсы весят довольно много для Интернета, порядка 500 Кб потребуется загрузить, чтобы что-нибудь отобразилось на экране пользователя. Зачастую пользователь на медленном канале плюнет и пойдет дальше, но их все меньше и меньше;
    • Он довольно требователен к клиентским машинам. Как решение мы обычно ставили Chrome или FireFox, но они «съедали» очень много памяти;
    • Плохо работает с мобильными браузерами, в том числе, потому что не хватает мощности мобильных процессоров. Но для решения этой проблемы у Sencha есть еще один фреймворк Sencha Touch, который похож на ExtJS, как младший брат. Но планов о реализации Sencha Touch на платформе ASP.NET я пока не слышал. Хотя вместе с ASP.NET MVC, это сделать довольно несложно.


  2. Для того чтобы полноценно работать с Ext.NET придется преодолеть довольно большой, но интересный «порог» знаний, причем большую часть времени придется изучать Ext JS, что довольно сложно. В защиту, могу сказать что, большую часть функционала Ext.NET не требует, больших познаний, достаточно лишь понять и вникнуть в примеры которые предоставляют авторы.

Основное место для поиска информации это сайт www.ext.net, там вы можете найти форум и примеры. Вне этих мест вы можете задавать вопросы на stackoverflow.com и русскоязычную группу groups.google.com/group/extnet. Думаю, вам всегда ответят.

Пишем Hello World!

Ну что же, начнем.
Перед тем как начать вам понадобится:
  1. Visual Studio 2010 любой редакции, также рекомендую поставить на него ServicePack 1.
  2. Установить прекрасный менеджер пакетов для Visual Studio NuGet. Как это сделать вы можете узнать тут.

Для начала работы необходимо создать новый ASP.NET проект и добавить в него NuGet пакет Ext.NET. Для этого необходимо открыть Package Manager Console. И ввести в него:
Install-Package Ext.NET -Pre

image
image
К вам в проект автоматически добавятся все нужные библиотеки и новая веб-страница Ext.NET.Default.aspx. Для удобства добавления контролов в разметку страницы следует добавить немного строк в Web.config вашего приложения. Это избавит вас от необходимости на каждой странице писать
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> 
, которая нужна для регистрации контролов Ext.NET на странице. Откройте Web.config найдите раздел
configuration -> system.web и добавьте в него следующие строки:

<pages>
  <controls>
	<add tagPrefix="ext" namespace="Ext.Net" assembly="Ext.Net"/>
  </controls>
</pages>


image

Сделайте страницу Ext.NET.Default.aspx страницей по умолчанию.

image

Теперь, когда все приготовления завершены, мы можем запустить наше приложение, нажав на F5.

Мы увидим заботливо заранее приготовленный легкий пример от авторов, который отображает в правом всплывающем окне, то, что мы ему напишем. Окно, которое вы видите перед собой можно таскать по экрану, закрывать (правда открыть его, потом не получится), у него есть тень, заголовок и даже можно изменять его размер, причем размер текстового поля будет изменяться тоже.

image

Давайте посмотрим исходный код нашей программы. Мы видим четыре контрола:

  1. Это ResourceManager, его присутствие обязательно на всех страницах, которые используют Ext.NET, его возможности очень широкие, но о них будет сказано в следующих уроках;
  2. Window – является тем самым окном, которое вы уже видели. У него богатый выбор возможных настроек, часть из которых использованы в нашем примере. Также этот контрол является контейнером для других элементов управления, в нашем конкретном случае для TextField. И также наше окно может содержать множество кнопок;
  3. TextArea – текстовое поле которое мы видим внутри окна, физически это старое и знакомое многим HTML поле textarea. И при нажатии на кнопку Submit, его значение передается на сервер где и проходит обработку;
  4. Button – это кнопка, при нажатии на которую происходит обращение к серверу и в частности к методу «Button1_Click», который назначен обработчиком события нажатия через аттрибут «OnDirectClick» (Более подробно мы рассмотрим DirectEvent и DirectMethod в отдельном уроке). Метод в свою очередь отображает сообщение в правом нижнем углу с помощью следующей строки: X.Msg.Notify(«Message», this.TextField1.Text).Show();. Объект X является вспомогательным и упрощает определенные действия. В нашем конкретном случае мы можем сразу получить окно уведомления и отобразить его.


Всего лишь парой движений мы можем изменить тему оформления нашей страницы. По умолчанию поставляется три темы: синяя(Default), серая (Gray) и доступная(Access) — для слабовидящих людей. Меняются они в Web.config в разделе configuration -> extnet через атрибут theme. Давайте посмотрим на тему Slate.

image

Другие параметры которые вы можете настроить для Ext.NET через Web.config вы можете посмотреть в файле Ext.NET.README.txt, который находится в папке App_Readme.

image

Большую часть из них вы можете настроить и на самой странице через ResourceManager, но они будут применимо только к этой странице. Например, тему на странице вы можете изменить так:

<ext:ResourceManager runat="server" Theme="Access"  />


image

Рассмотрим наиболее часто используемые параметры, которые возможно вам потребуются или просто будут интересны:

  • scriptAdapter – имеет следующие значения: «Ext», «jQuery», «Prototype», «YUI». Ext.NET на клиенте использует Ext JS, который по-умолчанию основывается на так называемом Ext JS Core. Он предоставляет базовые возможности по манипуляции DOM моделью, анимацию и прочее, своего рода jQuery от Ext JS. Но Ext JS может использовать и другие фреймворки и называет он их адаптерами. Вы можете использовать jQuery, Prototype, YUI. Зачем это нужно? Ну затем, что допустим вы в своем проекте уже используете jQuery, что для ASP.NET не редкость и вместо того чтобы подгружать еще и скрипты ExtJs Core, вы указываете jQuery и вы экономите на загрузке страницы;
  • disableViewState – принимает либо «true», либо «false». Позволяет отключить ViewState. Зачем это нужно и когда это не нужно вы можете прочитать в этих статьях habrahabr.ru/blogs/net/119537 и www.aspnet.com.ua/Blog/blog-155.aspx. В свою очередь замечу, что в моей практике я всегда стараюсь избегать использования ViewState;
  • scriptMode – имеет два значения: «Release», «Debug». Используется для указания загружать минифицированные или читаемые скрипты для отладки. Разницу в размере вы можете посмотреть с помощью FireBug для FireFox. Кстати, этот плагин я вам настоятельно рекомендую, если он у вас еще не стоит. С помощью него можно отлавливать большое количество ошибок.


image

image

Ну ладно, начало заложено, вы пока можете посмотреть, что же такого понаписали в Ext.NET.Default.aspx
авторы, также рекомендую посмотреть примеры examples.ext.net и почти полный пример всех компонентов Ext.NET examples.ext.net/#/Getting_Started/Introduction/Component_Overview.

В следующих уроках будет показано создание болванки для типичного приложения вроде Outlook. В ходе работы над ним мы и поймём большую часть нюансов работы Ext.NET.

Приятного чтения!
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 36

    +1
    А для asp.net mvc есть примеры?
    –3
    «Перед вами появится полноценный рабочий стол, вроде того что находится в MS Windows. Окна, кнопка Start, графики и многое другое доступно вам. Не правда ли, интересные возможности?»
    Вот когда я вижу такое в качестве примера работы контролов для веба, я сразу ухожу и больше никогда не возвращаюсь.

    Веб — это веб, не надо впихивать в него десктопные парадигмы.
      +4
      Есть инструмент и вы можете сами решать делать вам Desktop, Metro style или что-то еще.

      Ведь кроме Desktop в Ext.NET есть очень много других вещей, например графики, таблицы, разнообразные HTML-контролы.

      Просто большинство пользователей привыкли именно к Windows интерфейсу и здесь показан пример того как это можно сделать.
        0
        Ну, вы же выбрали именно этот пример. И если посмотреть, то большая часть контролов реализована именно повторяя (идейно) desktop-приложение.
          0
          Это плохо для Intranet?
            –2
            Да.
            +1
            В случае с корпоративными продуктами(например, CRM) десктопные парадигмы очень даже актуальны
              0
              Почему бы тогда не использовать десктопное приложение вместо насилия над браузером?
                0
                Ну браузер все стерпит. Тем более использовать браузер в данном случае и легче и удобнее. Хотя бы можно до какой-то степени не зависеть от ОС
                  0
                  Это вам так кажется. А в реальности чем больше мы пытаемся сделать из браузера десктопный клиент с присущим ему поведением, тем больше кода мы тратим на поддержание этой видимости, вместо того, чтобы тратить его на бизнес.

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

                  Ну и да, для корпоративного приложения «не зависеть от ОС» — это достаточно смешное требование. В реальности там обычно наоборот, хотят как можно более плотную интеграцию с существующими сервисами, и тут как раз боаузер только мешает.
                    0
                    Вот что бы не тратить «на поддержание этой видимости» и заняться бизнес-логикой и удобно использовать подобные фреймворки.

                    Гугль != интранет приложению. В Гугле есть команда отвечающая за интерфейс и другая, отвечающая за логику. Они могут себе это позволить.

                    Извините но «плохому танцору» может и браузер мешать. Кроме независимости от ОС вы забываете что веб поддерживать и распространять проще, не говоря уж о модных нынче облаках.

                      0
                      «Вот что бы не тратить «на поддержание этой видимости» и заняться бизнес-логикой и удобно использовать подобные фреймворки.»
                      Ну вот опыт показывает, что пока ни один подобный фреймворк, в итоге, не избавил от необходимости бороться с природой веба для того, чтобы имитировать там десктоп.

                      «Извините но «плохому танцору» может и браузер мешать.»
                      Несомненно. Но в реальности одна интеграция с ЭЦП (а это реальное требование в корпоративной среде) и корпоративной же аутентификацией (например, AD) уже стоят дикого геморроя.

                      «Кроме независимости от ОС вы забываете что веб поддерживать и распространять проще, не говоря уж о модных нынче облаках.»
                      Ну, облака тут вообще не при чем, используйте SOA и будет вам счастье. А что касается легкости поддержки и распространения — так в корпоративной среде это тоже не проблема, по большому счету.

                      Ну и да, я ничего не имею против веб-приложений в корпоративной среде, я просто не понимаю, зачем их делать по модели десктопных.
                      0
                      А может быть, это вам так кажется))
                        0
                        Что именно мне кажется?
                          0
                          Не знаю, что конкретно. Но вы написали, что мне что-то кажется, поэтому я решил повторить этот впечатляющий во всех смыслах довод))
                            0
                            Я свое мнение (в части «браузер все стерпит») по крайней мере как-то обосновал.
                              0
                              Хорошо, если вы это называете обоснованием, то я также «обосную».
                              Во-первых, если мы берем интерфейс, то с помощью html+javascript построить можно все что угодно, абсолютно не прилагая усилий. Тот же xaml, например, для построения классного представления использует преимущества декларативной разметки(во-многом заимствованной у html), а css и javascript легко справляются с любой анимацией.
                              Во-вторых, отделение логики на сервере от шаблонов интерфейса гораздо проще и приятнее делать в случае с веб-приложением.
                              И в третьих, это действительно проще.
                                0
                                Приложение, особенно корпоративное, состоит не только из интерфейса. В частности, корпоративным приложениям свойственным всякие «мелкие детали», навроде интеграции с корпоративной политикой безопасности, сторонними системами, ЭЦП и так далее. И вот со всем этим в браузере крупные проблемы.
                                  0
                                  Со сторонними системами интеграция просто отличная, особенно, если делать правильно и через сервер, потому как клиентская часть это только видимость, так и должно, кстати, быть
                                    0
                                    Интересно, как вы «через сервер» откроете соответствующее окно нужного приложения на клиенте.
                                      0
                                      А вот это уже специфические функции, которые да, являются недостатком данного подхода. Впрочем, можно сделать и это. Тут недавно был отчет с конференции, там был довольно интересный доклад по NPAPI, NaCl…
                                        0
                                        Да все можно сделать, просто вопрос времени, которое на это тратится. Собственно, о чем я и писал с самого начала.
                                          0
                                          Тут можно поспорить, базовые функции сделать в веб-приложении легче и быстрее, а специфические, конечно, дольше делать
                                            0
                                            При опоре на фреймворк (не важно, какой, важно, что достаточно развитый) базовые функции делаются везде за одинаковое время.
                                              0
                                              Не согласен, ибо сталкивался)
                                                0
                                                Я тоже сталкивался. На вебе типовые (для корпоративки) вещи занимают дольше. Вопрос квалификации? Несомненно. Только это в обе стороны работает.
                    0
                    Есть принципиальные различия между десктопными и веб-приложениями, здесь надо смотреть исходя из требований задачи. Это довольно понятно написано тут: otvety.google.ru/otvety/thread?tid=0847cfb224ca9f22

                    Но сейчас тенденция в разработке именно в развитии веба и переносу идей и приложений с десктопа в веб (облако) т.к. в подавляющем количестве задач плюшек от использования именно веба больше.

                    Но еще раз подчеркну, что всегда надо исходить из требований задачи и желаний заказчика.
                      0
                      «Есть принципиальные различия между десктопными и веб-приложениями, здесь надо смотреть исходя из требований задачи.»
                      Я знаю. Непонятно, зачем реализовывать web-приложение с интерфейсом десктопного.

                      «Но сейчас тенденция в разработке именно в развитии веба и переносу идей и приложений с десктопа в веб (облако)»
                      Угу. И если посмотреть на эти приложения, то они по большей части используют именно веб-интерфейс (или полноценные толстые клиенты).
            0
            Спасибо за обзор, ждем продолжения.
              0
              сравнивал с extGWT, как-то не впечатлило. Может бета лучше стала. Это конечно если для вас язык программирования не священная корова.
                0
                А можно поконкретнее в чем отличия и минусы? Просто с extGWT не работал и вопрос не в языке, а в целой платформе (на Java давно не было проектов).
                0
                не разобрался — он платный или нет?
                  0
                  Про их лицензию можно почитать тут.

                  Коммьюнити лицензия бесплатная, вроде бы на основе GNU AGPLv3.

                  Карта выбора их лицензии (есть по ссылке):

                  image

                  Самая дешевая лицензия на одного разработчика стоит $329. Прайсы тут.

                Only users with full accounts can post comments. Log in, please.