CC BY
83ИНСТРУМЕНТЫ И ТЕХНОЛОГИИ СОЗДАНИЯ ЭЛЕКТРОННЫХ РЕСУРСОВ
Е.А. Еремин
ДИНАМИЧЕСКИЕ МОДЕЛИ И ИЛЛЮСТРАЦИИ НА БАЗЕ АППЛЕТОВ В СОВРЕМЕННЫХ ЭЛЕКТРОННЫХ УЧЕБНЫХ МАТЕРИАЛАХ
Рассматривается создание динамических иллюстраций к электронным учебным материалам на основе технологии Java-апплетов. Описываются базовые принципы функционирования апплета, и на простом примере демонстрируется методика его реализации. В качестве реального применения изучаемой технологии показана разработанная автором динамическая интерактивная Java-модель учебного компьютера, которая способна существенно облегчить изучение целого ряда вопросов курса информатики.
Одной из ярко выраженных современных тенденций в оформлении многих разновидностей информационных электронных материалов является их представление в форме, принятой в Интернет-ресурсах. Подчеркнем, что материалы эти совсем не обязательно предназначаются для размещения в Интернет - в частности, значительная часть сопроводительной документации и учебных материалов, распространяемая «несетевыми» средствами, тем не менее, имеет формат Web-страниц. Таким образом, все более широкое проникновение Web-технологий в оформление всевозможной информации становится очевидным.
Возможности указанных технологий постоянно расширяются. Как известно, первоначально Web-материалы представляли собой гипертекст, т.е. исключительно текстовую информацию. С развитием программ-браузеров, предназначенных для просмотра Web-страниц, к тексту довольно быстро удалось подключить графические иллюстрации, что сделало материалы значительно более содержательными и привлекательными. Тем не менее все они по-прежнему оставались статическим.
Существует, правда, способ получить динамические изображения, не выходя за рамки классических Web-материалов. Он базируется на специальном графическом формате, который называется «анимированный GIF» - фактически он представляет собой набор кадров, переключающихся в заданной последовательности. Однако возможности таких иллюстраций существенно ограничены, и на практике они в основном используются для создания мелькающих (и часто сильно раздражающих) баннеров рекламного характера.
Новое поколение динамических иллюстраций для Web-страниц появилось с развитием технологий Java и Flash. Обе они базируются на некоторых языках программирования, что несколько затрудняет разработку иллюстраций и динамических моделей. Но выпуск в свет все более совершенных программных средств автоматизации проектиро-
© Е.А. Еремин, 2005
вания уже сейчас позволяет не считать их чем-то узкопрофессиональным и недоступным для рядового разработчика электронных материалов.
По сравнению с традиционными средствами Java-апплеты и Flash-приложения обладают двумя принципиально важными достоинствами - динамическими воз -можностями и интерактивностью . Благодаря этим качествам продукты данных технологий могут служить хорошими динамическими иллюстрациями и моделями для оформления учебных материалов. Получающиеся в результате «живые» Web-страницы могут найти применение в преподавании самых разнообразных учебных дисциплин.
В статье рассматриваются основные принципы создания Java-апплетов и их использования при оформлении учебных материалов. В качестве примера реального применения динамической интерактивной Java-модели рассмотрена реализованная автором учебная модель компьютера, предназначенная для изучения различных аспектов работы аппаратного и программного обеспечения. Новизна подхода заключается в том, что разработан один универсальный апплет, который способен определенным образом «подстраиваться» под содержание конкретной Web-страницы; в результате на его основе можно обсуждать самые разнообразные теоретические вопросы и также решать задачи. Наличие интерактивных органов управления учебной моделью дает пользователям возможность оперативно вносить изменения в ее работу, что, в частности, позволяет исследовать несколько вариантов решения предложенной задачи.
Технология создания динамических иллюстраций и моделей
Для создания динамических иллюстрации средствами Java необходимо четко представлять, как работает применяемая технология. С целью выяснения этого вопроса обратимся к рис.1, на котором изображен механизм функционирования апплета.
Рис. 1
Для просмотра Web-страниц используется специальная программа, которая называется браузер . Он считывает текст странички (на рис.1 это гипертекстовой файл t.html) и, руководствуясь служебной разметкой, отображает его на экране в требуемой
форме. Одной из возможностей разметки является ссылка на апплет, специально выделенная на рисунке. Когда браузер встречает такую ссылку, он ищет файл с указанным именем (в нашем случае это ap.class), считывает и запускает его, формируя в поле Web-страницы своеобразный динамический экран, работа которого полностью контролируется апплетом. Так формируется «живая» иллюстрация, возможности которой определяются программой апплета.
На рис.1 отражена еще одна дополнительная возможность. Стартовавший на странице апплет способен получить у браузера строку параметров и использовать ее в соответствии с заложенным в него алгоритмом. Эта несложная процедура позволяет изменять поведение апплета в зависимости от содержания страницы и тем самым разработать один универсальный апплет, способный обслуживать самый разнообразный учебный материал. Конкретные примеры использования управления с помощью строки параметров будут показаны ниже.
Изложенным выше можно было бы ограничиться, если интересоваться только статическими апплетами. Тем не менее для создания динамических апплетов требуется рассмотреть еще одно очень важное понятие - поток (соответствующий английский термин
- thread). Поток - это некоторая часть программы апплета, которая запускается и выполняется, решая самостоятельную задачу. В одном апплете может быть несколько потоков, но в данной публикации мы для простоты будем говорить только об одном. Целью организации этого потока в нашем случае будет создание анимации - т.е. эффекта движения в окне апплета. Рассмотрим рис.2, на котором изображены основные принципы функционирования потока.
Рис. 2
Любой апплет состоит из некоторого набора процедур со стандартными именами, каждая из которых играет вполне определенную роль. Названия наиболее важных процедур (init, start и т. д.) выписаны на рис.2; дополнительная информация о них приведена в табл.1.
Таблица 1
Метод Когда вызывается Назначение
init один раз при запуске апплета осуществляет инициализацию значений переменных и объектов
start после init и при каждом перезапуске апплета (при возврате на страницу) запускает поток
run после start образует тело потока
stop при приостановке (при переходе к следующей странице или прокрутке) останавливает поток
destroy после stop в конце работы выгружает апплет
paint при обновлении окна апплета выполняет перерисовку окна
action при любом воздействии пользователя на органы управления апплетом обеспечивает интерактивность модели
Особую роль играет процедура run, определяющая все действия, которые будет выполнять поток. Последний создается при инициализации init и запускается процедурой start. В случаях, когда апплет требуется на время приостановить (например, при переходе на другую Web-страницу), вызывается процедура stop. Наконец, destroy выгружает апплет из памяти и уничтожает все связанные с ним объекты, в том числе и поток.
Две оставшиеся процедуры не имеют непосредственного отношения к потокам: paint ответственна за рисование изображения на экране, а action обрабатывает воздействия пользователя клавиатурой и мышью.
Для выполнения программы служит программно реализованная Java-машина, которая либо непосредственной входит в состав браузера, либо является дополнительной (но при этом вполне самостоятельной) программой, которую браузер способен автоматически запускать в нужный момент. В процессе работы Java-машина организует вызовы всех перечисленных выше процедур и выполняет все функции по поддержке работоспособности апплета.
Таким образом, из вышеизложенного следует, что для создания динамической иллюстрации требуется выполнить следующие действия:
• составить и отладить программу апплета, обеспечивающего необходимое поведение иллюстрации; в результате получится исполняемый файл с расширением class;
• вставить в нужное место Web-страницы ссылку на апплет, указав необходимую для его загрузки информацию;
• предусмотреть, если это необходимо, строку параметров, задающую поведение апплета в соответствии с материалом страницы.
Рассмотрим описанную технологию реализации динамических и интерактивных иллюстраций на очень простом примере, в результате работы которого в окне браузера
будет создаваться движение шарика, причем его радиус является внешним параметром. Примитивная интерактивность состоит в возможности повторения движения с начала при нажатии на кнопку «reset». Результат, который в конечном счете должен получиться в окне браузера, приведен на рис.3.
I Ш Простой апплет - Microsoft І... ИІД Е~
Файл Правка Вид Избранн у> Е9
J ^ Назад ^ т (Э Ф] Q »
Адрес ^ C:\ball.html Щ]
Пример простейшего ж.
• динамического • интерактивного
апплета: движется шарик.
Reset |
d
^Гмон компьютер Л
Рис. 3
Разработка апплета
Опишем основные этапы реализации апплета подробнее. Поскольку апплеты пишутся на языке Java, для их разработки необходимо иметь хотя бы минимальные знания по данному языку. Изложение его основ выходит за рамки данной публикации, но это не является принципиальной трудностью, поскольку существует большое количество книг: от совсем простых, например, [1], до профессиональных, написанных вполне доступных языком [5].
В рамках нашего рассмотрения предлагается окинуть взглядом готовую программу исключительно «на понимание», не обращая внимания на отдельные синтаксические детали. Это позволит получить некоторое представления о том, что такое программа апплета. Хочется заверить читателей, что дело это не слишком сложное.
Ситуация еще облегчается тем, что большая часть программы является стандартной для любого динамического апплета. Для выделения этого обстоятельства в приводимом ниже листинге те небольшие части программы, которые характеризуют именно наш апплет, обведены в рамку. Кроме того, в двух строках, где находится заглавие и регулируется скорость апплета, «переменная» часть выделена жирным шрифтом и подчеркнута.
Итак, приведем готовую программу и прокомментируем ее.
import java.applet.*; //подключение стандартных библиотек import java.awt.*;
//Заголовок класса
public class ball extends java.applet.Applet implements Runnable{
//Описания
Thread mult= null; //поток для анимации
int x, y, d; //координаты и диаметр шарика
Button resetButton = new Button("Reset"); //кнопка сброса
public void init()
{add(resetButton);
//преобразовать строку с параметром в число (диаметр шарика): d= Integer.parseInt(getParameter("Diam")); y = 90 - d;
//================= Динамика апплета =================
mult = new Thread(this); mult.start(); //создать поток }
public void start()
{mult.resume(); //возобновить работу потока }
public void run() //работа потока - анимация {while (true) //бесконечный цикл
{if (x<200-d) x++; //увеличение x на 1 (до правой границы)
repaint(); //отобразить изменения в окне апплета
//ожидание; в sleep() задается его время в мсек
try {mult.sleep(20);} catch(InterruptedException e) {}
}
}
public void stop()
{mult.suspend(); //приостановить работу потока }
public void destroy()
{mult.stop(); //завершить работу потока }
//======== Рисование ========
public void paint(Graphics g)
{g.drawLine(0,y+d,22 0,y+d); //рисуем поверхность g.drawOval(x,y,d,d); //рисуем шарик
1
//====== Интерактивность апплета ======
public boolean action(Event e, Object o)
{if (e.target instanceof Button)
if (e.target==resetButton) x=0; //Сброс return(true);
}
}
Первые две строки, начинающиеся со служебного слова import, подключают стандартные библиотеки языка Java: модуль java.applet обеспечивает формирование апплета, а java.awt (awt - сокращение от Abstract Windows Toolkit) - создание окон и управление ими. Модуль awt также содержит в себе все привычные нам органы управления современной оконной среды: кнопки, списки, поля ввода и т.д.
Два символа “/” являются признаком комментария, так что весь следующий за ними текст строки предназначен исключительно для программистов и машиной просто игнорируется.
Далее следует заголовок нашего класса ball, который, как нетрудно догадаться, расширяет возможности стандартного класса Applet. Последний к тому же поддерживает интерфейс (взаимодействие) с потоками Runnable, о чем свидетельствует последняя часть заголовка. Все конструкции Java обязательно описываются как классы, поскольку так принято во всех объектно-ориентированных языках.
Содержимое класса, заключенное в фигурные скобки, обычно открывается описаниями наиболее важных объектов программы. В нашем случае это поток для создания «мультфильма» mult, который нужен в любом апплете с анимацией, а также характерные именно для описываемого апплета параметры шарика и описание кнопки сброса.
Основное содержание листинга составляют используемые методы. Для нашего демонстрационного примера методы максимально просты: все они уже были описаны в предыдущем разделе. Кратко назовем их основные особенности.
Процедура init. Создает кнопку и поток для анимации. Наиболее сложная строчка init преобразует считанный с Web-страницы параметр из строковой формы в числовую, в результате чего переменная d принимает значение, равное диаметру шарика.
Процедуры start, stop и destroy состоят из одной строки, которая просто вызывает необходимую стандартную процедуру управления потоком.
Процедура run. Является, как уже отмечалось выше, телом потока. Традиционно оно оформлено в виде бесконечного цикла while, который гарантирует постоянную работоспособность потока. Выделенная строка, характерная для нашего апплета, обеспечивает увеличение на единицу (обозначение ++) координаты шарика х. Условие х < 200 - d служит для того, чтобы прекратить движение, как только шарик коснется правой границы окна апплета (его ширина как раз равна 200).
Далее, как всегда, поток вызывает метод repaint, который, в свою очередь, обращается к уже известному нам методу paint. После чего программа делает паузу заданной длительности («засыпает»), и все повторяется сначала.
Процедура paint. В нашем апплете рисует шарик и поверхность, по которой он катится. Важно подчеркнуть, что работающий поток наращивает значение х, что вызывает смещение изображения шарика вправо.
Процедура action. Определив, что процедура вызвана в связи с нажатием кнопки Button с именем resetButton, она обнуляет координату х. В результате шарик возвращается на начальную позицию, и движение повторяется.
Ссылка на апплет
Для включения динамической иллюстрации необходимо в нужном месте учебного материала разместить на него ссылку. Помимо обозначения того места, где будет размещен апплет, ссылка содержит также ряд необязательных параметров, позволяющих настроить изображение: размер рисунка, отступ от него и некоторые другие.
Для обсуждаемого нами демонстрационного примера информация о размещении апплета может быть написана следующим образом.
<APPLET
CODE = "ball.class"
WIDTH = 200 HEIGHT = 100
>
<PARAM Name="Diam" Value="20">
</APPLET>
Здесь обязательный параметр CODE ссылается на файл апплета, а дополнительные
- WIDTH и HEIGHT (ширина и длина соответственно) задают размер динамической иллюстрации. Строка с параметром апплета PARAM будет рассмотрена ниже.
Заметим, что размеры WIDTH и HEIGHT связаны со значениями координат рисунков, создаваемых апплетом, поэтому не могут назначаться абсолютно произвольно. В то же время в языке имеются несложные средства (мы не будем их здесь рассматривать), позволяющие узнать значения этих параметров, а затем пересчитать весь рисунок в соответствии с ними.
Передача параметров апплету
Как уже отмечалось, наличие у апплета параметров является очень удобным свойством: оно позволяет разработать универсальный апплет и регулировать его поведение непосредственно с Web-страниц при оформлении учебных материалов. Альтернативная возможность - множество похожих апплетов со «встроенными» значениями параметров
- менее удобна по нескольким причинам. Во-первых, по чисто техническим, поскольку растет количество файлов типа .class и, следовательно, занимаемый ими объем (последнее, в свою очередь, ведет к увеличению времени передачи материалов по сети). Во-вторых, с точки зрения разработчика учебных материалов, обычно небольшого специалиста в области программирования, лучше иметь законченную программу и больше к ней не возвращаться (при этом возможно поручить написание апплета программисту, который скомпилирует файл .class, а все остальное потом сделать самому).
Для разбираемой нами задачи строка с параметром, расположенная в описании апплета, имеет вид:
<PARAM Name="Diam" Value="20">.
Она описывает параметр с именем Diam, которому присваивается значение 20 (разумеется, мы можем задавать и другие).
В программе апплета предусмотрены считывание и расшифровка значения параметра: сначала функция getParameter("Diam") возвращает значение данного параметра из текста страницы, а затем с помощью другой стандартной функции класса целых чисел Integer, которая называется Integer.parseInt(), полученный текст преобразуется в целое число (в нашем примере 20).
Удобство использования параметров для реального учебного материала будет продемонстрировано в следующем разделе.
Примеры учебных материалов на базе динамической модели
Теперь, когда общие принципы разработки динамических иллюстраций и моделей стали понятными, разберем реальный пример их применения в электронных учебных материалах.
В качестве предмета для обсуждения возьмем электронные материалы по разработанной автором учебной модели компьютера «Е97». Эта модель впервые была описана в пособии [2]; позднее она излагалась в книгах, вышедших большим тиражом [4, 3].
Для целей нашего обсуждения достаточно самых общих сведений о модели. Она предназначается для изучения целого ряда вопросов, связанных как с аппаратной организацией ЭВМ, так и с принципами реализации программного обеспечения. Необходимость специальной компьютерной модели вызвана сложностью устройства реальных компьютеров. Тщательно продуманная модель облегчает обучение, поскольку она максимально проста, лишена второстепенных деталей и в то же самое время сохраняет все наиболее существенные черты реальных вычислительных устройств.
Модель «Е97» представляет собой учебный компьютер, состоящий из процессора, памяти (оперативной - ОЗУ и постоянной - ПЗУ), а также простейших устройств ввода/вывода - клавиатуры и дисплея. Все ее функциональные блоки устроены максимально логично и просто, но при этом похожи на реальный современный компьютер.
Для изучения «Е97» имеет несколько реализаций, наибольший интерес с точки зрения данной публикации представляет реализация в виде 1ауа-апплета (рис.4).
Рис. 4
Апплет можно найти в Интернете по адресу: http://e97.nm.ru/e97_java/e97_java.html
Окно апплета достаточно информативно и полностью отражает текущее состояние учебного компьютера (процессор, ОЗУ, дисплей) в любой момент времени. «Е97» имеет ряд органов управления. Это, в первую очередь, кнопки:
• start - запуск программы сначала;
• stop - остановка программы;
• cont - выполнение следующей команды при пошаговой отладке;
• cls - очистка экрана дисплея;
• read и write - чтение или запись информации по заданному адресу памяти (см. также поля address и value).
Для выбора возможного режима исполнения - полностью автоматического или пошагового - служит переключатель auto/step. Флажки визуализации позволяют отключить постоянное отображение состояния машины в процессе выполнения программы, что существенно повышает скорость работы. Наконец, поля R0-R3, PC, SP, Ri и PS отображают текущее содержимое регистров процессора и позволяют их изменять по желанию обучаемых.
К сожалению, все надписи в апплете английские, поскольку в использованной версии Java имеются технические трудности с русскими шрифтами.
Апплет «Е97» реализован в соответствии с описанными выше принципами и является полностью универсальным. Он способен принимать любую допустимую программу из текста Web-страницы, что делает его достаточным для оформления абсолютно любых электронных учебных материалов по «Е97». Ниже приводится несколько конкретных примеров, как это может быть сделано на практике.
Пример 1. Освоение логических операций
Первый пример касается объяснения принципов работы процессора современного компьютера на базе модели «Е97».
Опишем для примера, как построить «живую» Web-страницу для изучения любой из логических операций. Возьмем для определенности логическое И. После краткого описания теории удобно поместить апплет «Е97» с программой следующего содержания: значение из регистра процессора R0 копируется во все остальные регистры R1-R3, а затем над ними выполняется операция И с константами F, F0 и F00 соответственно. В результате по общепринятым правилам в регистре R1 остается только последняя шестнадцатеричная цифра числа, в R2 - вторая, а в R3 - третья справа цифра. Например, если в R0 непосредственно ввести число 0123, то после запуска программы установится следующее состояние регистров: R1 = 0003, R2 = 0020 и R3 = 0100.
Таким способом апплет проиллюстрирует изложенный на Web-странице теоретический материал. Но это только часть его возможностей. Непосредственно после него можно поместить задания на закрепление изученного материала. В частности, можно предложить ученикам переделать программу так, чтобы в R1 получались младшая половина числа, а в R2 - его старшая половина и т. п. В результате на той же самой странице можно дополнительно проделать любое количество упражнений (разумеется, при желании можно разнести упражнения и на несколько страниц).
Аналогично можно изучать и остальные операции, которые входят в систему команд компьютера «Е97», причем не только логические, но и арифметические, или любые другие.
Таким образом, мы видим, что, поместив описанный апплет на Web-страницу с учебными материалами, мы получили новые дополнительные дидактические возможности, которые невозможны на традиционной «бумажной» странице.
Пример 2. Изучение принципов работы ПО
Тот же самый универсальный апплет может быть применен и для других задач. Например, посмотрим, как можно объяснить простейшие механизмы обработки числовой информации. Предположим, мы хотим показать, каким образом компьютер складывает два введенных с клавиатуры числа и выводит сумму на экран, что описывается простейшей формулой £ = A + B. Данная задача отличается от предыдущей тем, что она направлена не на изучение самого учебного компьютера, а позволяет на его базе показать основные принципы функционирования программного обеспечения.
Программа для решения этой задачи на учебном компьютере «Е97» выглядит следующим образом (приводимая ниже таблица 2 будет находиться на Web-странице).
Таблица 2
Адрес Код Операция Комментарии
0000 0002 0Е6Б 0100 100 ==> БР подготовительная операция
0004 0006 9С0Б 4182 ввод ==> Ю А ==> Ю
0008 0110 Ю ==> Я0 А ==> Я0
000А 000С 9С0Б 4182 ввод ==> Ю В ==> ю
000Е 0201 Ю + Я0 ==> Ю А + В ==> Ю (Б)
0010 0012 9С0Б 4152 Ю ==> дисплей вывод значения Б
0014 0Б00 стоп окончание программы
Поясним содержащуюся в приведенной таблице информацию. В первом столбце указаны адреса, а во втором - коды команд процессора «Е97» в шестнадцатеричном виде. Это есть не что иное, как описание внутреннего содержимого памяти компьютера, где хранятся команды программы. Следующий столбец описывает действия учебного компьютера, а в последнем столбце эти действия комментируются с точки зрения содержания задачи.
Каждый код во втором столбце представляет собой команду, т.е. указание процессору, что и с какой информацией необходимо сделать, а также куда поместить результат. Команды «Е97» устроены максимально просто: каждый символ есть отдельная часть команды. Так, первая цифра характеризует модификацию (разновидность) команды, вторая
- необходимую операцию и две последние - данные для нее. Например, команда, хранящаяся по адресу 000Е, имеет код 0210, что легко расшифровывается следующим образом: 0 - нет модификаций, 2 - команда сложения, 0 и 1 - номера регистров, где находят-
ся слагаемые (по принятому правилу сумма запишется вместо Ю). Остальные команды расшифровываются ненамного сложнее (заметим, что некоторые команды «Е97», в частности, вызов подпрограммы, занимают в памяти не одно, а два машинных слова).
Важной особенностью модели является наличие особой области памяти - ПЗУ, где хранятся разработанные вместе с моделью подробные программы обмена компьютера с клавиатурой и дисплеем. В результате для реализации этих действий достаточно просто обратиться к соответствующей программе ПЗУ, как это делается по адресам 0004, 000А (подпрограмма ввода имеет адрес 4182) и 0010 (подпрограмма вывода - адрес 4152).
После таблицы с листингом и необходимых пояснений мы можем снова разместить на Web-странице апплет, передав ему в качестве параметра коды программы из табл.2. В результате ученик сможет поработать с этой программой и, как и в предыдущем случае, по заданию учителя модифицировать ее.
Отметим, что на рис.4 было как раз показано состояние окна апплета после завершения сложения при А = 2 и В = 5 (на дисплее выведен ответ 7).
Пример 3. Организация самопроверки
Использование апплета с «Е97» на учебных Web-страницах позволяет также организовать более эффективную, по сравнению с традиционным задачником, самостоятельную работу. Задания могут быть самыми разнообразными: от предложения написать и отладить на учебном компьютере конкретную программу до указания найти в готовой предложенной программе ошибку и исправить ее. Во всех случаях главное преимущество использования динамической модели будет состоять в том, что ученик немедленно увидит результаты своей работы и, следовательно, точно будет точно знать, насколько правильно он выполнил данное ему задание.
Таким образом, рассмотренные примеры показывают, что использование динамической модели компьютера позволяет поднять электронные учебные материалы на существенно более высокий уровень. В результате применения 1ауа-технологии появляются принципиально новые возможности, недоступные при представлении материала в традиционной «бумажной» форме.
Библиографический список
1. Джамса, К. Изучи сам JAVA сегодня / К. Джамса - Минск.: ООО Попурри, 1996. - 416 с.
2. Еремин, Е.А. Как работает современный компьютер / Е.А. Еремин - Пермь: Изд-во ПРИ-ПИТ, 1997. - 176 с.
3. Еремин, Е.А. Популярные лекции об устройстве компьютера / Е.А. Еремин - СПб.: BHV-Петербург, 2003. - 272 с.
4. Могилев, А.В. Информатика / А.В. Могилев, Н.И.Пак, Е.К. Хеннер - М.: Академия, 1999. -816 с.
5. Нотон, ППолный справочник по Java / П. Нотон, Г. Шилдт - Киев.: Диалектика, 1997. - 592 с.
