Темы оформления для дизайнера и вьювера отчетов в JavaScript-продуктах

Автор: Eliza Leppik
При разработке программного обеспечения немалую роль играет оформление графического интерфейса пользователя. Фактически, GUI является "лицом" продукта для потребителей. Отсюда и возникает важность его оформления, адаптивность, удобство и простота использования. В компонентах Stimulsoft предоставляется возможность изменять оформление графического интерфейса пользователя за счет готовых тем оформления и различных оттенков.

В этой статье мы рассмотрим, как изменить темы оформления для дизайнера и вьювера отчетов в продуктах Stimulsoft Reports.JS и Stimulsoft Dashboards.JS.

Изменение темы вьювера

Чтобы изменить тему при создании компонента StiViewer, следует выбрать одно из перечислений StiViewerTheme для свойства theme в классе StiViewerOptions. По умолчанию, если свойство theme не определено, используется значение StiViewerTheme.Office2022WhiteBlue. Ниже представлен пример изменения темы оформления вьювера отчетов: 
...
let options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022BlackBlue;

let viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml();
...
После этого вьювер отчетов будет запущен с указанной темой.

Изменение темы дизайнера отчетов

Аналогично можно изменить тему и для компонента StiDesigner, с той лишь разницей, что используется класс настроек StiDesignerOptions. Ниже представлен пример изменения темы оформления дизайнера отчетов: 
...
let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022BlackBlue;
				
let designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml();
...
После этого дизайнер отчетов будет запущен с указанной темой.

Изменение темы "на лету"

Иногда возникает необходимость изменить тему оформления GUI не в момент инициализации компонентов, а при определенных обстоятельствах. Например, в обработчике события, предоставить пользователю выбор темы в пользовательском интерфейсе (например, через выпадающий список или кнопку). Изменить тему оформления "на лету" можно при помощи специального метода applyTheme , который в качестве аргументов принимает одно из перечислений StiViewerTheme или StiDesignerTheme. 
...
viewer.applyTheme(StiViewerTheme.Office2022WhiteBlue);

...

designer.applyTheme(StiDesignerTheme.Office2022WhiteBlue);
...

Изменение тем в React, Vue.js, Angular приложениях

При интеграции компонентов Stimulsoft в приложения на React, Vue.js или Angular также доступна возможность изменения темы оформления. Процесс изменения темы аналогичен реализации в JavaScript, но с учетом особенностей соответствующего фреймворка. Более подробно ознакомиться с вопросом изменения темы для React, Vue.js или Angular компонентах можно в наших примерах:



Таким образом, Stimulsoft предоставляет единый и гибкий механизм темирования, который поддерживается как в чистом JavaScript, так и в React, Vue.js и Angular. Темы можно применять как при инициализации компонентов, так и динамически во время выполнения, что упрощает интеграцию и настройку внешнего вида интерфейса под конкретные требования проекта.
Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.
Я согласен