Добавление библиотеки в приложение

[Lamantur]

Добрый день коллеги. 

Сегодня хочу рассказать вам одну интересную тему;
Редактор динамических приложений уже содержит в себе множество библиотек для JavaScript, библиотеки это подготовленный заранее набор функций, который позволяет сократить код, сосредоточившись на выполняемой задаче. Вам не нужно самостоятельно отрисовывать график в формате svg, за вас это может сделать встроенный chart.js, d3.js, c3.js. 

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

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

1. Добавление через HTML
Любой контейнер для этого подойдет, он загружается асинхронно и перейдет по ссылке, инициализировав библиотеку
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
Это самый простой и работающий способ, главное дождаться загрузки элемента перед использованием библиотеки. 
Эта ссылка дана для примера JQuery уже установлен в редакторе, скачивать его повторно не нужно.

2. Добавление через JavaScript

Код:

// Создаем элемент script
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js';

// Добавляем на страницу
document.head.appendChild(script);

// Обработка загрузки
script.onload = function() {
    console.log('Библиотека загружена!');
    // Здесь можно использовать библиотеку
    // $(document).ready(function() { ... });
};

script.onerror = function() {
    console.error('Ошибка загрузки библиотеки');
};

Асинхронная загрузка с Promise :

Код:

function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = true;
       
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Ошибка загрузки: ${src}`));
       
        document.head.appendChild(script);
    });
}

// Использование
loadScript('https://cdn.jsdelivivr.net/npm/lodash@4.17.21/lodash.min.js')
    .then(() => {
        console.log('Библиотека загружена');
        // Используем библиотеку
    })
    .catch(error => console.error(error));

Добавление CSS библиотек
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
или

Код:

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css';
document.head.appendChild(link);

bootstrap тоже уже установлен, делать это повторно не нужно



Вдруг, выясняется, что у заказчика изолированная сеть и все эти ссылки не работают. Как быть?
Почти все библиотеки можно скачать себе в медиа библиотеку и использовать как обычные JS или css
Перейдите по ссылке самостоятельно и библиотека откроется в браузере в виде сокращенного JavaScript кода.
Библиотеки специально хранятся в сжатом виде без правил оформления и комментариев, часто используются однобуквенные переменные.

Весь текст скопируйте в файл с расширением .js для JavaScript и .css для стилей.

Загрузите файлы в медиа библиотеку и используйте ссылки на эти файлы вместо ссылок cdn.
В медиа библиотеке предусмотрена отдельная кнопка "скопировать ссылку". Сама ссылка выглядит так:

/Winnum/resources/themes/current/images/app/ui/designer/media/38/createChart.js

Для того чтобы избежать проблем при импорте вашего приложения на другие платформы не стоит использовать прямые ссылки на папки с файлами, они могут измениться.
Ранее мы уже делали это, когда инициализировали наш manifest.js. Повторим еще раз.

Код:

$(window).ready(function(){
    loadResources(true);
});
function loadResources(initial){
    var oid = '';
    var appid = '';
    baseSdkUtils.the = {};
    baseSdkUtils.service.WNFactory.getPersistable(baseApplicationDesignerUtils.getAppid(), function(data){
        if ( !baseSdkUtils.isSuccess(data) ){
            alert('Error: ' + baseSdkUtils.decode(data.innerHTML));
            console.warn(baseSdkUtils.decode(data.innerHTML));
            return;
        }
        /******* Случай, когда код выполняется в приложении ******/
        if ( data.getElementsByTagName('item').length > 0 ){
            oid = data.getElementsByTagName('item')[0].getAttribute('ApplicationInfo__classNameA15');
            oid += ':';
            appid = data.getElementsByTagName('item')[0].getAttribute('ApplicationInfo__idA15');
            oid += appid;
        }
        /****** Случай, когда код выполняется в редакторе ********/
        else{
            oid = baseApplicationDesignerUtils.oid;
            appid = oid.split(':')[1];
        }
        /****** Создание структуры для хранения атрибутов ********/
            baseSdkUtils.the.appoid = baseApplicationDesignerUtils.getAppid();
            baseSdkUtils.the.appid = appid;
            baseSdkUtils.the.oid = oid;
            baseSdkUtils.the.media_url = '/' + baseSdkUtils.appId + '/resources/themes/current/images/app/ui/designer/media/' + appid + '/';       
           
            $('#menu').load(baseSdkUtils.the.media_url + '/menu.html');
        /**** Загрузка js ****************************************/
            jQuery.ajax({
                url: baseSdkUtils.the.media_url + ' createChart.js',
                dataType: 'script',
                success: function(){ loadResourcesProcessor(initial); },
                async: true
            });
    });
}

Вы можете не делать все это повторно, у вас уже есть переменная  baseSdkUtils.the.media_url, которая содержит весь путь до библиотеки, остается указать файл, если он в отдельной папке, это тоже нужно добавить к названию файла.
Помимо описанных способов вы можете так же использовать  ajax, как и в примере, если запускать что либо из библиотеки сразу не нужно, уберите поле success, асинхронный вызов в данном случае тоже не обязателен, если библиотека инициализируется один раз.

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

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

Hello World!:

- Сообщений не найдено.