Wisej: простая кнопка для корпоративного программного обеспечения

Эта статья была первоначально опубликована здесь: https://www.codeproject.com/Articles/1208339/Wisej-The-Easy-Button-for-Enterprise-Software.

Wisej - это мощная платформа, которая абстрагируется от нюансов взаимодействия клиент/сервер и использует все возможности Интернета, включая сторонние решения на базе HTML5. Это идеальный инструмент для создания корпоративных веб-приложений.

В этой статье рассматриваются: Получение программного обеспечения, демонстрационное прохождение, в котором рассматриваются инстанцирование элементов управления, обновления в реальном времени, интеграция со сторонними разработчиками, привязка данных в масштабе, встроенный Media и пользовательская раскраска. Затем мы кратко рассмотрим такие функции и интеграции, как: Pixel-Perfect WYSIWIG Designer, интеграции библиотеки управления Theme Builder и нативная мобильная интеграция.

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

Wisej предоставляет платформу и набор инструментов, предназначенных для облегчения бремени разработки, тестирования, развертывания и поддержки сложного программного обеспечения для бизнеса. Она преодолевает разрыв между традиционными настольными приложениями в стиле WinForms и веб-приложениями, позволяя разработчикам использовать имеющиеся у них навыки работы с .NET и C#.

Разработчики могут использовать знакомые им инструменты, такие как пиксельно идеальная поверхность дизайна и элементы управления drag-and-drop, с удобными для них языками (C# или VB.NET) для создания веб-приложений в реальном времени без необходимости изучать HTML, CSS или JavaScript. Они могут оставаться в своей любимой IDE, такой как Visual Studio, чтобы воспользоваться такими возможностями, как IntelliSense, интегрированная отладка, поверхности проектирования и интеграция контроля исходных текстов. Front-end разработчики могут использовать свои знания веб-технологий для дополнения приложений и беспрепятственной интеграции пакетов сторонних разработчиков, таких как библиотеки диаграмм HTML5 и элементы управления ASP.NET.

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

Получение программного обеспечения

Чтобы начать работу, посетите сайт Wisej:

https://wisej.com/.

Там вы можете ознакомиться с различными вариантами цен и загрузить пробную версию.

Образец приложения доступен по адресу:

http://demo.wisej.com/codeproject

Вы можете загрузить исходный код по адресу:

https://wisej.com/examples

Для начала работы загрузите последнюю сборку Wisej с https://wisej.com. Вы должны уметь компилировать и отлаживать приложение. Приложение использует 64-битный драйвер SQLite. Есть два варианта обеспечения успешной отладки. Вы можете либо запуститься от имени администратора и использовать полный сервер IIS локально, либо настроить IIS Express на запуск в 64-битном режиме, как показано в следующем диалоге.

Рисунок 1: 64-битный IIS Express

Одним из преимуществ Wisej является то, что он может генерировать локальные исполняемые файлы для запуска того же приложения, к которому вы обращаетесь через веб-браузер, в качестве автономного или самостоятельного приложения. В папке проекта вы найдете файл "Wisej.Application.exe", который вы можете запустить для проверки этой функциональности.

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

Первое, что вы заметите, когда зайдете на сайт, - это возможность работы на рабочем столе. Код для создания рабочего стола прост - достаточно добавить элемент управления рабочим столом в приложение. Wisej автоматически обрабатывает разрешение пользователям перетаскивать компоненты, масштабировать, изменять размер, сворачивать и т.д. Нажмите на сетку квадратов в левом нижнем углу, чтобы развернуть "стартовое меню".

Рисунок 2: Стартовое меню

Создание элементов управления

В Visual Studio перейдите в папку "Popups" и дважды щелкните на "StartPopup". Откроется дизайнер всплывающего меню. Вы можете увидеть различные кнопки, щелкнуть один раз для просмотра свойств и дважды щелкнуть на них, чтобы просмотреть code-behind. Запуск другого компонента очень прост. Дважды щелкните на кнопке "Фоновая задача" в дизайнере. Вы увидите следующий код, который просто создает экземпляр элемента управления "BackgroundTask" и затем вызывает его.

Обновления в реальном времени

Первый пример, который мы рассмотрим, это "Фоновая задача". Традиционно построение конвейера реального времени между клиентом веб-браузера и серверным узлом подразумевает использование таких технологий, как WebSockets или SignalR, и построение логики с обеих сторон для обработки потока данных и исключений. Запустите пример Background Tasks, нажмите "Start", чтобы увидеть его работу:

Рисунок 3: Фоновые задачи

Тот же диалог доступен в представлении времени проектирования через Visual Studio:

Рисунок 4: Фоновые задачи в дизайнере

Обратите внимание на список элементов управления с левой стороны, которые готовы к позиционированию на холсте с помощью перетаскивания с тем же опытом, к которому привыкли разработчики WebForms. Элементы управления, позволяющие развернуть, свернуть и закрыть диалоговое окно, являются встроенными и не требуют дополнительного кода для работы. Щелкните правой кнопкой мыши на элементе управления, чтобы просмотреть его код (code-behind).

Важный код находится в событии "button1_click".

Код перебирает 100 элементов и делает паузу в каждом цикле на полсекунды. Приложение браузера по-прежнему работает асинхронно и не блокируется этой операцией. Платформа Wisej предоставляет метод "StartTask" для инициирования фоновой задачи, а обновление данных в реальном времени - это просто вызов метода "Application.Update"! Все соединения между браузером и сервером в реальном времени обрабатываются автоматически, поэтому разработчик может сосредоточиться на главном (основной логике кода) и не беспокоиться о нюансах соединения клиента и сервера. Wisej поддерживает соединения в реальном времени через Websockets, HTTP или Websockets с HTTP fallback, которые можно выбрать с помощью простой настройки конфигурации.

Интеграция с третьими сторонами

Далее нажмите на "Интеграция виджетов" в демонстрационном приложении. Перед вами откроется окно редактирования:

Рисунок 5: Интеграция виджетов

Этот элемент управления позволяет редактировать документ и использовать расширенные возможности, такие как форматирование, вставка ссылок и эмодзи, даже вставка изображений. Элемент управления фактически использует HTML-проект с открытым исходным кодом CKEditor. Этот пример иллюстрирует, как легко интегрировать сторонние библиотеки с открытым исходным кодом, даже если они не являются проектами на базе .NET.

Привязка данных в масштабе

Сетки часто являются центральным элементом корпоративных приложений, и создание интерактивных сеток, обеспечивающих базовые возможности создания/чтения/обновления/удаления (CRUD) и расширенные функции, такие как фильтрация, группировка и сортировка, может быть затруднено в веб-приложениях. Wisej предлагает систему привязки данных к элементам управления, которая интуитивно понятна и проста в реализации. Чтобы увидеть результаты в действии, выберите пример "Привязка данных" в демонстрационном приложении. Вы должны увидеть сетку, подобную этой:

Рисунок 6: Сетка привязки данных

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

Откройте сетку в Visual Studio и щелкните правой кнопкой мыши, чтобы просмотреть code-behind. Это невероятно мощная функция Wisej, о которой многие веб-разработчики, вероятно, жалеют. Грид полностью реализован через код на стороне сервера на C#, и Wisej автоматически обрабатывает все привязки, обновления и потоки данных без необходимости разработчика писать какой-либо клиентский код JavaScript!

Загрузка исходного набора данных осуществляется так же просто, как заполнение стандартного адаптера данных. Демо-приложение использует базу данных SQLite для хранения и обновления данных образца:

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

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

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

Встраивание медиа

Нажмите на опцию "Медиа" в меню "Пуск", чтобы просмотреть медиа. Диалоговое окно включает встроенное видео с отслеживанием положения и встроенный документ PDF, который можно просматривать и перемещаться по нему, не покидая текущей веб-страницы.

Рисунок 7: Встроенный мультимедиа

Вы можете открыть элемент управления мультимедиа в Visual Studio и нажать на отдельные компоненты, чтобы увидеть их свойства. Wisej имеет встроенные элементы управления "Video" и "PDFViewer", которые можно просто перетащить на поверхность дизайна для использования и привязать к соответствующим документам. Элемент управления свойствами показывает, как элемент управления PDFViewer привязан к документу, включенному в проект:

Рисунок 8: Свойства PDF Viewer

Элемент управления PDF Viewer является гибким и предлагает поддержку pdf.js, собственных PDF-документов, Google Docs и пользовательских вьюверов.

Для отслеживания позиции в элементе медиа подключается простое событие, которое срабатывает при изменении временной позиции и обрабатывается следующим кодом:

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

Пользовательское рисование

Последний диалог, который мы рассмотрим в этом обзоре, - это "Пользовательское рисование". Нажмите на эту опцию, и вы увидите модальное диалоговое окно с полностью отрисованным множеством Мандельброта и улыбающимся лицом.

Рисунок 9: Пользовательский рисунок

Несмотря на количество пикселей и уровень детализации, вы можете видеть, что Мандельброт рендерится исключительно быстро - чуть более 50 мс на моей машине. Если вы посмотрите на код, то изображение рендерится на сервере с помощью растрового объекта. После его завершения выполняется специальный вызов "DrawImageUnscaled" для передачи содержимого растрового изображения на холст браузера (опять же, без необходимости изучения или создания кода на стороне клиента).

Улыбающееся лицо - это элемент управления "холст", который позволяет вам писать код на стороне сервера для рендеринга HTML5-холста на стороне клиента. Это позволяет создавать сложные пользовательские веб-контролы полностью в .NET, полностью совместимые с HTML5.

Автономный исполняемый файл

В дополнение к поддержке веб-развертывания платформа Wisej позволяет упаковать приложение в виде локального исполняемого файла, который можно запускать с рабочего стола. Он поддерживает функциональность, идентичную веб-проекту, в качестве автономной программы. Это позволяет распространять приложение без веб-сервера. Исполняемый файл создается в корневом каталоге проекта, и это пример его запуска с виджетом canvas.

Рисунок 10: Автономный исполняемый файл

Функции и интеграции

Пиксельно-совершенный конструктор WYSIWIG

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

Конструктор тем

Wisej поставляется с мощным конструктором тем, который позволяет разработчикам изменять внешний вид любого элемента управления в своем приложении. Различные темы и стили могут быть легко применены для отладки приложений, работающих в производстве. Каждый элемент управления Wisej также поставляется с атрибутом "CssStyle", который применяет пользовательский стиль во время проектирования.

Интеграция библиотек элементов управления

В дополнение к виджетам сторонних производителей, интегрированным в образец, Wisej теперь имеет библиотеки компонентов Syncfusion, DevExpress и Infragistics JavaScript, доступные в дизайнере в виде элементов управления, которые можно перетаскивать. Эта интеграция упрощает процесс миграции для разработчиков, обеспокоенных потерей графиков, диаграмм и других элементов управления в своем родном настольном приложении.

Интеграция для нативных мобильных устройств

Пакет 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