2. Создание проекта

Внимание! Материал обновляется, предыдущую версию можно найти здесь: http://geektimes.ru/post/107308/.

Хотелось бы иметь приложение для редактирования web документов в концепции WYSIWYG, что-то на подобии Mozilla Thimble, но найти такое в Google Play не удалось.

Так как в ai2 реализована работа с текстовыми файлами, возникло желание написать такое приложение самому.

Схема размещения компонентов приложения

Mozilla Thimble вылядит так:

То есть, один из вариантов размещения компонентов такой:

Здесь "Путь до файла" и "HTML код" - текстовые поля для ввода пути до редактируемого файла и редактирования кода.

Кнопка "Открыть" открывает файл по введённому пути, "Сохранить&обновить" - сохраняет изменения в файл и отправляет его в компонент "Браузер".

Текстовые метки "Статус бар 1" и "Статус бар 2" понадобятся для отображения различной информации.

Создание проекта в AppInventor (ai2)

Переходим на сайт http://appinventor.mit.edu/, жмём большую кнопку  Create!  в правом верхнем углу и логинимся с помощью учётной записи Гугл:

Далее нужно разрешить доступ App Inventor к аккаунту.

После всех процедур появится окно приветствия с описанием текущей версии, в котором жмём Continue.

После этого появится ещё одно окошко, в котором жать нечего, поэтому ждём мимо него.

Система сразу предложит создать новый проект, что и сделаем: вводим название (без пробелов, латиницей и цифрами) и жмём OK.

Общие замечания по работе

Открывшееся после ввода названия проекта окно содержит несколько элементов:

• модель экрана телефона с открытой программой (Viewer, в центре левее),

• структурированный список доступных компонентов (Palette, колонка слева),

• список используемых на данный момент компонентов (Components, по центру справа),

• список загруженных медиа-файлов - картинки, звуки (Media, под списком компонентов),

• свойства выбранного компонента (колонка справа).

В только что созданном проекте используется только один компонент Screen.

Работа строится так:

• 1. настраиваются свойства первого компонента - начального экрана программы Screen1 (надпись в заголовке, ориентация экрана, название приложения, версию и т.д.),

  2. нужный компонент перемещается на экран программы - хватается мышью, перемещается и отпускается в нужном месте на экране создаваемой программы (drag'n'drop),

  3. настраиваются его начальные свойства (в колонке справа),

  4. когда всё готово переходим к программированию работы каждого компонента нажав кнопку  Blocks .

Обратно к дизайну всегда можно вернуться нажав  Designer .

Из текущего проекта можно выйти в любой момент нажав кнопку "My projects".

Далее: Размещение компонентов программы