1. Calculator(계산기)
이번 포스팅에서는 이전에 했던 기능을 확장하여 윈도우에서 제공하는 계산기처럼 비슷한 계산기를 만들어보겠습니다.
1.1 UI
먼저 사용자가 값을 누르고 계산을 수행할 UI를 만들어보겠습니다. 새로운 Screen을 만들어주겠습니다. MainFlow의 오른쪽 마우스를 눌러 Add Screen을 누른 후 Empty template을 선택하고 이름은 Calculator라고 지어줍니다.
그리고 왼쪽 도구모음에서 Input을 선택하여 화면에 드래그해준 뒤 크기를 아래와 같이 조정해 줍니다. 추가로 Calculaotr에 Local Variable을 하나 만들어주고 방금 만든 Input에 변수로 설정해 줍니다. 참고로 변수의 name은 Display이고 Data type은 Text입니다.
1.1.1 숫자버튼
그 다음 사용자가 숫자 버튼을 눌러 값을 입력할 수 있는 버튼을 만들어줍니다.
Button을 하나 드래그해 주고 다음과 같이 Container로 묶어줍니다. Button의 바로 위 컨테이너(버튼을 포함하는 첫 번째 컨테이너)의 크기는 다음과 같이 줄여주고 버튼의 Text를 1로 바꿔줍니다.
Client Action을 하나 추가해 주고 액션 안에 Input Parameter을 하나 만들어주고 Data Type은 Integer로 설정합니다.
그러고 나서 아까 만든 버튼의 On click을 방금 만든 액션으로 설정해 줍니다. UserInput에는 해당버튼의 숫자 1을 입력해 줍니다. 그리고 버튼을 두 개 더 만들어 2와 3을 만들어줍니다(UserInput에 맞는 값 입력) 추가로 저는 보기 편하기 위해 1~3번 버튼의 컨테이너라인의 이름을 Line1_3으로 변경해 줬습니다. 나머지 4~9번까지도 컨테이너를 만들어 만들어줍니다.
숫자버튼을 완성한 화면입니다. 버튼이 너무 인접해 있는 거 같아서 컨테이너 라인의 margin-top의 값을 5px로 주었습니다.
1.1.2 기호버튼
이제 =의 Action을 만들어보겠습니다. PerformAction을 하나 만들고 =버튼의 액션을 PerformAction으로 설정 후 Style Classes를 btn-btn-success로 설정해 줍니다.
그리고 Clear를 위한 액션도 만들어줍니다. Action의 name은 Clear로 설정하고 CE버튼의 On Click을 Clear로 설정해줍니다. Style classes는 btn btn-secondary로 설정해줍니다.
이제 사칙연산을 위한 버튼을 만들어보겠습니다. 먼저 + 버튼입니다. 1~3 버튼라인에 버튼을 하나 만들어줍니다. 버튼의 Text를 +로 바꿔준 뒤 UserSymbolOnClick라는 Action을 만들어주고 Symbol이라는 Input Parameter를 만들어줍니다. 그리고 버튼의 On Click을 변경한 후 symbol로 "add"를 작성해 줍니다.
1.1.3 입력숫자
버튼을 눌렀을 때 숫자가 입력되도록 해보겠습니다. Local Variable을 3개 만들어줍니다. (Input1, Input2, Operator)
그리고 UserInputClick에서 if를 드래 그 한 뒤 Conditon을 Operator=""로 설정해 줍니다.
Assign도 If의 True가 되게 놓아줍니다. 계산기에서 처럼 사칙연산 기호를 누르기 전 숫자들이 숫자뒤에 붙여지는 것처럼 해주기 위해 Built-in Fuctions의 Text의 Concat(t1, t2)를 이용해 줍니다. t1, t2대신 Input1, UserInput을 넣어줍니다.
그리고 Input2도 만들어줍시다.
추가로 display칸에 숫자가 보이기 위해 각각의 Assign에 Assignments를 하나 더 추가해 줍니다.
1.1.4 + Action
마지막으로 +버튼의 Action을 설정해 줍니다. Assign을 하나추가하고 Assignments를 아래와 같이 작성합니다. 그리고 아까 +버튼의 symbol을 "add" 로 설정했는데 "+"로변경해줍니다.
1.1.5 = Action
등호버튼의 PerformAction을 설정해 줍니다. Switch를 드래그해주고 Condition으로 Operator가 +일때 Input1과 Input2를 더해주었습니다. 현재 Input1은 Text이기 때문에 TextToInteger함수를 사용하여 Text -> Integer로 바꿔줍니다
1.1.6 clear Action
clear 버튼의 Action도 설정해줍니다. Assignments도 다음과 같이 설정해줍니다.
2. 결과화면
실행결과 값들이 정상적으로 나옴을 알 수 있습니다.
'로우코드(Lowcode) > outsystems' 카테고리의 다른 글
| 2. Outsystmes란? Outsystems에 대해 알아보자(Layers) (0) | 2023.04.05 |
|---|---|
| 1. Outsystmes란? Outsystems에 대해 알아보자 (0) | 2023.04.05 |
| Switch를 이용한 덧셈,뺄셈,곱셈,나눗셈(Outsystems) (0) | 2023.04.03 |
| If,Else를 이용한 덧셈, 뺄셈(Outsystems) (0) | 2023.04.01 |
| Acction, Assignmet,expression를 이용한 덧셈기능 구현(Outsystems) (0) | 2023.04.01 |
