프로토타이핑 proto.io 입력 텍스트 보내기

텍스트 필드에 입력한 내용을 특정한 곳에 출력하는 것을 구현해 봅니다.

먼저 Text Field, Button, Rectangle, Text 등을 사용하여 아래의 인터페이스를 만듭니다.

인터페이스의 모습을 보면 바로 알겠지만 Input Text에 입력된 텍스트가 Add 버튼을 누르면 Type something에 나타나는 동작이 이루어질 것입니다.

인터랙션은 동작이 이루어지는 곳에 적용되기 때문에 여기에서는 Add 버튼을 클릭하고 인터랙션 패널로 이동합니다.

외부 입력폼인 Input Text에서 데이터를 가져와서 변수에 넣어야 하기 때문에 변수 설정을 먼저 합니다.
- Title : input text read
- Trigger : Tab
- Action : Set variable을 선택하고, New variable을 통해 텍스트가 저장되는 새로운 변수 “spending_input”를 만듭니다.

- Value type : Text
- Evaluate variable : check
로 설정하고

- Value type : Set value from item property
를 통해 특정 아이템에서 값을 가져옵니다. 특정 아이템이 바로 Input Text이기 때문에

- Screen : Screen 1 (현재 스크린)
- Item : input text
- Property : value
로 설정합니다.
이 과정을 통해 {spending_input}이라는 변수가 생성됩니다.

생성된 변수를 Type something에 넣기 위해서 Callback을 체크하여 콜백 인터랙션을 추가하여, 다음과 같이 설정합니다.

- Action : Change property
- Screen : Screen 1
- Item : change text
- Property : Text
- Value type : Read from variable
- Variable name : spending_input (default: empty)

프로젝트를 저장하고 프리뷰를 통해 텍스트를 입력하고 Add 버튼을 누르면 아래의 텍스트가 제대로 변경되는지 확인합니다.