Appmaster.io 설정. 웹 애플리케이션 편집기: 버튼

버튼은 Web Apps 편집기의 가장 단순한 요소이지만 완성된 응용 프로그램의 인터페이스에서 주요 역할 중 하나를 수행합니다. 또한, 오늘은 버튼만으로 구성된 애플리케이션을 만들 것을 제안합니다. 작업이 조금 이상해 보일 수 있지만, 그렇게 하면 버튼을 사용자 정의하는 방법, 편집기 작업의 기본 및 전체 플랫폼의 논리를 이해하는 방법을 배우게 됩니다.

이상한 나라의 앨리스라는 책을 바탕으로 짧은 퀴즈를 만들어 봅시다. Alice가 Cheshire Cat을 처음 만난 곳을 사용자가 기억하는지 알아 봅시다.

우리의 응용 프로그램에는 다음이 포함됩니다.

1. 질문 텍스트: 앨리스가 체셔 고양이를 처음 만난 곳은 어디인가요?
2. 선택 버튼: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground. 사용자가 오답을 선택한 경우 - 해당 버튼이 사라지고 사용자가 정답을 선택하면 - 오답이 있는 모든 버튼이 한 번에 사라집니다.
3. 정답 여부를 알려주는 팝업 메시지.

그건 그렇고, 어떤 옵션이 올바른지 기억하십니까?

버튼을 만드는 방법

마우스 포인터로 "Button" 요소를 (왼쪽 키를 클릭한 상태로) 버튼을 배치할 영역으로 끕니다.

가능한 답변의 수에 따라 4개의 버튼을 추가해야 합니다.

버튼 모양 사용자 정의

첫 번째 버튼을 한 번 클릭하면 설정 창이 열립니다. 버튼의 모양을 담당하는 "Look&Feel" 탭에서 자신을 찾을 수 있습니다.

1. 다음 필드를 편집합니다.

• 레이블: 버튼 텍스트 - 첫 번째 답변 입력: "Mad-Tea Party";
• 아이콘: 버튼 아이콘 - "아이콘 선택"을 클릭하고 원하는 아이콘을 선택합니다(현재 2500개 이상 있음).
• 크기: 버튼 크기 - 버튼을 크게 만들려면 "Large"로 설정합니다.
• 이름: 응용 프로그램의 다른 요소에서 버튼을 "보는" 이름입니다. 각 버튼에는 고유한 이름이 필요합니다. 버튼 이름을 "btn-mad_tea"로 지정하세요.

필드를 편집할 때 창 상단의 이미지가 변경되어 설정이 적용된 후 버튼이 어떻게 보일지 보여줍니다.

2. 모든 필드를 채우면 "저장"을 클릭합니다.

1. btn-duchess_h, btn-wood, btn-croquet_g라는 이름을 사용하여 첫 번째 버튼과 유사하게 나머지 버튼을 구성합니다.
2. "변경 사항 저장"을 클릭하여 변경 사항을 애플리케이션에 저장하십시오. 그렇지 않으면 페이지를 새로 고치거나 편집기를 닫으면 버튼이 사라집니다.

트리거 및 이벤트 설정

이제 버튼의 동작을 설정해야 합니다. 정답이 있는 "공작녀의 집" 부터 시작하겠습니다. 귀하의 임무는 Web Apps 편집기에 "설명"하는 것입니다.

• 버튼의 트리거는 무엇입니까 - 정확히 무엇에 반응해야 하는지를 의미합니다. 누를 때;
• 이 경우 어떤 이벤트가 발생 합니까? 버튼이 사라집니다.
• 이 이벤트가 발생하는 위치, 변경되는 요소: 기타 버튼.

"Duchess' House" 버튼 설정으로 돌아가서 트리거 탭으로 이동합니다. 추가된 모든 트리거가 표시됩니다.

1. 이제 "OnClick"만 있습니다. 그것은 자동으로 추가되며 버튼을 클릭할 때 버튼이 작동함을 의미합니다(꼭 필요한 것입니다).
2. "OnClick" 외에도 버튼에 대해 다른 트리거가 가능합니다. 설명이 포함된 전체 목록은 플랫폼 설명서에 있습니다.

이제 이벤트에 대한 정보를 지정해야 합니다(각 버튼에 대해 하나씩). "OnClick" 옆에 있는 "+"를 클릭합니다. 이벤트 설정 창이 열립니다.

"대상 구성 요소" 필드에서 이벤트가 발생할 위치, "작업" 필드에서 이벤트의 종류를 지정해야 합니다.

모든 오답 숨기기

Mad-Tea Party 버튼을 숨길 이벤트 추가:

1. "대상 구성 요소" 필드를 클릭하고 고유한 이름 btn-mad_tea로 찾습니다. 작업 필드에서 적절한 이벤트(이 경우 "버튼 숨기기")를 선택합니다.
2. "저장"을 클릭합니다.

나머지 버튼도 같은 방법으로 숨겨지도록 구성합니다.

1. "Duchess' House" 버튼에 대한 트리거 목록은 완료되었을 때의 모습입니다.
2. "저장"을 클릭하여 변경 사항을 저장합니다.

이제 모든 것이 제대로 작동하는지 확인해야 합니다.

1. 변경 사항을 저장합니다.
2. 응용 프로그램 게시(인터넷에 게시) 버튼을 누르고 "개발"을 선택합니다.
3. 앱 아이콘으로 이동을 클릭하면 새 탭에서 열립니다.

