J2me 101, часть 2: введение в низкоуровневый пользовательский интерфейс midp

Класс холст

Класс холст обеспечивает основу для создания заказного (или низкоуровневого) пользовательского интерфейса. Большинство методов в этом классе используются для управления событиями, рисования и введения текстов с помощью дисплея устройства. В этом разделе мы рассмотрим следующие темы:

• Система координат
• Создание объекта в классе холст
• Рисование на холсте
• Управление командами
• Коды клавиш
• Управление игрой
• Управление указателями

Мы создадим два MIDlet'а, которые продемонстрируют возможности класса холст. Первая - управление клавиатурой - позволяет выделять, распознавать и производить операции, связанные с играми с помощью клавиатуры. Вторая - записная книжка (ScratchPad), MIDlet демонстрирует, как управлять указателями для создания простой программы линейного рисования.

Первое, с чем мы должны познакомиться, - дисплей устройства. Система координат для класса холст расположена в верхнем левом углу дисплея. Значения x возрастают слева направо, а значения y - сверху вниз. При рисовании ширина и высота графопостроителя составляет один пиксель. Система координат проиллюстрирована на рисунке 1.

Рисунок 1. Система координат

Далее следуют методы определения ширины и высоты холста:

int getWidth() Canvas width int getHeight () Canvas height

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

>

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

class TestCanvas extends Canvas implements CommandListener { private Command cmdExit; ... display = Display.getDisplay(this); cmdExit = new Command("Exit", Command.EXIT, 1); addCommand(cmdExit); setCommandListener(this); ... protected void paint(Graphics g) { // Рисовать на холсте ... } } TestCanvas canvas = new TestCanvas(this);

>

Метод paint() в классе холст позволяет рисовать фигуры, изображения, писать тексты и, другими словами, создавать то, что затем может быть отображено на дисплее устройства. Листинг ниже показывает, как нужно очищать дисплей устройства для отображения белого экрана:

protected void paint(Graphics g) { // Установить белый фон g.setColor(255, 255, 255); // Заполнить весь холст g.fillRect(0, 0, getWidth(), getHeight()); }

Как видите, мы используем ссылку к объекту графики внутри метода paint() для создания реального рисунка. Подробнее мы рассмотрим это в методах графика в следующих разделах.

>

Также как и в компонентах формы, список и текстовое окошко, представленных в Части 1 (см. Ресурсы) этого руководства, в холсте можно использовать управление командами. Команды холста используются также как и при любых других компонентах:

1. Создать экземпляр командного объекта.
   
   
2. Добавить команду к объекту дисплея (холст, форма, список или текстовое окошко).
   
   
3. Создать приемник команды, чтобы зафиксировать событие.
   
   
4. Написать метод commandAction(), чтобы обработать событие.

>

Следующий листинг показывает, как класс TestCanvas может реализовать CommandListener:

class TestCanvas extends Canvas implements CommandListener { private Command cmdExit; ... display = Display.getDisplay(this); cmdExit = new Command("Exit", Command.EXIT, 1); addCommand(cmdExit); setCommandListener(this); ... protected void paint(Graphics g) { // Рисовать на холсте ... } public void commandAction(Command c, Displayable d) { if (c == cmdExit) ... } }

>

Кроме программируемых клавиш для обработки команд объект холст имеет 12 кодов клавиш. Коды, гарантированно доступные любому MIDP-устройству, показаны ниже:

KEY_NUM0 KEY_NUM1 KEY_NUM2 KEY_NUM3 KEY_NUM4 KEY_NUM5 KEY_NUM6 KEY_NUM7 KEY_NUM8 KEY_NUM9 KEY_STAR KEY_POUND

Далее - пять методов для работы с кодами клавиш:

void keyPressed(int keyCode) void keyReleased(int keyCode) void keyRepeated(int keyCode) boolean hasRepeatEvents() String getKeyName(int keyCode)

>

MIDP часто используется для создания игровых приложений для платформы Java. Следующие константы определены для управления игровыми событиями в устройстве:

UP DOWN LEFT RIGHT FIRE GAME_A GAME_B GAME_C GAME_D

Обычно эти значения закреплены за управляющими стрелками устройства, но не все мобильные устройства ими оснащены. Если в устройстве недостает управляющих стрелок, то управлять игрой можно с помощью других клавиш (например, LEFT (влево) может управляться клавишей 2, RIGHT (вправо) - клавишей 5 и т.д.).

Рисунок 2 показывает, как управляющие кнопки при игре могут располагаться на мобильном устройстве.

Рисунок 2. Распределение управляющих кнопок на мобильном устройстве

>

Пример следующего кода демонстрирует способ определения различных действий при игре и вызова необходимого метода, основанного на выбранном действии.

protected void keyPressed(int keyCode) { switch (getGameAction(keyCode)) { case Canvas.FIRE: shoot(); break; case Canvas.RIGHT: goRight(); break; ... } }

Нужна еще одна опция для создания ссылки для каждого игрового действия во время инициализации при нахождении необходимой клавиши во время выполнения, как показано ниже:

// Инициализация keyFire = getKeyCode(FIRE); keyRight = getKeyCode(RIGHT); keyLeft = getKeyCode(LEFT); ... // Выполнение protected void keyPressed(int keyCode) { if (keyCode == keyFire) shoot(); else if (keyCode == keyRight) goRight() ... }

>

МЫ создадим простой MIDlet, чтобы продемонстрировать некоторые функции класса холст, которые мы обсудили. MIDlet управления клавишами (KeyMapping) использует метод getKeyName() для отображения кода клавиши или игрового действия, которое было выбрано устройством.

Стоит восстановить в памяти процесс создания MIDlet'а из Части 1 руководства, мы просмотрим его дополнительно еще раз:

1. Создать проект.
2. Написать исходный код.
3. Скомпилировать и проверить код.
4. Запустить MIDlet.

А теперь давайте создадим KeyMapping MIDlet.

>

Мы начнем с создания нового проекта в беспроводном пакете разработчика (WTK) так, как показано ниже:

1. Выбрать New Project (новый проект).
2. Ввести имя проекта и имя класса MIDlet'а.
3. Выбрать Create Project (создать проект).

Рисунок 3 показывает последовательность создания проекта KeyMapping в WTK.

Рисунок 3. Создание проекта KeyMapping в WTK

>

Изучите код KeyMapping.java, показанный ниже, а затем вставьте его в текстовый редактор.

/*-------------------------------------------------- * KeyMapping.java *-------------------------------------------------*/ import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class KeyMapping extends MIDlet { private Display display; // Дисплей private KeyCodeCanvas canvas; // Холст public KeyMapping() { display = Display.getDisplay(this); canvas = new KeyCodeCanvas(this); } protected void startApp() { display.setCurrent( canvas ); } protected void pauseApp() { } protected void destroyApp( boolean unconditional ) { } public void exitMIDlet() { destroyApp(true); notifyDestroyed(); } } /*-------------------------------------------------- * Class KeyCodeCanvas *-------------------------------------------------*/ class KeyCodeCanvas extends Canvas implements CommandListener { private Command cmExit; // Выход из midlet private String keyText = null; // Текст для кода клавиш private KeyCodes midlet; /*-------------------------------------------------- * Constructor *-------------------------------------------------*/ public KeyCodeCanvas(KeyCodes midlet) { this.midlet = midlet; // Создание команды выхода и приемника для событий cmExit = new Command("Exit", Command.EXIT, 1); addCommand(cmExit); setCommandListener(this); } /*-------------------------------------------------- * Paint the text representing the key code *-------------------------------------------------*/ protected void paint(Graphics g) { // Очистить фон (поменять на белый) g.setColor(255, 255, 255); g.fillRect(0, 0, getWidth(), getHeight()); // Выбрать цвет и нарисовать текст if (keyText != null) { // Рисовать черным карандашом g.setColor(0, 0, 0); // Выровнять текст по центру g.drawString(keyText, getWidth()/2, getHeight()/2, Graphics.TOP | Graphics.HCENTER); } } /*-------------------------------------------------- * Command event handling *-------------------------------------------------*/ public void commandAction(Command c, Displayable d) { if (c == cmExit) midlet.exitMIDlet(); } /*-------------------------------------------------- * Key code event handling *-------------------------------------------------*/ protected void keyPressed(int keyCode) { keyText = getKeyName(keyCode); repaint(); } }

>

Два раздела кода KeyMapping.java заслуживают особого внимания. Во-первых, метод keyPressed() сохраняет имя клавиши, запустившей событие и повлекшей преобразование цвета дисплея, как показано ниже:

protected void keyPressed(int keyCode) { keyText = getKeyName(keyCode); repaint(); }

Во-вторых, во время обработки запроса преобразования цвета, воспроизводится метод paint(). В этот момент мы очищаем дисплей, выбираем черный цвет шрифта для рисования на дисплее и воссоздаем уже готовую текстовую строку в центре дисплея; см. ниже:

protected void paint(Graphics g) { // Очистить фон (поменять на белый) g.setColor(255, 255, 255); g.fillRect(0, 0, getWidth(), getHeight()); // Установить цвет и нарисовать текстt if (keyText != null) { // Рисовать черным карандашом g.setColor(0, 0, 0); // Выровнять текст по центру g.drawString(keyText, getWidth()/2, getHeight()/2, Graphics.TOP | Graphics.HCENTER); } }

В следующем разделе мы просмотрим специфику работы с объектами графики , включающую и методы, рассмотренные нами в предыдущих примерах.

>

Следующий шаг - это сохранение, компилирование и подтверждение кода. Вы вспомните об этом при создании нового проекта, когда WTK создает необходимую структуру каталога для вас. В этом примере WTK создал каталог C:\WTK20\apps\KeyMapping и все необходимые подкаталоги. Сохраните свой исходный код Java как KeyMapping.java в каталоге src, как показано на рисунке 4. (Помните, что расширение запоминающего устройства и WTK будет варьироваться в зависимости оттого, где вы установили пакет разработчика).

Рисунок 4. Сохранить код KeyMapping

Далее выберите Build (Создать) для компилирования, подтверждения и завершения MIDle'а, как показано на рисунке 5.

Рисунок 5. Создание проекта KeyMapping

И в конце концов, выберите Run (Запустить) для запуска менеджера приложения.

>

Чтобы запустить MIDlet KeyMapping MIDlet, нужно выбрать кнопку Launch (Пуск), как показано на рисунке 6.

Для каждого кода клавиши и игрового действия вы увидите соответствующее имя в центре дисплея, как показано на рисунке 7.

Рисунок 7. Выведение на дисплей MIDlet'а KeyMapping

>

Последняя тема в этом разделе посвещена тому, как управлять указателем на холсте. Такое управление облегчает взаимодействие с устройствами вроде сенсорной подушечки или мыши. Мы используем следующие методы:

boolean hasPointerEvents() boolean hasPointerMotionEvents() void pointerPressed(int x, int y) void pointerReleased(int x, int y) void pointerDragged(int x, int y)

Большинство методов должны быть самообъяснимыми. Метод hasPointerMotionEvents() возвращает указатель булева значения, независимо оттого, поддерживает устройство функцию "перетаскивания" ("click and drag") или нет.

>

Мы напишем короткий MIDlet, чтобы познакомить вас с устройствами ввода координат. ScratchPad MIDlet - очень простая программа для рисования. Эта программа распознает, когда нажимают на кнопку указателя (мыши). Когда водят указателем по дисплею, воспроизводится метод paint() (на дисплее остается линия, проводимая от предыдущего местоположения указатела к последующему). Для того чтобы очистить дисплей используется программная кнопка. ScratchPad MIDlet показан на рисунке 8.

Рисунок 8. ScratchPad MIDlet

>

Не все устройства поддерживают операции, связанные с указателем. Например, обычный КПК использует стилус для выделения и "переноса" объекта на дисплее устройства. Мобильный телефон в свою очередь не имеет устройства ввода координат. Для того чтобы WTK распознавал выделение (с помощью мыши и эмулятора устройства), нужно использовать дополнительные конфигурации. Нужно установить файл со свойствами для того типа эмулятора, который вы используете в WTK. К примеру, при использовании эмулятора по умолчанию для цветного телефона, нужно найти файл: DefaultColorPhone.properties. Изменить значение атрибута touch_screen (сенсорного экрана) на true, как показано ниже:

После такого изменения мышь будет действовать как стилус в WTK, позволит вам выделять и "переносить" на экране.

Все файлы со свойствами находятся вдиректории x:\WTK20\wtklib\devices.

>

Вот последовательность создания ScratchPad MIDlet'а:

1. Создать новый проект с именем ScratchPad.
2. Скопировать и вставить исходный код ScratchPad в текстовый редактор.
3. Сохранить каждый исходный файл в \apps\ScratchPad\src вашей WTK установки.
4. создать и запустить проект.

>

Ниже показан исходный код ScratchPad MIDlet-а. После завершения всех этапов самостоятельного создания и запуска MIDlet'а, вы сможете просмотреть выведенную на дисплей информацию ScratchPad с помощью эмулятора WTK-установки.

/*-------------------------------------------------- * ScratchPad.java *-------------------------------------------------*/ import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class ScratchPad extends MIDlet { private Display display; // Объект дисплея private ScratchPadCanvas canvas; // Холст public ScratchPad() { display = Display.getDisplay(this); canvas = new ScratchPadCanvas(this); } protected void startApp() { display.setCurrent( canvas ); } protected void pauseApp() { } protected void destroyApp( boolean unconditional ) { } public void exitMIDlet() { destroyApp(true); notifyDestroyed(); } } /*-------------------------------------------------- * Class ScratchPadCanvas * * Pointer event handling *-------------------------------------------------*/ class ScratchPadCanvas extends Canvas implements CommandListener { private Command cmExit; // Выход из midlet private Command cmClear; // Очистить экран private int startx = 0, // Место, где был нажат указатель starty = 0, currentx = 0, // Текущее место currenty = 0; private ScratchPad midlet; private boolean clearDisplay = true; /*-------------------------------------------------- * Constructor *-------------------------------------------------*/ public ScratchPadCanvas(ScratchPad midlet) { this.midlet = midlet; // Создание команды выхода и приемника для событий cmExit = new Command("Exit", Command.EXIT, 1); cmClear = new Command("Clear", Command.SCREEN, 1); addCommand(cmExit); addCommand(cmClear); setCommandListener(this); } /*-------------------------------------------------- * Draw line based on start and ending points *-------------------------------------------------*/ protected void paint(Graphics g) { // Очистить фон (поменять на белый) if (clearDisplay) { g.setColor(255, 255, 255); g.fillRect(0, 0, getWidth(), getHeight()); clearDisplay = false; startx = currentx = starty = currenty = 0; return; } // Рисовать черным карандашом g.setColor(0, 0, 0); // Нарисовать линию g.drawLine(startx, starty, currentx, currenty); //Новая стартовая точка в текущей позиции startx = currentx; starty = currenty; } /*-------------------------------------------------- * Command event handling *-------------------------------------------------*/ public void commandAction(Command c, Displayable d) { if (c == cmExit) midlet.exitMIDlet(); else if (c == cmClear) { clearDisplay = true; repaint(); } } /*-------------------------------------------------- * Pointer pressed *-------------------------------------------------*/ protected void pointerPressed(int x, int y) { startx = x; starty = y; } /*-------------------------------------------------- * Pointer moved *-------------------------------------------------*/ protected void pointerDragged(int x, int y) { currentx = x; currenty = y; repaint(); } }

>

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

SITE_ID=40

Zone=Технология Java

ArticleID=172917

TutorialTitle=J2ME 101, Часть 2: Введение в низкоуровневый пользовательский интерфейс MIDP

publish-date=12172003