Эта статья изначально была размещена здесь: https://www.codeproject.com/Articles/1208339/Wisej-The-Easy-Button-for-Enterprise-Software.
Wisej — это мощная платформа, которая позволяет абстрагироваться от нюансов взаимодействия клиент/сервер и в то же время охватывает все, что может предложить Интернет, включая сторонние решения на основе HTML5. Это идеальный инструмент для создания корпоративных веб-приложений.
В этой статье рассматриваются: Получение программного обеспечения, а также пошаговое демонстрационное руководство, в котором рассматривается создание экземпляров элементов управления, обновления в реальном времени, сторонняя интеграция, привязка данных в масштабе, встроенные медиафайлы и пользовательское рисование. Затем мы кратко рассмотрим функции и интеграции, такие как: Pixel-Perfect WYSIWIG Designer, интеграция библиотеки элементов управления Theme Builder и встроенная мобильная интеграция.
Этот обзор написан нашими спонсорами из CodeProject. Эти обзоры предназначены для предоставления вам информации о продуктах и услугах, которые мы считаем полезными и ценными для разработчиков.
Wisej предоставляет платформу и набор инструментов, предназначенных для облегчения разработки, тестирования, развертывания и обслуживания сложного программного обеспечения для бизнеса. Он устраняет разрыв между традиционными настольными приложениями в стиле WinForms и веб-приложениями, позволяя разработчикам использовать имеющиеся у них навыки работы с .NET и C#.
Разработчики могут использовать инструменты, с которыми они знакомы, такие как идеальная по пикселям поверхность проектирования и элементы управления с помощью перетаскивания на удобных для них языках (C# или VB.NET), для создания веб-приложений в реальном времени без необходимости изучить HTML, CSS или JavaScript. Они могут оставаться в своей любимой среде IDE, такой как Visual Studio, чтобы использовать преимущества таких функций, как IntelliSense, встроенная отладка, области проектирования и интеграция с системой управления версиями. Внешние разработчики могут использовать свои знания веб-технологий для расширения приложений и беспрепятственной интеграции сторонних пакетов, таких как библиотеки диаграмм HTML5 и элементы управления ASP.NET.
Чтобы преодолеть разрыв между устаревшими настольными приложениями и современными веб-приложениями, Wisej предлагает несколько функций, которые создают простой путь для миграции существующих приложений или создания новых проектов без необходимости изучения нового набора технологий. Поддержка прикосновений и жестов встроена в программное обеспечение с эмуляцией для поддержки работы на рабочем столе, локализация является первоклассным гражданином, а приложения, создаваемые Wisej, быстро реагируют на запросы. Это означает, что они легко доступны из настольных браузеров, мобильных смартфонов и планшетов.
Получение программного обеспечения
Для начала посетите сайт Wisej:
Там вы можете просмотреть различные варианты ценообразования и загрузить пробную версию.
Образец заявления доступен по адресу:
http://demo.wisej.com/codeproject
Вы можете скачать исходный код по адресу:
Загрузите последнюю сборку Wisej с https://wisej.com, чтобы приступить к работе. Вы должны уметь компилировать и отлаживать приложение. Приложение использует 64-битный драйвер SQLite. Есть два варианта, чтобы убедиться, что вы можете успешно выполнить отладку. Вы можете либо запустить от имени администратора и локально использовать полный сервер IIS, либо настроить IIS Express для работы в 64-разрядном режиме, как показано в следующем диалоговом окне.
Рисунок 1: 64-разрядный IIS Express
Одним из преимуществ Wisej является то, что он может генерировать локальные исполняемые файлы для запуска того же приложения, к которому вы обращаетесь из своего веб-браузера, в качестве автономного или размещенного на собственном сервере приложения. В папке проекта вы найдете «Wisej.Application.exe», который вы можете запустить, чтобы протестировать эту функцию.
Демонстрационное прохождение
Первое, что вы заметите, когда зайдете на сайт, — это рабочий стол. Код для создания рабочего стола так же прост, как добавление элемента управления рабочего стола в приложение. Wisej автоматически разрешает пользователям перетаскивать компоненты, масштабировать, изменять размер, сворачивать и т. д. Нажмите на сетку квадратов в левом нижнем углу, чтобы развернуть «стартовое меню» параметров.
Рисунок 2: Меню «Пуск»
Создание экземпляров элементов управления
В Visual Studio перейдите в папку «Всплывающие окна» и дважды щелкните «StartPopup». Это откроет конструктор для всплывающего меню. Вы можете видеть различные кнопки, щелкнуть один раз, чтобы просмотреть свойства, и дважды щелкнуть их, чтобы просмотреть код программной части. Запустить другой компонент просто. Дважды щелкните кнопку «Фоновая задача» в дизайнере. Вы увидите следующий код, который просто создает экземпляр элемента управления «BackgroundTask», а затем вызывает его.
Обновления в реальном времени
Первый пример, который мы рассмотрим, — «Фоновые задачи». Традиционно построение конвейера в реальном времени между клиентом веб-браузера и узлом сервера включает в себя такие технологии формирования шаблонов, как WebSockets или SignalR, и построение логики на обеих сторонах для обработки потока данных и исключений. Запустите пример фоновых задач, нажмите «Старт», чтобы увидеть, как он работает:
Рисунок 3: Фоновые задачи
Тот же диалог доступен в представлении времени разработки через Visual Studio:
Рисунок 4: Фоновые задачи в конструкторе
Обратите внимание на список элементов управления с левой стороны, готовых для размещения на холсте с помощью перетаскивания с тем же интерфейсом, к которому привыкли разработчики WebForms. Все элементы управления для развертывания, разбиения и закрытия диалогового окна являются встроенными и не требуют дополнительного кода для работы. Щелкните правой кнопкой мыши элемент управления, чтобы просмотреть код программной части.
Важный код находится в событии «button1_click».
Код перебирает 100 элементов и делает паузу на полсекунды в каждом цикле. Приложение браузера по-прежнему работает асинхронно и не блокируется операцией. Платформа Wisej предоставляет метод «StartTask» для запуска фоновой задачи, а обновление данных в режиме реального времени так же просто, как вызов метода «Application.Update»! Все соединения в реальном времени между браузером и сервером обрабатываются автоматически, поэтому разработчик может сосредоточиться на том, что важно (основная логика кода), и не беспокоиться о нюансах соединения клиента и сервера. Поддержка Wisej для обмена данными в реальном времени обрабатывает веб-сокеты, HTTP или веб-сокеты с резервным HTTP, которые можно выбрать с помощью простой настройки конфигурации.
Сторонняя интеграция
Затем нажмите «Интеграция виджетов» в демонстрационном приложении. Вам будет представлен элемент управления редактированием:
Рисунок 5: Интеграция виджетов
Элемент управления позволяет редактировать документ и использовать расширенные функции, такие как форматирование, вставка ссылок и смайликов, даже встраивание изображений. Элемент управления фактически использует HTML-проект с открытым исходным кодом CKEditor. Этот пример показывает, как легко интегрировать сторонние библиотеки с открытым исходным кодом, даже если они не являются проектами на основе .NET.
Привязка данных в масштабе
Сетки часто являются центральным элементом корпоративных приложений, и создание интерактивных сеток, обеспечивающих базовые возможности создания/чтения/обновления/удаления (CRUD) и расширенные функции, такие как фильтрация, группировка и сортировка, может быть затруднено в веб-приложениях. Wisej предлагает интуитивно понятную и простую в реализации систему привязки данных для элементов управления. Чтобы увидеть результаты в действии, выберите пример «Привязка данных» в демонстрационном приложении. Вы должны увидеть такую сетку:
Рисунок 6: Сетка привязки данных
Сетка полнофункциональная. Нажмите на заголовок столбца, чтобы отсортировать, и нажмите еще раз, чтобы переключить порядок между восходящим и нисходящим. Нажмите на любую строку для редактирования в соответствующем диалоговом окне или дважды нажмите на сетку, чтобы отредактировать ее в строке («в стиле Excel»). Вы можете вставлять новые строки и настраивать свои обновления, пока они не будут готовы к сохранению на сервере. В сохранении есть предупреждающее уведомление, которое можно закрыть, которое указывает на успех, или модальное диалоговое окно для диагностики сбоя.
Откройте сетку в Visual Studio и щелкните правой кнопкой мыши, чтобы просмотреть код программной части. Это невероятно мощная функция Wisej, которую многие веб-разработчики, вероятно, хотели бы иметь в прошлом. Сетка полностью реализована с помощью серверного кода C#, и Wisej автоматически обрабатывает все привязки, обновления и потоки данных, при этом разработчику не нужно писать какой-либо клиентский код JavaScript!
Загрузка исходного набора данных так же проста, как заполнение стандартного адаптера данных. Демонстрационное приложение использует базу данных SQLite для хранения и обновления демонстрационных данных:
Код для сохранения записи выдает предупреждение об успешном завершении и показывает модальное диалоговое окно об ошибке при возникновении проблемы, опять же, все это делается с помощью простого кода C#, который автоматически управляет работой браузера.
Важно отметить, насколько легко предоставить клиентские модальные окна с кодом на стороне сервера. Это часто является проблемой в других платформах из-за логики, необходимой для обработки асинхронного диалога и обеспечения того, чтобы модальное окно успешно отключало другое содержимое в приложении. Обратите внимание, что предыдущий пример кода обеспечивает простой последовательный рабочий процесс C# на стороне сервера, но успешно обеспечивает интерактивное модальное взаимодействие в браузере.
В более сложных сценариях вам, возможно, придется писать код на страницу и пропускать записи в базе данных и фильтровать на основе расширенных критериев. Wisej упрощает этот процесс, позволяя вам сосредоточиться на одном наборе кода. Если вы можете заставить код работать на сервере, Wisej подключит его к браузеру и отобразит для вас соответствующий вывод. Больше не нужно писать два набора кода, один для сервера и один для обработки всех событий в браузере!
Встроенные носители
Нажмите на опцию «Медиа» в меню «Пуск», чтобы просмотреть возможности мультимедиа. Диалоговое окно содержит встроенное видео с отслеживанием положения и встроенный документ PDF, который можно просматривать и перемещаться, не покидая текущую веб-страницу.
Рис. 7. Встроенные носители
Вы можете открыть элемент управления мультимедиа в Visual Studio и щелкнуть отдельные компоненты, чтобы просмотреть их свойства. Wisej имеет встроенные элементы управления «Видео» и «PDFViewer», которые можно просто перетащить на поверхность дизайна для использования и привязки к соответствующим документам. Элемент управления свойствами показывает, как элемент управления PDFViewer привязан к документу, включенному в проект:
Рисунок 8: Свойства средства просмотра PDF
Управление средством просмотра PDF является гибким и предлагает поддержку pdf.js, собственных документов PDF, Google Docs и пользовательских средств просмотра.
Для отслеживания положения в элементе мультимедиа подключается простое событие, которое срабатывает при изменении временной позиции и обрабатывается с помощью следующего кода:
Код обрабатывается так же, как настольное приложение, и Wisej автоматически координирует все обновления браузера.
Пользовательская картина
Последний диалог, который мы рассмотрим в этом обзоре, — «Custom Painting». Нажмите на опцию, и вы увидите модальное диалоговое окно с полностью отрендеренным набором Мандельброта и улыбающимся лицом.
Рисунок 9: Пользовательская окраска
Несмотря на количество пикселей и уровень детализации, вы можете видеть, что рендеринг Мандельброта исключительно быстрый — чуть более 50 мс на моей машине. Если вы посмотрите на код позади, изображение отображается на сервере с использованием растрового объекта. После завершения выполняется специальный вызов «DrawImageUnscaled» для передачи содержимого растрового изображения на холст на основе браузера (опять же, разработчику не нужно изучать или создавать какой-либо код на стороне клиента).
Улыбающееся лицо — это элемент управления «холст», который позволяет вам писать код на стороне сервера для отображения холста HTML5 на стороне клиента. Это позволяет создавать сложные настраиваемые веб-элементы управления полностью в .NET, которые полностью совместимы с HTML5.
Автономный исполняемый файл
Платформа Wisej не только поддерживает веб-развертывания, но и позволяет упаковать ваше приложение в виде локального исполняемого файла, который можно запускать с рабочего стола. Он поддерживает те же функции, что и веб-проект, как отдельная программа. Это позволяет распространять без веб-сервера. Исполняемый файл создается в корневом каталоге проекта, и это пример его запуска с виджетом холста.
Рисунок 10: Автономный исполняемый файл
Функции и интеграции
Pixel-Perfect WYSIWIG Designer
Все, что делается с Wisej, вращается вокруг запатентованного фреймворка с идеальным пиксельным дизайном. Дизайнер WYSIWIG позволяет вам точно увидеть, как приложение будет выглядеть во время выполнения. Перетащите элементы управления из панели инструментов на страницу и убедитесь сами. Дизайнер также позволяет разработчикам создавать адаптивные профили: страницы, которые подходят для любого устройства.
Конструктор тем
Wisej поставляется с мощным конструктором тем, который позволяет разработчикам изменять внешний вид любого элемента управления в своем приложении. Различные темы и стили можно легко применять для отладки приложений, работающих в рабочей среде. Каждый элемент управления Wisej также поставляется с атрибутом «CssStyle», который применяет пользовательский стиль во время разработки.
Интеграция с библиотекой управления
В дополнение к сторонним виджетам, интегрированным в пример, Wisej теперь включает библиотеки компонентов JavaScript Syncfusion, DevExpress и Infragistics, доступные в качестве элементов управления перетаскиванием в конструкторе. Интеграция упрощает процесс миграции для разработчиков, обеспокоенных потерей диаграмм, графиков и других элементов управления родного настольного приложения.
Родная мобильная интеграция
Пакет Wisej Mobile Integration для Android и iOS предлагает веб-разработчикам возможность интегрировать собственные функции устройств в свои приложения Wisej. Встроенная прокрутка и настраиваемая тема дадут пользователю отзывчивый опыт. Используйте возможности биометрической аутентификации устройства, встроенные панели инструментов, вкладки и многое другое. Обрабатывайте любое собственное событие устройства в Wisej с помощью специального обработчика.
Преимущества Wisej
- Поддержка балансировщика нагрузки
- Поддержка собственных мобильных интеграций (iOS и Android)
- Поддержка прогрессивных веб-приложений (PWA)
- Надежная архитектура, устойчивая к некоторым из основных атак OWASP.
Заключение
Для разработчиков задача создания сложного корпоративного веб-приложения с такими функциями, как большие настраиваемые сетки и обновление данных в режиме реального времени, может оказаться непростой задачей. Это может показаться еще более сложным, когда требуется перенести устаревшее приложение в стиле WinForms в Интернет без потери функций, к которым привыкли бизнес-пользователи, таких как возможность использовать клавиатуру для ввода данных и редактирования значений в динамической сетке. К счастью, Wisej — это инструмент, который облегчает задачу и обеспечивает прямой путь от настольных приложений к Интернету. Как мощная платформа, которая абстрагируется от нюансов взаимодействия клиент/сервер и в то же время охватывает все, что может предложить Интернет, включая сторонние решения на основе HTML5, это идеальный инструмент для создания корпоративных веб-приложений.
Этот обзор лишь поверхностно коснулся возможностей, которые предоставляет Wisej. В дополнение к тому, что было рассмотрено здесь, существуют десятки других готовых элементов управления и функций, таких как всеобъемлющее оформление тем, которые можно применять во время работы приложения. Можно ориентироваться как на веб-приложение, так и на настольное приложение из одной кодовой базы. Все функциональные возможности доступны в виде перетаскиваемого дизайнерского приложения .NET, в котором используются имеющиеся навыки работы с C# или VB.NET. Почему бы не убедиться в том, насколько мощной является платформа Wisej? Перейдите на веб-сайт и начните бесплатную пробную версию, если вы еще не ознакомились с этим обзором.
Примечание. Это обновленная версия оригинальной статьи Джереми Ликнесса о Wisej: https://www.codeproject.com/Articles/1208339/Wisej-The-Easy-Button-for-Enterprise-Software
