Дипломная (вкр): Система автоматизации построения маркетинговых отчетов

Рисунок 3.18 - Раздел «Поиск»

.2 Визуальный редактор отчетов

Для удобной и полноценной работы пользователей системы с отчетом, в систему внедрен визуальный редактор.

Редактор работает с браузерами:Explorer версии 7 ивыше;версии 3.x и выше;версии 10.x и выше;версии 5 и выше;версии 7 и выше.

Внешний вид визуального редактора представлен на рисунке 3.19

Рисунок 3.19 - Внешний вид визуального редактора

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

.2.1 Панель задач

Панель задач может состоять из нескольких закладок: «Компоненты» и «Сниппеты».

Отображать и скрывать панели «Компоненты» и «Сниппеты» можно с помощью соответствующих кнопок панели 6. Доступны следующие действия управления панелью задач:

кнопка «Свернуть» временно скрывает панель;

кнопка «Обновить закешированные данные» позволяет сбросить кеш, например, если были добавлены собственные компоненты;

кнопка «Настроить» вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке «Настройки» панели инструментов;

кнопка «Закрыть» закрывает отображаемую панель. Восстановить ее отображение можно с помощью формы настройки редактора.

.2.2 Панель переключения режимов редактирования

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

В режиме работы с исходным кодом не все кнопки панели редактирования доступны. Можно работать только с панелью «Управление и настройки». Остальные кнопки панели редактирования заблокированы.

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

.2.3 Панель отображения свойств объектов (Свойства)

В области «Свойства» отображаются свойства того объекта, на котором установлен курсор мыши в данный момент. Это может быть визуальный компонент, тогда в области «Свойства» можно будет настроить параметры этого компонента. Панель «Свойства» также является скрывающейся, что регулируется кнопкой панели 6.

Доступны следующие действия управления панелью «Свойства»:

кнопка «Свернуть» временно скрывает панель;

кнопка «Настроить» вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке «Настройки» панели инструментов.

При работе с визуальным редактором, существует возможность настроить его внешний вид, который будет автоматически запомнен:

определить отображаемые панели;

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

Для этого служит кнопка «Настройки» панели инструментов. По нажатии на эту кнопку появляется диалоговое окно «Настройки визуального редактора», представленное на рисунке 3.20:

Рисунок 3.20 - Окно «Настройки визуального редактора»

Форма настроек состоит из трех закладок:

Закладка «Панели инструментов» служит для настройки показа панели инструментов. Есть возможность отключить ненужные в данный момент панели. Панель «Стандартные» отключить невозможно.

Закладка «Панели задач» служит для изменения отображения ненужных на данный момент панелей задач.

Закладка «Дополнительные настройки».

.2.4 Форматирование текста

Визуальный редактор предоставляет различные средства форматирования текста.

При переходе к редактированию страницы из административного раздела в списке шаблонов будет выбран шаблон по умолчанию. Его таблица стилей (файл styles.css) будет подключена для использования для данной страницы.

Меню редактирования стилей представлено на рисунке 3.21.

Рисунок 3.21 - Меню выбора стилей

Для каждого шаблона задается своя таблица стилей (файл styles.css). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.

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

В системе разработана возможность работы со стилями Работа со стилями

Для каждого шаблона задается своя таблица стилей (файл styles.css), которые можно использовать для оформления текста. В визуальном редакторе описанные стили могут выводится как с названиями, так и без.

В выпадающем списке можно выбрать необходимый стиль для текста или другого элемента страницы.

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

3.2.5 Работа с заголовками

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

Рисунок 3.22 - Меню выбора заголовков

Значение Normal из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.

Каждый заголовок соответствует определенномуHTML-тэгу.

Heading 1: <h1>Heading 1</h1>2: <h2>Heading 2</h2>3: <h3>Heading 3</h3>4: <h4>Heading 4</h4>5: <h5>Heading 5</h5>6: <h6>Heading 6</h6>

Preformatted: <pre>Preformatted</pre>

В визуальном редакторе доступны следующие шрифты:

Times New Roman

Verdana

Задание шрифта при редактировании в режиме кода: <fontface="font_name">TEXT</font>, где font_name заменяется на название выбранного шрифта из списка доступных. Выполнение действия происходит с использованием стиля для тега <font>. Например, при редактировании в режиме кода при выделении фона текста желтым цветом код будет выглядеть так:

<font style="BACKGROUND-COLOR: #ffff00">ТЕКСТ</font>

Это действие выполняется помощью атрибута color тега <font>. Например, при редактировании в режиме кода при выделении текста желтым цветом код будет выглядеть так:

<font color="#3366ff">ТЕКСТ</font>

Для работы с размерами шрифтов в редакторе могут быть использованы следующие размеры:

xx-smallsmalllargelarge

Задание размера шрифта при редактировании в режиме кода <fontsize="size_number">TEXT</font>, где size_numberзаменяется на размер шрифта от 1 до 7. Например, в визуальной части текст medium соответствует коду: <fontsize="4">medium</font>

Дляформатирование текста также предусмотрены следующте кнопки:

кнопка «Жирный» - <strong>Жирный</strong>

кнопка «Курсив» - <em>Курсив</em>

кнопка «Подчеркнутый» - <u>Подчеркнутый</u>

Кнопка «Очистить стиль» удаляет текстовое форматирование, т.е. удаляет тег <font> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.

Кнопка «Оптимизировать HTML-код» убирает пустые HTML-теги.Список убираемых пустых тегов: b, em, font, h1, h2, h3, i, li, ol, p, small, span, strong, u, ul и т.д.

Для выравнивания текста в системе предусмотрены следующие кнопки:

кнопка «По левому краю» - <p align="left">По левому краю</p>

кнопка «По правому краю» - <p align="right">По правому краю</p>

кнопка «По центру» - <p align="center">По центру</p>

кнопка «Выравниваем по ширине» - <p align="justify">Выравниваем по ширине</p>

В визуальном редакторе есть возможность создать два вида списков: нумерованный и маркированный.

Нумерованный список при редактировании в режиме кода выглядит следующим орабзом:

<ol>

<li>первый </li>

<li>второй </li>

<li>третий </li>

</ol>

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

<ul>

<li>первый </li>

<li>второй </li>

<li>третий </li>

</ul>

.2.6 Проверка орфографии

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

с помощью редактора MS Word (проверка производится на компьютере пользователя);

с помощью pSpell (проверка производится в браузере, при условии если pSpell установлен на сервере).

Проверка орфографии с помощью редактора MS Word

Перейти к проверке орфографии можно с помощью кнопки «Проверить орфографию». В случае, если орфография проверяется с помощью редактора MS Word, пользователь получит предупреждение о том, что на данной странице будет использован компонент «ActiveX», который выполняет взаимодействие с редактором MS Word.

Необходимо подтвердить использование компонента на данной странице (кнопка «Да»). И после этого появляется форма проверки орфографии, представленное на рисунке 3.23.

Рисунок 3.23 - Форма проверки орфографии.

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

.2.7 Работа с графикой

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

Необходимо выбрать место для изображения на странице, установить курсор в эту позицию и нажать кнопку «Изображение» на панели редактора. Появится диалог, представленный на рисунке 3.24.

Рисунок 3.24 - Диалоговое окно размещения изображения.

Для выбора изображения из медиабиблиотеки необходимо перейти к форме загрузки изображения из медиабиблиотеки. Внешний вид окна «Медиабиблиотеки» представлен на рисунке 3.25.

Рисунок 3.25 - Выбор изображения из медиабиблиотеки

Необходимо указать изображение и нажать кнопку «Выбрать». После чего закроется окно выбора файла из медиабиблиотеки, и путь к выбранному файлу будет указан в поле «Путь к изображению» формы загрузки изображения. Изображение появится в окне предпросмотра, а также будет указана его ширина и высота, которые задаются в коде с помощью aтрибутов «width» и «height» тега <img> соответственно. Форма редактирования изображения представлена на рисунке 3.26

Рисунок 3.26 - Форма редактирования изображения

Для выбора изображения из структуры сайта необходимо перейти к форме загрузки изображения из структуры сайта, выбрав пункт меню «Выбрать из структуры сайта кнопки». Появится окно «Менеджера файлов», представленное на рисунке 3.27.

Рисунок 3.27 - Окно «Менеджера файлов»

Окно «Менеджера файлов» разделено в нижней части на две закладки: «Открыть файл» и «Загрузить файл».

На закладке «Открыть файл» существует возможность открыть один из файлов, находящихся на сервере. На закладке «Загрузить файл» можно загрузить файл с локального компьютера.

Для загрузки файла с локального компьютера перейдите на закладку «Загрузить файл».

В одноименном поле необходимо указать путь к файлу на локальном компьютере. Для выбора файла внедрена кнопка «Обзор». Поле «Имя файла на сервере» заполнится автоматически. Если опция «Открыть файл после загрузки»не отмечена, то файл будет загружен в указанную папку.
При отмеченной опции указанный файл будет загружен в выбранную папку, одновременно с этим закроется окно менеджера файлов, и путь к выбранному файлу будет указан в поле «Путь к изображению» формы загрузки изображения. Изображение появится в окне предпросмотра, а также будет указана его ширина и высота, которые задаются в коде с помощью атрибутов «width» и «height» тега <img> соответственно.

3.2.8 Компоненты

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

Компоненты являются блоками, с помощью которых строится в системе логика. Они позволяют многократно использовать единожды написанный и отлаженный код. С помощью визуальных средств среды «1C-Битрикс: Управление сайтом» можно размещать и настраивать компоненты без написания кода.Для работы с компонентами служит панель Компоненты, отображенная на рисунке 3.28.

Рисунок 3.28 - Панель «Компоненты»

В рамках системы были разработаны компоненты специально для работы с отчетами:

График. Объем рынка;

График. Объем экспорта;

График. Объем импорта;

График. Производство по регионам;.

График. Средние цены;

Таблица. Объем рынка;

Таблица. Объем экспорта;

Таблица. Объем импорта;

Таблица. Производство по регионам;

Таблица. Средние цены.

Все компоненты обладают одинаковым набором входящих данных:

продукт - оцениваемый товар;

года - промежуток оцениваемых лет;

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

Форма редактирования параметров компонента представлена на рисунке 3.29.

Рисунок 3.29 - Форма редактирования параметров компонента

Для инструмента построения графиков был выбран MicrosoftExcel, как наиболее гибкая и удобная система. Процесс построения графика представлена на рисунке3.30.

Рисунок 3.30 - Процесс построения графиков в системе.

Все компоненты графиков работают по одному принципу.

Компонент, исходя из входных параметров, отправляет HTTP-запрос, на сервер fedstat.ru. Сервер принимает соединение и генерирует ответ в виде файла в формате SDMX. Данный файл забирает веб-сервер, и приводит его в удобный для обработки набор объектов. Затем, веб-сервер посылает HTTP-запрос на сервер с операционной системой семейства WINDOWScустановленным MicrosoftOffice, Apache HTTPD 2.2 и интерпретатором PHP. PHP-скрипт на Windows-сервере путем создания COM-объекта, запускаетMicrosoftExcel, заполняет ячейки полученными данными, строит график и сохраняет документ в формате HTML. Затем изображение графика передается на веб-сервер.

Построение таблиц идет по упрощенной схеме генерации графиков, однако обращения к windows-серверу не происходит, уже после этапа парсинга данных файла SDMX есть возможность сгенерировать таблицу.

.2.9 Сниппеты

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

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