Программы для визуального программирования. Обзор визуальных сред программирования

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

Hiasm — бесплатная среда программирования, конструктор программ , которая позволяет создавать программы не зная языков программирования. Вместо этого вам предлагается компоновать… квадратики. Большинство из них описывают вполне понятные простому пользователю вещи. Например, окошко, кнопку, иконку. Другие служат для связывания визуальных компонентов между собой и описания их поведения. НО! Вам не надо знать синтаксис языка. Вам не надо бояться ошибок компиляции, битых ссылок или переполнения стека. Не будет этого. Это ведь конструктор. =)

Итак, мы уже сказали, что программы в Hiasm — это набор связанных квадратиков. Но не торопитесь рисовать программу. На сайте программы есть неимоверное количество примеров на все случаи жизни.
Но если вы таки не нашли то, что вам нужно (или вам просто интересно попробовать), приступаем.
Попробуем написать программу практически равную «Hello, world!» по сложности. Эта программа будет позволять ввести ваше имя и здороваться с вами по нажатию на кнопку.

Запускаем HiAsm и создаем новый проект «Файл «-«Новый… «. Тип проекта выбираем «Приложение Windows «. Сразу рекомендую сохранить проект куда-нибудь.
У вас перед глазами один квадратик — «Форма «, которая называется MainForm. Отлично. Выбираем этот квадратик и нажимает кнопку «Редактор формы» в верхней панели инструментов.
Появляется прототип нашего окошка. Разместим на нем те элементы управления (это надписи, кнопки, окошки для ввода текста), которые нам понадобятся.
Всевозможные элементы собраны в левой панели программы. Называется «Элементы «.
Она по умолчанию открывается в разделе «Интерфейс «, что нам и нужно.
Вытягиваем на нашу форму «Поле для ввода», кнопку и две надписи. размещаем их как подсказывает наше чувство эстетики. И отжимаем кнопочку «Редактор формы «.
Оппа!!! На нашем поле появились новые квадратики!
Это те элементы, которые мы добавили.
Давайте сделаем, чтобы на кнопке была надпись «Ввел». Для этого выберите кнопку и нажмите вкладку «Свойства» справа. Их тут несколько, но нас интересует одно — Caption (Значение). Поменяем ее на надпись «Ввел».

И давайте запустимся.
Для этого служит зеленый треугольник (Запустить ) в верхней панели.
Вот оно наше окошко во всей красе! С кнопкой, полем для ввода и непонятными надписями в текстовых полях. Но программа запускается! (Боюсь слова «Работает»). Конструктор программ дал нам возможность создать работоспособное приложение за считанные минуты!
Закройте ваше окошко крестиком. И продолжим.
Уберите посторонние надписи из текстовых полей. Это делается тоже с помощью свойства Caption , как и у кнопки.
Теперь нам нужно сказать программе, что по нажатию на кнопочку должно произойти следующее:
— В левом текстовом поле должна появиться надпись «Привет»
— В правом должно появиться то, что вы ввели как свое имя

Вот для этого нам понадобятся связи между квадратиками.

Связи передают от компонента к компоненту данные или сообщения о том, что произошло какое-то событие. Итак, скажем нашим текстовым полям, что кнопка нажата.
Для этого находим на квадратике кнопки зеленую точечку (она там одна), наводим мышу, читаем. Итак, это событие происходит всякий раз при нажатии кнопки. Супер! Куда же тащить? Ага, вот на квадратике текста слева тоже точечка. DoTex t Устанавливает текст надписи. То, что нужно. Но нам-то нужно установить текст двух надписей!
Здесь нам понадобится разветвитель.
Он находится в категории «Инструменты » вкладки компонентов. Вынесли маленький квадратик (похожий на стул) на наше поле. Теперь к одному концу можно подцепить одну связь, а к другому — две.
Цепляем на него слева нашу кнопку а две другие прицепляем к DoText точкам наших текстовых квадратиков.
Тааак. Ну, первый текстовый квадратик будет у нас просто говорить «Привет». Дважды щелкаем на связь и вводим текст «Привет».
А вот второй должен взять то значение, которое введет пользователь!
Значит, еще одна связь. На этот раз с полем ввода.
У квадратика с надписью «ab » внизу есть серая точечка, которая отвечает за хранение данных. оттуда мы возьмем введенное значение. И перетащим связь на серую точку вверху второго текстового квадратика. Все, теперь он будет знать откуда взять текст когда кнопка прикажет ему обновиться.

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

