Tabs

탭은 여러 페이지를 하나의 화면으로 구성하고, 사용자가 쉽게 탐색할 수 있도록 한다. 각 탭은 관련된 Screen과 연결정보를 가지고 있으며, 다른 Tab을 Click하면 동일한 브라우저 창 내에서 다른 Screen으로 이동할 수 있다.

• How to Create:

1. New Component Popup에서 Tabs 타입을 선택하고 Next를 Click한다. (Step1)

2. Component Name과 Screen에서 표시되는 명칭(Symbolic String or Custom Name)을 입력한 다음, Next를 Click한다.

   INFO

   Data 연결이 필요하지 않아 Step2의 Business Object 선택 및 Step4의 FieldMapping 단계는 Skip된다.

• 적용 가능한 Component Attribute

  1. Style - Text Color: Tab Control의 글자 색을 설정한다.
  2. Style - Background Color: Step Component의 배경색을 설정한다.
  3. Style - Flat Appearance: Border 관련 객체로 Border 너비, 색상을 설정한다.

• 사용 가능한 Service

  Name	Platform	Description
  Tab-click	Web	Tab Component가 Click될 때 발생되는 Event

  Tab Service는 거의 등록하지 않는다. 그러나 Tab을 Click할 Event를 표시하기 위해 Tab-click Service를 등록하기도 한다.

  1. Tab-click: Tab Component가 Click될 때 호출되는 Event이다.

  INFO

  Tab-click Event의 Service, Action Design의 특징은 특정 Tab을 Click하는 정보를 구분하기 위한 Check Action, Lambda Action을 사용해 Tab Click 시 수행될 Event를 구현한다. 주로 연결된 Component의 Reload Action을 등록하여 Tab을 Click하는 순간 Data를 reload하도록 한다.

  

• 사용 가능한 Control

  1. Tab Pane: 각각의 Tab을 지칭하는 Control이다.

  Appendix. Tab Component를 이용해 상세 Screen의 하단에 여러 개의 Component를 연결하는 방법

  [그림1. 구성된 예시 화면]

  

  [그림2. Tab 구성관련 Component 도식화]

  

  2. Screen 상단의 Component(①)를 load할 때, Component-Interface Action을 통해 연결할 Component(③)의 Data를 조회할 Parameter를 설정하고, Optional 속성의 Reload Flag를 Yes로 설정한다.

  

  3. Tab Component의 Canvas(Detail)에 연결할 Component의 개수 만큼 TabPane Control을 설정한다.

  

  4. Tab Component(②)와 연결된 Component(③)을 Component(①)가 등록된 Screen에 모두 등록한다. ③번 Component의 Tab Pane Id에 Tab Component(②)의 TabPane을 설정한다.

  

  INFO

  Component 속성에서 Tab Pane Id를 등록할 수 있지만, 1개의 Component에 여러 개의 Screen이 연결되는 경우는 적합하지 않다. 따라서 Screen 하위 속성인 Related Component List 속성의 Tab Pane Id를 사용한다.

  5. Tab에 연결되는 Component(③)의 Load Service에 a단계에서 설정한 Target Parameter를 이용해 Check Action(Parameter 값 보유 여부)와 Data 조회 Lambda Action을 등록한다.

  [그림1. 연결할 Component의 load service 구성 화면]

  

  [그림2. 위 그림의 Check Action]

  

  [그림3. 1번 그림의 Data 조회를 위한 Lambda 기본 정보]

  

  [그림4. 1번 그림의 Data 조회 Key 값 설정 화면]