생성

UDC 생성

1. UDC로 사용할 화면 파일을 작성합니다.

2. 하단의 Info 탭을 클릭합니다.

3. General 탭에서 해당 화면 파일의 일반적인 정보를 입력합니다.

4. 팔레트에 등록하기 위해 Register Palette 항목을 지원으로 선택하십시오.

5. Component 탭을 클릭한 후, UDC 컴포넌트 정보를 입력합니다.

6. Property 탭을 클릭합니다.

7. 행을 추가한 후 UDC에 추가할 속성을 입력하십시오.

8. $p.getOptions() 함수를 사용하여 Script 탭에서 속성 값을 구현하십시오. (API 혹은 이벤트를 추가한 후 method 생성 혹은 event 생성 버튼을 클릭할 경우 추가한 속성에 대한 주석이 Script 탭에 자동 생성됩니다.)

9. APIs 탭을 클릭합니다.

10. 행 추가 버튼을 클릭하여 행을 추가합니다.

11. 생성할 함수명과 설명을 입력한 후, method 생성 버튼을 클릭합니다.

12. Script 탭으로 이동하여 아래와 같이 추가한 API에 대한 주석과 코드가 생성된 것을 확인합니다.

13. 해당 API를 구현합니다.

14. Event 탭을 클릭합니다.

15. 행 추가 버튼을 클릭하여 행을 추가합니다.

16. 생성할 이벤트 명과 설명을 입력한 후, event 생성 버튼을 클릭합니다.

17. Script 탭으로 이동하여 아래와 같이 추가한 이벤트에 대한 주석과 코드가 생성된 것을 확인합니다.

18. 이벤트 발생 시점을 정의합니다.

19. 화면 파일을 /cm/udc/ 폴더로 이동합니다.

20. Palette 탭으로 이동한 후 Refresh Palette 버튼을 클릭합니다.

21. Palette 탭의 UDC 항목에 추가한 화면 파일이 UDC로 표시되는지 확인합니다.

속성 정의 및 구현

함수 정의 및 구현

이벤트 정의 및 구현

API 문서 작성

UDC를 생성한 프로젝트를 우클릭한 후 Update Component API and Doc 메뉴를 클릭합니다.

UDC의 속성, 함수, 이벤트를 설명하는 API 가이드 문서가 "프로젝트/WebSquare Docs/udc_이름/udc_이름.html" 형식으로 생성됩니다.

생성된 문서 중 websquare_docs.html 파일을 클릭하면 아래와 같이 전체 가이드를 확인할 수 있습니다.

자동 완성 기능

UDC가 Palette에 등록되면 UDC 함수에 대한 자동 완성 기능을 Script 탭에서 사용할 수 있습니다.

활용

Palette에서 추가하기

1. 페이지 컴포넌트를 새로 생성합니다.

2. Palette 탭의 UDC 항목에 추가한 UDC 컴포넌트가 표시되는지 확인합니다.

3. 해당 UDC 컴포넌트를 클릭하여 화면 파일에 추가합니다.

4. UDC 생성 시 추가한 속성이 Property 탭에 표시되는지 확인합니다.

5. UDC 생성 시 추가한 이벤트가 Event 탭에 표시되는지 확인합니다.

6. script 버튼을 클릭하면 Script 탭에 이벤트 추가용 코드가 아래와 같이 자동 생성됩니다.

7. 추가한 UDC의 ID를 지정한 후, UDC 생성 시 추가한 함수 및 이벤트를 활용하여 화면을 개발합니다.

$r_title(UDC 함수 사용 예시)
udc1.setColor();
udc1.showValues();
udc1.setTitle();

$r_title(UDC 이벤트 사용 예시)
scwin.udc1_ontitleset = function() {
    alert("The title and the color will be set.");
};

$p.dynamicCreate() 함수를 통한 동적 추가

$p.dynamicCreate() 함수를 사용하여 UDC를 동적으로 추가할 수 있습니다.

Generator를 통한 일괄 생성

UDC를 Generator의 child로 등록한 후, Generator의 insertChild() 함수를 사용하여 UDC 여러 개를 한번에 생성할 수 있습니다.

UDC 1.0 사용하기

SP4 이전 버전에서 생성한 UDC 1.0은 아래 방법으로 사용하십시오.

1. 해당 프로젝트를 우클릭 하고 Properties를 클릭합니다.

2. WebSquare → Resource Folder 메뉴를 선택합니다.

3. UDC 상자에서 UDC가 존재하는 폴더를 선택합니다. (한 개 이상의 폴더를 선택할 수 있습니다.)

4. Palette 우측 상단에 있는 Refresh Palette 버튼을 클릭합니다.

5. UDC 1.0 카테고리에 추가한 UDC가 표시되는지 확인합니다.

6. UDC 파일을 Source 탭에서 확인합니다.