앱으로 이동하여 올바른 옵션을 선택하면 나머지 버튼이 사라지는지 확인합니다.

클릭 시 오답 숨기기

이제 사용자가 클릭하면 오답인 "Mad-Tea Party"가 있는 버튼이 사라지도록 합시다. 이 경우 트리거(누름)와 이벤트(사라짐)는 모두 동일한 버튼에 속하므로 해당 버튼으로 작업하기만 하면 됩니다.

버튼 설정을 열고 "트리거" 탭으로 이동하여 "onClick" 트리거에 새 이벤트를 추가합니다. "대상 구성 요소" 필드에서 "이 구성 요소(자체)"를 선택하여 버튼이 자체적으로 이벤트를 활성화함을 나타냅니다. "Action" 필드의 값은 이전 예인 "Hide Button"과 동일합니다.

모든 변경 사항을 저장하고 앱을 게시하고 앱 탭으로 전환하고 새로 고칩니다. 모든 것이 의도한 대로 작동하는지 확인하십시오.

이제 Wood와 Croquet-Ground를 조정합니다. 저장하고 게시하고 다시 테스트하십시오.

버튼의 종류

좋습니다. 답변이 작동합니다. 질문을 추가할 시간입니다. 물론 Appmaster.io에는 이를 위한 특별한 요소가 있지만 버튼만 있는 작업을 기억할 것입니다. 그럼 하나 더 추가해 보겠습니다. 이번에는 메인 캔버스가 아니라 페이지 상단으로:

더 재미있게 만들려면 이 스크린샷과 같이 질문을 작성하세요.

이제 다양한 유형의 버튼에 대한 색상 구성표를 사용하여 "색상화"하십시오. 설정으로 이동하여 "유형" 필드의 값을 다른 것으로 전환하십시오.

우리는 다음과 같이 얻었지만 옵션을 선택할 수 있습니다. 버튼의 색 구성표는 작동에 영향을 미치지 않습니다.

이제 마지막 작업인 사용자를 위한 메시지 설정으로 넘어가겠습니다.

더 어려운 작업

다양한 방법으로 화면에 메시지를 표시할 수 있습니다. 가장 특이한 것 중 하나를 선택했습니다.

- 먼저 사용자가 정답을 입력하면 질문이 포함된 버튼이 자동으로 비활성화되도록 합시다. 회색으로 바뀌고 클릭에 응답하지 않습니다. 이를 위해 아직 고려하지 않은 Enable(Disable) 기능과 이미 친숙한 "onClick"을 사용합니다.

- 그런 다음 버튼의 상태가 변경될 때 트리거되는 새로운 트리거인 onStateChange를 고려할 것입니다. 이 트리거를 "?" - 메시지가 표시됩니다.

버튼 비활성화

"활성화" 필드 선택기를 토글하여 설정에서 버튼을 수동으로 활성화 또는 비활성화할 수 있습니다.

자동 전환을 설정하려면 "Duchess' House" 버튼 환경 설정을 열고 "onClick" 트리거를 추가하십시오. "Target component" 필드에서 "Action" - "Disable Button" 필드에서 질문 버튼 중 하나를 선택합니다. 질문이 포함된 모든 버튼에 대해 반복합니다. 다음과 같이 표시되어야 합니다.

모든 변경 사항을 저장하고 게시하고 응용 프로그램이 올바르게 작동하는지 확인하십시오.

이제 메시지의 시작 부분을 "?" 버튼에 바인딩해 보겠습니다. (우리는 그것을 "btn_qqq"라고 명명했습니다). 여기에 "onStateChange" 트리거를 추가해 보겠습니다. 버튼의 상태가 변경될 때 활성화됩니다(예: 버튼이 꺼질 때).

"대상 구성 요소" 필드에서 "응용 프로그램"(메시지가 응용 프로그램 창에 팝업됨)을 선택하고 "작업" 필드 - "UI 메시지 표시"(사용자에게 메시지 표시)를 선택합니다.

1. "메시지 스타일" 필드에서 상황에 가장 적합한 것을 선택하십시오. 우리의 경우 이것은 성공적인 완료에 대한 메시지인 "성공"입니다.
2. "제목" 및 "내용" 필드를 채우십시오 - 사용자에게 답변이 정확하다고 알리거나 그냥 좋은 것을 작성하십시오.

저장, 게시 및 테스트합니다.

결과

올바른 옵션을 선택하면 오답이 있는 버튼이 숨겨지고 질문 텍스트가 희미해지고 확인 메시지가 팝업되어야 합니다.

물론 정답 버튼에 묶음으로 메시지를 더 쉽게 커스터마이징할 수 있었다. 비록 오늘날 우리는 쉬운 방법을 찾고 있지 않습니다. 게다가, 당신은 이미 우리의 지시 없이 이것을 할 만큼 충분히 알고 있습니다. 오답을 선택할 때 표시되는 오류 메시지 를 사용자 정의해 보십시오. 다음과 같이 표시되어야 합니다.

이 지침이 Appmaster.io 를 더 잘 이해하는 데 도움이 되었다고 확신합니다. 그러나 명확하지 않은 경우(또는 반대로 너무 간단한 경우) 필요한 지침에 대해 기술 지원의 텔레그램 채널 에 글을 쓰십시오. 우리는 그들을 쓸 것입니다!

Studio.appmaster.io 에 대한 더 자세한 정보를 원하시면 문서 를 참조하십시오.