Размещено на http://www.allbest.ru/

Реферат

к дипломному проекту на тему:

«Разработка и экспериментальное исследование редактора схем программ»

1. Количественные характеристики работы

Пояснительная записка к дипломной работе содержит 102 страницы, 49 иллюстрацию, 3 таблиц, 3 приложения, 21 источник литературы.

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

Блок-схема, алгоритм программы, редактор блок-схем, построение блок-схем, выполнение блок-схемы, получение кода блок-схемы, обучение программированию.

3 Краткое описание работы

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

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

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

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

Содержание

ВВЕДЕНИЕ

1. Аналитический обзор существующих программ-редакторов схем

1.1 Microsoft Office Visio 2007

1.2 Редактор блок-схем

1.3 FCEditor

1.4 Вывод по аналитическому обзору

2. Выбор технических средств

3 Моделирование процессов системы

3.1 Смысл моделирования процессов

3.2 Описание функционирования системы с использованием стандарта IDEF0

3.3 Выявление базовых требований к данным на основе DFD-диаграммы

3.4 Описание базовых функций системы на основе диаграммы прецедентов

4 Математическое описание

4.1 Описание модели данных

4.2 Математическое описание используемых моделей данных

4.3 Описание структур данных

4.4 Алгоритм программы

5 Описание структуры системы

5.1 Описание структуры системы с помощью диаграммы классов

5.2 Структурная схема программы

6 Описание интерпретатора использованного в программе

6.1 Варианты использования

6.2 Возможности Jint

6.3 Описание основных возможностей языка JavaScript

6.3.1 Вывод данных

6.3.2 Переменные

6.3.3 Базовые типы

6.3.4 Операторы

6.3.5 Массивы

6.3.6 Функции

7. Описание системы

7.1 Описание главного меню

7.2 Описание панели инструментов и операций

7.3 Описание вставки новых блоков

7.4 Описание работы с массивами

7.5 Выполнение кода блок-схемы

8 Примеры программ, созданных в редакторе

8.1 Решение квадратного уравнения

8.2 Сортировка массива пузырьком

8.3 Вычисление среднего значения элементов массива

9 Создание сайта удалённого обучения на основе интерактивной системы обучения Moodle

9.1 Общая характеристика интерактивной системы обучения Moodle

9.2 Создание базы заданий для тестирования

9.3 Создание базы пользователей

9.4 Разработка механизма выставления преподавателем оценки

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Приложение А (обязательное) Программный код

Приложение Б (обязательное) Руководство пользователя

Приложение В (справочное) XML файл, генерируемый программой

Введение

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

Еще во времена становления программирования, неотъемлемой частью разработки программ было использование блок-схем. Блок-схема -- это распространенный тип схем (графических моделей), описывающих алгоритмы, в которых отдельные шаги изображаются в виде блоков различной формы, соединенных между собой линиями.

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

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

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

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

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

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

визуальное программирование схема сайт

1. Аналитический обзор существующих программ-редакторов схем

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

1.1 Microsoft Office Visio 2007

Microsoft Office Visio 2007 -- программа построения чертежей и диаграмм, помогающая специалистам сферы ИТ и сферы бизнеса визуализировать, исследовать и распространять сложную информацию[1]. Трудный для понимания текст и таблицы можно представить в виде простых и наглядных диаграмм Visio. Вместо статичных рисунков пользователи создают тесно связанные с данными диаграммы Visio, которые отображают данные, легко обновляются и позволяют заметно повысить производительность работы. Широкий спектр диаграмм Office Visio 2007 помогает лучше понять информацию об организационных системах, ресурсах и процессах всего предприятия, принимать решения на основе этой информации и обмениваться ею[2].

Microsoft Office Visio 2007 обладает следующими преимуществами:

1) визуализация, исследование и публикация систем, ресурсов, процессов и связанных с ними данных[3]. Широкий выбор типов схем Office Visio 2007 обеспечивает эффективную визуализацию, исследование и публикацию процессов, ресурсов, систем и связанных с ними данных;

2) визуализация сложной информации путем вывода данных в схемах и выполнение соответствующих действий. Визуализация данных в диаграммах позволяет лучше понять суть данных и выполнять необходимые действия в зависимости от результатов анализа. Используя средство Microsoft Office Visio 2007 «Рисунки, связанные с данными», можно изображать данные в любой диаграмме в виде текста, элементов данных, значков и цветовых обозначений;

3) быстрое создание диаграмм благодаря автоматическому подключению к фигурам Visio. В Office Visio 2007 имеется новая функция автоматического соединения, которая может автоматически подключать, размещать и выравнивать фигуры на схеме, облегчая работу пользователя. Достаточно перетащить фигуру на страницу документа и расположить ее над одной из синих стрелок, которые находятся над фигурой, уже размещенной на странице[4];

4) представление комплексных данных с использованием новых шаблонов и фигур. представления данных благодаря новым и усовершенствованным шаблонам и фигурам. Например, в выпуске Office Visio Профессиональный 2007 можно составлять схемы процессов ИТ-служб с помощью нового шаблона ITIL (Information Technology Infrastructure Library),создавать диаграммы на основе экономичной методологии и визуализировать более эффективные производственные процессы при помощи нового шаблона схемы потока создания стоимости;

5) повышение производительности благодаря интеграции схем с данными из разных источников. Источники комплексных визуальных, текстовых и числовых данных. Диаграммы, подключенные к данным, обеспечивают визуальный контекст для данных и дают полное представление о системе или процессе. Связь схем с данными из различных источников стала проще благодаря функции связывания данных в Office Visio Профессиональный 2007. Привязка данных к фигурам диаграммы выполняется с помощью нового мастера автоматического связывания[5];

6) исследование данных для отслеживания тенденций, выявления проблем и пометки исключений с помощью сводных схем. Шаблон сводной схемы позволяет наглядно представлять и анализировать бизнес-данные в Office Visio Профессиональный 2007 в иерархической форме в виде групп и итогов данных. Имеется возможность детализировать комплексные данные, отображать информацию с помощью средства «Рисунки, связанные с данными», динамически создавать различные представления данных и лучше понимать сложную информацию. Сводные схемы можно вставлять в любую диаграмму Visio, чтобы получать доступ к показателям и отчетам, которые помогут отслеживать текущее состояние процесса или системы. Сводные схемы создаются путем подключения к различным источникам данных, таким как Microsoft Office SharePoint Server 2007, Microsoft Office Project 2007 и Microsoft Office Excel 2007. Возможность создания наглядных отчетов программ Office SharePoint Server 2007 и Office Project 2007 в форме сводной схемы повышает эффективность контроля ресурсов и проектов, управляемых с помощью этих программ;

7) эффективное распространение информации с помощью профессионально оформленных схем. Для создания диаграмм Visio профессионального качества достаточно выбрать цвет или эффект (текст, заливку, тень, линии, формат соединителей) для всей диаграммы с использованием новой функции «Тема». На выбор в Visio предлагается ряд встроенных тем, но можно создавать и собственные темы. В Office Visio 2007 используются те же встроенные темы, что и в других программах системы Microsoft Office 2007.

1.2 Редактор блок-схем

Редактор блок-схем[6] - специализированная программа, она предоставляет тот набор инструментов, который необходим именно для создания блок-схем, что является существенным аргументом в пользу применения данной программы, а не использования графических редакторов. Набор дополнительных опций позволяет оптимизировать процесс разработки блок-схем и дальнейшего преобразования их в процедуры и функции языка программирования.

Системные требования программы очень скромные и она запускается практически на любом компьютере с любой версией Windows .

Останавливаясь подробнее на опциях редактора, следует отметить наиболее важные из них:

1) использование шаблонов при создании блок-схем;

2) импорт процедур и функций языков программирования;

3) экспорт блок-схем в процедуры и функции языков программирования;

4) экспорт блок-схем в различные графические форматы.

1.3 FCEditor

Основанная идея этой программы - изобразить блок-схему из блоков с произвольным по величине (имеется в виду текст) содержанием. В большинстве редакторов, если и имеется возможность автоматически менять размер компонентов, то все стрелки и переходы все равно надо расставлять вручную. В FCEditor это делается автоматически. Возможности FCEditor[7]:

1) импорт схемы из программного кода;

2) автоматическое выравнивание блоков и стрелок;

3) возможность изменения типа блоков;

4) копирование и вставка блоков схемы;

5) отдельная схема для каждой процедуры;

6) возможность вставки разрывов страниц;

7) экспорт схемы в графический файл;

8) экспорт схемы в код.

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

1.4 Вывод по аналитическому обзору

Рассмотрев существующие программы-редакторы схем, мы можем их обобщить, каждая из них:

1) может использовать шаблоны для создания схем;

2) может экспортировать созданную схему в различные форматы;

3) обладает автоматической «подгонкой» блоков и стрелок;

4) может создавать разные типы схем.

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

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

2. Выбор технических средств

Программа написана на платформе .NET Framework 3.5 в интегрированной среде разработки Visual Studio 2010 Professional.

Технические средства необходимые для разработки программы выбираем исходя из системных требований Visual Studio 2010 Professional.

Visual Studio 2010 можно установить в следующих операционных системах:

1) windows XP (x86) с пакетом обновления 3 (SP3) -- все выпуски, кроме Starter;

2) windows Vista (x86 и x64) с пакетом обновления 1 (SP1) -- все выпуски, кроме Starter;

3) windows 7 (x86 и x64);

4) windows Server 2003 (x86 и x64) с пакетом обновления 2 (SP2);

5) windows Server 2003 R2 (x86 и x64);

6) windows Server 2008 (x86 и x64) с пакетом обновления 2 (SP2);

7) windows Server 2008 R2 (x64).

Поддерживаемые архитектуры:

1) 32-разрядная (x86);

2) 64-разрядная (x64).

Требования к оборудованию:

1) процессор с частотой 1,6 ГГц или выше;

2) 1024 МБ ОЗУ;

3) 3 ГБ свободного места на диске;

4) жесткий диск со скоростью 5400 об/мин;

5) видеоадаптер с поддержкой DirectX 9 и разрешением 1280 x 1024 (или более высоким);

6) дисковод DVD-ROM.

Технические средства необходимые для запуска программы выбираем исходя из системных требований .NET Framework 3.5:

1) операционные системы: Windows Server 2003, Windows Server 2008, Windows Vista, Windows 7, Windows XP;

2) процессор: Pentium с тактовой частотой 400 MГц или аналогичный процессор (рекомендуется Pentium с тактовой частотой 1ГГц или аналогичный процессор);

3) ОЗУ: не менее 96 МБ (рекомендуется 256 МБ);

4) жесткий диск: может потребоваться до 500 МБ доступного дискового пространства;

5) дисковод для компакт-дисков или DVD-дисков: не требуется;

6) экран: разрешение 800 x 600, 256 цветов (рекомендуется разрешение 1024 x 768, 32-разрядный)).

3. Моделирование процессов системы

3.1 Смысл моделирования процессов

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

Процесс бизнес - моделирования [8] может быть реализован в рамках различных методик, отличающихся, прежде всего своим подходом к тому, что представляет собой моделируемая организация. В соответствии с различными представлениями об организации методики принято делить на объектные и функциональные (структурные).

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

Функциональные методики, наиболее известной из которых является методика IDEF, рассматривают организацию как набор функций, преобразующий поступающий поток информации в выходной поток. Процесс преобразования информации потребляет определенные ресурсы. Основное отличие от объектной методики заключается в четком отделении функций (методов обработки данных) от самих данных.

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

3.2 Описание функционирования системы с использованием стандарта IDEF0

Методология функционального моделирования IDEF0 является достаточно простым инструментом, который позволяет разработчикам корпоративных информационных систем изучить сферу деятельности заказчика и решать задачи по повышению эффективности этой деятельности[9].

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

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

В ходе проектирования структуры интерфейса системы с использованием стандарта IDEF0 мы получили следующие функциональные блоки:

1) блок А0: Создать программу с помощью визуального редактирования её блок-схемы (рисунок 3.1);

2) блок А1: Подготовить условия для создания схемы (рисунок 3.2);

3) блок А2: Разработать бета-версию схемы (рисунок 3.2);

4) блок А3: Редактировать блок-схему (рисунок 3.2);

5) блок А11: Согласовать с заказчиков условия создания блок-схемы (рисунок 3.3);

6) блок А12: Описать требования к реализации задачи (рисунок 3.3);

7) блок А13: Формализовать описание задачи (рисунок 3.3);

8) блок А21: Определить список переменных, процедур и функций, которые будут использоваться в программе (рисунок 3.4);

9) блок А22: Построить структуру схемы (рисунок 3.4);

10) блок А23: Подписать блоки в схеме (рисунок 3.4);

11) блок А24: Создать тестовые примеры (рисунок 3.5);

12) блок А31: Запустить работу интерпретатора (рисунок 3.5);

13) блок А32: Определить соответствие выводимых данных результатам тестов (рисунок 3.5).

Глоссарий.

1) ИС - это совокупность информации, процедур, персонала, аппаратного и программного обеспечения, объединённых регулярными отношениями для осуществления целенаправленной деятельности.

2) Договор о сотрудничестве - договор, заключаемый между заказчиком и исполнителем.

3) Требования заказчика - формализованный список требований, предъявляемых заказчиком к исполнителю.

4) ГОСТ - Госстандарт России (Государственный стандарт) - это одна из основных категорий стандартов в Российской Федерации. Стандарт, в широком смысле слова - образец, эталон, модель, принимаемые за исходные для сопоставления с ними других подобных объектов. Стандарт как нормативно-технический документ устанавливает комплекс норм, правил, требований к объекту стандартизации. Стандарт может быть разработан как на материальные предметы (продукцию, эталоны, образцы веществ), так и на нормы, правила, требования в различных областях;

5) ГОСТ 19.701-90 - Единая система программной документации. Схемы алгоритмов, программ, данных и систем. Условные обозначения и правила выполнения действующий Настоящий стандарт распространяется на условные обозначения (символы) в схемах алгоритмов, программ, данных и систем, и устанавливает правила выполнения схем, используемых для отображения различных видов задач обработки данных и средств их решения.

Рисунок. 3.1 - Контекстная диаграмма. Создать программу с помощью визуального редактирования её блок-схемы

Рисунок 3.2 - Декомпозиция контекстной диаграммы. Создать программу с помощью визуального редактирования её блок-схемы



Рисунок 3.3 - Диаграмма декомпозиции блока А1. Подготовить условия для создания блок-схемы

Рисунок 3.4 - Диаграмма декомпозиции блока А2. Разработать бета-версию схемы

Рисунок 3.5 - Диаграмма декомпозиции блока А3. Редактировать блок-схему

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

В ходе проектирования схемы IDEF0 были выявлены основные функции будущей системы, которые были впоследствии реализованы в программе.

3.3 Выявление базовых требований к данным на основе DFD-диаграммы

DFD позволяет уже на стадии функционального моделирования определить базовые требования к данным. На диаграмме потоков данных показываются работы[10], которые входят в состав описываемого бизнес-процесса, а также показываются входы и выходы каждой из работ. Данные входы и выходы представляют собой информационные, либо материальные потоки. При этом выходы одной работы могут являться входами для других. Наличие в диаграммах DFD элементов для описания источников, приемников и хранилищ данных позволяет более эффективно и наглядно описать процесс документооборота.

В данной системе с помощью DFD диаграммы были выявлены связи между некоторыми классами. Было выявлено, что схема доступная для редактирования может проверяться на любом этапе ее проектирования. Таким образом, процедура проверки корректности схем была встроена в класс окна ответственного за редактирование схемы. Было выявлено, что схемы нужно сохранять для последующего редактирования или в файл .jpg. Таким образом, мы выяснили, что вся схема должна быть сохранена в формат, отрывая который можно восстановить схему полностью. На основе полученного требования было принято решение использовать сериализацию объектов, т.е. сохранения всех объектов схемы и их состояний на жесткий диск. Для этого был выбран класс XmlSerializer, который позволяет сохранять состояние объектов в формате XML и затем восстанавливать объекты из этого формата. Для сохранения в .jpg была использована стандартная процедура сохранения изображения в файл.

DFD диаграмма представлена на рисунке 3.6.

Рисунок 3.6 - Уровень А0 DFD-диаграммы. Создать программу с помощью визуального редактирования её блок-схемы

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

3.4 Описание базовых функций системы на основе диаграммы прецедентов

Диаграммы прецедентов представляют собой один из типов диаграмм, применяемых в UML для моделирования динамических аспектов системы[11]. Диаграммы прецедентов играют основную роль в моделировании поведения системы, подсистемы или класса. Каждая такая диаграмма показывает множество прецедентов, актеров и отношения между ними.

Диаграммы прецедентов применяются для моделирования вида системы с точки зрения прецедентов (или вариантов использования). Чаще всего это предполагает моделирование контекста системы, подсистемы или класса либо моделирование требований, предъявляемых к поведению указанных элементов.

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

Диаграмма прецедентов представлена на рисунке 3.7.

Рисунок 3.7 - Диаграмма прецедентов

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

Если мы сравним результат применения диаграммы прецедентов с результатом применения диаграмм IDEF0 и DFD, то мы увидим что диаграммы IDEF0 и DFD помогли более точно сформулировать требования, предъявляемые к функциональности системы. В результате декомпозиции отдельных процессов основные элементы интерфейса программы были определены еще до написания программного кода.

4. Математическое описание

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

4.1 Описание модели данных

Основной структурной единицей разрабатываемой программы является блок. Таблица 4.1 содержит используемые в программе блоки.

Таблица 4.1 - Основные блоки, используемые в программе

Наименование	Обозначение	Функция
Блок начало-конец (пуск-остановка)		Элемент отображает вход из внешней среды или выход из нее (наиболее частое применение ? начало и конец программы). Внутри фигуры записывается соответствующее действие.
Блок вычислений, вывод данных, предопределенный процесс		Выполнение одной или нескольких операций, обработка данных любого вида (изменение значения данных, формы представления, расположения). Внутри фигуры записывают непосредственно сами операции. Отображает выполнение процесса, состоящего из одной или нескольких операций, который определен в другом месте программы (в подпрограмме, модуле). Внутри символа записывается название процесса и передаваемые в него данные. Например, вызов процедуры или функции. Всегда имеет один вход и один выход.
Логический блок (блок условия)		Отображает решение или функцию переключательного типа с одним входом и двумя альтернативными выходами, из которых только один может быть выбран после вычисления условий, определенных внутри этого элемента. Вход в элемент обозначается линией, входящей в верхнюю вершину элемента. Каждый выход обозначается линией, выходящей из боковых вершин. Имеет два входа и

Продолжение таблицы 4.1

Наименование	Обозначение	Функция
		один выход.
Граница цикла		Символ состоит из двух частей ? соответственно, начало и конец цикла ? операции, выполняемые внутри цикла, размещаются между ними. Условия цикла и приращения записываются внутри символа начала или конца цикла ? в зависимости от типа организации цикла. Каждый такое блок имеет один вход и один выход.
Данные (ввод-вывод)		Преобразование данных в форму, пригодную для обработки (ввод) или отображения результатов обработки (вывод). Данный символ не определяет носителя данных (для указания типа носителя данных используются специфические символы).

4.2 Математическое описание используемых моделей данных

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

Кортеж -- это конечная последовательность, возможно с повторениями, элементов некоторого множества E. Элементами кортежа могут быть числа, символы некоторого алфавита, точки плоскости и т.д. В более сложных случаях элементами кортежа, в свою очередь, могут быть также кортежи. Элементы, не являющиеся кортежами, называются атомами. Количество элементов в кортеже называется его длиной. Удобно рассматривать кортежи, не содержащие ни одного элемента. Такие кортежи называются пустыми. Длина пустого кортежа считается равной 0.

Элемент кортежа характеризуется своим номером в последовательности (кортежным номером) и содержанием, то есть элементом множества E. Если длина кортежа равна n, n>0, то кортеж S удобно рассматривать как отображение s множества N = {1 ,2, … n} в множество E. Таким образом, s(i) -- это i-й элемент кортежа S.

Термин "список" используется как обобщающее название различных структур данных, используемых для представления кортежей в памяти компьютера. При представлении кортежа в памяти появляется еще одна характеристика элемента кортежа -- его позиция в памяти. В некоторых случаях номер элемента в кортеже и его позиция в памяти связаны друг с другом арифметическими соотношениями таким образом, что по номеру легко вычисляется позиция и, наоборот, по позиции вычисляется номер. В других случаях связь между номерами и позициями задается "таблично" или осуществляется с помощью алгоритмических процедур. Множество позиций обозначим через P. Иногда удобно считать, что в множестве P имеется специальный элемент nil, указывающий на несуществующую область памяти. Таким образом, при рассмотрении того или иного списка мы имеем дело с тремя множествами E, N, P и с отображениями на этих множествах.

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

1) нахождение позиции элемента в памяти по его номеру в кортеже;

2) нахождение позиции элемента, следующего в кортеже за элементом из заданной позиции;

3) нахождение позиции элемента, предшествующего в кортеже элементу из заданной позиции;

4) удаление элемента, находящегося в заданной позиции;

5) вставка в кортеж нового элемента перед элементом, расположенным в заданной позиции;

6) определение длины кортежа.

4.3 Описание структур данных

Для более глубокого понимания задачи следует описать используемые структуры данных математически.

Пусть - текущий блок, где q - булева переменная, характеризующая тип блока: q= 0- блок является обычным блоком, q=1 -блок является блоком-веткой.

,

где - список блоков, принадлежащей данной ветке;

N-количество блоков, принадлежащей данной ветке;

Pointer(K)- указатель на ветку K , внутри которой находится блок.

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

Точки вставки не хранятся вместе с блоками, они представляются отдельными объектами.

Пусть Т<L, Pointer(K)> - точка вставки, где L - это блок, после которого располагается точка;

Pointer(K)-Указатель на ветвь, внутри которой находится блок соответствующий точке вставки.

4.4 Алгоритм программы

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

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

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

5. Описание структуры системы

5.1 Описание структуры системы с помощью диаграммы классов

На диаграмме классов представлено подробное описание классов использующихся в программе.

Сначала рассмотрим классы блоков. На рисунке 5.1 приведена диаграмма классов блоков.

Главный блок (ChartMainBlock) реализует метод сохранения схемы. В программе схема сохраняется в XML формат. Для этого был выбран класс XmlSerializer из пространства имен System.Xml.Serialization.

Пространство имен System.Xml.Serialization содержит классы, используемые для сериализации объектов в документы или потоки формата XML.

Центральным классом в пространстве имен является класс XmlSerializer, который позволяет сохранять состояние объектов в формате XML и затем восстанавливать объекты из этого формата. XmlSerializer сериализует и десериализует объекты в документы XML и из них. XmlSerializer позволяет контролировать способ кодирования объектов в XML. Пример XML файла сгенерированного программой можно посмотреть в приложении Б.

Каждый блок наследуется от абстрактного класса Block. Текст блока хранится в поле Text, для циклов дополнительно используется поле TextAtTheEnd (определяет текст блока, закрывающего цикл), тип блока определяется классом блока. Каждый блок определяет собственный метод для отрисовки.

public abstract class Block

{

...

public List<Block> Items;

public Block Branch;

...

}

Блок определенного типа реализует только собственный метод отрисовки, все остальное он наследует от абстрактного класса Block.

public class RegularBLock : Block

{

...

public override void Draw(Graphics g) { ... }

...

}

Рисунок 5.1 - Диаграмма классов блоков

Далее рассмотрим класс, представляющий всю блок-схему. Диаграмма класса блок-схемы приведена на рисунке 5.2.

Рисунок 5.2 - Диаграмма класса блок-схемы

Для хранения всей схемы в программе присутствует класс Chart. Он хранит корневой элемент схемы (блок начала схемы), список точек вставки, объект для генерации кода программы из схемы, а так же служебные данные. Класс схемы реализует методы вставки и удаления блоков, очистки всей схемы и автоматического выравнивания блоков и точек вставки.

public class Chart

{

...

public ChartMainBlock root; //корневой элемент схемы

public CodeGenerator codeGen; //генератор кода

public List<Block> blocks = new List<Block>(); //все блоки схемы

public List<InsertionPoint> insertionPoints = new List<InsertionPoint>();

...

}

Класс блок схемы реализует методы для автоматического выравнивания блоков и точек вставки (RealignBlocks, RegenerateInsertionPoints, GenerateInsertionPoints), методы для вставки и удаления блоков (InsertIntoBranch, CreateNewBlock, DeleteSelectedBlock, ClearChart), методы для обработки событий мыши (ProcessMouseClickInsertion, ProcessMouseClickBlockSelection, ProcessMouseMove, ProcessMouseDoubleClick), так же этот класс имеет метод для получения кода программы (GetCode).

Далее рассмотрим класс точки вставки InsertionPoint. Он приведен на рисунке 5.3.

Рисунок 5.3 - Диаграмма класса точки вставки

Далее рассмотрим класс генератора кода программы. Он приведен на рисунке 5.4.

Рисунок 5.4 - Диаграмма класса генератора кода

Далее рассмотрим класс для выполнения кода программы. Он приведен на рисунке 5.5. Этот класс использует интерпретатор языка JavaScript Jint для платформы .NET. Для вывода результата работы программы предназначен делегат PrintCodeExecutionResultDelegate. В Jint этот делегат назначается методу print().

Рисунок 5.5 - Диаграмма класса для выполнения кода программы

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

Для списков используется List(Of T) из System.Collections.Generic. Это строго типизированный список объектов, доступных по индексу. Поддерживает методы для поиска по списку, удаления, вставки и другие операции со списками.

5.2 Структурная схема программы

Структурная схема[13] представляет собой упрощенное графическое изображение, дающее представление о взаимной связи отдельных элементов описываемого объекта. Рассмотрим структурную схему программы (рисунок 5.6):

Рисунок 5.6 - Структурная схема программы

Главная форма содержит все основные элементы управления (кнопки, меню, текстовые области) а так же является контейнером, в котором находятся все остальные модули системы. Через главную форму пользователь осуществляет работу с программой, а затем действия пользователя на главной форме передаются в нужный модуль системы.

Форма рабочей области содержит рисунок схемы, с которым пользователь работает в интерактивном режиме. Нажимая элементы управления на главной форме, пользователь переключает систему в различные режимы, и затем в зависимости от режима форма рабочей области обрабатывает действие пользователя требуемым образом. Кроме формы рабочей области главная форма содержит форму ввода массивов и XML сериализатор (используется для сохранение схемы в XML и открывания схемы из XML).

Рассмотрим форму рабочей области. Эта форма содержит форму редактирования свойств блока, которая вызывается формой рабочей области при определённых событиях. Форма рабочей области содержит блок схему программы.

Блок схема выполняет все функции по организации структуры блоков (копирование, вставка, автоматическое расположение блоков), генерации кода из блоков и интерпретации полученного кода. Для интерпретации кода используется JINT.

6. Описание интерпретатора использованного в программе

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

Jint - это интерпретатор языка JavaScript для .NET приложений. Используя Jint, .NET разработчики могут добавлять динамическое поведение в свои приложения, запуская скрипты JavaScript без компиляции. Jint имеет набор возможностей которые делают возможной связь межжу окружением JavaScript и окружением .NET во время выполнения.

Jint обеспечивает весь функционал JavaScript в .NET приложениях и связь с .NET языками. Jint может использовать любые классы и объекты .NET.

6.1 Варианты использования

Ниже приведены возможные варианты использования интерпретатора Jint:

1) создание приложений, работу в которых пользователи могу автоматизировать с помощью программируемого интерфейса. Хорошим примером является VBA для приложений Microsoft Office;

2) улучшение возможностей конфигурирования для изменения поведения приложения и его логики без перекомпиляции;

3) Выполнение динамического кода или выражений.

6.2 Возможности Jint

Стандартные возможности JavaScript:

1) объекты и методы;

2) циклы (do, while, for);

3) области видимости;

4) условные выражения;

5) динамические свойства;

6) стандартные классы JavaScript (Math, String, Object, Number);

7) регулярные выражения;

8) функции;

9) прототипы и конструкторы.

6.3 Описание основных возможностей языка JavaScript

Ниже описанные основные возможности языка JavaScript.

6.3.1 Вывод данных

Для вывода используется функция print( ). Эта функция принимает на вход один аргумент (строку или число) и выводит его в новой строке на форме в окне с результатом исполнения программы.

6.3.2 Переменные

Переменные в JavaScript назначаются двумя способами[14]:

С помощью оператора «=»: переменная = значение, например:

x = 1.

С помощью ключевого слова var и оператора «=»: var переменная или var переменная = значение, например:

var x; x = 1,

var x = 1.

Второй способ отличается от первого тем, что можно назначать сразу несколько переменных, например:

var x = 1, y = 2.

А так же тем, что второй способ определяет значение переменной только в своем блоке кода. Если присвоить значение переменной, не объявленной с помощью инструкции var, JavaScript неявно объявит эту переменную за вас. Однако переменные, объявленные таким образом, всегда создаются как глобальные, даже если они работают только в теле функции.

В именах переменных могут использоваться латинские буквы (a...z, A...Z), цифры (0...9), знак доллара ($) и знак подчёркивания (_), при этом нельзя использовать цифру первой. Необходимо помнить, что JavaScript -- регистрозависимый язык, и переменные X и x, будут считаться различными.

6.3.3 Базовые типы

JavaScript - это язык с динамической типизацией[15]. Переменная связывается с типом в момент присваивания значения, а не в момент объявления переменной. Таким образом, в различных участках программы одна и та же переменная может принимать значения разных типов.

В Javascript есть и объектные типы данных и элементарные, которые можно интерпретировать как объекты.

1) Элементарные - создаются простым указанием данных, например:

var orange = "Апельсин".

2) Объектные - например, через оператор new, напрмер:

var orange = new String("Апельсин").

Кроме всем известных типов данных - в javascript есть специальное значение undefined, которое, условно говоря, обозначает что "данных нет".

Все математические функции находятся в модуле Math, например:

Math.sin( ).

6.3.4 Операторы

6.3.4.1 Арифметические операторы

Арифметические операции производятся только с данными одного типа[16]. JavaScript способен сам определять тип данных, однако не стоит уповать на него - рекомендуется самостоятельно следить за их типом. В таблице 6.1 приведены наиболее часто используемые арифметические операторы.

Существует 3 типа данных:

1) строковый (string) - определяется двойными или одинарными кавычками и используется для символьных данных;

2) числовой (number) - определяется отсутствием кавычек и используется для чисел (не символов);

3) логический (boolean) - определяется отсутствием кавычек и используется для значений true=1 или false=0.

Также существуют специальные типы данных:

1) null - отсутствие данных;

2) объект (object) - программный объект (ссылка на него);

3) функция (function) - определение функции.

Таблица 6.1 - Арифметические операторы

Оператор	Название	Пример	Результат
+	Сложение	x + y	Сложение двух чисел или склеивание двух строк
-	Вычитание	x - y	Вычитание y из x или удаление строки y из строки х
*	Умножение	x * y	Перемножение двух чисел
/	Деление	x / y	Деление числа x на число y
%	Деление по модулю (остаток)	x % y	Остаток от деления числа x на число y
++	Инкремент (увеличение на 1)	x++	Эквивалентно x+1

Примеры использования:

6 + 3 // результат 9,

6 - 3 // результат 3,

6 * 3 // результат 18,

6 / 3 // результат 2,

5 % 3 // результат 2,

6++ // результат 7,

6-- // результат 5.

Арифметические операторы можно использовать с переменными, например:

x = 3 // значение x -- 3,

y = 5 // значение y -- 5,

z = x + y // значение z -- 8.

Возможно использование арифметических операторов в выражениях со скобками, например:

4 + 5 * 2 // результат 14,

(4 + 5) * 2 // результат 18.

В арифметических операциях логические значения считаются: true -- 1, false -- 0, например:

5 + true // результат 6,

5 + false // результат 5,

4 * true // результат 4,

4 * false // результат 0,

true + true // результат 2,

true + false // результат 1.

Оператор сложения можно использовать для склейки строк, например:

"Java" + "Script" // результат "JavaScript",

a = "Java",

b = "Script",

a + b // результат "JavaScript",

"Уровень" + 5 // результат "Уровень5",

"Уровень" + true // результат "Уровеньtrue",

"1" + "2" // результат "12".

6.3.4.2 Побитовые операторы

Побитовые операторы: 1) & - and, 2) | - or, 3) ^ - xor, 4) >>, >>>, << - побитовые сдвиги.

Все побитовые операции работают с 4-байтовым signed int.

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

Для отрицательных чисел - все по-другому. Например, -9 в битовом виде выглядит как: 11111111111111111111111111110111.

Операция >>> даст эффект: -9 >>> 2 будет в битовом виде 00111111111111111111111111111101, то есть 1073741821.

6.3.4.3 Сравнение

Операторы сравнения: 1) ==, 2) !=, 3) <, 4) >, 5) <=, 6) >=, 7)===, 8)!==.

Операторы больше-меньше также работают со строками, сравнивая их лексикографически, т.е посимвольно, например:

"B">"a",

"bc" < "bd".

Сравнение = = делается с приведением типов, а = = = без приведения типов, например:

0 == false // верно,

0 !== false //типы разные.

6.3.5 Массивы

Javascript поддерживает[17] два вида структуры "массив":

1) ассоциативный массив (хеш), где данные хранятся по произвольному ключу;

2) числовой массив Array, где данные хранятся по номерам.

Javascript - очень гибкий язык, поэтому технически в Array можно хранить произвольные ключи, как в Object. Но лучше использовать типы по назначению.

Для хранения данных по номеру предназначен тип Array, например:

var arr = new Array(),

arr.test = 5,

arr[1] = "new".

В типе Array есть специальные методы, ориентированные именно на работу с числовыми ключами.

6.3.5.1 Создание и изменение массивов

Есть два эквивалентных способа создания массива:

var a = new Array(),

var a = [].

Или сразу со значениями

var a = new Array("a", 1, true),

var a = ["a", 1, true].

Эти способы работают одинаково, кроме объявления вида new Array(10), когда у конструктора есть единственный аргумент-число.

Такое объявление создаст пустой массив (все элементы undefined) длиной 10. По возможности, не используйте new Array.

Отсчет элементов в массиве начинается с нуля.

6.3.5.2 Перебор элементов

Перебор элементов обычно (когда индексы непрерывные) осуществляется простым циклом:

var arr = [ "array", "elements", "here" ],

for(var i=0; i<arr.length; i++) {

... сделать что-то с arr[i] ...

}.

Если индексы - с разрывами, то перебор осуществляется так же, как в объектах:

var arr = [],

arr[1] = 123,

arr[9999] = 456,

for(var i in arr) {

if (!arr.hasOwnProperty(i)) continue;

... сделать что-то с arr[i] ...

}.

6.3.6 Функции

6.3.6.1 Создание функций

Существует два способа создать функцию[18]. Основное отличие в результате их работы - в том, что именованная функция видна везде, а анонимная - только после объявления. Способы создания функций представлены в таблице 6.2.

Таблица 6.2 - Способы задания функций

Именованные (FunctionDeclaration)	Анонимные (FunctionExpression)
function имя(параметры) { ... }	var имя = function(параметры) {…} ... var имя = new Function(параметры, '...')
Именованные функции доступны везде в области видимости	Анонимные - доступны только с момента объявления. Синтаксис new Function используется редко, в основном для получения функции из текста, например, динамически загруженного с сервера в процессе выполнения скриптов.
/* функция sum определена ниже */ var a = sum(2,2) function sum(x,y) { return x+y }	/* будет ошибка, т.к sum еще не существует */ var a = sum(2,2) var sum = function(x,y) { return x+y }

6.3.5.2 Функции - объекты

В javascript функции являются полноценными объектами встроенного класса Function. Именно поэтому их можно присваивать переменным, передавать и у этих функций есть свойства, например:

function f() {...},

f.test = 6,

...

alert(f.test) // 6.

Свойства функции доступны и внутри функции, так что их можно использовать как статические переменные, например:

function func() {

var funcObj = arguments.callee

funcObj.test++

alert(funcObj.test),

},

func.test = 1,

func(),

func().

В начале работы каждая функция создает внутри себя переменную arguments и присваивает arguments.callee ссылку на себя.

6.3.5.3 Параметры функции

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

Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined.

Непосредственно перед входом в тело функции, автоматически создается объект arguments, который содержит:

1) аргументы вызова, начиная от нуля;

2) длину в свойстве length;

3) ссылку на саму функцию в свойстве callee.

7. Описание системы

Нами было создано приложение программа-редактор схем. С помощью этой программы можно создавать, сохранять, редактировать блок-схему программы, а также выполнять исходный код, который генерируется по ходу редактирования схемы. Главное окно приложения показано на рисунке 7.1:

Рисунок 7.1 - Внешний вид главной формы приложения

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

1) главное меню;

2) панель инструментов и операций;

3) окно с исходным кодом программы, соответствующей построенной схеме;

4) окно с результатом выполнения программы.

7.1 Описание главного меню

Главное меню программы имеет три раздела «Файл», «Правка» и «Код программы».

Раздел «Файл» представлен на рисунке 7.2:



Рисунок 7.2 - раздел «Файл» главного меню программы

В разделе «Файл» главного меню приложения есть следующие функции:

1) новая схема - создать новую схему;

2) открыть - открыть существующую схему из формата XML;

3) сохранить - сохранить блок-схему в уже открытый файл (если файл был открыт) иначе сохранить в новый файл;

4) Сохранить как - сохранить схему в новый файл;

5) Сохранить в jpg - сохранить схему в jpg файл;

6) Выход - выйти из программы.

Раздел «Код программы» представлен на рисунке 7.3:

Рисунок 7.3 - раздел «Код программы» главного меню программы

В разделе «Код программы» главного меню приложения есть следующие опции:

1) выполнить - запустить выполнение кода программы. Результат выполнения будет отображен в окне Результат выполнения кода;

2) вставить массив - открыть окно с формой для ввода элементов массива

Раздел «Правка» представлен на рисунке 7.3:

.

Рисунок 7.4 - раздел «Правка» главного меню программы

1) Вырезать - вырезать выделенный блок.

2) Копировать - копировать выделенный блок

3) Вставить - вставить блок из буфера обмена.

7.2 Описание панели инструментов и операций

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

1) кнопка «Обычный блок» позволяет добавить в схему блок процесса;

2) кнопка «Условие» позволяет добавить в схему блоки условия;

3) кнопка «Цикл» позволяет добавить в схему блоки цикла;

4) кнопка «Очистить схему» удаляет всю структуру схемы и возвращает схему к исходному состоянию begin-end;