Использование медиатеки

При разработке приложение в SberMobile, расширение Медиа библиотека сервера является бесценным инструментом для хранения и управления ресурсами приложения. Это особенно актуально для работы с CSS компонентов инструментальной панели, поскольку он полезен во многих отношениях, позволяя хранить и получать доступ к:

• Медиа ресурсам (изображения, видео и т. д.) всех типов

• пользовательским шрифтам

• CSS-файлам

• Любым файлам, которые вы потенциально хотите, чтобы пользователи загружали по прямой ссылке.

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

Чтобы поместить файл в медиатеку, вам нужно получить доступ к соответствующему плагину Сервера:

1. Найдите контекст API медиа библиотеки сервера в разделе Драйверы и расширения в Системном дереве пользовательского интерфейса вашего продукта SberMobile. Для облегчения поиска можно воспользоваться вводом поиска на панели инструментов дерева.

2. Откройте конфигурацию плагина, щелкнув по нему или из его контекстного меню, щелкнув правой кнопкой мыши по плагину и выбрав действие ( ) Редактировать свойства драйвера/расширения.

3. На вкладке Список файлов диалогового окна конфигурации расширения добавьте новый элемент, нажав кнопку () Добавить строку.

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

5. Теперь переместитесь в поле Содержимое папки и перейдите в созданную папку, нажав на кнопку () рядом со строкой [ Нет записей ].

6. В таблице Содержимое папки добавьте новую строку так же, как это было сделано ранее в таблице Список файлов.

7. На этот раз оставьте для поля Тип значение Файл по умолчанию. В поле Имя добавьте имя, которое вы будете использовать для ссылки на файл. Оставьте поле Режим кэширования без изменений со значением PUBLIC.

8. Загрузите файл в поле Файл.

9. В поле Тип содержимого указывается HTTP-заголовок content-type для загружаемого файла. В зависимости от типа файла это может быть один из типов MIME в соответствии с RFC 7231 Media Types. В текущем примере мы загружаем изображение в формате .png, поэтому MIME имеет значение image/png.

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

11. Файл добавлен в медиатеку, и доступ к нему можно получить из любой точки Платформы, используя

/content/file/folderName/fileName.extension

ссылку. В текущем примере ссылка будет иметь вид /content/file/media/cool_image.png.

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

Чтобы использовать файл, загруженный в медиатеку, в CSS веб-компонента, привяжите его как обычный файл, используя адрес, основанный на расположении файла в таблице списка файлов:

1. В UI редакторе добавьте компонент на инструментальную панель, щелкнув его в Палитре компонентов или перетащив его на макет.

2. Откройте редактор свойств, при наведении курсора на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

3. В редакторе свойств переключитесь на вкладку, содержащую свойство пользовательского стиля.

4. На открывшейся вкладке добавьте стиль CSS со ссылкой на запись в медиатеке в локальное свойство пользовательского стиля:

background-image: url("/content/file/media/cool_image.png");
background-position: center;
background-repeat: no-repeat;

5. Стиль применяется, когда поле выходит из фокуса, и результат виден на инструментальной панели.