Вверх

Адрес
Пирогова 131, офисс 11 Винница, Украина 21037,
info@4go.space
Тел: +380738466121

Fullcalendar Reactive

[19459000]

[19459001] [19459002] Что такое FullCalendar и почему? [19459003] [19459004] [19459005] [19459002] В конце прошлого года была выпущена новая версия OutSystems, и вместе с ней появился новый способ разработки приложений: [19459003] [19459002] он называется «Реактивные веб-приложения»! Из-за этой новой столь востребованной функции во время выполнения приложений OutSystems было внесено изменение, и это вызвало проблему. Компоненты, разработанные и распространенные сообществом OutSystems в Forge, теперь несовместимы с этой новой функцией. Один из компонентов, который сейчас отсутствует, – это [19459003] [19459006] [19459002] FullCalendar2 [19459003] [19459007] [19459002], [19459003] [19459002], который используется во многих из [19459003] [19459008] [19459002] ] наши проекты [19459003] [19459007] [19459002], [19459003] [19459002] поэтому мы сделали рывок и создали его, чтобы поделиться с сообществом! [19459003] [19459009] [19459005] [19459010] [19459002] https://www.outsystems.com/blog/posts/reactive-web-applications [19459003] [19459007] [19459002] [19459003] [19459009] [19459005] [19459002] FullCalendar – это фреймворк javascript, который предоставляет полное календарное решение с несколькими типами представлений, управлением событиями, отображением событий из различных типов источников, расширенными настройками для настройки календаря и различными действиями для взаимодействия с календарь. [19459003] [19459009] [19459005] [19459011] [19459009] [19459005] [19459012] [19459002] (Скриншот из [19459003] [19459013] [19459002] fullcalendar.io [19459003] [19459007] [19459002]) [19459003] [19459014] [19459009] [19459001] [19459002] Традиционное против реактивного [19459003] [19459004] [19459005] [19459002] Прежде чем мы начали создавать этот компонент, мы должны были признать большую разницу между двумя различными способами разработки. «Традиционные веб-приложения» создают и обрабатывают на стороне сервера, прежде чем они будут представлены в браузере, в то время как «приложения ReactiveWeb» визуализируют страницу на стороне клиента / браузера. [19459003] [19459009] [19459005] [19459002] Таким образом, «Реактивные веб-приложения» предлагают значительное улучшение производительности рендеринга, требуя серверной части только тогда, когда ему нужны данные. Это дает большие преимущества для реализации этого компонента, так как это JavaScript-фреймворк, мы можем создать его. [19459003] [19459009] [19459005] [19459002] В «Традиционном», чтобы выполнить одно простое действие по открытию всплывающего окна, когда пользователь выбирает интервал дат, нам необходимо оспорить запрос к серверу, чтобы мы могли его открыть, в то время как в «Реактивном» все обрабатывается на стороне клиента без необходимости ждать ответа сервера. Это приносит огромные улучшения и позволяет избежать нескольких запросов к серверу. [19459003] [19459009] [19459005] [19459002] Короче говоря, с учетом различий, с «Реактивным» мы можем использовать преимущества взаимодействия и выполнения нескольких действий, потому что мы не зависим от сервера, чтобы все это делать. [19459003] [19459002] [19459015] [19459003] [19459002] Есть еще один момент, который следует рассмотреть, какие новые способы и методы предлагает нам эта новая версия (события LifeCycle и действия клиента) для разработки и реализации этого компонента. [19459003] [19459009] [19459005] [19459016] [19459002] Экран и события жизненного цикла блока [19459003] [19459007] [19459009] [19459001] [19459002] Что и как мы это сделали? [19459003] [19459004] [19459005] [19459002] Мы основывались на уже существующем компоненте [19459003] [19459006] [19459002] FullCalendar2 [19459003] [19459007] [19459002] и повторно использовали некоторые методы его реализации. Первый шаг – обновить фреймворк с версии 4.0.1 до 4.3.1. Важно всегда иметь самые свежие и стабильные версии, потому что они могут содержать множество исправлений и новых функций. [19459003] [19459009] [19459005] [19459002] После этого мы переходим к созданию компонента на «Реактивном». Как упоминалось ранее, эта версия представила события LifeCycle в WebBlock (OnInitialize, OnReady, OnParametresChange, OnRender и OnDestroy), а также действия клиента. Это позволяет нам иметь более структурированный код и его подразделения, как события LifeCycle, а также более высокую производительность в отношении взаимодействия с фреймворком из действий клиента. [19459003] [19459009] [19459005] [19459002] В некотором смысле компонент следует прямой линии развития. Загрузка файлов инфраструктуры, преобразование структур данных OutSystems и параметры ввода для настройки, а также инициализация календаря, создание методов связи и взаимодействие с календарем (JavaScript для OutSystems и наоборот). [19459003] [19459009] [19459005] [19459002] Этот компонент использует только два события LifeCycle: [19459003] [19459017] [19459002] OnInitialize [19459003] [19459018] [19459002] и [19459003] [19459017] [19459002] OnReady [19459003] [19459018] [19459002], где мы выполняем преобразование структур данных для загрузки календаря и инициализации настроенного календаря соответственно. [19459003] [19459009] [19459005] [19459002] Вот простая и обобщенная структура шагов, предпринятых для достижения нашего окончательного результата. [19459003] [19459009] [19459019] [19459020] [19459012] [19459002] OnInitialize – преобразование данных, которые будут использоваться для календаря, [19459017] EventSource, [19459018] и [19459017] ResourceSource [19459018] [19459003] [19459014] [19459021] [19459020] [19459012] [19459002] OnReady [19459003] [19459014] [19459019] [19459020] [19459012] [19459002] [19459017] LoadScripts [19459018] – загрузка файлов, необходимых для работы фреймворка. [19459003] [19459014] [19459021] [19459020] [19459012] [19459002] [19459017] BuildOptions [19459018] – объединение всех входных параметров плюс преобразование данных в одну конфигурацию JSON. [19459003] [19459014] [19459021] [19459020] [19459012] [19459002] [19459017] InitFullCalendar [19459018] – Javascript, в котором Календарь инициализируется с ранее определенными конфигурациями. [19459003] [19459014] [19459021] [19459020] [19459012] [19459002] [19459017] SetGlobalFunctions [19459018] – JavaScript, который назначает объект (JS) DOM для будущего использования встроенных клиентских действий для взаимодействия с календарем. [19459003] [19459014] [19459021] [19459022] [19459021] [19459022] [19459005] [19459012] [19459002] [19459023] [19459003] [19459014] [19459009] [19459005] [19459012] [19459002] (FullCalendarReactive OnInitialize Action) [19459003] [19459014] [19459009] [19459005] [19459012] [19459024] [19459014] [19459009] [19459005] [19459012] [19459002] (FullCalendarReactive OnReady Action) [19459003] [19459014] [19459009] [19459005] [19459002] Другой вопрос этого компонента – то, как мы сможем легко общаться и взаимодействовать с ним. Нам понадобится набор событий, которые будут запускаться, когда пользователь взаимодействует с Календарем, и некоторые действия Клиента для выполнения определенных методов Календаря. Вот список: [19459003] [19459009] [19459019] [19459020] [19459017] [19459002] DateClick [19459003] [19459018] [19459002] – срабатывает, когда пользователь щелкает дату или временной интервал. [19459003] [19459021] [19459020] [19459017] [19459002] EventClick- [19459003] [19459018] [19459002] Срабатывает, когда пользователь щелкает событие. [19459003] [19459021] [19459020] [19459017] [19459002] EventDrop [19459003] [19459018] [19459002] – срабатывает, когда перетаскивание прекращается и событие перемещается в другой день / время. [19459003] [19459021] [19459020] [19459017] [19459002] EventMouseEnter [19459003] [19459018] [19459002] – срабатывает, когда пользователь наводит курсор на событие. [19459003] [19459021] [19459020] [19459017] [19459002] EventMouseLeave [19459003] [19459018] [19459002] – срабатывает, когда пользователь наводит курсор мыши на событие. [19459003] [19459021] [19459020] [19459017] [19459002] EventResize [19459003] [19459018] [19459002] – срабатывает, когда изменение размера прекращается и продолжительность события изменилась. [19459003] [19459021] [19459020] [19459017] [19459002] Загрузка [19459003] [19459018] [19459002] – Запускается, когда начинается / останавливается получение события или ресурса. [19459003] [19459021] [19459020] [19459002] [19459017] [19459002] Выберите [19459003] [19459018] [19459002] – срабатывает при выборе даты / времени. [19459003] [19459003] [19459021] [19459020] [19459002] [19459002] [19459017] AddEvent [19459018] [19459002] – добавляет новое событие в календарь. [19459003] [19459003] [19459003] [19459021] [19459020] [19459002] [19459002] [19459002] [19459017] AddResource [19459018] [19459002] – добавляет новый ресурс в календарь. [19459003] [19459003] [19459003] [19459003] [19459021] [19459020] [19459002] [19459002] [19459012] [19459017] [19459002] UpdateEvent [19459003] [19459018] [19459002] – Обновите данные в некоторых существующих событиях в календаре. [19459003] [19459014] [19459003] [19459003] [19459021] [19459020] [19459017] [19459002] RefetchEvents [19459003] [19459018] [19459002] – повторяет события из всех источников и повторно отображает их на экране. [19459003] [19459021] [19459020] [19459017] [19459002] RefetchResources [19459003] [19459018] [19459002] – это вызывает выборку и повторную визуализацию данных ресурса. [19459003] [19459021] [19459020] [19459017] [19459002] RemoveEvent [19459003] [19459018] [19459002] – удаляет событие из календаря. [19459003] [19459021] [19459020] [19459017] [19459002] RemoveResource [19459003] [19459018] [19459002] – удаляет ресурс из календаря. [19459003] [19459021] [19459020] [19459002] UpdateEvent – Обновление данных в некоторых существующих событиях в календаре. [19459003] [19459021] [19459022] [19459005] [19459002] [19459025] [19459003] [19459009] [19459005] [19459002] [19459026] [19459003] [19459009] [19459005] [19459012] [19459002] Мы постарались рассмотреть все основные функции и потребности, которые помогут любому разработчику разработать, построить и настроить полный Календарь. После этого компонент готов и готов к совместному использованию и использованию. [19459003] [19459014] [19459009] [19459001] [19459002] Как им пользоваться? [19459003] [19459004] [19459005] [19459002] Как и для любого другого компонента OutSystems, первым делом необходимо установить компонент [19459003] [19459027] [19459002] [19459003] [19459007] [19459002] из [19459003] [19459028] [19459002] Создайте [19459003] [19459007] [19459002] и укажите, где он будет использоваться. Когда на него есть ссылка, нам просто нужно найти его на [19459003] [19459017] [19459002] Панель поиска инструмента виджета [19459003] [19459018] [19459002] для «FullCalendar» и перетащить его на экран. [19459003] [19459009] [19459005] [19459002] После этих шагов легко связать информацию с [19459003] [19459017] [19459002] Календарем [19459003] [19459018] [19459002]. В качестве примера мы покажем список событий, созданный Data Action. Для входного параметра [19459003] [19459017] [19459002] [19459003] [19459018] [19459002] «Источник события» нам просто нужно использовать функцию [19459003] [19459017] [19459002] NewEventSourceData () [19459003] [19459018 ] [19459002] как список типа [19459003] [19459017] [19459002] Event [19459003] [19459018] [19459002], возвращенный действием Data. Одно важное замечание относительно реактивных веб-приложений, поскольку информация загружается асинхронно, у нас будет условие, которое загружает только [19459003] [19459017] [19459002] Календарь [19459003] [19459018] [19459002] при загрузке данных . [19459003] [19459009] [19459005] [19459012] [19459002] [19459012] [19459002] В качестве альтернативы этому процессу можно использовать метод [19459003] [19459017] [19459002] NewEventSourceUrl () [19459003] [19459018] [19459002]. Этот метод заключается в связывании одного URL-адреса с календарем, откуда он будет извлекать информацию о событиях. Этот процесс дает календарю автономию для получения информации самостоятельно. [19459003] [19459014] [19459003] [19459014] [19459009] [19459005] [19459012] [19459002] [19459012] [19459002] [19459029] [19459003] [19459014] [19459003] [19459014] [19459009] [19459005] [19459012] [19459002] Наконец, у нас есть [19459003] [19459017] [19459002] AdvanceOptions [19459003] [19459018] [19459002], где мы можем настраивать более продвинутые вещи на основе официальных [19459003] [19459030] [ 19459002] документация [19459003] [19459007] [19459002] плагина. [19459003] [19459014] [19459009] [19459001] [19459002] Заключение [19459003] [19459004] [19459005] [19459002] Миграции / преобразования между [19459003] [19459017] [19459002] Традиционным [19459003] [19459018] [19459002] и [19459003] [19459017] [19459002] Реактивным [19459003] [19459018] [19459002], часто может вызвать множество проблем и затруднить переход из-за смены парадигмы, с серверной на клиентскую. [19459003] [19459009] [19459005] [19459002] В этом конкретном компоненте, на мой взгляд, было два ключевых фактора успеха преобразования. Первый – это чудесная работа и развитие компонента, доступного в [19459003] [19459017] [19459002] Forge [19459003] [19459018] [19459002] для традиционных приложений, который является одним из компонентов на основе этого компонента. Второй – это среда выполнения реактивных веб-приложений (на стороне клиента), потому что она позволяла нам использовать больше преимуществ платформы. [19459003] [19459009] [19459005] [19459002] В целом, я думаю, что этот компонент может предложить практически все возможности, которые предлагает фреймворк, хотя всегда есть место для улучшения. [19459003] [19459009]

[19459031] [19459032]

Author avatar
admin

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *