Ignite UI, что это за программа для Android

Обновлено: 02.07.2024

Библиотека jQuery стала одной из наиболее широко используемых библиотек JavaScript в Интернете. Уровень абстракции браузера jQuery вместе со встроенным механизмом выбора DOM делают библиотеку надежной платформой для создания компонентов пользовательского интерфейса и элементов управления. Библиотека пользовательского интерфейса jQuery, созданная на основе ядра jQuery, предоставляет виджеты и взаимодействия для разработки высокоинтерактивных и отзывчивых пользовательских веб-интерфейсов.

Преимущества использования jQuery включают в себя:

  • Кроссбраузерная поддержка
  • Расширяемость плагинов
  • Манипуляция CSS
  • Вспомогательные функции
  • AJAX
  • Эффекты и анимация
  • Общая структура стилей с пользовательским интерфейсом jQuery
  • Высокая производительность пользовательского интерфейса
  • Многофункциональные виджеты пользовательского интерфейса
  • Поддержка HTML 5 и резервный вариант

Разработка на стороне клиента с использованием jQuery, пользовательского интерфейса jQuery и HTML5

За последние несколько лет все основные поставщики браузеров значительно улучшили производительность JavaScript. Эти улучшения в сочетании с появлением стандартов HTML 5 сделали веб-приложения первоклассными гражданами в современных вычислительных средах. Интерфейс Ignite UI для jQuery™ создан для удовлетворения потребностей современных веб-приложений благодаря облегченным, полнофункциональным компонентам пользовательского интерфейса с поддержкой сенсорного ввода, включая:

  • Диаграммы
  • Датчики
  • Каркас движения
  • Поле со списком
  • Загрузчик ресурсов JavaScript и CSS
  • Менеджер макетов
  • Сетка и иерархическая сетка с выбором, сортировкой, фильтрацией, разбивкой по страницам, обновлением, группировкой, скрытием столбцов, изменением размера, селекторами строк, подсказками, сводками столбцов, редакторами, виртуализацией, многостолбцовыми заголовками, поддержкой REST, перемещением столбцов.
  • Сводная сетка
  • Штрих-код QR
  • Текстовый редактор
  • Редактор масок
  • Редактор дат
  • Числовой редактор
  • Процентный редактор
  • Редактор валют
  • Выбор даты
  • Диалог
  • Разделитель
  • Система шаблонов
  • Дерево с перетаскиванием
  • Диспетчер плиток
  • Загрузка файла
  • Видеоплеер HTML 5
  • Редактор HTML
  • Рейтинг

Разработка на стороне мобильного клиента с помощью jQuery Mobile

JQuery Mobile Framework – это унифицированная система пользовательского интерфейса на основе HTML5 для всех популярных платформ мобильных устройств, построенная на надежной основе jQuery и пользовательского интерфейса jQuery. Его легкая кодовая база построена с прогрессивным улучшением и имеет гибкий, легко изменяемый дизайн. Мобильные устройства становятся популярным способом доступа к веб-приложениям по сети. Многие мобильные браузеры также соответствуют стандартам HTML5, CSS3 и JavaScript в той же степени, что и их настольные аналоги. Ignite UI for jQuery™ создан для удовлетворения потребностей мобильных веб-приложений благодаря легким, полнофункциональным и сенсорным компонентам пользовательского интерфейса, включая:

  • Список
  • Рейтинг с нулевой поддержкой и наведением
  • Кнопка
  • Флажок
  • Группа флажков
  • Ссылка
  • Список
  • Панель навигации
  • Страница
  • Контент страницы
  • Нижний колонтитул страницы
  • Контент страницы
  • Всплывающее окно
  • Группа переключателей
  • Выбрать меню
  • Слайдер
  • Текстовое поле
  • Переключатель

Параметры на стороне сервера

Архитектура продукта

Виджеты пользовательского интерфейса jQuery

Компоненты пользовательского интерфейса в Ignite UI для jQuery созданы на основе платформы пользовательского интерфейса jQuery. Это означает, что они создаются и запускаются в браузере и в большинстве случаев не требуют разработки сервера. Платформа пользовательского интерфейса jQuery предоставляет общий API, темы и модель взаимодействия для элементов управления, которые знакомы всем, кто уже использует jQuery и пользовательский интерфейс jQuery.

Клиентский источник данных

Компонент источника данных, igDataSource, представляет собой клиентский класс JavaScript, который манипулирует данными посредством привязки данных, разбиения по страницам, сортировки и фильтрации коллекций данных, как локальных для клиента, так и удаленных от веб-сервера. Поддерживаемые форматы удаленных данных включают: REST, JSON, XML, JSONP и oData. Для создания управляемых данными веб-приложений не требуется привязка данных на стороне сервера, а операции привязки данных доступны для клиента, где Ajax может поддерживать беспрепятственную связь между клиентом и сервером.

