outsystems-Blocks

Blocks

• Blocks(블록)은 기본적으로 재사용 가능한 코드 조각입니다. 블록 안에 다른 위젯, 패턴, 블록을 배치할 수 있어 풍부하고 복잡한 사용자 인터페이스를 구성할 수 있습니다. 
• Blocks(블록)은 사용자 인터페이스 요소이며 화면처럼 디자인됩니다. 따라서 다른 위젯과 심지어 다른 블록도 드래그하여 블록 안에 삽입할 수 있습니다.스크린과 마찬가지로 블록도 입력 매개변수, 로컬 변수 및 스크린액션을 가질 수 있습니다. 또한 블록에는 자리 표시자(PlaceHolders) 및 이벤트(Event)와 같은 일부 독점 요소가 있을 수 있습니다. 또한 화면과 마찬가지로 블록에는 출력 매개변수가 없습니다. 
• 블록은 인터페이스 요소이므로 화면 및 다른 블록 내부에 배치할 수 있습니다. 

 

Placeholder

• 블록을 생성할 때 Placeholder를 사용할 수 있습니다. 블록이 인스턴스화될때 정의할 인터페이스 내의 공간을 예약합니다. 

 

 

 

Block 생성방법

• 제품의 정보를 상세하게 보여주기 위해 블록을 생성해보겠습니다.(자료 : https://www.outsystems.com/ko-kr/training/Learn_Lesson_View.aspx?LessonId=1906&LessonName=demo-how-to-create-a-new-block&)
• 블록을 만들려면 MainFlow에 마우스오른쪽 버튼으로 클릭하면 됩니다. 

 

• 제품 이름 및 가격에 대한 몇 가지 입력 매개변수를 추가해 보겠습니다. 입력 매개변수를 통해 부모의 데이터를 블록 내부에 표시할 수 있습니다. 

• 인터페이스 부분으로 넘어가겠습니다. 캔버스에 몇 가지 위젯을 추가하고 일부 스타일 클래스를 사용하여 제품 정보를 표시하도록 형식을 지정해 보겠습니다. 컨테이너를 하나 만들고 속성의 Style Classes에 다음과 같이 작성해줍니다. "padding-m background-neutral-0 border-radius-soft shadow-m"
• 추가로 방금 만든 컨테이너 안에 컨테이너를 하나 더 만든 후 style을 다음과 같이 작성해줍니다. "heading6" ( Heading 값은 일반적으로 해당 블록 또는 위젯의 제목에 대한 스타일을 정의하는 데 사용)

 

• 이 컨테이너 안에 제품 이름을 표시하는 표현식을 배치해 보겠습니다. Name 입력매개변수를 컨테이너 안으로 드래그해주고 Example 속성에 USB keyboard라 작성해줍니다. 그리고 제품의 가격을 표시하도록 다른 컨테이너를 추가해보겠습니다.(최근 만든 컨테이너 밑에 컨테이너를 하나 더 추가해줍니다)
• 그리고 텍스트 위젯을 드래그하여 Price : 라고 작성해주고 변수 Price를 텍스트 위젯 오른쪽으로 드래그합니다.

• 이것은 입력 매개변수를 사용하여 전달된 제품의 기본정보를 가져옵니다. 이제 인터페이스에 자리 표시자(Place holder)를 추가할 공간을 만들어 보겠습니다. 이 자리표시자는 제품 사진을 동적으로 삽입할 수 있게 해줍니다. 
• 아래 처럼 두개의 컨테이너를 하나로 묶고 열을 7col로 변경해줍니다.  

• 그리고 하나의 컨테이너를 추가하여 2col로 수정해줍니다. 이제 공간이 있으므로 자리표시자를 추가해 보겠습니다. 
• 왼쪽 도구모음에서 place holder를 해당 컨테이너 안으로 드래그해줍니다. 입력 매개변수와 마찬가지로 이름을 정의해야 합니다. Picture로 해주겠습니다.  

• 이제 블록이 완료되었으므로 제품 화면내에서 사용하겠습니다. 
• Products화면으로 돌아와서 ListItem을 우리가 만든 블록으로 바꿉니다. (ListItem 클릭후 delete)블록을 끌어서 놓기만 하면 됩니다.   

• 이 블록에는 필수 입력 매개변수가 있으므로 인스턴스화 할때 적절한 값으로 설정해야합니다. 

• 그림 Place holder(자리표시자)와 관련하여 필수사항은 아닙니다. 컨테이너와 마찬가지로 위젯을 드래그하여 Place holder에 추가할 수 있습니다.  이 경우 이미지를 사용하여 Get Products Aggregate에서 이미 가져오고 있는 제품 사진을 표시해 보겠습니다. 

• 브라우저에서 확인해보겠습니다.