Оконные приложения · Интерактивный конспект

§ 5. Создание приложений

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

Попробовать на модели ↓

Разбираемся в теме

Основные пункты параграфа

От задачи к сценарию

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

НАБЛЮДАЙТЕ И ПРОБУЙТЕ

От задачи к сценарию

Меняйте данные и выполняйте шаги. Цвет выделяет текущие элементы; подписи объясняют результат. Сброс возвращает исходный опыт.

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

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

Главная мысль: Интерфейс, данные и алгоритмы проектируют совместно, начиная с действий пользователя. Пункт прочитан

Меню и стандартные диалоги

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

НАБЛЮДАЙТЕ И ПРОБУЙТЕ

Меню и стандартные диалоги

MenuStrip создаёт главное меню, ContextMenuStrip — контекстное. Команды меню вызывают обработчики Click. Диалоги открытия, сохранения, цвета и шрифта предоставляют знакомый способ выбора. Их ShowDialog() возвращает результат; только подтверждение позволяет использовать новое значение.

OpenFileDialog выбирает путь, но не читает содержимое сам. SaveFileDialog выбирает путь, но не записывает файл автоматически. Чтение и запись выполняет код приложения, обрабатывая ошибки и кодировку. Нажатие «Отмена» должно сохранять прежний документ и прежние параметры.

{ Фрагмент: компоненты созданы, System.Windows.Forms подключено. }
if colorDialog1.ShowDialog() = DialogResult.OK then
  textBox1.ForeColor := colorDialog1.Color;

Главная мысль: Диалог возвращает решение пользователя; выбранные параметры применяют только после подтверждения. Пункт прочитан

Редактор текста и рисунка

Данные документа хранят отдельно от действий интерфейса, чтобы их можно было сохранить и восстановить.

НАБЛЮДАЙТЕ И ПРОБУЙТЕ

Редактор текста и рисунка

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

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

Главная мысль: Данные документа хранят отдельно от действий интерфейса, чтобы их можно было сохранить и восстановить. Пункт прочитан

Калькулятор и граничные случаи

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

НАБЛЮДАЙТЕ И ПРОБУЙТЕ

Калькулятор и граничные случаи

Простой двухоперандный калькулятор хранит первое число, знак операции и второе число. После «=» выполняет выбранную операцию. Это не полноценный разбор выражения со скобками и приоритетами: поведение цепочки нажатий нужно определить отдельно.

Проверяют пустой ввод, деление на нуль, отрицательные и дробные значения, повтор «=» и очистку. Результат обычного деления нельзя без объяснения помещать в целочисленную переменную. Кнопка очистки должна сбрасывать и видимое поле, и внутреннее состояние. Тесты готовят с известными ответами до запуска.

Главная мысль: Калькулятор должен ясно определять порядок действий и обрабатывать неполный ввод. Пункт прочитан

Интерактивная практика

Исследуйте и примените

Проверьте модель на нескольких наборах данных, затем выполните самостоятельное задание.

НАБЛЮДАЙТЕ И ПРОБУЙТЕ

Лаборатория: проверьте свой вариант

Соберём главное

Шесть выводов

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

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

Данные документа хранят отдельно от действий интерфейса, чтобы их можно было сохранить и восстановить.

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

Подтверждение диалога и успешное чтение или сохранение файла — разные события.

Проверяйте отмену, повторные действия и восстановление состояния.

Самопроверка

Тест: 10 вопросов

Один верный ответ. За ответ — 0,5 балла. Откройте и проверьте себя.

1. С чего начинается разработка?

С назначения и сценариевС удаления данныхТолько с цвета кнопкиС публикации

Интерфейс должен решать задачу.

2. Зачем общий обработчик меню и кнопки?

Для удвоения числа действийДля согласованного поведенияДля отмены всех событийДля замены данных цветом

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

3. Что делает OpenFileDialog сам по себе?

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

Чтение выполняет код после выбора.

4. Что делает SaveFileDialog сам по себе?

Автоматически записывает любые данныеПроверяет все расчётыПредлагает путь сохраненияМеняет тип документа

Запись и проверка ошибок — отдельная работа.

5. Когда применять выбранный цвет?

После подтверждения диалогаВсегда при движении окнаПосле любой отменыДо открытия диалога

Отмена сохраняет прежние параметры.

6. Что означает признак изменений?

Нет текстаПрограмма закрытаФайл обязательно удалёнДокумент отличается от сохранённого состояния

Он помогает предотвратить потерю работы.

7. Что нужно для рисования отрезками при движении?

Только размер шрифтаТолько случайное числоТолько имя файлаПредыдущая и текущая точки

После отрезка предыдущую точку обновляют.

8. Что должна сбрасывать очистка калькулятора?

Только цветТолько второй операнд всегдаТолько заголовокПоля и внутреннее состояние

Иначе останутся скрытые старые значения.

9. Можно ли делить на 0?

Да в обычном режимеДа после очисткиНетДа в целочисленном режиме

Нулевой делитель обрабатывают как ошибку.

10. Двухоперандный калькулятор автоматически понимает все выражения?

НетТолько по числу кнопокТолько при большом окнеДа

Приоритеты и скобки требуют отдельной логики.

Раздел

'+['Код описывает структуру.','Проверьте, что имя не заканчивается на .html.txt.','Браузер отображает документ, а не редакторский проект.','После изменения файла обновите открытую страницу.'][S.step%4]+'

header — заголовок сайта

main — основное содержание

'+(S.aside?'':'')+'

…

Ссылка

'+cleanHTML(S.source,'preview-'+m+'-')+'

Стиль меняет представление

Какой цвет победит?

Содержимое

Текстовая альтернатива: '+esc(S.decorative?'пустая — декор пропускается':S.alt||'не задана')+'

'+(audio?'Звук: негромкий тон 440 Гц, 2 секунды.':'Видео: жёлтый круг движется по зелёному фону, 3 секунды; без звука.')+'

'+esc(S.title)+'

'+S.blocks.filter(x=>S.aside||x!=='Контакты').map(x=>'

'+esc(x)+'

'+({'О клубе':'Встречаемся, учимся и создаём.','Проекты':'Делимся результатами работы.','Контакты':'Как найти нашу команду.'}[x])+'

').join('')+'

'+tx(x,137,['Главная','Проекты','Контакты'][i],15)).join('')+''+tx(200,105,S.links?'есть ссылка':'нет ссылки',13)+tx(440,105,S.back?'есть ссылка':'нет ссылки',13))+pad(stats([['Достижимы с главной',reachable.length+' из 3'],['Не достижимы',['Главная','Проекты','Контакты'].filter(x=>!reachable.includes(x)).join(', ')||'нет']])+(m>=4?table(['Проверка','Результат'],[['Все разделы достижимы',reachable.length===3?'да':'нет'],['Содержание',S.goal?'проверено':'нужна проверка'],['Мобильная версия',S.mobile?'проверено':'нужна проверка']]):''));msg='В схеме только показанные направленные ссылки. Доступность файла сама по себе не означает, что посетитель найдёт путь к нему. Контрольный список не гарантирует отсутствие всех ошибок.';} function systems(){if(m===1||m===2||m===5){input('query','Поиск по названию',35);select('category','Раздел',[['all','Все'],['code','Программирование'],['web','Веб'],['society','Общество']]);check('available','Только доступные');const books=[['HTML с примерами','web',true],['Алгоритмы','code',true],['Информация и человек','society',false],['CSS на практике','web',false],['Язык Pascal','code',true]];let found=books.filter(x=>x[0].toLowerCase().includes(S.query.toLowerCase())&&(S.category==='all'||x[1]===S.category)&&(!S.available||x[2]));html=flow(['Данные каталога','Условия запроса','Обработка','Результат'],3)+pad(table(['Название','Раздел','Доступно'],found.map(x=>[x[0],{web:'Веб',code:'Программирование',society:'Общество'}[x[1]],x[2]?'да':'нет']))+stats([['Всего записей',books.length],['Найдено',found.length]])+'

Учебный вымышленный каталог. Данные находятся внутри страницы.

');msg='Фильтры соединены условием И. Система включает не только таблицу, но и правила, программное обеспечение и работу людей.';return} if(m===3){select('kind','Технология',[['cloud','Облачная услуга'],['grid','Распределённые вычисления'],['ar','Дополненная реальность'],['vr','Виртуальная реальность']]);let a={cloud:['Удалённый ресурс по сети','Сервис предоставляет хранение или обработку; условия доступа и защиты проверяют отдельно.'],grid:['Части вычислительной задачи','Несколько узлов совместно обрабатывают распределённую работу.'],ar:['Реальная среда + цифровой слой','Подсказки накладываются на вид окружающего мира.'],vr:['Искусственная среда','Пользователь взаимодействует с виртуальным пространством.']}[S.kind];html=flow(['Задача','Технология','Результат'],1)+pad('

'+a[0]+'

'+a[1]+'

');msg='Выбирают технологию по задаче и ограничениям, а не по названию.';return} choices('Библиотека предоставляет читателю поиск по электронному каталогу. Что является услугой?',['Сам поиск, предоставленный читателю','Набор записей каталога','Готовый справочник'],0,'Каталог — ресурс, готовый справочник может быть продуктом, предоставляемый поиск — услуга. Классификация зависит от роли в ситуации.');} function society(){if(m===1||m===2||m===5){check('training','Сотрудники обучены');check('access','Есть доступный интерфейс');check('backup','Есть план при отказе');let time=S.training?5:14,errors=S.training?1:4,excluded=S.access?0:3;html=flow(['Подготовка','Цифровой процесс','Проверка результата'],2)+pad(stats([['Условное время',time+' мин'],['Ошибок в учебном сценарии',errors],['Участников без доступа',excluded],['При отказе',S.backup?'переход к резервному порядку':'работа останавливается']])+'

Числа заданы условиями вымышленного опыта. Это не статистика и не прогноз.

');msg='Установка техники сама по себе не решает вопросы навыков, доступности и непрерывности работы.';return} if(m===3){choices('Найден яркий пост без автора и даты. Как использовать утверждение из него?',['Сначала проверить первоисточник и подтверждения','Считать верным из-за популярности','Переслать без проверки'],0,'Проверьте автора, дату, доказательства и независимые подтверждения. Популярность не заменяет проверку.');return} choices('Сервис принимает заявления только онлайн. Часть людей не имеет устойчивой связи. Что улучшит доступ?',['Добавить доступный альтернативный канал','Увеличить число рекламных баннеров','Скрыть инструкцию за регистрацией'],0,'Альтернативный канал и понятный доступный интерфейс помогают уменьшить исключение людей из процесса.');} function education(){if(m===1||m===4||m===5){range('reading','Изучение примера, минут',0,60,5);range('practice','Самостоятельная практика, минут',0,60,5);range('review','Проверка и исправления, минут',0,30,5);let sum=S.reading+S.practice+S.review;html=flow(['Понять пример','Выполнить самостоятельно','Проверить','Исправить'],S.step%4)+pad(stats([['Всего времени',sum+' мин'],['Практика',S.practice?'запланирована':'отсутствует'],['Обратная связь',S.review?'есть время':'не предусмотрена']])+'

Проверяемая цель: сделать адаптивную карточку и показать её при ширине 360 и 1200 пикселей.

');next();msg=sum===0?'План пуст. Добавьте время на действия.':!S.practice?'Одно чтение не подтверждает освоение. Добавьте самостоятельную задачу.':!S.review?'Оставьте время на проверку и исправления.':'План содержит изучение, практику и проверку. Его длительность не гарантирует освоение — нужен работающий результат.';return} if(m===2){select('connection','Условия',[['slow','Связь нестабильная'],['live','Нужен общий разговор сейчас'],['flex','Участники учатся в разное время']]);let k={slow:0,live:1,flex:2}[S.connection];html=pad(stats([['Подходящий вариант',['Загружаемый текст + отложенные ответы','Синхронное занятие','Асинхронное задание'][k]]])+'

'+['Материалы доступны после загрузки; вопросы можно передать позже.','Общение происходит одновременно; важны связь и общее расписание.','Каждый выбирает время, но срок и критерии результата остаются ясными.'][k]+'

');msg='Формат выбирают по условиям и задаче. Дистанционное обучение может быть и синхронным, и асинхронным.';return} select('kind','Задача',[['','Написать и проверить обработчик'],['design','Спроектировать понятную форму'],['data','Найти закономерности в данных'],['security','Подготовить план восстановления']]);html=pad(stats([['Основной акцент',{'':'Разработка',design:'Дизайн взаимодействия',data:'Аналитика',security:'Безопасность'}[S.kind]]])+'

Доказательство навыка: '+{'':'работающий пример и проверки пограничных значений.',design:'макет и результаты проверки с пользователями.',data:'воспроизводимый расчёт и объяснение ограничений.',security:'проверенный порядок восстановления и разбор результата.'}[S.kind]+'

');msg='Роли пересекаются. Название профессии не заменяет знакомство с её задачами.';} function security(){if(m===1){select('kind','Происшествие',[['','Посторонний прочитал закрытые данные'],['edit','Запись изменена без разрешения'],['down','Сервис перестал отвечать']]);html=flow(['Конфиденциальность','Целостность','Доступность'],{'':0,edit:1,down:2}[S.kind])+pad('

Основная нарушенная цель: '+{'':'конфиденциальность',edit:'целостность',down:'доступность'}[S.kind]+'.

');msg='Один реальный инцидент может нарушать несколько целей. Здесь выделено прямое последствие условия.';return} if(m===2){choices('В программе есть известная неисправленная ошибка защиты. Как назвать это слабое место?',['Уязвимость','Уже произошедший инцидент','Резервная копия'],0,'Уязвимость — слабое место. Возможное воздействие — угроза; произошедшее нарушение — инцидент.');return} if(m===3){choices('Знакомый аккаунт просит срочно прислать код входа. Ваше действие?',['Не передавать код; проверить через известный контакт','Отправить код, имя выглядит знакомым','Перейти по присланной ссылке и ввести пароль'],0,'Имя и фото могут быть подменены. Проверяйте через заранее известный независимый канал; код входа не сообщают собеседнику.');return} check('backup','Создана резервная копия');check('independent','Копия отделена от рабочей среды');check('tested','Восстановление проверено');range('detect','Обнаружение и решение, часов',1,8);range('restore','Восстановление по плану, часов',1,12);let valid=S.backup&&S.independent,known=valid&&S.tested;html=flow(['Подготовиться','Сохранить важные функции','Восстановить','Улучшить'],S.step%4)+pad(stats([['Состояние копии',!S.backup?'нет':!S.independent?'зависит от той же среды':!S.tested?'не проверена':'проверена и отделена'],['Условный простой',known?S.detect+S.restore+' ч':'время не определено условиями']])+'

В учебном сценарии простой = обнаружение и решение + восстановление. В реальности сроки зависят от многих факторов; это не прогноз риска.

');next();msg=known?'После восстановления выясняют причину и улучшают защиту.':!valid?'Синхронизация в той же среде может распространить повреждение. Нужна независимая копия.':'Наличие копии не подтверждает возможность восстановления. Нужна проверка.';} function hints(){stage.querySelectorAll('.v9-scroll,.site-scroll,.box-scroll').forEach(el=>{if(el.scrollWidth>el.clientWidth+1){el.tabIndex=0;el.setAttribute('aria-label','Область с горизонтальной прокруткой');let h=document.createElement('div');h.className='v9-scroll-hint';h.textContent='← Можно прокручивать в стороны →';el.after(h)}})} function render(keep=false){const restoreFocus=retainWorkshopFocus(root);html='';ct='';msg='';[null,events,designer,controls,graphics,apps,webConcepts,editor,css,media,builder,site,systems,society,education,security][n]();stage.innerHTML=html;feed.textContent=msg;let frag=document.createElement('div');frag.innerHTML=ct;const signature=b=>[...b.querySelectorAll('input,select,textarea,button')].map(el=>[el.tagName,el.type,el.dataset.key||el.dataset.act].join(':')).join('|');if(keep&&signature(tools)===signature(frag)){tools.querySelectorAll('[data-key]').forEach(old=>{let nxt=frag.querySelector('[data-key="'+old.dataset.key+'"]'+(old.type==='radio'?'[value="'+old.value+'"]':''));let st=old.closest('label').querySelector('strong'),ns=nxt?.closest('label').querySelector('strong');if(st&&ns)st.textContent=ns.textContent;if(nxt&&document.activeElement!==old){if(old.type==='checkbox'||old.type==='radio')old.checked=nxt.checked;else old.value=nxt.value}})}else{let old=document.activeElement,k=tools.contains(old)?old.dataset.key:null,start=old?.selectionStart,end=old?.selectionEnd;tools.innerHTML=ct;if(keep&&k){let el=tools.querySelector('[data-key="'+k+'"]');el?.focus({preventScroll:true});if(start!=null)try{el.setSelectionRange(start,end)}catch(e){}}}hints();root.dataset.state=JSON.stringify(S);bindDrawing();restoreFocus();stage.querySelectorAll('audio,video').forEach(el=>el.addEventListener('error',()=>{feed.textContent='Браузер не смог воспроизвести формат. Текстовое описание записи приведено рядом.'}));} function stop(){clearInterval(timer);timer=null;S.running=false;stage.querySelectorAll('audio,video').forEach(e=>e.pause())} function tick(){S.position+=S.distance;if(S.position>620)S.position=20;let dot=stage.querySelector('[data-moving]');if(dot)dot.setAttribute('cx',S.position);root.dataset.state=JSON.stringify(S)} function record(s){S.log.push(s);if(S.log.length>8)S.log.shift()} function action(a){if(a==='focus'){let b=stage.querySelector('[data-act="click"]');if(b&&!b.disabled){b.focus();feed.textContent='Focus() перевёл фокус на кнопку.'}else feed.textContent='Скрытая или недоступная кнопка не принимает фокус.';return}if(a==='step')S.step++;else if(a.startsWith('answer'))S.answer=Number(a.slice(6));else if(a==='click'){if(n===6){S.count++;render();return}if(S.enabled){if(S.linked){S.count++;record('button1 · Click → значение '+S.count)}else record('Click: пользовательский обработчик не назначен')}}else if(a==='event'){if(S.event==='Click'){if(S.enabled&&S.visible){if(S.linked){S.count++;record('button1 · Click → '+S.count)}else record('Click: нет назначенного обработчика')}else record('Кнопка не доступна для активации')}else record((S.event==='Load'?'form1':'timer1')+' · '+S.event+' → запись в журнал')}else if(a==='zero'){S.count=0;record('resetButton · Click → 0')}else if(a==='greet')record(S.name.trim()?'Здравствуйте, '+S.name.trim()+'!':'Сначала введите имя.');else if(a==='play'){if(S.running)stop();else{S.running=true;timer=setInterval(tick,S.interval)}}else if(a==='tick')tick();else if(a==='dialog'){S.chosen=S.color;S.dialog=true}else if(a==='apply'){S.color=S.chosen;S.dialog=false}else if(a==='cancel')S.dialog=false;else if(a==='save')S.saved=S.draft;else if(a==='restore')S.draft=S.saved;else if(a==='undo')S.strokes.pop();else if(a==='clearDrawing')S.strokes=[];else if(a==='up'||a==='down'){let i=S.selected,j=i+(a==='up'?-1:1);if(j>=0&&j{let r=board.getBoundingClientRect();return[Math.max(0,Math.min(600,(e.clientX-r.left)/r.width*600)),Math.max(0,Math.min(260,(e.clientY-r.top)/r.height*260))]};board.addEventListener('pointerdown',e=>{if(e.button!==0)return;e.preventDefault();board.setPointerCapture(e.pointerId);drawing=[point(e)];drawing.push([drawing[0][0]+.1,drawing[0][1]+.1]);path=document.createElementNS('http://www.w3.org/2000/svg','polyline');path.setAttribute('fill','none');path.setAttribute('stroke','#356b49');path.setAttribute('stroke-width','5');path.setAttribute('stroke-linecap','round');path.setAttribute('stroke-linejoin','round');path.setAttribute('points',drawing.map(p=>p.join(',')).join(' '));board.append(path)});board.addEventListener('pointermove',e=>{if(!drawing)return;drawing.push(point(e));path.setAttribute('points',drawing.map(p=>p.join(',')).join(' '))});const end=()=>{if(!drawing)return;S.strokes.push(drawing);drawing=null;root.dataset.state=JSON.stringify(S)};board.addEventListener('pointerup',end);board.addEventListener('pointercancel',end)} root.addEventListener('click',e=>{let b=e.target.closest('[data-act]');if(b&&root.contains(b))action(b.dataset.act);let a=e.target.closest('.web-preview a');if(a){e.preventDefault();let id=a.getAttribute('href')?.slice(1),target=id?document.getElementById(id):null;target?.scrollIntoView({block:'nearest'})}}); root.addEventListener('input',e=>{if(e.target.hasAttribute('data-demo-input')){record('textBox1 · TextChanged → '+e.target.value);stage.querySelector('.event-output').textContent=S.log.at(-1);root.dataset.state=JSON.stringify(S)}}); function update(e){let el=e.target,k=el.dataset.key;if(!k)return;let v=el.type==='checkbox'?el.checked:el.value;if(['range','number'].includes(el.type)){if(v===''||!Number.isFinite(Number(v))||Number(v)Number(el.max)){feed.textContent='Введите число от '+el.min+' до '+el.max+'. Пока используется предыдущее значение.';return}v=Number(v)}else if((el.tagName==='SELECT'||el.type==='radio')&&typeof S[k]==='number')v=Number(v);if(S.running)stop();S[k]=v;S.answer=-1;render(el.tagName!=='SELECT'&&el.type!=='checkbox')} tools.addEventListener('input',e=>{if(e.target.tagName!=='SELECT'&&e.target.type!=='checkbox')update(e)});tools.addEventListener('change',e=>{if(e.target.type==='number'){let el=e.target,v=el.value===''?S[el.dataset.key]:Number(el.value);if(!Number.isFinite(v))v=S[el.dataset.key];let step=Number(el.step)||1;el.value=Number(Math.min(Number(el.max),Math.max(Number(el.min),Number(el.min)+Math.round((v-Number(el.min))/step)*step)).toFixed(6));update(e)}else if(e.target.tagName==='SELECT'||e.target.type==='checkbox')update(e)}); root.querySelector('.iv-reset').onclick=()=>{stop();S=structuredClone(base);render()};root.addEventListener('pause-diagram',()=>{if(S.running){stop();render()}});document.addEventListener('visibilitychange',()=>{if(document.hidden){stop();if(n===4)render()}});init();render(); });})();