Запустить пользовательский интерфейс для MVC

Пользовательский интерфейс Ignite для MVC обеспечивает гибкость при реализации различных шаблонов ViewModel на стороне сервера. Вспомогательный API также поддерживает свободный синтаксис для использования в шаблонах Web Forms и Razor View Engine.

Темы Infragistics и ThemeRoller

В интерфейсе Ignite для виджетов jQuery, как и в других виджетах jQuery, для оформления используется CSS Framework пользовательского интерфейса jQuery. В продукт включены настраиваемые темы пользовательского интерфейса jQuery, включая инфрагистику и метро.

Тема Infragistics обеспечивает профессиональный и привлекательный дизайн для всех виджетов Infragistics и стандартных виджетов пользовательского интерфейса jQuery. Тема metro обеспечивает внешний вид пользовательского интерфейса Metro для элементов управления Ignite UI для jQuery для будущих версий Microsoft® Windows®.

Для мобильных элементов управления в библиотеку Ignite UI for jQuery включены шесть тем, обеспечивающих собственный стиль для платформ мобильных устройств, включая Android, iOS и Windows Phone. Для Android предусмотрено три разных набора цветов: holodark, hololight, hololightdark. Тема Windows Phone также имеет два разных внешнего вида: темный и светлый. Тема ios обеспечивает естественный внешний вид для устройств, работающих на платформе iOS.

ThemeRoller – это инструмент, предоставляемый jQuery UI и jQuery Mobile, который упрощает создание пользовательских тем, совместимых с jQuery UI и виджетами jQuery Mobile. Многие готовые темы доступны для загрузки для использования на вашем веб-сайте. Виджеты Infragistics jQuery поддерживают использование тем ThemeRoller.

Образцы и установка

Запустить интерфейс командной строки

Самый простой способ начать работу с Ignite UI для jQuery — через интерфейс командной строки Ignite UI. Это инструмент для инициализации, разработки, формирования и поддержки приложений в самых разных средах. Интерфейс командной строки предоставляет вам предварительно определенные шаблоны для пользовательского интерфейса Ignite для элементов управления jQuery.
Вы можете создавать проекты и добавлять элементы управления Ignite UI для jQuery в jQuery, Angular или React, выполняя те же самые команды.
При создании вашего приложения Ignite UI для jQuery будет автоматически установлен в ваш проект как модуль npm. Это означает, что вам не нужно будет устанавливать вручную и управлять необходимыми ресурсами — выполните несколько простых команд, и интерфейс командной строки сделает всю работу за вас!

Майкрософт Windows

С веб-сайта Infragistics можно загрузить автоматический установщик для Windows, который установит следующие компоненты:

Другие операционные системы

С веб-сайта Infragistics также можно загрузить пакет, который включает следующее:

  • Ресурсы JavaScript
  • Темы и CSS
  • Начало работы
  • Демонстрации HTML
  • Справочная документация

Примечание. Пакет пробной загрузки содержит только уменьшенные файлы JavaScript и CSS.

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

Упростите разработку с помощью набора инструментов Infragistics Ultimate UI/UX, предлагающего обширную библиотеку элементов управления пользовательского интерфейса корпоративного уровня и инструментов совместной разработки UX с Indigo.Design — комплексной системой от проектирования до кода, объединяющей прототипирование, системы проектирования, пользовательское тестирование, создание приложений и генерация кода.

Infragistics Ultimate, пример приложения Task Planner для управления задачами, разработанными с помощью веб-компонентов Ignite UI.

Полный набор инструментов для разработчиков

Создавайте, модернизируйте и преобразовывайте свое следующее приложение — для любого устройства на любой платформе.

WYSIWYG drag & drop App Builder с предварительным кодом для Angular и Blazor

Проектируйте и создавайте настоящие приложения с молниеносной скоростью

App Builder™ – это новая облачная интегрированная среда разработки с функцией перетаскивания, основанная на технологии WYSIWYG, которая упрощает проектирование и разработку пользовательского интерфейса, поэтому вы можете создавать бизнес-приложения быстрее, чем когда-либо. Выберите из библиотеки готовых шаблонов приложений или адаптивных макетов экрана или вставьте файл Sketch или Adobe XD. Настраивайте с помощью набора инструментов, состоящего из более чем 60 элементов управления пользовательского интерфейса и более 65 диаграмм, а затем создавайте код Angular или Blazor всего за несколько кликов.

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

Список платформ, которые Infragistics Ultimate поддерживает: jQuery, Angular, React, ASP.NET Core, веб-компоненты, Blazor и ASP.NET MVC.

Современный адаптивный веб-интерфейс

"Даже если компании нужен только элемент управления сеткой данных, я бы порекомендовал Infragistics, потому что элемент управления уже стоит цены всего пакета."

Приложение Cash Flow, показывающее приток и отток активов на основе элементов управления пользовательского интерфейса Infragistics Ultimate для разработки настольных компьютеров.

Настольные приложения в стиле Office

"Нам нужны высокопроизводительные элементы управления и компоненты, которые были протестированы и задокументированы. У нас нет разработчиков средств управления, поэтому мы полагаемся на Infragistics. Они являются для нас партнером, а не просто поставщиком."< /p>

Кроссплатформенные платформы — Xamarin, UWP, WinUI и Uno

Создание кроссплатформенных приложений для Интернета, мобильных устройств, ПК и других приложений

Для разработчиков, создающих многоплатформенные приложения, Infragistics Ultimate теперь включает новые наборы инструментов для пользовательского интерфейса Windows (WinUI), универсальной платформы Windows (UWP) и платформы Uno. Эти наборы инструментов для предварительного просмотра включают в себя диаграммы, сетки, календарь, средства ввода данных и многое другое, что позволяет разработчикам создавать приложения из единого источника, которые могут работать в Интернете, на мобильных устройствах и на настольных компьютерах.

Для разработчиков, создающих приложения Xamarin.Forms, Xamarin.iOS, Xamarin.Android, Objective-C или Java для современных мобильных устройств, Infragistics Ultimate предлагает полный набор инструментов для Xamarin, включающий десятки элементов управления пользовательского интерфейса, включая диаграммы, сетки, календарь, ввод данных и многое другое. Обеспечьте высокопроизводительный, совместимый с платформой пользовательский интерфейс на мобильных устройствах любого форм-фактора.

Ускорьте создание приложений от дизайна до кода

Indigo.Design — это цифровая платформа для разработки продуктов, которая объединяет прототипирование пользовательского интерфейса, системы проектирования, пользовательское тестирование, создание приложений и генерацию кода, чтобы исключить передачу дизайна и сократить дорогостоящие итерации, что обеспечивает настоящую совместную работу по дизайну и разработке UX.

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

Прототипирование пользовательского интерфейса Indigo.Design, дизайн-системы и пользовательское тестирование с генерацией кода

Что нового в Infragistics Ultimate 21.2

Выберите план, который подходит именно вам!

Единственный полный набор инструментов UX/UI и решение для создания кода для веб-сайтов, мобильных устройств и настольных компьютеров.

Многолетняя скидка

Обширная библиотека компонентов пользовательского интерфейса для Интернета, мобильных устройств и компьютеров.

Многолетняя скидка

Истории, которые действительно важны

Более двух миллионов разработчиков используют наборы инструментов Infragistics UX и UI для поддержки и ускорения разработки своих приложений.

Группа логотипов клиентов Intuit, Exxon и Morgan Stanley, использующих элементы управления разработчика Infragistics
Bank of America и логотипы клиентов группы Blue Yonder, которые используют Разработчик инфраструктуры управляет
Pedrello, PTV Group и логотипы клиентов группы Ikea, использующие элементы управления разработчика Infragistics
Super Stream, Pasona Tech и логотипы группы Battelle, использующие элементы управления разработчика Infragistics

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

Фуджитсу

Fujitsu полагается на инструменты Infragistics Ultimate, позволяющие им экономить время и деньги, а также предлагать своим клиентам более широкий набор решений и UX. Подробнее

Красивые приложения с исходным кодом

Не нужно изобретать велосипед. Начните свой следующий проект с помощью одного из наших красиво оформленных полнофункциональных эталонных приложений. Загрузите код и сделайте его своим!

Справочное приложение Angular для финансов

Angular – Планировщик задач

Приложение "Планировщик задач" эффективно для управления проектами и сценариями, связанными с проектами, включая фильтрацию и сортировку задач, редактирование задач и добавление новых задач. Приложение улучшено с помощью простого перетаскивания UX.

Панель управления президентскими выборами в США

США Панель управления президентскими выборами

Встроенная в Blazor (WASM) с использованием пользовательского интерфейса Ignite для Blazor панель мониторинга президентских выборов в США обеспечивает интерактивную визуализацию данных о выборах вплоть до выборов 2020 года с использованием нашей таблицы данных Blazor.

Приложение Team Collaboration демонстрирует задачи и информационные панели

Сотрудничество в команде

Встроенное в Angular с помощью App Builder приложение Team Collaboration демонстрирует два основных модуля: макет с задачами и набор панелей мониторинга. Просто перетащите компоненты пользовательского интерфейса, просмотрите код в реальном времени и нажмите, чтобы опубликовать его на GitHub.

Присоединиться к беседе

Выпуск App Builder с поддержкой Swagger, локальной версией и другими функциями

Выпуск App Builder с поддержкой Swagger, локальная версия и многое другое

