DroidScript
DroidScript
учимся и разрабатываем

Первое приложение в Sketchware

12.07.2018

Откройте Sketchware. Если при запуске появилось меню с пошаговым введением GETTING STARTED, закройте его. После запуска открывается вкладка MY PROJECTS, в нижней части которой находится плавающая кнопка "+". Нажмите её для создания нового проекта.

Начальный экран

На появившейся панели нажмите кнопку New Project. Откроется окно настроек, где можно ограничиться вводом названия проекта, например, Study. После сохранения настроек откроется вкладка редактора вида VIEW.

Разместим на рабочем поле текстовую область TextView, поле ввода EditText и кнопку Button. Для этого сначала подумаем, как они будут располагаться на экране. Пусть текстовая область располагается в самом верху, а поле ввода и кнопка под ней и рядом друг с другом. Значит, на рабочее поле нужно добавить вертикальный компоновщик Linear(V), в нём расположить текстовой элемент, а под ним - горизонтальный компоновщик Linear(H), в который добавить поле ввода и кнопку.

  1. Добавьте на рабочее поле Linear(V). После добавления он останется выделенным, а в нижней части окна появится панель с кнопкой PROPERTIES. Нажмите её для перехода к настройкам свойств кнопки и в рткрывшемся списке установите свойство layout_width (ширина компоновщика) в значение match_parent (по области родителя). После сохранения изменений вернитесь в редактор вида - область компоновщика займёт всю доступную область родителя.
  2. Добавьте на компоновщик TextView и Linear(H) под ним.
  3. Добавьте в Linear(H) EditText и Button.
  4. Выделите EditText, свойству weight (вес) задайте 1.

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

Главный вид

Для запуска и просмотра примера нажмите кнопку RUN, произведите его установку и откройте его.

Вид приложения готов и можно приступить к созданию логики - отображения в области текста строки из поля ввода при нажатии на кнопку.

Перейдём на вкладку EVENT. В раздел View выберите кнопку. Мы собираемся выполнить действия при нажатии на кнопку, значит, требуется событие onClick для кнопки. Нужные события добавляются из списка, который можно открыть, нажав на плавающую кнопку "+" в нижней экрана. При большом количестве элементов нужно внимательно следить за тем, чтобы добавить нужное событие для нужного элемента. Для этого присваивайте осмысленные имена элементам, редактируя их идентификатор ID в свойствах. Для быстрой идентификации элементов в их именах можно использовать префиксы, например: btnOpen - кнопка, txeFind - поле ввода, lstNames - список и т.п.

Список событий

После добавления события нажмите на нём для перехода в редактор блоков. В поле редактора уже находится блок When button5 clicked (когда нажата кнопка) и нам осталось присоединить к нему блоки нужных действий.

Выберите категорию View (видимые элементы) и найдите блок setText (установить текст). Прикрепите его к блоку When button5 clicked и из выпадающего списка этого блока выберите элемент, текст которого нужно изменить (textview2 в моём случае). В прямоугольное окно этого блока добавьте блок getText (получить текст), также выбрав в нём нужный элемент (edittext3 в моём случае).

Редактор блоков

Теперь можно вернуться на предыдущую страницу EVENT, запустить проект и проверить, отображает ли область текста строку из поля ввода при нажатии на кнопку.

Как видно, в самом простом случае работа над проектом заключается в создании его интерфейса и составления логики работы путём группировки блоков. Свойства элементов сгруппированы по категориям и вам нужно вначале научиться быстро её определять. Например, есть свойства, отвечающие за:

  • размеры элемента
  • внешнее оформление
  • внешние и внутренние отступы
  • внешние и внутренние выравнивания
  • оформления текста и др.

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

© 2016-2024 
actech