버튼 추가
- OutSystems Studio에서 "Button" 컴포넌트를 선택해 화면에 드래그 앤 드롭한다.
- 버튼 이름은 "확인 요청"으로 설정하며, 속성(Properties) 창에서 스타일과 이벤트를 설정할 수 있다.
클라이언트 액션 추가
- 버튼에 기능을 추가하기 위해 "Add Client Action"을 선택한다.
- Client Action을 통해 버튼 클릭 시 실행될 동작을 설정할 수 있다.
Input Parameter 추가
- 오른쪽 패널에서 Add Input Parameter를 선택해 클라이언트 액션(Client Action)에 입력 파라미터를 추가한다.
- Input Parameter는 화면(Screen)이나 다른 액션에서 데이터를 전달받을 때 사용한다.
Local Variable 생성
- Local Variable을 만들어 특정 화면이나 액션 내에서만 사용할 수 있는 데이터를 저장한다.
- 예시에서는 number라는 이름의 로컬 변수를 만들었으며, Data Type은 Integer로 설정하고 Default Value는 2로 지정한다.
버튼에 액션(Action) 연결
- 화면에 추가된 "확인 요청" 버튼을 선택한다.
- 오른쪽 속성(Properties) 창의 Events 섹션에서 On Click 이벤트에 Action1을 연결한다.
- 이를 통해 사용자가 버튼을 클릭했을 때 Action1이라는 클라이언트 액션(Client Action)이 실행되도록 설정한다.
If 조건문 추가
- 아래쪽 이미지에서는 Action1 액션 내부에 If 조건문을 추가하는 과정이 보인다.
- Toolbox에서 If 블록을 드래그하여 액션 플로우에 연결한다.
- If 조건문을 더블 클릭하여 조건을 설정할 수 있다.
조건 설정 (If Condition)
- 조건문 창에서 number = 2와 같은 조건을 입력한다.
- 이 조건은 로컬 변수 number의 값이 2일 때만 참(True)으로 평가된다.
메시지(Message) 및 종료(End) 요소 추가
- 좌측 Toolbox에서 Message와 End 요소를 선택해 화면에 드래그 앤 드롭한다.
- Message 요소는 사용자에게 알림이나 메시지를 표시할 때 사용한다.
- End 요소는 액션 흐름을 종료할 때 사용한다.
If 조건문을 활용한 메시지 표시
- 흐름(Flow)에서는 If 조건문을 통해 Mod(number, 2) = 0의 조건을 설정한다.
- 이 조건은 number 변수를 2로 나눈 나머지가 0인지 확인하는 것으로, 짝수인지 판별하는 역할을 한다.
True/False 분기 처리
- 조건이 True일 경우, Message 요소를 통해 "짝수입니다"라는 메시지를 표시한다.
- 만약 조건이 False일 경우, "홀수입니다"라는 다른 Message를 표시하도록 설정한다.
로직의 종료 설정
- 모든 메시지 요소의 끝에는 End 요소를 연결해 액션이 정상적으로 종료되도록 설정한다.
- 이로써 버튼 클릭 시 조건에 맞는 메시지를 사용자에게 보여주고, 로직을 끝낼 수 있다.
액세스 권한 설정 (Authorization)
- 오른쪽 패널에서 Authorization 설정을 통해 해당 화면 또는 기능에 접근 가능한 사용자를 지정할 수 있다.
- Accessible by 옵션을 "Everyone"으로 설정하면 인증 없이 누구나 이 기능을 사용할 수 있다.
- 이 설정은 비로그인 사용자도 접근 가능한 공개 페이지를 만들 때 사용한다.
애플리케이션 배포 (Publishing)
- 상단의 Publish 버튼을 클릭해 애플리케이션을 배포한다.
- 배포 과정에서는 로직과 UI 요소들이 서버에 업로드되고, 실제 애플리케이션으로 사용할 수 있게 된다.
- 배포 진행 상태는 화면 하단의 로그 창에서 확인할 수 있다.
이와 같은 방식으로 간단한 홀짝 판별 웹 애플리케이션을 만들 수 있다.
'Frontend > 실습' 카테고리의 다른 글
안드로이드앱 어댑터 실습 (1) | 2025.03.04 |
---|---|
안드로이드앱 : 여러페이지 화면 개발 (0) | 2025.03.03 |
안드로이드 앱 : 타이머 앱 실습 (0) | 2025.02.28 |
안드로이드 스튜디오 : 고양이 나이 계산 안드로이드 앱 (1) | 2025.02.28 |
안드로이드 스튜디오 : 주사위 던지기 앱 (0) | 2025.02.27 |