Советы и хитрости HTML в OutSystems

HTML? Кусок торта. Так думают многие разработчики, когда слышат HTML, но что, если вам придется использовать его внутри OutSystems?
В этой статье вы прочитаете 3 наиболее распространенных способа добавления HTML-тегов в ваше приложение OutSystems.

Эта статья предназначена для людей, которые только начали работать с OutSystems, но в ней также могут быть новые приемы для более опытных разработчиков OutSystems. Кроме того, освежение никогда никому не повредит;)

Что такое HTML-тег и зачем он мне вообще нужен?

Сначала я не мог кратко объяснить, что такое HTML, но потом я нашел фразу ELI5 (Explain Like I’m 5):

«HTML - это язык разметки. Язык разметки - это набор инструкций о том, как создать документ, например веб-страницу ».

Итак, представьте, что у вас есть приложение, в котором вы хотите показать видео, это один из способов сделать это с помощью HTML:

‹! DOCTYPE html›
‹html›
‹body›
‹iframe src = Your_URL_Here› ‹/iframe›
‹/body›
‹/ html ›

Каждое ‹…› называется тегом внутри HTML. Существуют различные случаи, когда вам может потребоваться добавить тег HTML в ваше приложение. Например, вы можете использовать тег ‹iframe›, чтобы иметь возможность показывать видео, как показано выше.

Как добавить HTML-тег в ваше приложение OutSystems?

Представьте, что вы создаете реактивное веб-приложение, в котором хотите показать видео YouTube. Есть несколько способов сделать это. Один из них - это добавление тега iframe в HTML для показа, воспроизведения или приостановки видео. Для мобильных или реактивных приложений вы можете сделать это двумя разными способами: с помощью JavaScript или с помощью HTML-элемента OutSystems. Существует также третий способ, который используется только для традиционных веб-приложений.

1- Добавьте тег с помощью JavaScript:

Это наиболее распространенный способ добавления HTML-тега в свое приложение разработчиками, поэтому вы также можете найти множество статей об этом. Один из примеров можно найти здесь.
Вернемся к нашему примеру, это все, что вам нужно сделать, чтобы добавить видео YouTube с помощью тега iframe с JavaScript в ваше реактивное приложение:

Сделайте контейнер и дайте ему имя, например Video_ctr.
Создайте действие OnReady для экрана.
Перетащите JavaScript из панели инструментов.
Откройте редактор JavaScript и щелкните правой кнопкой мыши папку параметров в нижней части редактора, выберите Добавить параметр ввода и дайте ему имя, например ВидеоКонтейнер. Этот параметр имеет текстовый тип данных и должен быть обязательным.
Поместите следующий код в редактор.

var iframe = document.createElement('iframe');
iframe.src = "https://www.youtube.com/embed/-5CdAup0o-I";
document.getElementById($parameters.VideoContainer).appendChild(iframe);

Назначьте Video_ctr.Id параметру VideoContainer, например:

В приведенном выше коде в первой строке вы создаете тег iframe, а в последней строке вы добавляете тег iframe в качестве дочернего к Video_ctr:

И вот как вы это делаете в своем традиционном веб-приложении:

Сделайте контейнер и дайте ему имя, например Video_ctr.
Поместите другой контейнер внизу экрана и дайте ему имя, например Script_ctr.
Поместите выражение в Script_ctr и установите для Escape Content значение No, так как это будет выражение JavaScript, и дайте ему пример, например ‹Видео javascript›.
Установите следующий код в качестве значения выражения:

"
<script>
    var iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube.com/embed/-5CdAup0o-I';
    document.getElementById('"+Video_ctr.Id+"').appendChild(iframe);
</script>
"

В приведенном выше коде мы используем идентификатор виджета (Video_ctr.Id), чтобы получить точный идентификатор элемента.

Вот как это выглядит в Service Studio:

А также:

2- Добавьте тег, используя HTML-элемент OutSystems

Это еще один способ, которым вы можете воспользоваться при создании реактивного или мобильного приложения.

Создайте контейнер с именем Video_ctr.
Перетащите виджет HTML Element из панели инструментов.
В свойствах виджета установите iframe как тег.
Используйте атрибуты в свойствах, чтобы установить источник видео, например:

А вот как это выглядит в вашем браузере:

Есть еще один способ, который только применим к традиционным веб-приложениям:

3- Добавьте тег в свое традиционное веб-приложение

Это мой любимый вариант - добавление тега с использованием ostagname, и это возможно только при разработке традиционного веб-приложения.

Для этого создайте контейнер с именем Video_ctr.

Добавьте контейнер внутри первого контейнера и дайте ему имя, например iframe.
В свойствах контейнера iframe используйте расширенные свойства и установите для него значение ostagname, а значение - «iframe».
Задайте для следующего свойства src и укажите URL-адрес в качестве значения, например:

И вуаааа:

Теперь я знаю, что мне использовать?

На самом деле здесь нет ничего лучше или хуже.

Если вы являетесь героем JavaScript, используйте способ JavaScript для добавления тегов HTML, это возможно для всех ваших приложений (мобильных, реактивных и веб-приложений).

В противном случае, если вы хотите сохранить все это в OutSystems, просто используйте элемент HTML для своих мобильных и / или реактивных приложений и ostagname для своих традиционных веб-приложений, поскольку оба эти способа одинаковы.

Лично я предпочитаю использовать метод OutSystems вместо JavaScript, поэтому я обычно использую HTML-элемент и ostagname.

Сообщите мне в комментариях, какой из упомянутых способов вы предпочитаете использовать для добавления тега HTML в свои приложения OutSystems.

Советы и хитрости HTML в OutSystems