다음을 통해 공유


방법: LightSwitch 응용 프로그램용 HTML 화면에 사용자 지정 컨트롤 추가

LightSwitch 응용 프로그램 클라이언트의 화면에 사용자 지정 HTML 컨트롤을 추가할 수 있습니다. 사용자 지정 컨트롤을 사용하여 LightSwitch의 기본 제공 HTML 컨트롤의 기능보다 뛰어난 방법으로 정보를 표시하거나 수집할 수 있습니다.

사용자 지정 컨트롤 참조

화면에서 사용자 지정 컨트롤을 사용하려면 먼저 프로젝트에 파일 참조를 추가한 후 default.htm 파일에 스크립트 태그를 추가해야 합니다

사용자 지정 컨트롤을 참조하려면

  1. 솔루션 탐색기에서 스크립트 폴더의 바로 가기 메뉴를 열고 추가를 선택한 다음 기존 항목을 선택합니다.

  2. 사용자 지정 컨트롤에 대해 JavaScript(.js) 파일을 선택한 다음 추가 단추를 선택합니다.

    참고

    일부 사용자 지정 컨트롤에서는 추가 지원 파일도 참조해야 합니다.모든 요구 사항에 대해 사용자 지정 컨트롤의 설명서를 참조하십시오.

  3. 프로젝트에 대한 default.htm 파일의 **<script>**섹션에서 다음 예제와 비슷한 스크립트 태그를 추가합니다. 여기서 MyControl은 사용자 지정 컨트롤의 이름입니다.

    <script type=”text/javascript” src=”Scripts/MyControl.js” charset=”utf-8”></script>
    

새 컨트롤 추가 및 기존 컨트롤 교체

화면에 새 사용자 지정 컨트롤을 추가하거나 LightSwitch의 기존 HTML 컨트롤을 교체할 수 있습니다.

화면에 사용자 지정 컨트롤 추가

  1. 화면 콘텐츠 트리에서 임의의 그룹을 선택합니다.

  2. 화면 디자이너 도구 모음의 레이아웃 항목 추가 목록에서 사용자 지정 컨트롤을 선택합니다.

    사용자 지정 컨트롤 대화 상자가 열립니다.

  3. 새 사용자 지정 컨트롤을 위해 데이터 지정 텍스트 상자에 제어할 항목 또는 컬렉션을 입력합니다.

    예를 들어 Customers.selectedItem.PostalCode를 입력하여 고객의 우편 번호에 바인딩하거나 Customers.selectedItem을 입력하여 전체 고객 레코드에 바인딩하십시오.

  4. 컨트롤의 특정 속성에 데이터를 바인딩하는 코드를 추가합니다.

    자세한 내용은 이 항목 뒷부분의 사용자 지정 컨트롤의 속성에 데이터 바인딩을 참조하십시오.

기존 컨트롤을 사용자 지정 컨트롤로 바꾸려면

  1. 화면 콘텐츠 트리에서 교체하려는 컨트롤을 선택합니다.

  2. 속성 창에서 컨트롤 형식 목록을 연 다음 사용자 지정을 선택합니다.

  3. 컨트롤의 특정 속성에 데이터를 바인딩하는 코드를 추가합니다.

    자세한 내용은 이 항목 뒷부분의 사용자 지정 컨트롤의 속성에 데이터 바인딩을 참조하십시오.

데이터를 사용자 지정 컨트롤의 속성에 바인딩

반드시 사용자 지정 컨트롤 추가 대화 상자에서 지정한 데이터를 사용자 지정 컨트롤의 특정 속성에 바인딩해야 합니다.

데이터를 사용자 지정 컨트롤의 속성에 바인딩하려면

  1. 화면 콘텐츠 트리에서 사용자 지정 컨트롤을 선택합니다.

  2. 속성 창에서 Render 코드 편집 하이퍼링크를 선택합니다.

  3. 코드 편집기에서 다음 예제와 비슷한 코드를 렌더 메서드에 추가합니다.

    createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);
    

    이 코드는 런타임에 컨트롤을 렌더링합니다. MyControl을 컨트롤 이름으로 바꾸고, 필요에 따라 max-height 및 max-width 매개 변수를 변경합니다.

  4. 컨트롤에 필요한 추가 기능을 위한 코드를 추가합니다. 모든 요구 사항에 대해 사용자 지정 컨트롤의 설명서를 참조하십시오.

참고 항목

기타 리소스

LightSwitch 응용 프로그램용 HTML 클라이언트 화면