이 모듈에서는 이미 Screen을 만들고 그 안에 하나의 Screen Action을 만들었습니다. 이제 화면에 버튼을 추가하여 화면 작업을 호출해 보겠습니다. 숫자가 홀수인지 짝수인지 확인하기 위해 Screen Action을 사용합니다. 그리고 이를 위해 액션에 입력매개변수를 추가하여 숫자를 전달할 수 있습니다. 이제 Screen Action에 입력 매개변수가 있으므로 버튼에 값을 설정해야 합니다. 100을 설정해줍니다. 이제 화면 동작 로직을 구현할 차례입니다. If위젯을 사용하여 숫자가 홀수인지 짝수인지 확인합니다. 그리고 If를 두번 클릭하여 if조건의 표현식 편집기를 열어 조건을 입력해줍니다. 조건에는 숫자가 홀수인지 확인하기 위해 2로 나눈 나머지가 0이 아닌지 확인할 수 있습니다. Mod(Nu..
Service Studio에는 주문을 생성하거나 편집할 수 있는 화면이 있는 모듈이 이미 열려 있습니다. (모듈 참조 : https://www.outsystems.com/ko-kr/training/Learn_Lesson_View.aspx?LessonId=2031&LessonName=demo-how-to-create-and-use-actions&LearningPathId=1) Error Handler | OutSystems www.outsystems.com 이때 Screen의 UI는 정의되어 있지만 Database에 순서를 저장하는 로직은 정의되어 있지 않습니다. 화면에는 이미 생성된 저장 버튼이 있습니다. 버튼을 클릭하면 지금까지 주문한 화면으로 이동합니다. 그러나 주문을 생성하거나 업데이트하는 로직을 ..
변수 변수는 데이터를 저장할 수 있는 메모리의 위치입니다. Outsystems에서 변수는 입력 매개변수, 로컬 변수 , 출력매개변수가 있습니다. 아래 사진을 보시면 BookRoom 이라는 서버액션에서 3개의 입력매개변수가 있습니다. 체크인 날짜, 체크아웃날짜, 게스트 수와 같은 여러 입력 매개변수가 있습니다. 그리고 객실번호, 객실 가격과 같은 출력매개변수도 있습니다. 또한 특정 방에 대한 정보를 보유할 지역 변수도 있습니다. 이러한 모든 변수는 BookRoom 작업 범위 내에서 상호 작용하고 동작합니다. 자세히 하나하나 살펴보겠습니다. 입력 매개변수(Input Parameter) 입력 매개변수를 사용하면 외부 범위에서 상위 범위로 값을 전달할 수 있습니다. 각 입력 매개변수에는 몇가지 속성이 있으며 이..
OutSystems에서 정의 할 수 있는 세 가지 유형의 로직이 있습니다. Screen Actions Screen Actions은 화면 내부에서 정의되며 일반적으로 해당 화면의 일부인 위젯에 바인딩됩니다. 예를 들어 버튼을 누를때마다 화면 액션이 실행될 수 있습니다. 화면 내부에서 정의되기 때문에 해당 범위에는 해당 화면 수준에서 정의된 내용이 포함됩니다. 따라서 화면 위젯 위에도 정의된 집계, 화면 입력 매개변수 및 로컬 변수도 포함됩니다. Screen Actions의 범위는 정의한 화면으로 제한됩니다. Client Actions Client Actions은 Screen Actions와 다소 유사합니다. 그러나 클라이언트 작업은 모듈 전체에서 사용되며 단일 화면 내에서 구체적으로 바인딩되지 않습니다. ..
Container Widget을 사용하여 화면과 그 내용에 일부 스타일과 서식을 조정하고 추가하는 방법을 보여드리겠습니다. 각각 소설 미디어 아이콘을 표시하는 세 개의 섹션을 화면에 만들 것입니다. 열려 있는 화면에 Container를 추가하는 것으로 시작하겠습니다. 컨테이너 컨테이너는 기본적으로 화면의 HTML Div이며 너비를 쉽게 사용자 지정할 수 있습니다.(본인은 4col로 크기를 줄여줌) Style classes 속성을 사용하여 위젯에 CSS스타일을 적용할 수 있습니다. 카드 스타일 클래스는 흰색 배경과 콘텐츠 주위의 패딩을 추가하는 내장 CSS 클래스입니다. 컨테이너에 아이콘을 추가해보겠습니다. 도구상자에서 icon을 클릭한 후 컨테이너 안으로 드래그해줍니다. 그리고 기존 컨테이너의 오른쪽에 ..
IfWidget이라는 이름의 새로운 스크린 화면을 만들어 진행하겠습니다. 지역변수를 먼저 생성하고 이름은 Number 타입은 Integer로 설정하겠습니다. 그리고 지역변수를 증가 또는 감소시키는 두개의 버튼을 생성하고 버튼을 더블클릭합니다. 그럼 다음과 같은 화면이 뜹니다. 도구모음에서 Assign을 드래그하여 statr와 end사이에놓고 assign을 클릭하여 오른쪽하단의 속성에 위의 처럼 작성합니다. 위의 사진은 Increase이고 Decrease에서는 Number-1을 해주면 됩니다. 결과를 확인해보면 증가버튼을 눌렀을 경우 증가 감소버튼을 눌렀을 경우 감소가 잘 됨을 알 수 있습니다. 이제 본론으로 돌아와 if위젯을 사용해보겠습니다. 기존 Expression을 삭제하고 그 자리에 도구모음에서 i..
Calculator이라는 새로운 Screen을 만들어 시작하겠습니다. 이제 화면에 입력 매개변수를 추가하고 필수가 아닌 것으로 설정하겠습니다. 이제 Number 변수의 값을 증가시키는 버튼을 추가해보겠습니다. 왼쪽 도구 모음에서 버튼을 화면에 끌여다 놓고 버튼을 선택하면 버튼을 클릭할 때 수행할 작업을 지정할 수 있습니다. 그리고 이것은 Onclick 이벤트 속성을 설정하여 수행할 수 있습니다. 우리의 경우 동일한 화면으로 이동하여 숫자 입력 매개변수를 늘리고자 합니다. 아래의 값처럼 설정해줍니다. 이제 화면에서 결과를 볼 수 있도록 숫자입력매개변수의 값을 표시해 보겠습니다. 변수 또는 입력 매개변수를 화면으로 드래그하면 해당 값을 표시하는 표현식이 생성됩니다.(오른쪽의 Number를 드래그하여 화면에 ..
표현식 위젯을 사용하기 위해 아래의 빈화면에서처럼 시작하겠습니다. 표현식 위젯을 추가하려면 도구 상자에서 왼쪽으로 끌어서 화면안에 놓기만 하면 됩니다. 표현식을 스크린화면에 끌어 놓으면 표현식 편집기가 뜹니다. 여기에서 런타임에 계산될 표현식을 실제로 입력한 다음 최종사용자에게 표시될 텍스트를 생성합니다. 간단하게 3*5 곱하기를 화면에 나타내겠습니다. 3*5를입력하고 publish 해보겠습니다. 결과화면입니다. 런타임 시, 즉 브라우저에서 최종사용자는 계산된 값을 텍스트로 보게 됩니다. 표현식 값이 잘 나옴을 알 수 있습니다. 추가적으로 문자열, 숫자와 문자열을 연결한 표현식을 보여드리겠습니다. 먼저 2개의 표현식위젯을 화면에 끌여다 놓습니다. 문자열의 텍스트편집기에는 아래와 같이 입력해줍니다 "Hel..
1. Logic Elements Outsystems에서 로직은 액션을 통해 정의될 수 있다. 액션은 앱의 서버 또는 클라이언트 측에서 실행되는 로직 흐름을 정의할 수 있는 로직 요소이다. 리액티브 웹 및 모바일 앱에서 로직 요소를 사용하여 사용자 정의 알고리즘을 정의할 수 있다. Outsystems의 일부 로직 요소에는 단일 화면에 특화된 로직을 포함하는 Screen Actions, 장치에서 로직을 실행하는 Client Actions 및 서버에서 로직을 실행하는 Server Actions가 포함된다. 1.1 Client Action Client Action은 클라이언트 측에서 로직을 실행하는 액션이다. 디바이스에서 실행되는 로직을 작성할 때 사용된다. 사용자 인터페이스와 상호 작용하는 로직을 정의하는 데..
1. Walkthrough 1.1 Elements and Properties 트리에서 각 요소를 선택하거나 열면 트리 아래에 속성이 나타나고 해당 속성을 사용하면 각 요소의 동작을 개별적으로 조정하고 사용자가 지정할 수 있다. 1.2 True Change True Change는 애플리케이션 모듈을 검증하는 기능이다. 1.3 Toolbox(Widgets) 왼쪽에는 Toolbox가 있는데 이것은 UI요소로 화면의 구성요소인 위젯이다. 텍스트,이미지, 차트, 지도, 버튼 등 수십개의 위젯으로 구성되며 화면 캔버스로 Drag or Drop 하면 된다. 1.4 View View는 화면 상단에 존재하며 미리보기 모드를 변경하여 다양한 유형의 장치 및 방향에서 화면이 어떻게 보여지는지 확인 가능하다. 1.5 Styl..
1. Application Layers Service Studio를 구성하는 Layers에 대해 알아보겠습니다. 크게 4가지의 Layers가 존재합니다. 1.1 Processes Layer Processes Layer에는 내부에 Processe와 Timers라는 두 가지 주요 요소 그룹이 있다. Processes에는 Decisions, Events 및 Waits가 있는 Business Processes와 Human Task 및 Automated Tasks가 포함된다. Timers는 특정 시간에 발생할 수 있고 매일, 매주 또는 다른 간격으로 발생하도록 다시 예약할 수 있다. 이러한 Timers에는 서로 다른 Priorities가 지정될 수 있으므로 여러 Events가 동시에 실행되어야 하는 경우 일부 E..
1. Outsystems OutSystems는 짧은 기간 내에 앱을 개발할 수 있는 로우코드 플랫폼이다. 앱의 비주얼 개발과 시스템 연동이 원활하며, 드래그 앤 드롭으로 직관적으로 작업을 진행할 수 있다. 웹 앱과 모바일 네이티브 앱을 한 번에 개발할 수도 있다. 1.1 Outsystems 서버 인프라 내부의 애플리케이션을 컴파일, 배포, 관리, 실행 및 모니터링하는 서버 집합 Service Studio와 연결되면 플랫폼 서버에 애플리케이션을 만들고 게시 가능 해당 애플리케이션의 각 버전은 플랫폼 데이터 DB에 저장 애플리케이션 서버는 전통적인 데이터베이스와 외부시스템을 사용하여 생성한 애플리케이션을 실행 Outsyems 서버 자체는 실제로 코드를 생성하고 컴파일한 다음 애플리케이션을 IIS와 같은 실제..
1. Calculator(계산기) 이번 포스팅에서는 이전에 했던 기능을 확장하여 윈도우에서 제공하는 계산기처럼 비슷한 계산기를 만들어보겠습니다. 1.1 UI 먼저 사용자가 값을 누르고 계산을 수행할 UI를 만들어보겠습니다. 새로운 Screen을 만들어주겠습니다. MainFlow의 오른쪽 마우스를 눌러 Add Screen을 누른 후 Empty template을 선택하고 이름은 Calculator라고 지어줍니다. 그리고 왼쪽 도구모음에서 Input을 선택하여 화면에 드래그해준 뒤 크기를 아래와 같이 조정해 줍니다. 추가로 Calculaotr에 Local Variable을 하나 만들어주고 방금 만든 Input에 변수로 설정해 줍니다. 참고로 변수의 name은 Display이고 Data type은 Text입니다..
이번 포스팅에서는 Switch문을 이용하여 덧셈,뺄셈,곱셈,나눗셈을 해보겠습니다. 1. Switch 이전에 했던 Assign은 다 지워주고 아래처럼 Switch를 놓고(왼쪽의 Switch를 드래그) 4개의 Assigin을 끌고와 놓아주고 Label과 Condition을 아래와 같이 변경해줍니다. 그리고 각각의 Assign을 덧셈,뺄셈,곱셈,나눗셈에 맞게 Assignments를 지정해줍니다. 화면의 각각의 Assign 클릭하고 Variable과 value의 값을 논리에 맞게 지정해줍니다. 순서대로 덧셈, 뺄셈, 곱셈, 나눗셈 입니다. 그리고 Switch 아래에 Clear 버튼을 위한 Assgin을 하나 더 추가해줍니다. Property도 다음과 같이 설정합니다. Clear버튼을 클릭할 경우 사용자가 입력한..
이번 포스팅에서는 If, Else를 이용한 덧셈 뺄셈을 해보겠습니다. 시작하기에 앞서 저번포스팅에 세 만들었던 것들을 Container로 묶어줍니다. 그리고 딱 붙어있는 게 보기 안 좋아서 margin을 주었습니다. margin은 properties의 style classes에서 설정가능합니다. 1. If,Else 1.1 뺄셈버튼 Add을 복사 붙여넣기 하고 Rename 하여 Substract 버튼을 만들어줍니다. 1.2 Action 설정 먼저 AddOnClick의 이름을 변경해줍니다. 이름은 PerformAction으로 변경했습니다. 그리고 PerformAction의 오른쪽 마우스를 눌러 Add Input Parameter를 만들고 name은 type으로 해줍니다. 그다음 Add 버튼을 클릭한 후 오른..
