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

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

Invoice Without Style

Invoice With Style

Во всех продуктах компании Stimulsoft есть встроенный инструмент для создания стилей. Этот инструмент называется дизайнер стилей. Для того, чтобы вызвать дизайнер стилей, следует, в дизайнере отчетов, на вкладке Главная нажать кнопку Дизайнер стилей. На рисунке ниже представлен дизайнер стилей.

Style Designer

Как видно из рисунка, дизайнер стилей состоит из панели инструментов и перечня стилей. Из перечня стилей можно сделать коллекцию стилей. Для это необходимо у стиля в свойстве Коллекции указать наименование коллекции стилей. Одна и таже коллекция стилей может быть создана единожды и применяться к различным отчетам. В тоже время, созданную коллекцию стилей, как и каждый стиль в отдельности, в любой момент можно отредактировать.

Прежде, чем перейти к практике и создать стили, рассмотрим панель инструментов дизайнера стилей.

Style Designer Toolbar

  Меню Добавить стиль (Add Style) содержит перечень элементов отчета, для которых можно создать стили. На рисунке снизу представлено данное меню.

Add Style Menu

Некоторые элементы в этом меню, могу отсутствовать. Например, в Reports.Web отсутствуют Report Control.

  Кнопка удаления выделенного стиля из перечня стилей.

  Кнопки перемещения вверх-вниз выделенного стиля в перечне стилей.

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

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

  Кнопка создания дубликата выделенного стиля. Дубликат будет расположен ниже своего прототипа в перечне стилей.

  Кнопка копирования стиля компонента. Выделите компонент, стиль которого следует добавить в коллекцию стилей. Вызовите дизайнер стилей, не снимая выделения этого компонента. Нажмите данную кнопку. Стиль выделенного компонента будет добавлен в перечень стилей.

  Команды управления буфером обмена: копировать выделенный стиль в буфер обмена, вырезать в буфер обмена, вставить стиль из буфера обмена.

  Кнопка Открыть сохраненную коллекцию стилей. Предварительно, следует сохранить коллекцию стилей.

  Кнопка сохранения коллекции стилей. При нажатии, необходимо определить место сохранения и имя файла.

  Кнопка закрытия дизайнера стилей.

Теперь создадим стиль компонента.
- Для этого вызовем дизайнер стилей, нажав кнопку Дизайнер стилей на вкладке Главная в дизайнере отчетов;
- В дизайнере стилей нажмем кнопку Добавить стиль и выберем элемент. В данном примере, Компонент.

На панели элементов появится новый стиль

New Style

При помощи свойств элемента, для которого создается стиль, следует определить настройки оформления. Поскольку стили могут создаваться для разных элементов отчета, то и свойства оформления будут отличаться. Например, стиль для диаграмм обладает такими свойствами, как фон области, цвет заголовков, заливка рядов и т.д. В данном примере, рассматривается создание стиля для компонента отчета (бэнд, текстовый компонент и прочие элементы, которые расположены в группе Компоненты). При помощи свойств компонента определим следующие настройки.
- Цвет заливки;
- Цвет шрифта, его стиль и размер;
- Тип границ и их цвет.

После того как стиль создан, его следует применить к элементу отчета. Это можно выполнить следующими способами.
- Выделить элемент отчета и назначит стиль через свойство Стиль Компонента или Меню стилей.
- В дизайнере стилей нажать кнопку Применить коллекцию стилей.

В случае, если нажать кнопку Применить коллекцию стилей, то у стиля должно быть указаны.
- Имя коллекции, к которой он относится. Задается при помощи свойства стиля Имя коллекции;
- Условие применения стиля указывается, в случае, когда коллекция стилей содержит больше одного элемента, или стиль должен быть применен только к определенным элементам отчета.

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

Style Conditions

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

