방법: 화면 디자이너를 사용하여 HTML 화면 디자인
화면 디자이너를 사용하여 Visual Studio LightSwitch 응용 프로그램용 HTML 클라이언트의 화면 모양을 수정할 수 있습니다. 예를 들어 디자이너를 사용하여 다음 작업을 수행할 수 있습니다.
화면에 정보 그룹 추가
그룹 레이아웃 수정
단추를 추가합니다.
항목을 추가합니다.
항목 제거.
항목 이동.
항목의 표시 이름 변경
항목의 레이블 위치 변경
항목의 크기 변경
항목 표시 또는 숨김
항목의 컨트롤 형식 변경
화면에 사용자 지정 컨트롤 추가
변경 취소
페이징 사용 또는 사용 안 함
화면에 탭 추가
화면 내용 트리에서 탭 노드의 바로 가기 메뉴를 열고 탭 추가를 선택합니다.
속성 창에서 그룹 속성을 선택하고 탭의 이름을 입력합니다.
표시 이름 속성을 선택한 다음 탭에 표시할 이름을 입력합니다.
스크린 콘텐츠 트리에서 새 탭을 선택하고 추가 목록을 연 다음 탭에 표시하고 싶은 항목을 선택합니다.
화면에 정보 그룹 추가
화면 콘텐츠 트리에서 정보 그룹을 추가할 노드를 선택합니다.
화면 디자이너 도구 모음에서 레이아웃 항목 추가 목록을 연 다음 그룹을 선택합니다.
새 그룹이 나타납니다.
속성 창의 이름 텍스트 상자에 그룹 이름을 입력합니다.
스크린 콘텐츠 트리에서, 새 그룹을 선택하고 추가 목록을 연 다음 그룹에 표시하고 싶은 항목을 선택합니다.
그룹 레이아웃 수정
화면 콘텐츠 트리에서 수정하려는 그룹의 목록을 엽니다.
목록에는 그룹에 사용할 수 있는 모든 컨트롤 형식이 표시됩니다.
목록에서 컨트롤 유형을 선택합니다.
선택한 컨트롤 유형은 그룹의 레이아웃에 영향을 줍니다. 각 컨트롤 유형에 대한 자세한 내용은 참조: 화면 디자이너 속성을 참조하십시오.
단추 추가
화면 콘텐츠 트리에서 단추를 나타내려는 노드를 선택합니다.
화면 디자이너 도구 모음에서 레이아웃 항목 추가를 선택한 다음 단추를 선택합니다.
단추 추가 대화 상자가 표시됩니다.
항목 추가
화면 디자이너의 화면 멤버 목록에서 화면 콘텐츠 트리의 적절한 위치로 항목(예를 들어, 필드 또는 명령)을 끌어 놓습니다.
항목을 끌면 포인터가 제공된 위치로 항목을 이동할 수 있는지 여부를 나타냅니다. 포인터가 슬래시가 있는 원형으로 변경되면 그 위치에 항목을 끌어 놓을 수 없습니다.
화면에 사용자 지정 필드를 추가하는 방법에 대한 자세한 내용은 방법: HTML 화면에 로컬 속성 추가를 참조하십시오.
항목 제거
화면 콘텐츠 트리에서 제거하려는 항목(예, 필드 또는 명령)을 선택합니다.
화면 디자이너 도구 모음에서 삭제 단추를 선택합니다.
항목 이동
스크린 콘텐츠 트리에서, 해당 항목(예: 필드 또는 명령)을 다른 위치로 드래그합니다.
예를 들어 PostalCode 필드를 Country 필드 아래에 나타나도록 끌거나 편집 단추를 삭제 단추 위에 나타나도록 끌어가십시오.
참고
필드를 끌면 포인터가 제공된 위치로 항목을 이동할 수 있는지 여부를 나타냅니다.포인터가 슬래시가 있는 원형으로 변경되면 그 위치로 항목을 이동할 수 없습니다.
항목의 표시 이름 변경
화면 콘텐츠 트리에서 항목을 선택합니다(예: 필드 또는 명령).
속성 창의 표시 이름 아래에 있는 텍스트 상자에서 항목의 다른 이름을 입력합니다.
항목의 표시 이름을 변경하는 경우 화면에 나타나는 이름만 변경합니다. 항목의 Name 속성은 동일하게 유지됩니다.
항목의 레이블 위치 변경
화면 콘텐츠 트리에서 필드를 선택합니다.
속성 창에서 Label Position 아래 목록을 열고 나서 사용자가 원하는 위치를 선택합니다.
다음 표는 각 옵션에 대해 설명합니다.
레이블 위치
설명
Left-aligned
레이블이 컨트롤 왼쪽 근방에 나타납니다.
Right-aligned
레이블이 컨트롤 오른쪽 근방에 나타납니다.
Top
레이블이 컨트롤 위에 나타납니다.
Hidden
컨트롤의 레이블이 표시되지 않습니다.
없음
컨트롤의 레이블이 표시되지 않으며, 레이블이 있어야 할 위치에 정렬됩니다.
항목의 크기 변경
화면 콘텐츠 트리에서 항목을 선택합니다(예: 필드 또는 명령).
속성 창의 크기 조정 아래에서 컨트롤의 높이 및 너비 크기를 선택합니다.
참고
일부 유형의 컨트롤은 높이 속성을 지원하지 않습니다.
각 설정에 대한 자세한 내용은 참조: 화면 디자이너 속성을 참조하십시오.
항목 표시 또는 숨김
화면 콘텐츠 트리에서 항목을 선택합니다(예: 필드 또는 명령).
속성 창에서 표시됨 속성의 확인란을 선택 또는 취소합니다.
참고
(보이지 않음) 레이블이 디자이너에서 응용 프로그램을 실행할 때 화면에 나타나지 않는 항목 옆에 나타납니다.
항목의 컨트롤 형식 변경
스크린 콘텐츠 트리에서 항목 옆에 있는 목록을 열고 나서 원하는 제어 유형을 선택합니다.
대부분의 컨트롤 형식은 기본 제공입니다. 다른 도구를 사용하여 만든 사용자 지정 컨트롤에 컨트롤 유형을 설정할 수도 있습니다. 자세한 내용은 방법: LightSwitch 응용 프로그램용 HTML 화면에 사용자 지정 컨트롤 추가을 참조하십시오.
화면에 사용자 지정 컨트롤 추가
화면 콘텐츠 트리에서 임의의 그룹을 선택합니다.
화면 디자이너 도구 모음에서 레이아웃 항목 추가 목록을 연 다음 사용자 지정 컨트롤을 선택합니다.
자세한 내용은 방법: LightSwitch 응용 프로그램용 HTML 화면에 사용자 지정 컨트롤 추가을 참조하십시오.
변경 취소
메뉴 모음에서 편집, 실행 취소를 선택합니다.
팁
화면 디자이너에서 편집한 내용을 실수로 취소한 경우 메뉴 모음에서 편집, 다시 실행을 선택합니다.
페이징 사용 또는 사용 안 함
화면 디자이너의 화면 멤버 목록에서 컬렉션 상위 노드(예를 들어, OrderCollection 제목)를 선택합니다.
행의 컬렉션이 크더라도 쿼리에서 반환하는 모든 행을 표시하려면 속성 창에서 페이징 지원 확인란의 선택을 취소합니다. 표시되는 레코드 수를 제한하려는 경우 확인란을 선택하고 각 페이지에 표시할 항목 수를 지정합니다.
참고
사용자는 화면에서 링크를 선택하여 각 결과 페이지를 표시할 수 있습니다.
참고 항목
작업
방법: LightSwitch 응용 프로그램에서 HTML 화면 간 탐색 제어
방법: LightSwitch용 모바일 클라이언트에 단추 추가
방법: LightSwitch 응용 프로그램용 HTML 화면에 사용자 지정 컨트롤 추가