만들어진 키패드의 버튼에 들어갈 인터랙션에 대한 설명은 다음과 같습니다.


State 1 : Hour 버튼의 경우를 예를 들면,


먼저 키패드 입력을 통해 만들어진 문자는 replace 함수를 통해 "{keypad_hour}"에 문자로 저장됩니다.

이렇게 만들어진 "{keypad_hour}"를 가지고 "substr" 함수를 통해 "{length_hour}"에 2자리 문자로 저장됩니다.

2자리 문자인 "{length_hour}"는 "parseInt" 함수를 통해 숫자 형식으로 변환되어 {integer_hour}에 저장됩니다.

이렇게 생성된 {length_hour}는 조건문 필터링을 통해 값이 23이하인 경우에만 입력 값을 그대로 저장하고 그 이상인 경우는 문자열 "00"을 저장합니다.

그리고 {integer_hour}는 slice 함수를 통해 1자리 숫자인 경우 앞에 "0"이 붙은 후 {zero_hour}에 저장됩니다.

최종적으로는 {zero_hour}의 값이 텍스트 필드 "Hour"로 보내집니다.


<Hour 버튼 중 ①번에 적용될 인터랙션>


  • Trigger : Tap
  • Action : Set variable
  • Variable Name : keypad_hour (default: empty)
  • Value type : Custom value
  • New Value : "{keypad_hour}".replace("undefined", "") + 1
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : length_hour (default: empty)
  • Value type : Custom value
  • New Value : "{length_hour}".substr(0,2)
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : integer_hour (default: empty)
  • Value type : Custom value
  • New Value : parseInt("{keypad_hour}")
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : integer_hour (default: empty)
  • Value type : Custom value
  • New Value : {integer_hour} > 23 ? "00" : {integer_hour}
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "0{integer_hour}".slice(-2)
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0


작성된 인터랙션을 복사하여 나머지 버튼에도 붙여 넣은 후 첫 번째 인터랙션의 뒷 부분 숫자만 각각 2에서 0까지 수정합니다.


<Minute 버튼 중 ①번에 적용될 인터랙션>

변수 이름만 다르고 위에 작성한 Hour와 같은 방법으로 인터랙션이 적용되며, 단지 다른 점은 integer_minute 값의 범위를 설정하는 부분에서의 자바스크립트만 다음과 같이 바뀐다는 점입니다.


{integer_minute} < 60 ? {integer_minute} : "00"


적용된 인터랙션을 복사하여 나머지 Minute 용 버튼에 붙여 넣고 첫 번째 인터랙션의 뒷 부분 숫자를 2에서 0까지 수정합니다.


<텍스트 필드 인터랙션>

시와 분이 표시되는 텍스트 필드를 각각 탭 했을 때 해당하는 스크린 상태로 이동하여 변수를 리셋하고, keypad 컨테이너 내부의 상태를 바꿔 해당하는 키패드로 바꿔야 합니다.


- Hour 텍스트 필드 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : hour reset State
  • Delay : 0

>>>콜백

  • Action : Change Container State
  • Screen : Setting Time
  • Container : keypad
  • State : State 1
  • Delay : 0


- Minute 텍스트 필드 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : minute reset State
  • Delay : 0

>>>콜백

  • Action : Change Container State
  • Screen : Setting Time
  • Container : keypad
  • State : State 2
  • Delay : 0


- reset all time 리셋 버튼 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : all reset State
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Custom value
  • New Value : 0
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Minute
  • Property : Value
  • Value type : Custom value
  • New Value : 0
  • Delay : 0


<텍스트 필드 초기화 인터랙션>

첫 화면에 빈 칸으로 보이는 텍스트 필드에 초기값으로 "00" 을 넣기 위해서 스크린에 인터랙션을 추가합니다.


- 인터랙션 1 Hour 초기값

  • Trigger : Screen show
  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "00"
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0


- 인터랙션 2 : Minute 초기값

  • Trigger : Screen show
  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "00"
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0

두 인터랙션 모두 변수의 New Value 값으로 0이 아닌 "00" 을 넣는 것에 주의합니다(문자형).


프로젝트를 저정하고 미리보기로 확인합니다.

기본기본

한자리 숫자 입력값한자리 숫자 입력값 - 앞에 0 붙임

잘못된 입력값잘못된 입력값 - 00 으로 초기화





블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,