Создание оконного приложения Visual Studio

Введение в создание оконных приложений

Функции API для работы с консолью

Структура оконного приложения

Элементы управления окна

Графика в оконных приложениях

В операционной системе Windows возможны 3 типа структур программ:

  • диалоговая (основное окно - диалоговое),
  • консольная, или безоконная структура,
  • классическая (оконная, каркасная) структура

Диалоговые приложения для Windows имеют минимальный интерфейс связи с пользователем и передают информацию пользователю посредством стандартных диалоговых окон (например, окно сообщения MessageBox() ). Работа программы происходит «вслепую».

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

Оконные (каркасные) приложения строятся на базе специального набора функций API, составляющих графический интерфейс пользователя (GUI, Graphic User Interface). Главным элементом такого приложения является окно. Окно может содержать элементы управления: кнопки, списки, окна редактирования и др. Эти элементы, по сути, также являются окнами, но обладающими особыми свойствами. События, происходящие с этими элементами (и самим окном), приводят к приходу сообщений в процедуру окна.

Разница между оконными и консольными приложениями Windows состоит в том, с каким типом информации они работают.

Телефоны на Windows 10 Mobile появились с существенной задержкой относительно Android и iOS, пообещав за потерянное время лучшие возможности. Обещание оказалось пустым, а ведь это был ключевой момент в развитии Windows, как универсальной системы для всех устройств. Более того, приложения в Windows 10 остаются настолько инородными, что даже спустя столько лет существования Microsoft Store остаётся в разы беднее App Store и Google Play.

Тем не менее, говорить о том, что умение разрабатывать приложения для Windows 10 бесполезно – преждевременно. Во-первых, у Microsoft есть желание в 2017-2018 году запустить серию мобильных телефонов под линейкой Surface, рассчитанную на бизнес-аудиторию, то есть занять нишу, освобождённую после ухода с рынка BlackBerry.

Во-вторых, даже с учётом неизменного падения рынка смартфонов на WM, на компьютерах Windows по-прежнему доминирует, да и HoloLens обещает подогреть интерес. В-третьих, полупустой, но всё же общий магазин приложений предполагает куда большие возможности по привлечению аудитории.

В общем, пускай разработчики приложений для Android и iOS будут сегодня чуть больше востребованы, зато у их коллег, работающих на благо Windows, есть возможность стать настоящим мессией, которая спасёт всю платформу. И вот краткий путеводитель по тому, что как минимум для этого надо изучить.

Знакомство

Первым делом поближе познакомьтесь со универсальной платформой для приложений, которая с этого места будет носить своё официальное название – Universal Windows Platform или просто UWP. Появилась она ещё во времена Windows 8, а сегодня обросла всеми необходимыми удобствами. Концепция хоть и носит лозунг «одно приложение для всех устройств», но для хорошего приложения ориентироваться на отдельный тип всё-таки придётся. В общем, все возможности и ограничения UWP вы узнаете если прочитаете официальный релиз от Microsoft:

Язык

В информационном листе Microsoft вы можете найти следующую фразу: «Вы можете создавать приложения UWP на тех языках программирования, с которыми вы знакомы лучше всего…». Фактически, это не совсем так. Вам на выбор предлагаются 4 из них: C# , Visual Basic , C++ и JavaScript . Безусловно, это лучше, чем строгое ограничение, но универсальностью это назвать затруднительно.

Кстати, справочники по всем четырём языкам можно найти непосредственно на сайте Microsoft или просто нажав на предоставленные ссылки. Также на нашем сайте вы можете пройти бесплатный .

Программное обеспечение

Главное детище Microsoft, ориентированное на разработчиков приложений для всевозможных платформ – Visual Studio. Скачать его можно также с официального сайта , выбрав подходящую версию. Как с ним работать, какие в вашем распоряжении могут быть инструменты, а главное куда надо нажимать, вы узнаете из руководства . Обязательным для скачивания будет и пакет SDK . На этой же странице вы найдёте всю интересующую информацию по работе с ним.