Выпущено мартовское обновление App Builder(tm) с некоторыми важными обновлениями. Если вы впервые узнаете об App Bui.

Ignite UI для версии Angular 13.1.0

Пользовательский интерфейс Ignite для версии Angular 13.1.0

Пришло время для нашего первого крупного релиза в 2022 году, Ignite UI для Angular 13.1.0, который включает в себя одно из самых мощных средств управления.

Выпуск App Builder с Blazor, настольным приложением и другими функциями

Выпуск App Builder с Blazor, настольным приложением и другими компонентами

Вышло декабрьское обновление App Builder, в котором есть несколько важных обновлений. В течение последних нескольких месяцев мы обновили продукт App Builder.

Часто задаваемые вопросы

Вопросы и ответы по Infragistics Ultimate

Что такое Infragistics Ultimate?

Что отличает Infragistics Ultimate от других наборов инструментов UX/UI?

Infragistics Ultimate – это единственное в своем роде решение, объединяющее полный набор инструментов UX/UI и решение для создания кода для дизайнеров и разработчиков настольных, веб- и мобильных приложений. Опираясь на более чем 30-летнее лидерство Infragistics в отрасли и отмеченную наградами поддержку в реальном времени, Infragistics Ultimate предоставляет вам все необходимое для создания прекрасных приложений на любой платформе или платформе.

Как работает ценообразование и лицензирование Infragistics Ultimate?

Infragistics Ultimate лицензируется по модели подписки. Стоимость одной лицензии разработчика для Infragistics Ultimate начинается от 1495 долларов США за годовую подписку, включая один год стандартной поддержки и обновлений. Это наилучшее значение для разработчиков и команд, создающих настольные, веб- и/или мобильные приложения с упором на взаимодействие с пользователем (UX). Мы также предлагаем скидки на многолетние лицензии. Пожалуйста, обратитесь к нашей странице цен для получения дополнительной информации о ценах.

Как начать работу с Infragistics Ultimate?

Лучшим местом для начала работы будет наша документация и начальные материалы для каждого из наших наборов инструментов.

Где найти образцы компонентов и примеры приложений?

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

Поддерживает ли Infragistics Ultimate специальные возможности (a11y)?

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

Поддерживает ли Infragistics Ultimate интернационализацию (i18n)?

Сотни элементов управления и компонентов пользовательского интерфейса для всех основных веб-фреймворков, включая самые быстрые таблицы данных и диаграммы данных на планете, а также совершенно новый App Builder™ для Angular и Blazor!

Полные библиотеки пользовательского интерфейса

  • JQuery
  • Реагировать
  • Веб-компоненты

Приложение Angular Task Planner с сеткой данных, отображающей задачи

Конструктор приложений WYSIWYG с возможностью перетаскивания и кодом предварительного просмотра для Angular и Blazor

Проектируйте и создавайте настоящие приложения с молниеносной скоростью

App Builder™ – это новая облачная интегрированная среда разработки с функцией перетаскивания, основанная на технологии WYSIWYG, которая упрощает проектирование и разработку пользовательского интерфейса, поэтому вы можете создавать бизнес-приложения быстрее, чем когда-либо. Выберите из библиотеки готовых шаблонов приложений или адаптивных макетов экрана или вставьте файл Sketch или Adobe XD. Настраивайте с помощью набора инструментов, состоящего из более чем 60 элементов управления пользовательского интерфейса и более 65 диаграмм, а затем создавайте код Angular или Blazor всего за несколько кликов.

Проектируйте и создавайте настоящие приложения с молниеносной скоростью

App Builder — это новая облачная интегрированная среда разработки с функцией перетаскивания, основанная на технологии WYSIWYG, которая упрощает проектирование и разработку пользовательского интерфейса, поэтому вы можете создавать бизнес-приложения быстрее, чем когда-либо прежде. Выберите из библиотеки готовых шаблонов приложений или адаптивных макетов экрана или загрузите файл Sketch или Adobe XD, а затем настройте его с помощью набора инструментов, состоящего из более чем 60 элементов управления пользовательским интерфейсом и более 65 диаграмм, чтобы дать толчок вашему следующему дизайну цифрового продукта!

Все, что вам нужно для создания высокопроизводительных веб-приложений

Компоненты пользовательского интерфейса для всего

Перетащите конструктор приложений WYSIWYG

App Builder предназначен для ускорения процесса разработки приложений. Благодаря полному набору элементов управления пользовательского интерфейса, начальных макетов, шаблонов и полных приложений, а также интеграции с инструментами дизайна, такими как Sketch и Adobe XD, вы можете проектировать, создавать и выпускать приложения быстрее, чем когда-либо прежде.

Расширенный пользовательский интерфейс с непревзойденной производительностью