img 1  По размещению, т.е. в зависимости от того, где расположен компонент. При этом, выбирается тип операции равно или не равно, т.е. размещен компонент на Заголовке отчета или не размещен. Также следует отметить, что в поле значений можно выбрать несколько компонентов. При этом можно задать также и уровень вложенности. Например, в Master-Detail отчете, необходимо чтобы стиль применялся к детальному бэнду. В этом случае, следует выбрать тип операции равно и установить значение 2. Максимальный уровень вложенности равен 100. Доступные следующие операции.
- Равно (equal to), при данной операции, стиль будет применяется, когда уровень вложенности контейнеров будет равен указанному уровню в поле значений;
- Не равно (not equal to), при выборе данной операции, стиль будет применяться ко всем компонентам в контейнерах, уровень вложенности которых не будет равен указанному уровню в поле значений;
- Операция Больше чем (greater than) выбирается, если необходимо чтобы стиль применялся к компонентам в контейнерах, уровень вложенности которых больше, чем уровень указанный в поле значений;
- Операция Больше чем или равно (greater than or equal to), выбирается если необходимо, чтобы стиль применялся к компонентам в контейнерах, уровень вложенности которых равен или больше указанного уровня в поле значений;
- Меньше чем (less than), при выборе данной операции, стиль будет применяться к компонентам в контейнерах, уровень вложенности которых будет меньше указанного уровня в поле значений;
- Меньше чем или равно (less than or equal to) выбирается, если необходимо, чтобы стиль применялся к компонентам в контейнерах, уровень вложенности которых будет равен или меньше указанного уровня в поле значений.

  Условие по типу компонентов. Этот вид условия задается, когда необходимо применять или не применять (в зависимости от типа операции - равно или не равно) стиль для компонентов определенного типа.

  Условие по расположению компонента Расположение (Location). Данный вид условия предоставляет возможность применять или не применять в зависимости от его расположения в контейнере. Также следует отметить, что в поле значений можно одновременно выбирать несколько расположений.

  По наименованию компонента. Этот вид условия предоставляет возможность применить стиль по имени или его части. Например, если установить операцию Содержит, а в поле значений указать Text, то стиль будет применен ко всем компонентам в наименовании, которых есть Text. Допустим, Text24, 1Text, Text_on и т.д. При использовании условия данного вида доступны следующие виды операций.
- Равно (equal to). При данной операции стиль будет применен к компоненту с наименованием идентичным тому, которое указано в поле значений.
- Не равно (not equal to). Если необходимо, применить стиль ко всем компонентам, кроме того, у которого наименование совпадает с указанным в поле значений, следует выбрать это значение.
- Содержит (containing). Если выбрана данная операция, то стиль будет применяться ко всем компонентам, которые в своем наименовании содержат текст указанный в поле значений.
- Не содержит (not containing). Стиль будет применяться ко всем компонентам, которые в своем наименовании не содержат текст указанный в поле значений.
- Начинается (beginning with). При выборе данной операции, стиль будет применяться ко всем компонентам, у которых наименование начинается с текста указанного в поле значений.
- Заканчивается на (ending with). При выборе данной операции, стиль будет применяться ко всем компонентам, у которых наименование заканчивается на текст указанное в поле значений.

Также, допустимо комбинирование разных видов условий. В этом случае, стиль будет применен, если сработают все условия. Иными словами, если используются условия видов Размещение и Наименование компонента, то стиль будет применен только в том случае, если эти условия выполняются. Кроме этого, возможно использование мульти-условий, т.е. когда задействовано два и более блока условий. В этом случае, к компоненту будут применены стили только в том случае, если все виды условий во всех блоках будут выполнены. Выполнение условий начинается после нажатия на кнопку Применить стили.

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

Invoice Peach Puff

Invoice Black

Invoice Lime

Invoice Red

Также, посмотрите наши видеоуроки по работе с дизайнером стилей:
Создание стилей для диаграмм
Использование инструмента Копировать стиль
Использование границ в отчете
Создание отчета и его стилей
We are constantly improving our products for web, providing all the necessary set of components to build reports. Today we will talk about the differences between the Flash designer