Есть и альтернативный вариант создания приложения для Windows 10 для тех, кому окунаться в мир Visual Studio немного рано. Знакомьтесь, Windows App Studio . Фактически, это конструктор приложения с набором шаблонов, который поможет быстро визуализировать вашу идею.

Оформление

Как и положено уважаемой компании, Microsoft выпустил для своих разработчиков достаточно подробное руководство по оформлению приложений UWP. Здесь вы найдёте ответы на все интересующие вопросы: от типовых размеров экрана до описания командных элементов, от стандартных цветов до шаблонов Adobe Photoshop и Illustrator.

Разработка приложения

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

Литература

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

Windows 10 Development for Absolute Beginners – как понятно из названия, эта книга посвящена желающим создать своё первое приложение именно на Windows 10;

Building Windows 10 Applications with XAML and C# Unleashed (2nd Edition) , Adam Nathan – и вновь название книги красноречиво отражает её содержание;

Real World Windows 10 Development , Edward Moemeka, Elizabeth Moemeka – полноценный гид по разработке приложения для Windows 10, начинающийся с обзора самой ОС, её преимуществ и недостатков, и завершающийся верификацией и выгрузкой созданного вами объекта;

Location Intelligence for Windows Store apps , Ricky Brundritt – подробное руководство по разработке приложений для Windows. Посвящена 8 части ОС, поэтому периодически необходимо сверяться с официальной документацией, что ничуть не снижает ценности данной литературы;

– в книге довольно обще описается жизненный цикл Windows-приложения и куда подробнее – сторонних функций и инструментов;

Форум разработчиков Windows – задать вопросы и обсудить насущные проблемы разработки;

A Developer"s Guide to Windows 10 – часовой видеоурок, который поможет разобраться во всех тонкостях;

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

  • Анализ предметной области и создание ТЗ (взаимодействия с заказчиком)
  • Проектирование структуры программы
  • Кодирование (набор программного кода согласно проектной документации)
  • Тестирование и отладка
  • Внедрение программы
  • Сопровождение программы
  • Утилизация
Остановимся детально на процессе проектирования. В ходе проектирования архитектором или опытным программистом создается проектная документация, включающая текстовые описания, диаграммы, модели будущей программы. В этом нелегком деле нам поможет язык UML.

UML - является графическим языком для визуализации, описания параметров, конструирования и документирования различных систем (программ в частности). Диаграммы создаются с помощью специальных CASE средств, например Rational Rose (http://www-01.ibm.com/software/rational/) и Enterprise Architect (http://www.sparxsystems.com.au/). На основе технологии UML строится единая информационная модель. Приведенные выше CASE средства способны генерировать код на различных объектно-ориентированных языках, а так же обладают очень полезной функцией реверсивного инжиниринга. (Реверсивный инжиниринг позволяет создать графическую модель из имеющегося программного кода и комментариев к нему.)

Рассмотрим типы диаграмм для визуализации модели (это must have, хотя типов гораздо больше):

Диаграмма вариантов использования (use case diagram)

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

Диаграмма классов (class diagram)

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

Диаграмма состояний (statechart diagram)

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

Диаграмма последовательности (sequence diagram)

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

Диаграмма кооперации (collaboration diagram)

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

Диаграмма компонентов (component diagram)

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

Диаграмма развертывания (deployment diagram)

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

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

Я убежден, что программист в первую очередь это кодер – он НЕ должен общаться с заказчиком, НЕ должен задумываться об архитектуре системы, не должен изобретать интерфейс к программе, он только должен кодировать – реализовывать алгоритмы, функционал, внешний вид, юзабилити, но не более…. Проектировщик же должен начиная от абстрактных диаграмм (описывающих предметную область) до диаграмм представляющих структуру данных, классов и процессов их взаимодействия, детально шаг за шагом все расписать. То есть сложность работы и зарплата проектировщика должна быть на порядок выше чем у программиста == кодера. Простите за крамолу....