Редактор веб-приложений: Создание кнопок
Кнопка относится к самым простым элементам редактора Web Apps, но в интерфейсе готового приложения играет одну из главных ролей. Более того, сегодня мы предлагаем вам сделать приложение, которое будет состоять только из кнопок. Странное задание? Несомненно. Но если вы его выполните — не только узнаете, как настраивать кнопки, но и разберетесь в основах работы с редактором и начнете лучше понимать логику всей платформы.
Создадим небольшой тест по книге «Приключения Алисы в Стране Чудес». Узнаем, помнят ли пользователи, где Алиса впервые встретилась с Чеширским Котом.
В нашем приложении будут:
- Текст вопроса: Where did Alice first meet the Cheshire Cat?
- Кнопки с вариантами ответов: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground. Если пользователь выбрал неправильный ответ — кнопка с ним исчезает, если выбрал правильный — исчезают сразу все кнопки с неправильными ответами.
- Всплывающие сообщения, которые сообщают, верный был ответ или нет.
Кстати, а вы вспомнили, какой вариант — верный?
Как создать кнопку
Перетащите элемент «Button» с помощью указателя мыши (кликнув и зажав левую клавишу) в ту область, где хотите разместить кнопку.
Вам нужно добавить четыре кнопки — по количеству возможных вариантов ответа.
Настройка внешнего вида кнопки
Кликните по первой кнопке один раз —откроется окно настроек. Вы окажетесь на вкладке «Look&Feel», которая отвечает за внешний вид кнопок.#nbsp;#nbsp;
1.Отредактируйте следующие поля:
- Label: надпись на кнопке — тут введите первый вариант ответа: «Mad-Tea Party»;
- Icon: значок кнопки — кликните по «Pick icon» и выберите понравившийся (сейчас их более 2500, на любой вкус);
- Size: размер кнопки — установите значение «Large», чтобы сделать кнопку большой;
- Name: это имя, под которым кнопку «видят» другие элементы вашего приложения; каждой кнопке нужно уникальное имя — назовите кнопку «btn-mad tea».
Когда вы отредактируете поля, изображение в верхней части окна изменится — чтобы наглядно показать, как будет выглядеть кнопка после применения настроек.
2.Когда заполните все поля — нажмите «Save».
- Настройте остальные кнопки по аналогии с первой, указав имена: btn-duchess_h, btn-wood, btn-croquet_g.
- Нажмите «Save changes», чтобы сохранить изменения в вашем приложении — иначе кнопки исчезнут, если вы обновите страницу или закроете редактор.
Настройка триггеров и событий
Теперь вам нужно настроить поведение кнопок. Начнем с той, на которой написан правильный ответ — «Duchess' House». Ваша задача — «объяснить» редактору Web Apps:
- какой у кнопки триггер — то есть на что конкретно она должна реагировать: на нажатие;#nbsp;
- какое событие при этом происходит: кнопки исчезают;
- где это событие происходит, какие элементы изменяет: другие кнопки.
Вернитесь в настройки кнопки «Duchess' House» и перейдите на вкладку «Triggers». Отобразятся все триггеры, которые для нее добавлены:
- Сейчас тут только один — «OnClick». Он добавляется автоматически и означает, что кнопка будет выполнять действие при нажатии на нее (как раз он вам и нужен).
- Кроме «OnClick» для кнопки возможны и другие триггеры. Полный их список с описанием есть в документации к платформе.
Теперь нужно указать информацию про событие (у вас их будет три — по одному для каждой кнопки). Кликните «+» напротив «OnClick». Откроется окно настройки события.
В поле «Target component» нужно указать, где событие будет происходить, в поле «Action» — что это будет за событие.
Скрыть все неверные ответы
Добавьте событие, которое скроет кнопку «Mad-Tea Party»:
- Кликните на поле «Target component» и найдите ее по уникальному имени btn-mad_tea. В поле «Action» выберите подходящее событие, в данном случае — «Hide Button» (скрыть кнопку).
- Кликните «Save».
Аналогично настройте остальные кнопки, которые нужно скрывать.
- Вот так должен выглядеть список триггеров для кнопки «Duchess' House», когда вы закончите.
- Чтобы сохранить изменения, нажмите «Save».
Теперь нужно убедиться, что все работает.
- Сохраните изменения.
- Нажмите кнопку публикации приложения (размещения его в интернете), выберите «Development».
- Нажмите на значок перехода в ваше приложение — оно откроется в новой вкладке.
Перейдите в приложение и убедитесь, что при выборе верного варианта остальные кнопки исчезают.
Скрыть неверный ответ при клике
Теперь сделаем так, чтобы кнопка с неправильным ответом «Mad-Tea Party» исчезала, когда пользователь на нее нажимает. В этом случае и триггер (нажатие), и событие (исчезновение) относятся к одной кнопке — работать нужно только с ней.
Откройте настройки кнопки, перейдите на вкладку «Triggers», добавьте новое событие в триггер «onClick». В поле «Target component» выберите «This component (self)» — чтобы показать, что кнопка запускает событие сама для себя. Значение поля «Action» то же, что в предыдущем примере — «Hide Button».
Сохраните все изменения и опубликуйте приложение, переключитесь на вкладку с приложением и обновите ее. Проверьте, что все работает так, как задумано:
Теперь настройте «Wood» и «Croquet-Ground». Снова сохраните, опубликуйте и проверьте работоспособность.
Типы кнопок
Отлично, ответы работают. Пора добавить вопрос. Конечно, в Appmaster.io есть специальные элементы для этого, но вы помните нашу задачу — кнопки и ничего больше. Поэтому добавим еще одну. На этот раз — не на основной холст, а в верхнюю область страницы:
Чтобы было веселее, оформите вопрос так, как на этом скриншоте:
А теперь «раскрасьте», используя цветовые схемы для разных типов кнопок: зайдите в настройки и переключите значение в поле «Type» на любое другое.
У нас получилось так, но вы можете выбрать свой вариант, цветовая схема кнопки не влияет на ее работу:
А теперь перейдем к последней задаче — настройке сообщения для пользователя.
Задача посложнее
Вывести сообщение на экран можно разными способами. Мы выбрали один из самых странных:
- Сначала сделаем так, чтобы кнопки, содержащие вопрос, автоматически деактивировались, когда пользователь дал правильный ответ. Они окрасятся в серый и перестанут реагировать на нажатия. Для этого используем функцию Enable(Disable), которую мы еще не рассматривали и уже знакомый «onClick».
- Потом рассмотрим новый триггер — onStateChange, который срабатывает при изменении состояния кнопки. Назначим этот триггер для кнопки «?» — и по нему будет запускаться показ сообщения.
Деактивация кнопок
Включить или отключить кнопку вручную можно в ее настройках, переключая селектор поля «Enable»:
Чтобы настроить автоматическое переключение, откройте настройки кнопки «Duchess' House» и добавьте триггер «onClick». В поле «Target component» выберите одну из кнопок вопроса, в поля «Action» — «Disable Button». Повторите для всех кнопок, которые содержат вопрос. Должно получиться так:
Не забывайте сохранять все изменения, публиковать и проверять, корректно ли работает приложение.
Сообщения UI
Теперь привяжем запуск сообщения к кнопке «?» (мы дали ей имя «btn_qqq»). Добавим ей триггер «onStateChange». Он срабатывает, когда меняется состояние кнопки — например, когда она выключается.
В поле «Target component» выберите «Application» (сообщение будет всплывать в окне приложения), в поле «Action» — «Show UI Message» (показать сообщение для пользователя).
- В поле «Message style» выберите тот, который больше подходит к ситуации. В нашем случае это «Success» — сообщение об успешном выполнении.
- Заполните поля «Title» и «Content» — сообщите пользователю, что ответ верен или просто напишите что-то приятное.
Сохраните, опубликуйте и проверьте.
Результат
При выборе правильного варианта должны скрываться кнопки с неверными ответами, бледнеть текст вопроса и всплывать сообщение с подтверждением.
Конечно, можно было настроить сообщение проще, привязав его к кнопке верного ответа. Но мы сегодня не ищем легких путей. Тем более, вы уже знаете достаточно, чтобы сделать это без наших инструкций. Попробуйте сами настроить сообщение об ошибке, которое будет всплывать при выборе неверного ответа. Должно получиться так:
Уверены, что эта инструкция помогла вам лучше узнать Appmaster.io. Но если было непонятно (а может, наоборот, слишком просто) — напишите в телеграм канал нашей техподдержки, какие инструкции вам нужны. Мы обязательно их напишем!
Если вы ищете более подробную информацию о Studio.appmaster.io, обратитесь к нашей документации.
