Теперь давайте создадим новую программу, которая будет шаблоном для всех приложений, которые мы «установим» в наш «телефон».

У нас она выглядит вот так:

Создавать красивые интерфейсы непросто. А еще сложнее потом вымерять пиксели нарисованных кнопочек, чтобы точно прописать инструкции кликов по ним. У нас ведь современный сенсорный интерфейс, и управляться он должен соответственно.

Однако можно не рисовать все руками в Paint’e или любом другом графическом редакторе. Нарисовать кнопки и прочие элементы управления можно прямо в Small Basic.

Давайте создадим интерфейс калькулятора.

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

У нас будет две группы кнопок: кнопки действий и цифровые. Так как кнопки одного типа должны быть одинакового размера, проще всего нарисовать их при помощи цикла.

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

На кнопках вы видите подписи. Давайте посмотрим, как их создать.

Вывести текст в графическое окно можно при помощи метода DrawText. Инструкция вызова метода DrawText в общем виде выглядит так:

GraphicsWindow.DrawText(x, y, Текст)

Параметры x и y задают координаты левого верхнего угла области вывода текста, параметр Текст — текст, который надо вывести.

Шрифт, который метод DrawText использует для отображения текста, определяет свойство FontName, размер символов — свойство FontSize, цвет символов — свойство BrushColor. По умолчанию текст выводится полужирным шрифтом. Если надо, чтобы использовался обычный шрифт, свойству FontBold надо присвоить значение False. Чтобы текст был выведен курсивом, свойству FontItalic следует присвоить значение True.

Вот как подписать кнопки нашего калькулятора на языке Small Basic.

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

Клавиши «Нуль», «Равно» и «Выход» подпишем вне цикла.

Разделить рабочую область на кнопки при помощи цикла и подписать их оказалось достаточно просто. Но иногда нужно отобразить поверх уже загруженной в графическое окно картинки какое-нибудь другое изображение.

Это делается той же командой GraphicsWindow.DrawImage(img, x, y).

А если вы используете изображение в формате PNG, сохраненное с прозрачным цветом, то и в Small Basic выбранная вами часть картинки будет прозрачной.



Давайте сделаем шаблон для программы-«звонилки».

Нам нужно отобразить изображение вызываемого абонента, обвести его рамкой, подписать фамилию и добавить кнопку «Отбой».

Картинку и рамку рисовать мы уже умеем, а вот кнопку давайте создадим более интересным образом. В Small Basic встроена так называемая «Черепашья графика». В этом режиме рисунки выполняются черепашкой, которая может передвигаться по графическому окну, оставляя или не оставляя за собой след, поворачиваться, и двигаться согласно алгоритму, заложенному программистом.

Черепашка слушается определенных команд:

Команда Действие

Turtle.Show() Показать, сделать видимой, черепашку

Turtle.Move(d) Перемещение черепашки вперед на заданное параметром d расстояние

Turtle.MoveTo(x,y) Перемещение черепашки в точку с указанными координатами

Turtle.TurnLeft() Поворот налево на 90°

Turtle.TurnRight() Поворот направо на 90°

Turtle.Turn(?) Поворот налево (против часовой стрелки) на заданный параметром ? угол

Turtle.PenDown() Опустить карандаш. После выполнения команды при движении черепашка оставляет след. Цвет следа определяет значение свойства PenColor

Turtle.PenUp() Поднять карандаш. После выполнения команды при движении черепашка след не оставляет

Turtle.Hide() Скрыть, сделать невидимой, черепашку

Turtle.Angle = ? Задает направление движения — угол "оси" черепашки относительно оси Oy. Например: 0 — вверх по вертикали; 90 — вправо по горизонтали; –90 — влево по горизонтали; 180 — вниз

Turtle.Speed = s Задает скорость движения черепашки. Значение s должно быть в диапазоне от 1 до 10

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

Вот, что получится в итоге.