Главная > .NET > Вышел Telerik Extensions for ASP.NET MVC Q3 2011

Вышел Telerik Extensions for ASP.NET MVC Q3 2011

16 ноября вышла новая версия Telerik Extensions for ASP.NET MVC.

Данная версия продукта характеризуется рядом нововведений: появились новые скины (темы) в стиле Metro, в элемент управления Chart были добавлены 3 новых типа диаграмм, в элементе управления Editor появилась поддержка навигации с помощью клавиатуры, добавилось много новых возможностей в элемент управления Grid и т.д.

Рассмотрим более подробно нововведения данной версии:

  1. Поддержка новых браузеров. Как обычно, в Telerik Extensions for ASP.NET MVC реализована поддержка самых последних версий основных браузеров. В данном выпуске разработчики официально объявили о поддержке недавно вышедших Mozilla FireFox 8 и Google Chrome 15.
  2. Обновление версии jQuery. С момента выхода версии Q1 2011 долгое время не обновлялась библиотека jQuery, включаемая в поставку. В данном релизе, библиотека наконец-то была обновлена до версии 1.6.4.
  3. Новые скины (темы) в Metro-стиле. В последнее время, благодаря популярности телефонов на базе Windows Phone 7 и анонсированию предварительной версии Windows 8 стало модным использовать Metro-стиль в дизайне веб-сайтов. В качестве примеров можно привести следующие сайты: Patterns & Practices Summit Russia 2011, Русский MSDN и Русский TechNet. Данная тенденция не обошла стороной и новую версию Telerik Extensions for ASP.NET MVC, в которую был добавлен скин Metro Blue.


    Рис. 1.1. Новый скин Metro Blue

    В качестве, примера использования нового скина рекомендую посмотреть элемент управления Editor:


    Рис. 1.2. Элемент управления Editor, к которому применен скин Metro Blue

    К сожалению, при разработке данного скина не были соблюдены все принципы Metro-дизайна. Например, всплывающее окно, создаваемое с помощью элемента управления Window, имеет декоративную тень.
    Кроме скина Metro Blue, входящего в поставку, есть еще 5 разноцветных Metro-скинов (Red, Magenta, Orange, Lime и Green), которые можно загрузить с сайта Telerik Skin Sharing Portal.

  4. Расширенная поддержка мобильных устройств. Сейчас устройства с сенсорным вводом приобретают все большую популярность, и поэтому в новой версии продукта компания Telerik ввела в свои элементы управления (Grid, TreeView, Slider, Splitter и Window) поддержку касаний и перетаскивания.
  5. Chart. Данная версия продукта привнесла в элемент управления Chart следующие нововведения:
    1. Новые типы диаграмм. Появились 3 новых типа диаграмм: круговая диаграмма (pie), диаграмма рассеяния (scatter) и линейная диаграмма рассеяния (scatter line).


      Рис. 2.1. Пример круговой диаграммы


      Рис. 2.2. Пример диаграммы рассеяния


      Рис. 2.3. Пример линейной диаграммы рассеяния

    2. Клиентский метод svg(). Метод svg экспортирует текущее представление диаграммы в строку. Возвращаемая методом строка – это самостоятельный SVG-документ, который может быть использован как есть или преобразован в другие форматы с помощью сторонних инструментов таких как: Inkscape и ImageMagick. Обе программы предоставляют интерфейс командной строки, который подходит для реализации серверной обработки SVG-документов.

      Листинг 1.1. Пример реализации экспорта диаграммы с помощью метода svg

      <script type="text/javascript">
          var chart = $('#chart').data('tChart');
          var svg = chart.svg();
      
          $.post("/myapp/export-service", svg, function(data) {
              $(document.body).append(
                  $("<img />", { src: data })
              );
          });
      </script>
      

  6. Grid. В данной версии продукта в элемент управления Grid были добавлены следующие возможности:
    1. Меню выбора столбцов. Меню выбора столбцов (Column chooser) – это контекстное меню, вызываемое щелчком правой кнопки мыши по заголовку столбца. Контекстное меню содержит список чекбоксов, с помощью которых можно управлять отображением столбцов (демонстрация).


      Рис. 3.1. Grid с меню выбора столбцов

      Листинг 2.1. Включение меню выбора столбцов

      @(Html.Telerik().Grid<EditableProduct>()
          .Name("Grid")
          .ColumnContextMenu() // включает меню выбора столбцов
      )
      

    2. Столбец внешнего ключа. Данный тип столбца предназначен для отображения связанных с внешним ключом данных. Связанные данные должны быть представлены либо как SelectList, либо как IEnumerable.

      Листинг 2.2. Пример кода Grid`а, содержащего столбец внешнего ключа

      @(Html.Telerik().Grid<ClientEditableOrder>()
          .Name("Grid")
          .DataKeys(keys =>
          {
              keys.Add(o => o.OrderID);
          })
          .Columns(columns =>
          {
              columns.Bound(o => o.OrderID);
              // Настраиваем столбец внешнего ключа
              columns.ForeignKey(o => o.EmployeeID, 
                  (IEnumerable)ViewData["employees"], "ID", "Name"); 
              columns.Bound(o => o.OrderDate);
              columns.Bound(o => o.Freight);
              columns.Command(commands => commands.Edit());
          })
          .Pageable()
      )
      

      При переключении в режим редактирования содержимое ячейки с внешним ключом будет отображаться с помощью элемента управления DropDownList (демонстрация). Данное поведение можно изменить путем модификации шаблона редактирования (editor template) GridForeignKey.


      Рис. 3.2. Grid со столбцом внешнего ключа в режиме редактирования

    3. Пользовательские команды. В Grid была добавлена возможность выполнять пользовательские команды с помощью командных столбцов. Пользовательские команды могут быть сконфигурированы для вызова действий контроллера, как с помощью серверных запросов, так и Ajax-запросов (демонстрация). Пользовательскую команду можно задать с помощью следующего кода:

      Листинг 2.3. Пример кода Grid`а, содержащего пользовательскую команду

      @(Html.Telerik().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
          {
              ...
              // Задаем пользовательскую команду
              columns.Command(commands => commands
                  // Имя пользовательской команды
                  // (используется для того, чтобы различать
                  // несколько пользовательских команд)
                  .Custom("viewDetails")
                  // Задаем текст кнопки
                  .Text("Customer Details")
                  // Указываем какие поля из источника
                  // данных нужно включить в маршрут, чтобы
                  // передать их значения в качестве
                  // параметров действию контроллера
                  .DataRouteValues(route => route
                  	.Add(o => o.OrderID)
                  	.RouteKey("orderID")
                  )
                  // Указываем, что будем использовать Ajax-запросы
                  .Ajax(true)
                  // Указываем действие контроллера
                  .Action("ViewDetails", "Grid"))
          })
          ...
      )
      

    4. Изменения в клиентском API. У Grid`а появилось новое событие OnComplete, которое возникает при завершении Ajax-запроса. Также в клиентский API были добавлены методы для отображения/сокрытия (show/hide) столбцов.
    5. Удалены CSS-классы t-last и t-header-last. CSS-классы t-last и t-header-last больше не используются при генерации HTML-разметки Grid`а.
  7. Editor. В элемент управления Editor добавлена интуитивная поддержка клавиатуры (клавиши быстрого доступа), что делает его более доступным для людей с ограниченными возможностями (демонстрация).
  8. TreeView. В клиентский API TreeView были добавлены методы findItemByText и findItemByValue, обеспечивающие поиск элементов по их тексту и значению.
  9. Upload. В конфигурационный метод Save элемента управления Upload, с помощью которого настраиваются параметры вызова действия контроллера, отвечающего за сохранение файлов, добавлен дополнительный параметр fieldName. С помощью параметра fieldName можно задать имя поля формы, которое будет использоваться для отправки файлов. Если не указать данный параметр, то будет использоваться имя элемента управления Upload.
  10. Исправление ошибок и недоработок. В элементах управления NumericTextBox, DatePicker и Slider больше не пробрасывается исключение, когда значение выходит за пределы заданного диапазона. Кроме того, был исправлен ряд небольших ошибок в следующих элементах управления: Grid, Editor, TreeView, Window, NumericTextBox, Date/Time Pickers, ComboBox, Upload, Slider, Menu, TabStrip и Chart.

С полным списком изменений можно ознакомится на сайте Telerik.

Реклама
Рубрики:.NET Метки: , ,
  1. Комментариев нет.
  1. No trackbacks yet.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: