Основы визуального программирования

основы визуального программирования Визуальное программирование — способ создания программы для ЭВМ путём  манипулирования графическими объектами вместо написания её текста.  Визуальное программирование часто представляют как следующий этап  развития текстовых языков программирования. Наглядным примером может  служить утилита Визуальный Pascal или Microsoft Visual Studio, где  редактируются графические объекты и одновременно отображается  соответствующий текст программы. В последнее время визуальному  программированию стали уделять больше внимания ­ в связи с развитием  мобильных сенсорных устройств (КПК, планшеты). Визуальное  программирование в основном используется для создания программ  с графическим интерфейсом для операционных систем с графическим  интерфейсом пользователя. Среда визуального программирования позволяет  написать Веб­приложение для браузеров. Среда визуального программирования  позволяет создатьконсольное приложение (программа без графического  интерфейса и без вывода сообщений в консоль) для программирования  микроконтроллеров, программируемых микросхем. Необходимо различать:  графический язык программирования — который прежде всего язык  программирования (со своим синтаксисом)  визуальные средства разработки — как правило, под ними подразумевают  средства проектирования интерфейсов или какую либо CASE­систему для  быстрой разработки приложений или SCADA­систему для  программирования микроконтроллеров. Языки визуального программирования могут быть дополнительно  классифицированы в зависимости от типа и степени визуального выражения, на  следующие типы:  языки на основе объектов, когда визуальная среда программирования  предоставляет графические или символьные элементы, которыми можно  манипулировать интерактивным образом в соответствии с некоторыми  правилами;  языки, в интегрированной среде разработки которых на этапе  проектирования интерфейса применяются формы, с возможностью  настройкой их свойств. Примеры:Delphi и C++ Builder фирмы Borland, С#  языки схем, основанные на идее «фигур и линий», где фигуры  (прямоугольники, овалы и т. п.) рассматриваются как субъекты и  соединяются линиями (стрелками, дугами и др.), которые представляют  собой отношения. Пример: UML. В современных разработках делаются попытки интегрировать подход  визуального программирования с программированием потоков данных  (англ. dataflow programming), чтобы иметь непосредственный доступ к состоянию  программы для онлайновой отладки, или автоматизированная генерация и  документирование программы. Языки потоков данных также позволяют  делать автоматическое распараллеливание, которое может стать одним из  величайших достижений программирования в будущем.[1] Содержание   [убрать]   1     Графические, или визуальные, языки программирования  2     Визуальные средства разработки  3     Примечания  4     Ссылки Графические, или визуальные, языки программирования[править | править вики­ текст] Это незаконченный список, который может быть никогда не будет  удовлетворять каким­либо стандартам по своей завершенности. Вы можете  дополнить его, ссылаясь на источники.  Дракон­схемы — графический язык программирования, используется для  программирования в ракетно­космической технике («Буран», «Морской старт», «Тополь»). Существует бесплатный Дракон­редактор. Этот язык  имеет наиболее строгое теоретическое обоснование.  Язык последовательных функциональных схем SFC (Sequential Function  Chart) — графический язык программирования широко используется для  программирования промышленных логических контроллеров PLC. В SFC программа описывается в виде схематической последовательности шагов,  объединённых переходами.  LD — язык релейно­контактных схем  FBD — язык Функциональных блоковых диаграмм.  Язык CFC (Continuous Flow Chart) — ещё один высокоуровневый язык  графического программирования. CFC — это дальнейшее развития языка  FBD. CFC был специально создан для проектирования систем управления  непрерывными технологическими процессами.  LabVIEW — один из самых распространенных языков разработки программ,  работающих с некомпьютерным оборудованием.  VisSim — это визуальный язык программирования предназначенный для  моделирования динамических систем, а также проектирования,  базирующегося на моделях, для встроенных микропроцессоров.  Скретч — это визуальная объектно­ориентированная среда и язык  программирования для обучения школьников младших и средних классов. Визуальные средства разработки[править | править вики­текст] 1. AgentSheets, легкая в использовании авторская система для игр и научных  расчётов 2. Alice 3. Analytica 4. AppWare, also known as MicroBrew, программирование, на основе иконок для  Mac OS и Microsoft Windows 5. AudioMulch, основанная на потоке звукового сигнала, также для среда для  создания музыки 6. Automator 7. Aviary Peacock, визуальная лаборатория на основе просмотра файлов 8. Baltie 9. Befunge, эзотерический текстовый язык программирования, в котором  команды размещаются графически в текстовом файле 10.CODE 11.eXpecco, основанный на графическом потоке язык программирования и среда разработки для автоматизации тестирования 12.Flow 13.HiAsm, конструктор программ 14.JMCAD среда графической разработки систем для промышленности,  инженеров и учёных 15.Kwikpoint, пиктограммный визуальный транслятор, созданный Аланом  Стилманом 16.LabVIEW, среда графического программирования, разработанная для  инженеров и учёных 17.LogicProgram, язык, среда графического программирования, позволяющая  формировать матрицу отношений компонентов платформы 18.Macromedia Authorware 19.Miracle C Compiler, среда графического программирования, позволяющая  формировать матрицу отношений компонентов платформы  (сайт: http://www.c­compiler.com) 20.MQL­Studio for HiAsm, пакет для разработки экспертов, скриптов,  индикаторов на языке MQL5 в визуальном редакторе программ HiAsm. 21.ROBO Pro 22.Thyrd, свободная, открытая графическая среда программирования (иерархия графических примитивов) на базе языка Forth (Форт) 23.vvvv 24.ДРАКОН, язык, созданный для разработки советского космического  корабля Буран 25.СтройКод, визуальное программирование  (сайт: http://softconstructors.com/ru/applications/stroycode/index.html) 26.Блендер ­ программа 3D моделирования с открытым исходным кодом, в  которой узловым редактированием осуществляется настройка  материалов, текстур, постобработка, настройки окружения сцены, а таке  редактирование и создание геометрии при помощи системы  узлов СВеРЧОК (Система векторного рабочего черчения и объектного  конструирования) 27.ИС Дракон ­ интегрированная среда применения языка Дракон. Примечания[править | править вики­текст] 1. ↑ Johnston, W.M.; Hanna, J.R.P. and Millar, R.J. (2004). «Advances in dataflow  programming languages» (PDF). ACM Computing Surveys (CSUR) 36 (1): 1– 34.DOI:10.1145/1013208.1013209. Проверено 2007­03­31. Ссылки[править | править вики­текст]  PureBuilder — среда визуальной разработки, в настоящее время  разрабатывается Это заготовка статьи о программном обеспечении. Вы можете помочь  проекту, дополнив её. [скрыть] п • о • р Языки программирования Хронология  Ассемблер  BASIC  C  C++  C#  COBOL  Fortran  Java  JavaScript (JS)  Lisp  Pascal  Perl  PHP  Python  Ruby  Smalltalk            Visual Basic .NET (VB.NET)  Категория    Сравнение   Списки:  По категориям  Генеалогический          Не основанные на английском Категории:   Программирование  Языки визуального программирования Перед тем, как отправиться в дальнюю дорогу, мудрый путник намечает цель  путешествия, рассчитывает свои силы, прикидывает маршрут и готовит  снаряжение. После этого он совершает маленький тренировочный поход, чтобы  проверить надежность снаряжения и получить необходимый навык. Давайте  уподобимся мудрецу и, начиная виртуальное путешествие в страну Delphi,  сделаем то же самое: поставим перед собой цель научиться писать программы в среде Delphi и убедимся в том, что она нам по силам. После этого подготовим  "снаряжение" ­ установим на компьютер Delphi, и пройдем курс "молодого  бойца" ­ напишем простую, но полезную и вполне работоспособную программу. 1.1. Краеугольные камни визуального программирования В основе создания графических приложений лежат несколько очень простых  понятий. Это те краеугольные камни, которые заложены архитектором в  фундамент системы Delphi. Разобравшись с ними, вы быстро поймете суть  визуального программирования. Начиная работу со средой Delphi, вы должны: 1. Уяснить задачу, которую собираетесь решать на компьютере; 2. Нарисовать на бумаге все то, что предполагаете увидеть на экране в  процессе решения. Это может быть один или несколько рисунков. Если  задача сложная, ее следует разбить на этапы и для каждого этапа сделать отдельный рисунок; 3. Написать сценарий работы будущей программы. Местом развертывания  действия является экран, а зритель не просто смотрит, но и участвует в  "спектакле". В сценарии должно быть учтено все: что выводится на экран  вначале, что делается потом, как программа завершается, т.д.  Декорациями "спектакля" служат сделанные в пункте 2 рисунки. Не теряя драгоценного времени, реализуем все эти пункты для какой­нибудь  простой и полезной задачи. Например, думая о своем здоровье, давайте создадим  программу вычисления оптимального веса человека. Алгоритм решения выберем  самый простой: Оптимальный вес (кг) = Рост (см) ­ 100 ­ 10 (не слишком жестоко?) Пункт 1 выполнен, задача абсолютно понятна, алгоритм решения имеется. Теперь выполним пункт 2 ­ нарисуем то, что мы хотим видеть на экране в  процессе решения задачи (рисунок 1.1): два редактируемых поля ­ для ввода роста  (Specify your height) и вывода веса (Your ideal weight); две кнопки ­ для запуска  вычислений (Compute) и выхода из программы (Close); текстовые надписи. Рисунок 1.1. Форма и компоненты Пора дать название тому, что мы тут нарисовали. Рисунок в целом  называется формой, а поля ввода, вывода, кнопки и все прочее, что располагается  на форме ­ компонентами. Нетрудно заметить, что компоненты на нашем  рисунке ­ разные: редактируемые поля, кнопки, надписи. Они могут иметь разные размеры, их текст может отличаться высотой, шрифтом, цветом. Короче  говоря, каждый компонент характеризуется рядом признаков, которые  называются свойствами. Для решения задачи может потребоваться несколько форм. Та форма, из  которой вызываются все остальные, называется главной. Все другие формы  ­ второстепенные. Главная форма в задаче присутствует всегда, второстепенных  форм может быть несколько или не быть вообще. В нашем случае достаточно  одной формы. Вооруженные теорией и рисунками, выполним пункт 3 ­ напишем сценарий  работы нашей будущей программы. Сразу после старта программы на экране  появляется форма. Пользователь начинает вычисления: активизирует редактируемое поле с надписью Specify your height и вводит значение роста, затем  нажимает кнопку Compute. Программа реагирует на это событие: вычисляет  идеальный вес и выводит результат в поле с надписью Your ideal weight. Когда  пользователь определит идеальный вес всех своих знакомых (и сообщит им об  этом по телефону), он нажмет кнопку Close. В ответ на это событие программа уберет с экрана свою форму и закончит работу. Кстати, так ярко описанный нами процесс событие­отклик­событие­ отклик называется событийным управлением, он лежит в основе работы всех  современных графических программ. Простейшая аналогия для тех, кто не  понял: любимый компьютер упал на любимый мозоль ­ событие, ваш тихий  вопль в ночи ­ отклик. Теперь решим крайне важный вопрос: что в этом сценарии будет делать среда  Delphi, а что вы.  Дело, в общем, обстоит так:  Среда Delphi строит по вашим указаниям форму со всеми компонентами  (редактируемыми полями, кнопками, надписями) и формирует исходный  код соответствующей программы. По объему это львиная доля работы, но  она выполняется за несколько минут.  Программист дописывает на языке Delphi детали программы ­ процедуры  обработки событий. Он делает это во встроенном в среду редакторе кода.  Главное событие нашей программы ­ нажатие кнопки Compute. Обработка  этого события ­ кодирование формулы Weight = Height ­ 100 ­ 10;  Среда Delphi по команде программиста компилирует весь исходный код и  запускает программу. Такое распределение работы программистам нравится, всегда бы так! Кстати,  оно отражено уже в структуре самой программы, которая состоит из  нескольких частей. Важнейшие из них: файл исходного кода на языке Delphi  (подготовленная средой основа + ваши детали) и файл формы (его тоже создает  среда). Эти файлы и ряд других файлов, которые также нужны для решения  задачи, составляют проект. Для каждой отдельной задачи создается свой  проект. Сейчас важно просто о нем знать, все подробности вы узнаете в главе 7. Только что изученные вами понятия являются ключом к пониманию  используемой в среде Delphi технологии визуального программирования. Имея  столь основательную теоретическую подготовку, можно спокойно готовить  "походный инвентарь" ­ устанавливать на свой компьютер систему Delphi ­ и  приступать к тренировочному "походу" ­ писать первую программу. 1.2. Подготовка к работе Система программирования Delphi продается в  нескольких редакциях:  Delphi Personal ­ минимальный набор для любителей, изучающих  программирование;  Delphi Professional ­ набор для профессиональных разработчиков­ индивидуалов;  Delphi Enterprise ­ полный набор инструментальных средств для фирм,  занимающихся изготовлением программного обеспечения на заказ.  Delphi Architect ­ самый "упакованный" вариант, добавляющий к набору  Delphi Enterprise средства коллективной разработки и средства  моделирования данных. Все редакции имеют одинаковую основу ­ интегрированную среду Delphi, но  отличаются друг от друга дополнительными инструментальными средствами  и лицензиями на их распространение вместе с вашими программами. При  написании книги авторы ориентировались на обладателей редакции Delphi  Enterprise. Тем не менее, книгой в равной мере смогут воспользоваться  обладатели менее мощных редакций. Будем считать, что вы успешно разобрались в своих задачах и купили именно ту  редакцию, которая требуется. Теперь самое время открыть коробку. Вы  обнаружите в ней компакт­диски со всем необходимым программным  обеспечением и многотомное руководство пользователя. Отложим книги в  сторону и приступим к приятному ритуалу: переносу системы Delphi с компакт­ диска на жесткий диск вашего компьютера. Вставьте первый компакт­диск в устройство CD­ROM ­ заставка установочной  программы запустится автоматически. Если этого не произошло, запустите  Windows Explorer, откройте компакт­диск и запустите программу Install. Следуйте указаниям, которые установочная программа будет время от времени  выводить для вас на экран. (Новичкам советуем внимательно прочитать файл  Readme.txt, который содержит подробные инструкции по установке и находится  на компакт­диске в корневом каталоге.) Установочная программа сама  пообщается с операционной системой, организует в стартовом меню Start |  Programs папку Borland Delphi 7 и поместит в нее ярлыки соответствующих  программ (рисунок 1.3): Рисунок 1.2. Папка Borland Delphi 7 в стартовом меню Давайте беглым взглядом посмотрим, что же мы установили:  Delphi 7 ­ интегрированная среда разработки приложений;  Image Editor ­ средство создания и редактирования точечных рисунков,  значков, указателей мыши;  BDE Administrator ­ программа­администратор ядра баз данных Borland  Database Engine;  Database Desktop ­ средство создания и редактирования таблиц в базах  данных;  SQL Explorer ­ интегрированное в среду Delphi средство для просмотра и  редактирования таблиц в базах данных;  SQL Monitor ­ отладочное средство, которое позволяет программисту  отслеживать SQL­запросы к базам данных;  WinSight32 ­ отладочное средство, которое позволяет программисту  отслеживать сообщения Windows;  XML Mapper ­ программа подготовки схем преобразования обычных XML­ документов в пакеты данных, с помощью которых происходит обмен  информацией с базами данных и другими приложениями.  Register Now ­ программа, с помощью которой вы можете зарегистрировать свою копию системы Delphi у фирмы­разработчика.  Справочники по различным вопросам; их список впечатляет. Вот теперь мы готовы начать работу.  1.3. Первый запуск среды Delphi Запустите среду разработки, выбрав соответствующий ярлык из главного меню  операционной системы. Мир Delphi ­ перед вами (рисунок 1.3): Рисунок 1.3. Вид среды Delphi при первом запуске Что же вы видите? Окна, кнопки, списки... В общем ­ хаос. Давайте попробуем  навести порядок, и посмотрим на среду Delphi издалека. Ба! Да это же навсегда  запечатленные в памяти читателя краеугольные  камни: форма, компоненты и свойства (рисунок 1.4). Рисунок 1.3. Главные части среды Delphi Ура! Неизвестное оказалось хорошо известным! Хаос исчез, и сообразительный  читатель уже все понял: из области "палитра компонентов" надо c помощью  мыши выбрать компонент (кнопку, надпись, редактор текста и т.д.), поместить  на "форму" и задать значения его свойств в области "свойства". Среда Delphi  проанализирует содержимое формы, создаст соответствующий программный  код, а программисту останется только внести в него детали решения задачи ­  отклики на события. В общем, назначение интегрированной среды понятно,  теперь можно спуститься с небес и заняться деталями. 1.4. Исследуем среду разработки программ Снова посмотрим на интегрированную среду разработки (рисунок 1.5) и дадим  название каждой ее части: Рисунок 1.5. Среда Delphi в деталях Обсудим кратко каждую из составных частей. Важнейшая часть ­ форма  (рисунок 1.6). Она имеет заголовок Form1 и пока пуста (это аналог чистого листа, на котором вы собираетесь что­то рисовать): Рисунок 1.6. Форма Обратите внимание, что форма имеет все признаки "главного окна"  традиционных графических приложений: значок, заголовок, кнопки "Свернуть",  "Развернуть", "Закрыть", размерную рамку и, конечно, управляется мышью.  Умудренный опытом читатель­программист подумает: сколько надо попотеть, чтобы сделать все это самому, а здесь основа интерфейса практически готова... Под формой спрятан редактор кода (рисунок 1.7): Рисунок 1.8. Редактор кода Именно там размещается программный код на языке Delphi, соответствующий  содержанию формы. Активизация редактора кода осуществляется щелчком  мыши на части окна, которая выглядывает из­под формы, либо с помощью  клавиши F12 на клавиатуре. В редакторе кода вы выполняете свою часть работы  ­ дописываете детали решения задачи. Для возврата к форме достаточно  нажать на клавиатуре клавишу F12 еще раз. С формой все ясно, займемся компонентами, которые будем на ней размещать.  Они находятся в области главного окна интегрированной среды, которая  называется палитрой компонентов (рисунок 1.8). Рисунок 1.8. Палитра компонентов Разработчики среды Delphi поместили в палитру компонентов то, что считают  оптимальным набором "строительных кирпичиков", достаточным для  создания любых приложений. Среди компонентов вы найдете меню, кнопки,  надписи, стандартные диалоговые окна и др. Как видно на рисунке 1.8, все множество компонентов разделено на группы.  Каждая группа размещена в палитре компонентов на своей вкладке: Standard ­  стандартные компоненты пользовательского интерфейса, Additional ­  дополнительные компоненты пользовательского интерфейса, Common Controls ­  общепринятые для Windows компоненты пользовательского интерфейса и т.д.  Описание каждой вкладки палитры компонентов приведено в приложении А. Выбрать нужный компонент из палитры и поместить его на форму очень  просто:  Перейдите к нужной вкладке в палитре компонентов;  Выберите нужный компонент;  Отметьте на форме то место, где будет находиться компонент, ­ он  мгновенно окажется на форме;  Придайте компоненту нужные размеры, растягивая по высоте и ширине, и  скорректируйте его местоположение, используя имеющуюся на форме  сетку (рисунок 1.9). Рисунок 1.9. Компонент Button на форме Компонент ­ на форме, пора задать его свойства. Для этого обратимся к окну с  заголовком Object Inspector ­ окну свойств (рисунок 1.10). Оно расположено слева  снизу от формы и активизируется с клавиатуры нажатием клавиши F11. Рисунок 1.10. Окно свойств Как только компонент оказывается на форме, в окне Object  Inspector отображается список его свойств. Ваша задача ­ присвоить свойствам  нужные значения. Например, чтобы написать на кнопке слово Compute,  достаточно изменить значение свойства Caption, которое изначально содержит  текст Button1. По мере набора строки каждая буква будет автоматически  появляться на кнопке. Нетрудно заметить, что окно Object Inspector состоит из двух вкладок:  вкладки свойств ­ Properties и вкладки событий ­ Events. На  вкладке Properties устанавливаются свойства компонента. Когда значения  свойств определены, нужно активизировать вкладку Events. Вы тут же увидите  список событий, на которые данный компонент может реагировать. В качестве  примера приведем список событий, на которые может реагировать кнопка  (рисунок 1.11): Рисунок 1.11. Список событий компонента Button В представленном списке нас может интересовать событие OnClick ­ нажатие  кнопки. Некоторые компоненты подобно форме умеют содержать другие компоненты.  Например, панель (компонент Panel) может содержать кнопки, надписи, другие  панели и т.д. По внешнему виду формы не всегда можно определить, какие  компоненты содержит интересующий вас компонент или на каком компоненте он содержится. Для ответа на эти вопросы, обратитесь к окну Object TreeView ­  окну компонентов формы (рисунок 1.12). Оно расположено слева вверху от формы и активизируется нажатием комбинации клавиш Shift+Alt+F11. В окне Object  TreeView компоненты представлены в виде дерева, отражающего вложенность  компонентов на форме. Сейчас на форме находится лишь одна единственная  кнопка, поэтому дерево компонентов имеет очень простой вид: корневой  элемент Form1 и один вложенный элемент Button1. Рисунок 1.12. Окно компонентов формы Надеемся, что важнейшие элементы интегрированной среды ­ форма, редактор  кода, палитра компонентов, окно компонентов формы, окно свойств ­ навсегда  запечатлелись в вашей памяти, и переходим к другим ее частям. Для управления процессом создания приложения в целом служит главное меню. Оно расположено в главном окне среды Delphi и выполняет множество  служебных функций. Меню, в общем­то, стандартно и понятно каждому, кто  имел дело с компьютером. Поэтому мы предельно кратко опишем назначение  важнейших разделов главного меню:  File ­ работа с файлами.  Edit ­ работа с областью обмена, размещение компонентов на форме.  Search ­ поиск, замена заданного символа или строки в тексте.  View ­ отображение различной информации.  Project ­ управление проектом: добавление и удаление файлов, сборка  проекта, установка параметров проекта.  Run ­ запуск и отладка программы.  Component ­ разработка новых компонентов, установка готовых  компонентов.  Database ­ запуск программ, облегчающих построение приложений баз  данных.  Tools ­ настройка параметров интегрированной среды разработки, запуск  вспомогательных программ.  Window ­ активизация нужного окна интегрированной среды разработки.  Help ­ получение справочной информации. Для ускорения доступа к некоторым командам служит панель кнопок (рисунок  1.13). Рисунок 1.13. Панель кнопок среды Delphi На ней вы обнаружите шестнадцать кнопок­аналогов основных команд меню.  Этот список можно расширить, добавив кнопки доступа к своим любимым  командам. Для этого достаточно навести указатель мыши на панель кнопок,  вызвать вспомогательное меню щелчком правой кнопки мыши и выбрать  команду Customize. Справа от главного меню есть небольшая панель (рисунок 1.14) для сохранения и  восстановления внешнего вида среды Delphi. Расположите окна на экране на свой  вкус, подберите наиболее удобные для себя кнопки. Затем, нажав кнопку с подсказкой Save current desktop, сохраните внешний вид среды Delphi. В следующем  сеансе работы вы сможете мгновенно восстановить его из списка. Рисунок 1.14. Панель для сохранения и восстановления внешнего вида среды Delphi Вот вы и изучили основные элементы среды визуального программирования! Вы  познакомились со средой Delphi только в самых общих чертах, но этого  достаточно, чтобы попробовать написать первую программу. 1.5. Первая программа Пора обрадовать ваших родственников и знакомых приятным сообщением о том, сколько они должны весить для поддержания хорошего здоровья. Для этого  напишем программу вычисления оптимального веса по известному вам  сценарию. Как вы помните, форма для задачи содержит две кнопки (для запуска  вычислений и завершения работы) и два поля (для ввода значения роста в  сантиметрах и вывода веса в килограммах). Вы, конечно, уже запустили среду Delphi, и видите перед собой пустую форму.  Начнем с кнопок. Наведите указатель мыши на палитру компонентов и  щелкните на значке с подсказкойButton (рисунок 1.15). Рисунок 1.15. Значок компонента Button Затем наведите указатель мыши на форму и щелкните еще раз. Заготовка  кнопки с надписью Button1 окажется на форме (рисунок 1.16):