Мы знаем, что вы создаете сложные приложения, требующие высокой производительности и скорости. Ignite UI включает в себя элементы управления пользовательским интерфейсом, которые понравятся вашим пользователям, такие как электронные таблицы, библиотека Excel, сводная сетка, иерархическая сетка и даже DockManager, оконный UX, похожий на рабочий стол. И мы с самого начала заботимся о производительности — наши данные в режиме реального времени и высокопроизводительный рендеринг не имеют себе равных на рынке.

Непревзойденная поддержка продуктов

Поддержка круглосуточной поддержки по телефону, в чате, на форумах и через специальных менеджеров по работе с клиентами в офисах по всему миру. Полная документация, образцы компонентов, образцы приложений и многое другое.

Создание приложений, которые всегда хорошо выглядят

Не беспокойтесь о том, как ваше приложение выглядит в разных браузерах, поскольку Ignite UI поддерживает современные браузеры и совместим со старыми. А благодаря нашим встроенным темам, поддержке пользовательских тем, поддержке тем Bootstrap, поддержке Theme Roller и мгновенному преобразованию Bootstrap в Theme Roller — ваши приложения будут хорошо выглядеть независимо от того, какую платформу вы выберете!

Визуализация данных и информационные панели

С помощью более чем 65 типов диаграмм и рядов вы можете создавать красивые интерактивные диаграммы и информационные панели. А с помощью Motion Framework вы можете рассказать историю своих данных таким образом, чтобы конечные пользователи могли испытать полностью настраиваемый иммерсивный и анимированный пользовательский интерфейс. Эта сенсорная потоковая передача в реальном времени и рендеринг больших объемов данных в сочетании с отображением миллионов точек данных на миллисекундном уровне обеспечивают исключительный опыт!

Нам доверяют лучшие в мире

С Ignite UI для Angular производительность сетки была высокой и включала улучшенный выбор строк с такими функциями, как мультиклик, использование вкладок, упрощающих ввод данных, и более удобную навигацию.

Инвестиционный банк Великобритании

Узнайте, как самый известный инвестиционный банк Англии использовал компоненты Angular Ignite UI для обновления приложения для стратегического ценообразования с помощью современного, интуитивно понятного и удобного пользовательского интерфейса. Подробнее

Популярные компоненты пользовательского интерфейса Ignite

Разработано для предприятий с уникальными функциями и непревзойденной производительностью.

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

Выберите платформу для начала

Вдохновение повсюду

Angular Reference App for Finance

Angular – Планировщик задач

Приложение Task Planner предоставляет эффективные средства для управления проектами и связанными с ними задачами.

Панель управления президентскими выборами в США

США Панель управления президентскими выборами

Встроенная в Blazor (WASM) с использованием пользовательского интерфейса Ignite для Blazor панель мониторинга президентских выборов в США обеспечивает интерактивную визуализацию данных о выборах вплоть до выборов 2020 года с использованием нашей таблицы данных Blazor.

Справочное приложение для биржевых диаграмм на React

React – приложение для работы с биржевыми диаграммами

Отслеживайте акции и стройте графики с течением времени с помощью этого надежного финансового приложения.

Что нового в пользовательском интерфейсе Ignite

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

Разработанный для полной оптимизации размера файла и скорости рендеринга, Ignite UI — единственный выбор для современного веб-интерфейса, требующего наилучшего взаимодействия с пользователем. Среди наших отличительных особенностей:

  • App Builder Повышение производительности и потрясающих возможностей с помощью облачного инструмента перетаскивания WYSIWYG, который упрощает проектирование и разработку пользовательского интерфейса. Запустите свое приложение с нуля или выберите из библиотеки готовых шаблонов приложений или адаптивных макетов экрана, а затем настройте с помощью набора инструментов из более чем 60 элементов управления пользовательским интерфейсом, чтобы дать толчок вашему следующему дизайну цифрового продукта! Все, что вы разрабатываете, будет генерировать готовый исходный код в Angular или Blazor!
  • 17 новых компонентов Blazor! Мы расширили наше предложение Blazor. 21.2 включает 17 новых элементов управления, в том числе панель навигации, форму, аватар, значок, ввод, раскрывающийся список календаря и многое другое. Это позволяет вам выйти за пределы сетки, диаграмм, геопространственных карт и других богатых элементов управления, которые мы уже поставляем, чтобы вы могли создать полноценный UX для своих приложений!
  • Новая сводная сетка и многое другое в Angular Создавайте новые интерактивные сетки с помощью сводной сетки Angular. Предоставьте своим пользователям UX Pivot, похожий на Excel, с настройкой сетки перетаскиванием, автоматическими макетами и автоматическими сводками по столбцам.

