Встраивание библиотеки ELiS в собственные мобильные или десктопные приложения можно осуществить с помощью технологии ELiS WebApps.
ELiS WebApps формирует одностраничный веб-сайт, отображающий каталог электронной библиотеки и поддерживаемые ядром ELiS документы в соответствующих плеерах.
Отличие ELiS WebApps от большинства мобильных сайтов: после первоначальной загрузки приложения происходит только подгрузка новых данных без перехода на новые страницы сайта, что существенно ускоряет навигацию и открытие электронных документов на маломощных мобильных устройствах (около 5 секунд на переход) и при низкоскоростном подключении к интернету.
Содержание
Механизм интеграции библиотеки ELiS в мобильные приложения[править]
Встраивание в нативные мобильные приложения на платформах Windows, iOS, Android производится с помощью компонента WebView. Конечно, такое приложение не будет работать в офлайне. В остальном функционал сохранится, включая возможность скачивания документов на устройство.
Однако, создание отдельных нативных приложений под Windows, iOS, Android может быть дорогостоящим процессом, поэтому разработчики часто прибегают к созданию одного кросплатформенного приложения на базе Apache Cordova (PhoneGap) или аналогичного программного обеспечения (ПО) с последующей компиляцией под Windows, iOS, Android. В таком случае, весь интерфейс приложения является локальным веб-сайтом в компоненте WebView и встраивание ELiS происходит с помощью iframe в iOS/Android и x-ms-iframe в Windows.
В случае, если используется DRM-защита, разработчику мобильного приложения следует предусмотреть механизм авторизации пользователя на сайте ELiS прежде чем откроет в WebView адрес ELiS WebApps.
Встраивание в Apache Cordova[править]
Использовать Apache Cordova позволяют разные среды программирования, такие как Intel XDK, Microsoft Visual Studio. Для использование ELiS рекомендуется Microsoft Visual Studio, т.к. из этой среды можно создать приложения не только для Windows Phone и Android, но и для десктопных версий Windows.
Пример приложения для Apache Cordova, выводящего ELiS WebApps на все окно мобильного приложения:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!--[if IEMobile]><![if lt IE 11]><meta name="viewport" content="width=auto,user-scalable=no"> <![endif]><![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--
Настройте политику безопасности содержимого в метатеге ниже. Добавьте "unsafe-inline" к default-src, чтобы включить встроенный код JavaScript.
Дополнительные сведения см. по ссылке http://go.microsoft.com/fwlink/?LinkID=617521
-->
<title>ELiS Library</title>
<!-- Ссылки BlankCordovaApp2 -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<!-- Ссылка на Cordova. Она добавляется в приложение после выполнения сборки. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
<!-- Создаем x-ms-webview в Windows и iframe на остальных платформах и устанавливаем в качестве адреса нужный нам url ELiS WebApps -->
<!-- Код аналогичен:
<!-- <iframe id="embedded" src="https://k.psu.ru/library/app/catalog" style="width:100%;height:100%;border:0;margin:0;padding:0;display:block;"></iframe> -->
<!-- <x-ms-webview id="embedded" src="https://k.psu.ru/library/app/catalog" style="width:100%;height:100%;border:0;margin:0;padding:0;display:block;"></x-ms-webview> -->
<script>
var elisWebAppUrl = "https://example.com/app/catalog";
var elisIFrame = null;
var msWebView = document.createElement("x-ms-webview"); // ms not support iframe and must be use x-ms-webview
if ("src" in msWebView) {
elisIFrame = msWebView;
} else {
elisIFrame = document.createElement("iframe");
}
elisIFrame.style.width = "100%";
elisIFrame.style.height = "100%";
elisIFrame.style.border = "0";
elisIFrame.style.margin = "0";
elisIFrame.style.padding = "0";
elisIFrame.style.overflow = "hidden";
elisIFrame.id = "embedded";
elisIFrame.src = elisWebAppUrl;
document.body.appendChild(elisIFrame);
var resizeEmbedded = function(e) {
var elem = document.getElementById("embedded");
elem.style.height = window.screen.availHeight + "px";
elem.style.width = window.screen.availWidth + "px";
};
resizeEmbedded(); // Устанавливаем размеры iframe
</script>
</body>
</html>
В css/index.css следует указать отсутствие отступов и скролла:
html,body {
background: #0981B3;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
Обычно Apache Cordova используется вместе с веб-фреймворками, помогающими создать визуальное оформление, такими как jQuery Mobile, Framework7, Ionic и другими. В этом случае вам следует изменить код примера, чтобы на отдельной странице встраивать iframe или x-ms-webview и менять его размер при изменении ориентации устройства.
Встраивание в нативные веб-приложения с помощью WebView[править]
Использование нативных приложений и компонента WebView под каждую платформу в отдельности позволяет добиться большей производительности приложения. При встраивании ELiS в мобильное приложение с помощью стандартного WebView особых требований к приложению нет. Просто укажите в качестве адреса https://example.com/app/catalog.
Например, в C#-проекте для Windows Phone в XAML-файле достаточно вставить:
<WebView Source="https://example.com/app/catalog"></WebView>
Примеры приложений[править]
Для использования примеров может потребоваться отдельная настройка, добавление логотипов, изменение названия и т.п.
В любом случае следует изменить уникальный идентификатор приложения, иначе вы не сможете загрузить приложения в магазины.
Visual Studio с однооконным приложением на базе Apache Cordova[править]
Исходный проект Visual Studio 2015:
Проект состоит из одного окна и может быть скомпилирован для iOS, Android, Windows Phone 8, Windows Desktop, Windows Universal Apps (Windows 10+).
Для использования: распакуйте проект, поменяйте название в конфигурационных файлах, добавьте логотипы и иную логику.
Сборка под iOS и Android потребует дополнительных усилий. Подробности смотрите в справке к Visual Studio.
Пример универсального приложения под Windows 10:
