Оформление
[Общий] Каталог
1. Обзор
1.1 Версия
| Версия FineBI | Версия приложения | Версия плагина HTML5 Mobile Presentation | Функциональные изменения |
|---|---|---|---|
| 6.0 | V11.0.68 | V11.0.68 | - |
1.2 Сценарии применения
По умолчанию на мобильном терминале отображается девятисеточный стиль каталога, в случае, если каталог не первого уровня, интерфейс каталога будет казаться пустым, платформа может изменить стиль каталога, предоставить баннеры и настройки шаблона, которые могут быть отображены на странице каталога.
1.3 Функциональный профиль
Администратор входит в систему FineBI и выбирает "System Management>Мобильная платформа>Каталоги " для настройки структуры каталогов мобильного терминала. Как показано на рисунке ниже:
2. Операционные шаги
Метод предварительного просмотра мобильного каталога APP см. в разделе: Мобильная платформа Глава 4.
Метод мобильного каталога HTML5 Preview: доступ к панели управления/проектам на стороне HTML5.
2.1 Структура каталога
По умолчанию в мобильном каталоге платформы используется структура "Девять сеток", как показано на рисунке ниже:
Эффект мобильника показан ниже:
1) Приложение
2) HTML5
Примечание: Если пользователи хотят установить другие стили структуры каталогов, обратитесь к разделу Directory Structure Plugin.
2.2 Настройки стиля
2.2.1 Настройки стиля сетки девятки
Если структура каталога представляет собой девятипанельную сетку, вы можете задать стиль "каталога первого уровня" на мобильной стороне.
Откройте кнопку "Изменить параметры сетки по умолчанию", как показано ниже:
В следующей таблице описаны подробности каждой настройки каталога первого уровня:
| мобильное устройство (смартфон, планшет и т.д.) | сфера действия | Количество столбцов (необязательно) | Размер значка | размер каталога | цвет шрифта | жирный (шрифт) |
|---|---|---|---|---|---|---|
| Мобильные телефоны,Пад | Приложение,HTML5 | 3 | В наличии: малый, средний, большой | По умолчанию размер шрифта составляет12, выбирается пользователем | Черный цвет по умолчанию, настраиваемые пользователем параметры | Кнопки по умолчанию выключены, но их можно включить |
| 4 | В наличии: малый, средний, большой | |||||
| 5 | В наличии: малый, средний |
2.2.2 Настройки стиля дерева каталога для навигации по категориям
Примечание: Только после загрузки плагина "Дерево каталога навигации по категориям" вы сможете выбрать структуру дерева каталога навигации по категориям, пожалуйста, обратитесь к плагину "Структура каталога " для загрузки плагина.
Если структура каталога представляет собой дерево навигации по категориям, вы можете задать "Основной стиль каталога" и "Вторичный стиль каталога" для мобильных устройств.
Выберите "Дерево каталога навигации по категориям" в разделе "Структура каталога" и откройте кнопку "Дерево каталога навигации по категориям по умолчанию", как показано на следующем рисунке:
Подробное описание каждого элемента настройки первичного и вторичного каталогов приведено в таблице ниже:
| мобильное устройство (смартфон, планшет и т.д.) | сфера действия | Каталог первого уровня | Вторичный каталог |
|---|---|---|---|
| Мобильный телефон, планшет | Приложение,HTML5 | Размер каталога: по умолчанию 16 | Количество колонок: варианты 3, 4 |
| Цвет шрифта: черный по умолчанию, может быть настроен на выбор | Размер значка: возможны варианты: маленький, средний и большой | ||
| Выделение жирным: по умолчанию выключено, может быть включено | Размер каталога: по умолчанию 12, возможны настраиваемые варианты | ||
| Отображение значка: включено по умолчанию, размер значка зависит от размера шрифта каталога | Цвет шрифта: черный по умолчанию, может быть настроен на выбор | ||
| Цвет иконок: по умолчанию синий, возможна настройка цвета. | Выделение жирным: по умолчанию выключено, может быть включено | ||
| Показывать разделенные линии: по умолчанию включено, может быть отключено | -- |
Эффект от настроек по умолчанию показан ниже:
2.3 Окно поиска по каталогу
Окно поиска по каталогу, включенное по умолчанию, не отображается на мобильных устройствах при нажатии кнопки выключения.
Примечание: Если поле поиска в каталоге отключено, плагин дерева каталога приложений и многоуровневые страницы каталога также не имеют поля поиска.
Для примера возьмем каталог с девятью сетками, эффект после закрытия окна поиска показан ниже:
Примечание: приложение и HTML5 - это одно и то же.
2.4 Баннеры
2.4.1 Добавление баннеров
Изображения, используемые в примере: banner image.zip
Включите Баннеры на вкладке Каталог;
Нажмите на цифру " " в левом верхнем углу, чтобы открыть окно редактирования для добавления баннера, и нажмите "ОК". Как показано на рисунке ниже:
1) Имя: не может быть пустым и не может повторяться.
2) Мобильный телефон: загрузите изображение баннера для мобильного телефона, загруженное изображение будет масштабировано до 375*188, рекомендуемый формат изображения: PNG, JPG.
3) Таблетка: Загрузите изображение баннера Pad, загруженное изображение будет масштабировано до 1024*188, рекомендуемый формат изображения: PNG, JPG.
4) Ссылка:
- Не обязательная гиперссылка, на которую нужно перейти при нажатии на изображение, введите относительный путь или абсолютный путь, начинающийся с http/https.
- Перейти cpt/frm, единственные кнопки на шаблоне - это кнопки аннотации (переворота страницы).
- Заголовок панели навигации - это заголовок баннера.
- При возникновении проблем с адресом ссылки выдается соответствующее сообщение об ошибке.
Примечание: Разрешенные форматы файлов включают PNG, JPG и GIF. Если вы загрузите изображение в неправильном формате, вам будет выдано сообщение "XXX - запрещенный тип файла".
2.4.2 Редактирование баннеров
При добавлении 2 или более баннеров вы можете установить интервал вращения баннера, по умолчанию это 5 секунд, тогда баннеры будут вращаться автоматически каждые 5 с, или вы можете вручную переключать их. Как показано на рисунке ниже:
2.4.3 Мобильные эффекты
Если добавить 2 баннера и установить интервал вращения 2 секунды, мобильный эффект будет выглядеть следующим образом:
1) Приложение
2) HTML5
2.5 Шаблоны
2.5.1 Добавление шаблонов
Включите шаблоны на вкладке Каталог;
Каталог выбора шаблона home.frm (пользовательский шаблон выбора) отображается в разделе "Над каталогом". Как показано на рисунке ниже:
Примечание: Если функция шаблона включена, но шаблон не выбран, функция шаблона не действует.
Оговорки:
1) Шаблон, вставленный в пример: Catalogue Home.zip
2) Поместите его в папку %JAVAHOME%/webapps/webroot/WEB-INF/reportlets. Как показано на рисунке ниже:
3) Обновите адрес проекта FineBI, и шаблон появится в разделе "Мобильная платформа".
2.5.2 Мобильные эффекты
Примечание: Значок каталога в эффекте - это пользовательский значок каталога, на который можно ссылаться в разделе 2.6.2 данного документа.
1) Приложение
2) HTML5
2.6 Значки каталога
В конструкторе FineBI есть три встроенных набора иконок (плоские, разноцветные и градиентные), также вы можете "настроить" иконки. Как вы можете видеть на рисунке ниже:
2.6.1 Значки встроенного каталога
Слева находится дерево каталогов, выберите каталог или шаблон и нажмите правую иконку, чтобы изменить иконку каталога или шаблона. Как показано на рисунке ниже:
2.6.2 Настройка значков
1) Значок загрузки
На вкладке "Настройка" нажмите кнопку " ", чтобы загрузить иконку. Как показано на рисунке ниже:
2) Установка значка
В качестве примера возьмем каталог "Руководство для начинающих". Выберите каталог "Руководство для начинающих" и щелкните на пользовательском значке, который вы только что загрузили. Шаги показаны на следующем рисунке:
3) Значок удаления
Нажмите "Редактировать" в правом верхнем углу, чтобы войти в состояние удаления значка, нажмите на вилку над маленьким значком, который нужно удалить, и во всплывающем окне появится сообщение "OK для удаления этого элемента? Нажмите "ОК", иконка будет удалена, нажмите "Назад", чтобы выйти из состояния удаления иконки.
Как показано на рисунке ниже:
