Acction, Assignmet,expression를 이용한 덧셈기능 구현(Outsystems)

1. Acction, Assignmet,expression를 이용한 덧셈기능 구현

이번포스팅에서는 사용자가 두개의 값을 입력하고 add버튼을 클릭하면 덧셈결과를 화면에 출력해주는 것을 구현해보겠습니다. 

1.1 Input , Add(Button)

이전 포스팅에서 사용하였던 HelloWorld화면에서 계속 진행하겠습니다. 왼쪽도구모음에서 Input을 끌고와 화면에 놓아줍니다.  우리는 2개의 Input칸을 사용하기때문에 2번끌고와줍니다. 그리고 Button까지 끌고와줍니다. 

처음에 input을 놓으면 화면이 아래처럼 나오는데 우리는 한라인에 2개의 Input칸과 Add 버튼까지 구현할거기 때문에 Input의 크기를 줄여줍시다. 그 전에 먼저 아래 3개를 하나의 컨테이너로 묶어줍니다.(같은 라인에 정리하기위함)

Interface탭에서 Widget Tree를 클릭한 후 Content아래에 Input1, Input2, Button 까지 (쉬프트+마우스왼쪽클릭) 묶어 오른쪽마우스를 눌러 Enclose in Container를 클릭해줍니다. 

그럼 이렇게 하나의 컨테이너에 묶임을 알수있습니다. 그 다음 크기를 줄여봅시다. 

화면에서 Input오른쪽 끝 테두리를 클릭하면 마우스로 크기를 조절할수있습니다. 4정도로 크기를 줄여주겠습니다. 

아래와 같이 하나의 라인에 잘 들어갔음을 알 수 있습니다. 

1.2 변수 설정

그 다음 값을 넣고 계산을 하기위한 변수들을 설정해주겠습니다. Interface탭의 MainFlow -> HelloWorld 오른쪽마우스를 클릭하여 Add Local Variable를 클릭해 3개를 만들어 줍니다 변수이름은 아래와 같이 정했습니다. 그리고  Data type은 Integer로 해주었습니다. 

다음으로 화면의 Input칸을 눌러 방금만든 변수를 설정해줍니다. 첫번째 Input칸의 Variable로 Integer1을 두번째칸에는 Integer2를 설정해줍니다. (화면의 Expression문장은 무시해도됩니다)

 

1.3 Add Action 설정

그리고 Button의 이름을 Add로 변경해주었습니다. Button글씨를 클릭하면 수정할수있습니다. 그리고 수정한 Add 버튼을 두번클릭해줍니다. 

그럼 아래와 같은 AddOnClick화면이 나오게 됩니다.  

왼쪽에 있는 Assign을 끌어와 start와 end의 중간에 +부분에 놓아줍니다. 그리고 Variable을 아까 생성한 Result로 해줍니다. 그리고 아래 Value를 클릭한 후 Expression editor... 을 클릭해줍니다. 

 

그리고  Scope -> HelloWorld아래에 Integer1를 더블클릭하고 위의 + 버튼클릭후 Integer2를 더블클릭해줍니다. 그리고 Close를 눌러줍니다. 

1.4 덧셈 결과

마지막으로 메인화면으로 돌아와 왼쪽도구모음에 expression을 메인화면에 놓고 Value를 Result로 설정해줍니다.

결과 화면

정상적으로 출력합니다.