Flash designer
and HTML5 designer

HTML5 designer
Despite the similarities in terms of functionality, the designers of these reports have some differences. Flash and HTML5 report designers available in the following products – Reports Ultimate, Reports.Web, Reports.Java, Reports.PHP, Reports.Flex. However, the HTML5 report designer is also part of Stimulsoft Reports.JS.

It all starts with the system requirements for the design. The Flash report designer requires Adobe Flash Player version 11 and later. The HTML5 report designer requires only a web browser.

Integration of report designers in the project go the following way.

The Flash designer. Stimulsoft assemblies should be added to the project. Place the StiWebDesigner component on the project page and call the report designer.
OnSaveReport="StiWebDesigner1_SaveReport"
OnGetPreviewDataSet="StiWebDesigner1_GetPreviewDataSet"
The HTML5 designer. Stimulsoft assemblies should be added to the project. Place the StiMobileDesigner component on the project page and call the report designer.
OnPreviewReport="StiMobileDesigner1_Preview"
OnCreateReport="StiMobileDesigner1_CreateReport"
OnGetReport="StiMobileDesigner1_GetReport"
OnExit="StiMobileDesigner1_Exit"
InterfaceType="Auto"
GlobalizationFile="Localization/en.xml"
Theme="Office2013WhiteTeal"
Now let's talk about the design differences in functionality, interface and tools to create reports. Below is a comparison list.

FunctionalityHTML5Flash
Support for Touch UI check  
Selecting UI Localization Only from code In designer
Data Source Wizard check  
Support for OData and REST Requests check  
Data Source Type Table, Stored procedure Table
Data Dictionary Preview check  
Retrieve Column check check
Retrieve Columns and Parameters check  
Retrieve Parameters check  
Allow Run Stored Proc check  
Using Variable as SQL Parameter check  
Data from Business Objects check Without ability to create new ones
Files from Which Data Can Be Exported XML, JSON, Excel, CSV, DBase XML, JSON, CSV, DBase
Report Wizards Standard, Master-Detail Standard, Master-Detail, Label Report
Copy Style Tool Present in the Home tab  
Horizontal and Vertical Primitives In the development phase  
Shape Component check check
Report Tree   check
Interaction Editor check  
New Chart Editor check  
New Cross-Tab Editor check  
Gauges In the development phase  
Report Checker   check
Animation in Preview check  

It is worth noting that the development of the HTML5 designer is not stopping and to the end of summer 2016 this designer will have full functionality. Aslo we recommend you watch video tutorials on working with the HTML5 designer.
Мы рады объявить о выпуске новой версии Stimulsoft Reports 2016.1, который уже доступен для использования. Для данной версии мы разработали следующий функционал - новый штрих GS1-128, адаптер данных PostgreSQL в Reports.JS, печать с предварительным просмотром в HTML5 дизайнере и вьювере, AES-128 шифрование и многое другое.

Новый компонент в Reports.Web
Начиная с релиза 2016.1 в дизайнере отчетов HTML5 осуществляется поддержка компонента Таблица. Таблица состоит из ячеек, которые образуются при пересечении строк и столбцов. В этих ячейках размещаются различные данные, такие как текст, выражения, ссылки на колонки данных, RichText, изображение, checkbox.

New Component in Reports.Web

При работе с компонентом Таблица, можно задать неограниченное количество строк, которые будут использоваться для вывода заголовков и итогов данных.

Новый источник данных в Reports.Web
В HTML5 и HTML5 for MVC дизайнерах 2016.1 добавлена возможность создания источника данных на основе другого источника. Допустим, возникает необходимость сгруппировать данные, отсортировать их, отфильтровать или произвести вычисления с этими данных, а уже затем эти данные передать в отчет. В этом случае, создается источник данных на основе другого источника.

New Data Source in Reports.Web

Новая печать отчета в Reports.JS
Начиная с версии 2016.1 во вьювере на вкладке предварительного просмотра в HTML5 дизайнере есть команда печати. Причем, возможны следующие варианты печати:
- Печать в PDF;
- Печать с предварительным просмотром;
- Печать без предварительного просмотра.

New Printing of Reports in Reports.Web

Кросс-таблица в HTML5 дизайнере
Начиная с релиза 2016.1 в дизайнере отчетов есть возможность редактировать и создавать отчеты с кросс-таблицами. Кросс-таблица представляет собою специальный компонент, который предназначен для того, чтобы обработать, сгруппировать и просуммировать данные из источника. При этом результат представляется в виде таблицы. Редактор кросс-таблицы представлен тремя вкладками, на которых выбирается источник данных, указываются колонки данных и определяется стиль кросс-таблицы.

Cross-tab in HTML5 Designer

Вкладка События в Reports.Web
Теперь в HTML5 дизайнере на панели свойств добавлена вкладка События, которая содержит список событий отчета и выделенного компонента. Например, если необходимо, чтобы какое-либо действие выполнялось сразу после построения текстового компонента, то следует подписаться на событие End Render у текстового компонента.

events tab in reports web

Break if True
При использовании многоуровневых условий в отчете можно осуществить разрыв обработки условий. По умолчанию, все условия обрабатываются последовательно до самого последнего уровня. Начиная с релиза 2016.1 добавлен параметр Break if true. Если этот параметр включен и условие какого-либо уровня выполняется, т.е. возвращается значение true, то происходит разрыв и остальные условия, расположенные ниже, обрабатываться не будут. Если же параметр выключен, то все уровни условия обрабатываются последовательно. Эта опция добавлена в Reports.Web, Reports.Net, Reports.Wpf, Reports.JS.

Break if True

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

Infographics Menu

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

Updated Designer of Styles

Обновленное меню добавление стилей
В релизе 2016.1 переработано меню добавления стилей. В дизайнере стилей можно создать стиль для компонентов отчета, диаграмм, индикаторов, кросс-таблиц, карт, report control. Каждый такой стиль будет иметь свои настройки, учитывая специфику компонента, к которому он будет применен.

Updated Add Style Menu

Обновленное меню Show styles
В релизе 2016.1 мы доработали меню Show styles. При помощи этого меню можно узнать текущий стиль, просмотреть доступные стили, выбрать соответствующий стиль. Вызов выпадающего списка меню Show styles осуществляется при нажатии на миниатюру.

Updated Show Styles Menu

Шифрование AES-128 в PDF
В версиях до 2015.3 (включительно) наших продуктов, при экспорте отчета в PDF используются алгоритмы шифрования RC4 40 и 128 бит, AES 256 бит. Начиная с версии продуктов 2016.1 также будет поддерживаться алгоритм шифрования AES-128. Этот алгоритм шифрования поддерживается Acrobat 7 и выше. Опция добавлена в продуктах Reports.Web, Reports.Net, Reports.Wpf.

Новый штрих код GS1-128
Начиная с релиза 2016.1 осуществляется поддержка штрих кода GS1-128. Этот штрих-код предназначен для передачи информации о грузе между компаниями, и может содержать различную информацию. Например, код товара, сроки годности, размеры, объём, код партии производителя и др. Этот штрих код добавлен в Reports.Web, Reports.Net, Reports.Wpf.

New Barcode GS1-128

Новый предварительный просмотр Reports.JS
Начиная с релиза 2016.1 предварительный просмотр отчетов в JS Designer осуществляется в полнофункциональном вьювере. Ранее, был доступен предварительный просмотр, как HTML. Теперь, предварительный просмотр не отличается от вьювера отчета и обладает всей его функциональностью. Доступны команды печати построенного отчета, экспорта отчета в PDF, HTML, HTML5, Microsoft Word и Excel. Также на вкладке предварительного просмотра может присутствовать панель поиска, параметров и закладок, а также располагаются элементы управления навигацией по отчету, масштабом и режимами отобрания страниц.

New Preview in Reports.JS

PostgreSQL в Reports.JS
С источниками данных MS SQL, MySQL, Firebird наш продукт Stimulsoft Reports.JS работает с первого релиза. Начиная с релиза 2016.1 добавлена поддержка адаптера PostgreSQL. Теперь можно создать PostgreSQL источник данных и строить отчеты на основе этого источника.

PostgreSQL in Reports.JS

Переменная типа Список в Reports.JS
При создании отчетов переменная применяется в различных случаях. Как правило, переменная хранит какое-либо значение, используемое для выборки данных, в том числе и при фильтрации данных. Начиная с релиза 2016.1 переменная может хранить список значений. Для этого следует при создании переменной определить её тип как Список и выбрать.

Variable of List Type in Reports.JS

Сетка в HTML5 дизайнере
В этом релизе добавлена возможность отображения сетки на странице. Сетка применяется для точного выравнивания компонентов относительно друг друга. Например можно воспользоваться командой Выравнивание по сетке, для привязки компонентов отчета к узлам сетки. Отрисовка сетки может осуществляться точками и линиями. Включение сетки и определение способа её отрисовки осуществляется в окне Опции (Options). Эта оция добавлена в продуктах Reports.Web и Reports.JS.

Grid in HTML5 Designer

Копия страницы в HTML5 дизайнере
В релизе 2016.1 в дизайнерах добавлена команда копирования страницы. При помощи этой команды можно создавать идентичные копии страниц со всеми компонентами и параметрами. Для выбора команды копирования, следует вызвать контекстное меню на заголовке страницы. Эта опция добавлена в продуктах Reports.Web и Reports.JS.

Duplicate Page in HTML5 Designer

Стили в мастере перетягивания в HTML5 дизайнере
В этом релизе для HTML5 и JS дизайнеров мы добавили возможность определить стиль отчета при создании его структуры. При перетягивании источника данных в шаблон отчета, вызывается окно Данные, в котором следует выбрать колонки данных и определить другие опции. Теперь в этом окне есть вкладка Стили. На этой вкладке расположены предустановленные стили и пользовательские коллекции стилей. Выберите стиль, и он сразу же будет применен к создаваемому отчету. Эта опция добавлена в продуктах Reports.Web и Reports.JS.

styles in drag and drop wizard in html5 designer

URL к источнику данных JSON в Reports.Java
Ранее в Reports.Java при создании JSON источника данных можно было указать только путь к JSON файлу. Начиная с релиза 2016.1, при создании JSON источника данных можно указать URL как путь к JSON файлу.

URL to JSON Data Source in Reports.Java

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

Начиная с релиза 2016.1, мы добавили редактор текста параметров для Swing вьювера.

Полный список изменений можно изучить по следующим ссылкам.

Stimulsoft Reports.Ultimate
Stimulsoft Reports.Net
Stimulsoft Reports.Silverlight
Stimulsoft Reports.Web
Stimulsoft Reports.Wpf
Stimulsoft Reports.WinRT

Stimulsoft Reports.JS
Stimulsoft Reports.Flex
Stimulsoft Reports.PHP
Stimulsoft Reports.Java

Stimulsoft Reports Server
С источниками данных MS SQL, MySQL, Firebird наш продукт Stimulsoft Reports.JS работает с первого релиза. Начиная с релиза 2016.1 добавлена поддержка адаптера PostgreSQL. Теперь можно создать PostgreSQL источник данных и спроектировать отчеты на основе этого источника.

New Data Source in Reports.JS
В новом релизе добавлена возможность отображения сетки на странице в дизайнерах HTML5 и JS. Сетка применяется для точного выравнивания компонентов относительно друг друга. Например можно воспользоваться командой Выравнивание по сетке, для привязки компонентов отчета к узлам сетки. Отрисовка сетки может осуществляться точками и линиями. Включение сетки и определение способа её отрисовки осуществляется в окне Опции (Options).

Grid in HTML5 and JS Designers