Infragistics отмечает свое 30-летие! На протяжении многих лет Infragistics строила свою стратегию на двух основных принципах: использовании новейших и лучших технологий и сосредоточении внимания на высокой производительности и скорости. Эти основные принципы обогатили разработчиков и их сообщества наборами инструментов, которые сделали разработку приятной и в то же время продуктивной.

Компания Infragistics представляет пакет Ultimate как единую платформу для UX-дизайна и разработки корпоративных приложений для Интернета, ПК и мобильных устройств. Пакет предлагает более 100 красиво оформленных высокопроизводительных сеток, диаграмм и других элементов управления пользовательского интерфейса.

Компания Infragistics продумала каждую деталь процесса жизненного цикла разработки. Они предлагают инструменты для создания прототипов, которые помогут вам сделать набросок вашего дизайна на ранней стадии разработки клиента, позволяя вам работать над UX, завершать макет и даже ориентировать разработчика на создание окончательного приложения.

В этой вводной статье об их пакете Ignite UI я рассмотрю различные платформы, поддерживаемые Infragistics, а затем подробно расскажу о пакете Ignite UI для Angular.

🔗Infragistics Ultimate Developer Toolkit

Компоненты подаются в пакетах. Например, при разработке с помощью React вы будете устанавливать только пакеты для Ignite для React.

Вот список поддерживаемых платформ и соответствующих компонентов.

Indigo Design Единое рабочее пространство для визуального дизайна, прототипирования UX и генерации кода для разработки на Angular.

Ignite UI для Angular Infragistics объединяет более 50 собственных компонентов пользовательского интерфейса на основе материалов, разработанных и созданных на платформе Angular.

Ignite UI для React Набор компонентов собственного пользовательского интерфейса для разработчиков React с высокопроизводительной сеткой данных и диаграммами больших объемов данных в режиме реального времени.

🔗Рабочий стол

Infragistics Ultimate UI для Windows Forms Этот пакет содержит более 100 полнофункциональных элементов управления пользовательского интерфейса в стиле Microsoft Office.

Infragistics Ultimate UI для WPF Этот пакет содержит собственные элементы управления пользовательского интерфейса WPF.

🔗Мобильный

Infragistics Ultimate UI for Xamarin Этот пакет содержит собственные компоненты пользовательского интерфейса Xamarin, включая диаграммы, таблицы, планирование и многое другое.

Infragistics Ultimate UI для iOS Этот пакет содержит собственные элементы управления пользовательского интерфейса для приложений iPad и iPhone.

Infragistics Ultimate UI для Android. Этот пакет содержит встроенные элементы управления пользовательским интерфейсом для Android-приложений с молниеносной скоростью.

🔗Прототип

Infragistics предлагает Indigo.Design Desktop для создания прототипов пользовательских историй, чтобы делиться ими с коллегами для просмотра и совместной работы. Это программное обеспечение поставляется в двух вариантах для компьютеров с ОС Windows и Mac OS. Вот ссылка на официальную документацию по программному обеспечению.

В дополнение ко всем перечисленным пакетам Infragistics прилагает большие усилия для предоставления удобной и обширной документации для всех своих платформ и компонентов пользовательского интерфейса. Вы можете ознакомиться с документом в любое время, посетив веб-сайт справочной документации Infragistics.

Кроме того, Infragistics предлагает набор эталонных приложений, которые вы можете просматривать, из которых можно черпать идеи и которые позволяют вам в режиме реального времени видеть, как компоненты пользовательского интерфейса используются и интегрируются в приложения. Вы можете ознакомиться с эталонными приложениями, посетив веб-сайт Галереи приложений Infragistics.

🔗Ignite UI для Angular

Infragistics уделяет большое внимание разработке своего пакета Angular. Они предлагают собственные компоненты пользовательского интерфейса для Angular, основанные на стандартах дизайна Google Material. Кроме того, они обогащают разработку приложений Angular уникальным и ценным опытом, предлагая наборы пользовательского интерфейса Sketch.

Наборы пользовательского интерфейса Sketch имеют взаимно однозначное сопоставление со всеми предлагаемыми компонентами Angular. Дизайнер открывает Sketch, загружает наборы пользовательского интерфейса Sketch, а затем проектирует экраны приложения, используя «родной» пользовательский интерфейс Ignite для компонентов Angular. Конечным результатом является прототип, который загружается в Infragistics Cloud и передается другим разработчикам, дизайнерам и заинтересованным сторонам для проверки, комментирования и использования для создания окончательного прототипа проекта.

Затем разработчики могут взять URL-адреса прототипа, перейти к Visual Studio Code как таковому, установить расширение Infragistics и создать ресурсы кода для своего приложения Angular на основе прототипа. Расширение генерирует компоненты Angular на основе экранов, запеченных внутри прототипа.

Комплект Ignite UI for Angular призван помочь разработчикам создавать современные высокопроизводительные приложения HTML 5 JavaScript для современных настольных браузеров, мобильных устройств и прогрессивных веб-приложений (PWA).

🔗Предпосылки

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

    . Вы можете использовать любой другой редактор кода, но для того, чтобы в полной мере использовать богатую поддержку, которую Infragistics предлагает для разработки на Angular, рекомендуется использовать VS Code. и НПМ. Это требование является стандартным для разработки интерфейсов с использованием Angular, React, Vue и даже ванильного JavaScript.

🔗Запустить интерфейс командной строки

Infragistics делает еще один шаг и предлагает интерфейс командной строки Ignite UI. Это интерфейс командной строки от Ingratistics.

Самый простой способ создать и сформировать приложение с помощью Infragistics — использовать интерфейс командной строки. Этот CLI используется не только с Angular, но также может использоваться для приложений React и jQuery.

Вот пошаговое руководство по созданию вашего первого приложения с помощью Ignite UI CLI.

Вы начинаете с установки интерфейса командной строки Ignite UI в качестве глобальной зависимости на вашем компьютере, введя следующую команду:

npm install -g igniteui-cli

После завершения процесса установки вы можете запустить инструмент с помощью подсказок или специальных команд.

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

Чтобы добавить новый компонент в приложение, которое вы выпускаете:

Подробнее о CLI можно прочитать на официальной странице CLI Ignite UI.

🔗Выбор угловых компонентов

Углубленное рассмотрение всех компонентов Angular сейчас бесполезно. Я выделил некоторые из них, которые меня заинтересовали, и дам вам небольшой обзор того, что предлагается.

🔗Финансовая диаграмма

Финансовая диаграмма — одна из самых популярных и продвинутых диаграмм, предлагаемых Infragistics. Этот тип диаграммы используется для визуализации финансовых данных с помощью простого и интуитивно понятного API.

Чтобы поиграть с динамическим финансовым графиком, воспользуйтесь образцом, размещенным на StackBlitz:

🔗Диаграмма данных

Infragistics Angular Data Chart — это самая обширная и многофункциональная диаграмма в Интернете на сегодняшний день. Он поддерживает композиции диаграмм (наложение нескольких диаграмм), оси, ряды, легенду и слои аннотаций. Обладая широкими возможностями настройки, он предлагает гораздо больше опций и функций.

Особенностью этой диаграммы является длинный список типов рядов, поддерживаемых по умолчанию. Список включает, но не ограничивается:

Диаграмма радиального ряда

Пример диаграммы радиального ряда:

Чтобы поиграть с живой диаграммой данных, вот образец, размещенный на StackBlitz:

Вы применяете директиву igxMask к полю ввода текста и можете управлять вводом пользователем и форматировать визуальное значение на основе настраиваемых правил маски. У вас есть богатый набор правил маскирования на выбор.

Чтобы использовать эту директиву, начните с импорта следующих модулей Angular в модуль вашего приложения:

Затем вы можете применить маску ввода внутри ваших компонентов. В приведенном ниже примере показано, как можно использовать маску ввода телефона:

Если вы хотите поиграть с живым компонентом Mask, вот образец, размещенный на StackBlitz:

🔗Навигация

Навигатор — один из моих любимых компонентов. Он обеспечивает удобную и интеллектуальную навигацию для разработки веб-приложений, которые будут использоваться на мобильных устройствах.

Navigation Drawer — это контейнер боковой навигации. Он может располагаться над содержимым, скользить по экрану или исчезать из поля зрения или закрепляться, чтобы разворачиваться или сворачиваться внутри содержимого. Компонент легко настраивается с помощью его входных свойств: режим (закрепленный, открытый, мини-вариант) и положение (справа и слева). В мини-вариантном режиме боковая панель навигации отображается только со значками вместо отображения значка и текста элемента.

Navigation Drawer

Установка и использование этого компонента ничем не отличается от остальных компонентов, предлагаемых Ignite для Angular.

Чтобы поиграть с живым компонентом Navigation Drawer, вот пример, размещенный на StackBlitz:

🔗Диспетчер компоновки

Директива Layout Manager, которая является частью пользовательского интерфейса Ignite для Angular, представляет собой оболочку поверх Flexbox. Вы можете упорядочивать и структурировать HTML-разметку, не создавая для макета ни одного селектора CSS.

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

Чтобы использовать эту директиву, начните с импорта модуля IgxLayoutModule Angular в модуль вашего приложения:

Затем вы можете применить igxLayout , igxFlex и другие связанные директивы к разметке HTML следующим образом:

Если вы хотите поиграть с работающим компонентом Layout Manager, вот образец, размещенный на StackBlitz:

🔗Сетка данных

Компания Infragistics утверждает, что разработала самую быструю высокопроизводительную сетку данных для платформы Angular.

