|
|||||||||
Автор: Илья Усов Неподвижные подобия кнопок в окне броузера- вот все, на что способен обыкновенный язык HTML. Между тем небольшой, объемом около 3 Кб, JAVA-апплет способен не только создать полноценную имитацию кнопки, но и снабдить ее забавными эффектами, например, анимацией или звуком щелчка при нажатии. Апплет, как обычно, состоит из класса INIT, ответственного за подготовку к работе, классов-обработчиков событий, возникающих при работе пользователя с мышью, и стандартного класса PAINT, ответственного за перерисовку экрана. Ниже приведен полный исходный текст апплета под названием TRIGGER:
Апплет начинается с объявления нескольких глобальных переменных. В переменной MESSAGE хранится текст, выводимый в строке состояния броузера. Значение переменной WHEREOPEN определяет, следует ли открывать еще одно окно броузера при переходе по ссылке, или новый URL следует загрузить в то же окно. Переменная AC хранит контекст апплета, необходимый для операций с броузером. Переменные BUIMAGE и BDIMAGE- это изображения, соответственно, нормального и нажатого состояния кнопки. Булевы переменные ISPRESSED и ISINSIDE, как следует из их названий, наблюдают за текущим положением кнопки- нажата она или отпущена и находится ли курсор мыши над кнопкой. Переменная ISINSIDE введена для того, чтобы наша кнопка отпускалась, когда курсор мыши "сползает" с нее, но кнопка мыши удерживается в нажатом состоянии. Первое, что делает метод INIT,- это разбор переданных ему параметров, значения которых устанавливаются в HTML-странице:
Вот текст HTML-страницы, из которой загружается наш апплет:
Далее в блоке TRY создается пара объектов URL- координаты файлов с изображениями кнопки, по которым эти файлы и загружаются. Действие метода WAITFORALL объекта TRACKER класса MEDIATRACKER заключается в ожидании окончания загрузки обоих изображений из сети, без которого рисовать что-либо на экране было бы бессмысленно. В апплете нет традиционного метода RUN, так как он не выполняет никаких специальных действий, а просто реагирует на события, возникающие при движении курсора мыши. Метод START отсутствует потому, что вся необходимая инициализация выполняется еще на этапе INIT, а метод STOP- потому что при затенении или свертывании окна броузера не происходит ничего, что требовало бы особой реакции. Методы MOUSEDOWN, MOUSEUP, MOUSEENTER и MOUSEEXIT обработки событий мыши и представляют собой "двигатель" апплета. Они следят за действиями пользователя, управляя значениями переменных ISINSIDE и ISPRESSED, при необходимости загружают новую HTML-страницу или изменяют значение строки-статуса броузера и вызывают метод PAINT для перерисовки кнопки. В версии AWT 1.1 предусмотрена более эффективная схема обработки событий мыши, а соответствующие методы класса COMPONENT, которыми мы пользуемся, объявлены устаревшими. Несмотря на то, что AWT 1.1 появился сравнительно давно, подавляющее большинство броузеров до сих пор не поддерживает эту схему, поэтому разработчики вынуждены, подстраиваясь под пользователей, писать в старом стиле, иначе апплет попросту не будет правильно работать, либо вообще не загрузится. Кнопки для ленивых Графические примитивы FILL3DRECT и DRAW3DRECT класса GRAPHICS из пакета JAVA.AWT позволяют избежать необходимости рисовать кнопки самостоятельно. Вместо этого полноценные объемные кнопки в окне броузера с легкостью создаются одной-двумя командами в исходном тексте апплета. Кроме выигрыша по времени разработки, этим достигается еще одно важное преимущество- апплет загружается значительно быстрее, так как исчезает необходимость принимать изображения кнопок по сети. Мы не будем приводить здесь полный исходный текст такого упрощенного апплета, а лишь приведем несколько полезных, на наш взгляд, соображений, которые могут пригодиться при его создании. Во-первых, принцип действия апплета остается тем же самым, из него лишь выкидываются все операторы, связанные с обработкой параметров- имен файлов и загрузкой изображений. Во-вторых, так как кнопка должна быть более- менее гибкой в настройке, в апплет можно ввести дополнительный параметр- текст, отображаемый на кнопке (LABEL).В-третьих, цвет текста можно изменять в зависимости от положения курсора мыши, а нажатие имитировать, перерисовывая трехмерный прямоугольник и меняя последний булевский параметр в вызове метода FILL3DRECT, например, вот так:
Обратите внимание на то, что текст на кнопке должен смещаться чуть-чуть вниз и вправо, чтобы больше соответствовать действительности. В нашем примере с нажатием кнопки текст сдвигается на один пиксел по обеим осям координат. Параметр-надпись LABEL необходимо автоматически центровать по обеим осям, что можно сделать следующими четырьмя операторами в начале метода PAINT:
Переменные WIDTH и HEIGHT задают ширину и высоту внутренней части 3D- прямоугольника. Поскольку 3D-прямоугольник при нажатии сдвигается, самому апплету нужно отвести область, на единицу большую в обоих направлениях. Так, например, если WIDTH = 80, а HEIGHT = 40, то в теге HTML-страницы нужно указать: WIDTH=81 HEIGHT=41
Вот, пожалуй, и все. Осталось лишь добавить, что по умолчанию FILL3DRECT при нажатии заполняется более темным вариантом основного цвета, что и производит впечатление затенения. COLOR.GRAY, например, меняется на COLOR.DARKGRAY и т. д. Если такое поведение кнопки нежелательно, вместо FILL3DRECT лучше применить DRAW3DRECT, который создаст 3D-рамку, а внутреннюю часть прямоугольника заполнить любым желаемым цветом. Кроме того, лучше всего сделать так, чтобы цвет фона апплета совпадал с цветом HTML-страницы, на которой он находится, иначе кнопка будет "шита белыми нитками". Немного о русском Для того чтобы сделать только что рассмотренный апплет более гибким, в него неплохо было бы ввести параметр-надпись. При этом желательно, чтобы надпись можно было делать и на русском языке. Вообще, тема поддержки кодировок кириллицы в JAVA и броузерах требует отдельного и подробного рассмотрения, но сейчас мы ограничимся лишь несколькими советами по этому поводу. Во-первых, броузер должен знать, в какой кодировке принят параметр апплета, вставленный в HTML-страницу, до того, как запустить апплет, поэтому убедитесь, что WWW-сервер правильно передает информацию о кодировке. Если MICROSOFT Internet EXPLORER "съест" и правильно покажет страницу, созданную в CP-1251 и без дополнительной информации (это относится и к утилите APPLETVIEWER), то с NETSCAPE COMMUNICATOR дела обстоят не так просто. Как ни переключай DOCUMENT ENCODING, кодировку текста, выводимого апплетом, в отличие от кодировки текста HTML, в нем уже никак не изменить. Один из способов включить в HTML-страницу информацию о кодировке- вставить в ее заголовок мета-тег вида <META HTTP-EQUIV=''CONTENT-TYPE'' CONTENT=''TEXT/HTML; CHARSET=WINDOWS-1251''>
Именно так автором было получено изображение работающего "ленивого" апплета в NETSCAPE COMMUNICATOR. В противном случае, если COMMUNICATOR не знает явной кодировки HTML-страницы, не помогут даже установленные в WINDOWS 95 кириллические шрифты. Последние штрихи У нас остается последний, еще не решенный вопрос- как с минимальными усилиями создать кнопку так, чтобы она выглядела достоверно и не производила впечатления кустарной и "недоделанной"? Конечно, опытный дизайнер, знающий все правила наложения теней и подъема граней, может сконструировать кнопку в нажатом и нормальном состояниях вручную, однако такой подход не годится, если вам необходим "серийный" набор кнопок, либо просто нет времени на обработку изображения или не хватает опыта. Поскольку графические операции, необходимые для создания полноценной кнопки, вполне поддаются формализации, для этого были созданы автоматические инструменты, где в качестве основы кнопки берется любой файл форматов GIF или JPEG, на который накладывается, например, специальный фильтр к ADOBE PHOTOSHOP (http://www.adobe.com/) под названием beveler (от англ. "bevel", фаска). Аналогичный эффект под названием "buttonize" входит в состав четвертой версии paintshop pro (http://www.jasc.com/). А компания sousage software (http://www.sausage.com/) даже выпустила специальную программу под названием clikette (о ней писали в апрельском номере "mира Internet"), специально предназначенную для создания анимированных кнопок в html-страницах. В процессе работы она предложит вам выбрать произвольный gif- или jpeg-файл, из которого потом получатся оба варианта кнопки. Со второй задачей, которую решает коммерческая версия clikette- написанием апплета для манипуляций с кнопкой,- мы уже справились в этой статье. Усовершенствования Очевидно, что в апплет легко добавить возможность проигрывания звукового файла при нажатии на кнопку, что можно сделать при помощи стандартных средств API (метод GETAUDIOCLIP класса APPLET и метод PLAY интерфейса AUDIOCLIP). Кроме того, хорошо было бы избавиться от необходимости вручную вычислять размеры кнопок - средствами API можно воспользоваться и для расчета параметров загруженного графического файла. Это облегчило бы создание HTML-файла для запуска апплета, так как в нашем примере мы были вынуждены делать так, чтобы размеры апплета в точности совпадали с размерами самой кнопки. При помощи методов пакета JAVA.AWT.IMAGE легко модифицируется набор цветов, используемых в изображении кнопки. Создав набор цветных фильтров и накладывая их на изображение кнопки по очереди, в зависимости от текущего положения курсора, можно добиться любопытных, ненавязчиво оживляющих HTML-страницу эффектов. Здесь можно дать лишь один совет: чрезмерно увлекаться оформлением не стоит, не отвлекайте читателя от материала, ради которого, собственно говоря, он и пришел на сайт. Автор: Илья Усов
|
|||||||||
![]() |
![]() |