outsystems - 링크 및 버튼(Link and Button) 위젯을 사용하는 방법

Calculator이라는 새로운 Screen을 만들어 시작하겠습니다.

 

이제 화면에 입력 매개변수를 추가하고 필수가 아닌 것으로 설정하겠습니다. 

 

이제 Number 변수의 값을 증가시키는 버튼을 추가해보겠습니다.

 

왼쪽 도구 모음에서 버튼을 화면에 끌여다 놓고 

버튼을 선택하면 버튼을 클릭할 때 수행할 작업을 지정할 수 있습니다.

 

그리고 이것은 Onclick 이벤트 속성을 설정하여 수행할 수 있습니다.

우리의 경우 동일한 화면으로 이동하여 숫자 입력 매개변수를 늘리고자 합니다. 

아래의 값처럼 설정해줍니다.

이제 화면에서 결과를 볼 수 있도록 숫자입력매개변수의 값을 표시해 보겠습니다. 

변수 또는 입력 매개변수를 화면으로 드래그하면 해당 값을 표시하는 표현식이 생성됩니다.(오른쪽의 Number를 드래그하여 화면에 놓자)

아래는 드래그한 모습입니다.

 

이제 Publish하여 결과를 확인해보겠습니다.

 

아래는 초기화면이고 버튼을 2번클릭해보겠습니다. 

 

버튼을 2번눌렀을 경우 값이 2가 증가된 모습을 확인할 수 있습니다. 

 

 

이제 다시 studio 환경으로 돌아가 값 표현식을 삭제하고 새로운 버튼을 하나 만들어주겠습니다.

이 버튼은 숫자 입력 매개변수의 현재 값을 전달하여 다른 화면으로 이동합니다.

 

화면처럼 버튼을 만들고 이름을 submit로 변경한후 

아래화면처럼 빨간색부분의 button의 오른쪽 부분을 클릭하여 Link to를 클릭하고 new screen을 눌러줍니다.

새로운 화면의 이름은 Result로 하겠습니다. 

 

새로운화면에서 값이라는 매개변수를 추가하고 데이터 유형을 정수로 설정합니다. 

입력 매개변수를 화면 캔버스로 드래그하면 값을 표시하는 표현식이 생성됩니다.

드래그를 했는데 에러가 있습니다. 

값 입력매개변수를 추가했으므로 제출 버튼을 클릭할 때 전달할 값을 설정해야 합니다. 

버튼을 선택하면 값을 지정할 수 있습니다. 

버튼 속성에서 이 화면에서 결과 화면으로 이동할 때 전달되는 값을 지정해야 합니다. 

설정한 후 publish하여 결과를 확인해보겠습니다.

두번의 increment를 한 후 submit를 클릭하여 결과를 확인해보면  매개변수가 두 번째 화면으로 잘 전달함을 알 수 있습니다.  

 

 

지금까지는 버튼으로 작업을 했습니다.

이번에는 링크를 이용해보겠습니다.

링크는 버튼과 매우 유사하게 작동하므로 결과하면에 다시 시작 링크(초기화면)를 추가할 수 있습니다. 

result 스크린 화면에서 왼쪽 도구모음에서 link를 드래그하여 추가하겠습니다. 

 링크(빨간색부분)를 클릭하면 해당 속성이 표시됩니다.

여기에서 볼 수 있듯이 Link 속성은 버튼의 속성과 매우 유사합니다. 

On click 속성을 Calculator 화면으로 설정합니다.

계산기 화면의 숫자 입력 매개변수는 필수가 아니므로 정의할 필요가 없습니다.  

 

publish 하여 결과를 확인해보겠습니다.

버튼을 2번클릭하여 숫자를 두번증가시키고 submit버튼을 클릭해보겠습니다. 

2번클릭후 link를 클릭하면 화면으로 되돌아 옴을 확인할 수 있습니다. 

값은 증분을 하지 않았기 때문에 0입니다.