The Grid, безусловно, является самой настраиваемой сеткой данных, существующей в настоящее время для экосистемы Angular. Команда Infragistics продумала каждую деталь, которая может понадобиться разработчику и которую он захочет настроить в Data Grid.

Функции включают привязку данных, привязку данных в реальном времени (потоковую передачу данных), редактирование, редактирование строк, разбиение по страницам, фильтрацию, расширенную фильтрацию, сортировку, группировку, перемещение столбцов, закрепление столбцов, изменение размера столбцов, скрытие столбцов, поиск, панель инструментов, -заголовок столбца, экспорт в Excel, вставка из Excel и многое другое.

У вас есть версия Infragistics электронных таблиц Excel!

Data Grid

Импорт и использование сетки данных не может быть проще!

Начните с импорта модуля IgxGridModule Angular в модуль приложения:

Чтобы встроить сетку данных в HTML-разметку, добавьте следующий компонент:

Чтобы сослаться на сетку данных из кода программной части компонента Angular, добавьте следующее:

Начать использовать компонент Data Grid для Angular так просто!

Ознакомьтесь с подробными документами Infragistics, чтобы узнать больше о настройке и включении дополнительных функций в Data Grid.

Если вы хотите поиграть с действующим компонентом Data Grid, вот образец, размещенный на StackBlitz:

🔗Библиотека Excel

Библиотека Excel входит в состав пользовательского интерфейса Ignite для Angular. Библиотека Infragistics Angular Excel позволяет работать с данными электронных таблиц, используя знакомые объекты электронных таблиц Microsoft Excel, такие как рабочие книги, рабочие листы, ячейки, формулы и многие другие.

Вы можете экспортировать данные своего приложения в лист Excel, а также загружать данные из листа Excel в свое приложение.

Посмотрите на страницу библиотеки Excel, чтобы найти дополнительные примеры всех параметров и возможностей, доступных для вас.

Кроме того, Infragistics предлагает службу экспорта в Excel, которую вы можете использовать внутри своих компонентов и служб Angular.

Чтобы использовать эту службу, вы должны начать с импорта IgxExcelExporterService в модуль приложения:

Затем вы внедряете IgxExcelExporterService в конструктор компонента или службы:

И, наконец, чтобы экспортировать данные в Excel, вы вызываете функцию exportData():

🔗Система дизайна Indigo

Система проектирования Indigo, предлагаемая Infragistics, привлекла мое внимание настолько, что я захотел посвятить раздел этой системе проектирования и ее универсальности, особенно для дизайнеров и разработчиков, работающих над приложениями Angular.

Indigo Design System предлагает единую платформу для визуального дизайна, прототипирования UX, генерации кода и разработки приложений.

Ваши дизайнеры и разработчики интегрированы в единую платформу. Эта дизайн-система имеет рабочий процесс, который изображен следующим образом:

Indigo Design System

Дизайнеры создают проекты в Sketch с помощью системы Indigo.Design. Indigo Design System интегрируется со Sketch в виде:

Indigo-Components (библиотека дизайна с более чем 50 компонентами, которые соответствуют пользовательскому интерфейсу Ignite для Angular)

Indigo-Patterns (набор общих шаблонов пользовательского интерфейса, состоящих из Indigo-Components)

Indigo-Styling (настройте цвета, типографику, значки и высоты в соответствии с вашим брендом)

Дизайнеры обмениваются прототипами и тестируют их с другими разработчиками, дизайнерами и заинтересованными сторонами через общую платформу, известную как cloud.indigo.design.

Используйте Sketch для создания интерактивных прототипов ваших дизайнов и экранов.

Обменивайтесь и сотрудничайте с другими: просматривайте прототипы на любом устройстве и собирайте отзывы с помощью комментариев.

Разработчики создают компоненты Angular и код из прототипов

Установите расширение Infragistics для VS Code

Загрузите прототип по URL-адресу, и начнется процесс генерации кода

🔗Вывод

Чтобы изучить и опробовать все функции Infragistics Ultimate Developer Toolkit, потребуются книги и статьи! В этой статье представлен набор инструментов Infragistics Ultimate Developer Toolkit и соответствующие гиперссылки, по которым вы можете перейти, чтобы узнать больше о темах.

Тем не менее, то, что обсуждалось в этой статье, является верхушкой айсберга, когда речь заходит о том, что предлагает современная и эффективная экосистема разработки Infragistics!

Модель проектирования Infragistics для их компонентов и элементов управления, безусловно, является одной из самых простых и понятных моделей для подражания. Например, при использовании пользовательского интерфейса Ignite для компонентов Angular создается ощущение, что вы используете встроенные компоненты и сервисы Angular. Они проделали отличную работу, предоставив разработчикам Angular беспроблемный опыт использования своих компонентов пользовательского интерфейса.

Читайте также: