Настройка кнопок

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

1. Текст вопроса: Где Алиса впервые встретила Чеширского кота?
2. Кнопки выбора: Mad-Tea Party, Duchess's House, Wood, Croquet-Ground. Если пользователь выбрал неправильный ответ - кнопка с ним исчезает, если выбрал правильный - исчезают сразу все кнопки с неправильными ответами.
3. Всплывающие сообщения, сообщающие о том, был ли ответ правильным или нет.

Как создать кнопку

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

Вам нужно добавить четыре кнопки - по количеству возможных ответов.

Настройка внешнего вида кнопки

Нажмите один раз на первую кнопку - откроется окно настроек. Вы окажетесь на вкладке"Look&Feel", которая отвечает за внешний вид кнопок.

1.Отредактируйте следующие поля:

• Label: текст кнопки - введите первый ответ: "Mad-Tea Party";
• Иконка: значок кнопки - нажмите на "Выбрать значок" и выберите тот, который вам нравится (сейчас их более 2500);
  
• Размер: размер кнопки - установите значение "Large", чтобы сделать кнопку большой;
  
• Name (Имя): Это имя, под которым кнопку "видят" другие элементы вашего приложения; для каждой кнопки необходимо уникальное имя - назовите кнопку "btn-mad_tea".

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

2. Когда вы заполните все поля - нажмите"Сохранить".

1. Настройте остальные кнопки по аналогии с первой, используя имена: btn-duchess_h, btn-wood, btn-croquet_g.
2. Нажмите кнопку "Сохранить изменения", чтобы сохранить изменения в приложении - в противном случае кнопки исчезнут, как только вы обновите страницу или закроете редактор.

Настройка триггеров и событий

Теперь необходимо настроить действия кнопок. Начнем с той, которая имеет правильный ответ -"Дом герцогини". Ваша задача - "объяснить" редактору Web Apps:

• что такое триггер кнопки - то есть, на что именно она должна реагировать: на нажатие;
• какое событие происходит в этом случае: кнопки исчезают;
• где происходит это событие, какие элементы изменяются: другие кнопки.

Вернитесь к настройкам кнопки "Дом герцогини" и перейдите на вкладку Триггеры. Отобразятся все триггеры, которые были добавлены для нее:

1. Теперь есть только один -"OnClick". Он добавляется автоматически и означает, что кнопка будет действовать, когда вы нажмете на нее (именно это вам и нужно).
2. Помимо"OnClick", для кнопки возможны и другие триггеры. Полный список с описанием приведен в документации по платформе.

Теперь необходимо указать информацию о событии (у вас их будет три - по одному для каждой кнопки). Нажмите на"+" рядом с"OnClick". Откроется окно настроек события.

В поле"Целевой компонент" нужно указать, где произойдет событие, в поле "Действие" - какого рода это будет событие.

Скрыть все неправильные ответы

Добавьте событие, которое будет скрывать кнопку Mad-Tea Party:

1. Щелкните по полю"Целевой компонент" и найдите его по уникальному имени btn-mad_tea. В поле "Действие" выберите соответствующее событие, в данном случае - "Скрыть кнопку".
2. Нажмите кнопку "Сохранить".

Аналогичным образом настройте скрытие остальных кнопок.

1. Вот как должен выглядеть список триггеров для кнопки "Домгерцогини", когда вы закончите.
2. Нажмите "Сохранить", чтобы сохранить изменения.

Теперь вам нужно убедиться, что все работает.

1. Сохраните свои изменения.
2. Нажмите кнопку для публикации приложения (размещения его в Интернете), выберите "Разработка".
3. Нажмите на иконку "Перейти к приложению" - она откроется в новой вкладке.

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

Скрывайте неправильные ответы при нажатии

Теперь давайте сделаем так, чтобы кнопка с неправильным ответом"Mad-Tea Party" исчезала, когда пользователь нажимает на нее. В данном случае и триггер (нажатие), и событие (исчезновение) принадлежат одной и той же кнопке - вам нужно работать только с ней.
Откройте настройки кнопки, перейдите на вкладку "Триггеры", добавьте новое событие к триггеру "onClick". В поле "Target component" выберите "This component (self)", чтобы указать, что кнопка активирует событие для себя. Значение поля"Action" такое же, как и в предыдущем примере -"Hide Button". Сохраните все изменения и опубликуйте приложение, переключитесь на вкладку приложения и обновите его. Проверьте, что все работает так, как задумано:

Теперь настройте"Дерево" и"Площадка для крокета". Сохраните, опубликуйте и проверьте еще раз.

Типы кнопок

Отлично, ответы работают. Пришло время добавить вопрос. Конечно, в Appmaster.io для этого есть специальные элементы, но вы же помните нашу задачу - кнопки и ничего больше. Поэтому давайте добавим еще одну. На этот раз - не на основное полотно, а в верхнюю часть страницы: Чтобы было веселее, заполните вопрос, как на этом скриншоте:

Чтобы было веселее, заполните вопрос, как на этом скриншоте:

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

У нас получилось вот так, но вы можете выбрать свой вариант, цветовая схема кнопки не влияет на ее работу:

Теперь перейдем к последней задаче - настройке сообщения для пользователя.

Более сложная задача

Вывести сообщение на экран можно разными способами. Мы выбрали один из самых необычных:

Во-первых, сделаем так, чтобы кнопки, содержащие вопрос, автоматически отключались, когда пользователь даст правильный ответ. Они станут серыми и перестанут реагировать на нажатия. Для этого используем функцию Enable (Disable), которую мы еще не рассматривали, и уже знакомый нам"onClick". - Затем рассмотрим новый триггер - onStateChange, который срабатывает при изменении состояния кнопки. Назначим этот триггер на кнопку "?" - и на нее будет выводиться сообщение.

Деактивация кнопок

Включить или отключить кнопку можно вручную в ее настройках, переключив селектор поля"Включить":

Чтобы настроить автоматическое включение, откройте настройки кнопки "Домгерцогини" и добавьте триггер "onClick". В поле "Целевой компонент" выберите одну из кнопок с вопросом, в полях "Действие" -"Отключить кнопку". Повторите для всех кнопок, содержащих вопрос. Все должно выглядеть следующим образом:

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

Теперь привяжем начало сообщения к кнопке "?" (мы назвали ее "btn_qqq"). Добавим к ней триггер"onStateChange". Он активируется при изменении состояния кнопки - например, при ее выключении.

"Target component" поле, выберите "Application" (сообщение будет всплывать в окне приложения), в поле "Action" - "Show UI Message" (показать сообщение пользователю).

1. В поле"Стиль сообщения" выберите тот, который лучше всего подходит для вашей ситуации. В нашем случае это"Sucess" - сообщение об успешном завершении.
2. Заполните поля"Заголовок" и"Содержание" - сообщите пользователю, что ответ правильный, или просто напишите что-нибудь приятное.

Сохраните, опубликуйте и протестируйте.

Результат

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

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

Мы уверены, что эта инструкция помогла вам лучше познакомиться с Appmaster.io. Но если она оказалась непонятной (а может, наоборот, слишком простой), напишите в телеграм-канал нашей техподдержки о нужных вам инструкциях. Мы обязательно их напишем!