LightSwitch 응용 프로그램에서 화면 모양 사용자 지정

아티클
06/10/2015

이 단원에서는 LightSwitch에서 화면의 레이아웃 및 모양을 변경하는 방법을 배웁니다. 레이아웃이 미리 정의되어 있기 때문에 LightSwitch의 스크린 화면은 일반 개발 도구 양식과 다릅니다. 어떠한 수정 또는 코드 없이 화면을 만들고 실행할 수 있습니다. 그러나 화면을 사용자 지정하거나 향상하는 방법은 다양합니다.

화면 사용자 지정

화면 디자이너를 사용하여 여러 가지 방법으로 화면을 사용자 지정할 수 있습니다. 예를 들어, 표시 이름, 필드 표시 순서 및 필드 제공에 사용되는 컨트롤의 종류를 변경할 수 있습니다.

표시 이름을 변경하려면

솔루션 탐색기에서 BrowseContactLists.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너의 가운데 창에서 맨 위의 화면 | ContactLists 노드를 선택합니다.
속성 창에서 표시 이름 속성을 선택하고 Northwind 연락처를 입력합니다.
솔루션 탐색기에서 AddEditContactList.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너의 가운데 창에서 맨 위의 화면 | ContactList 노드를 선택합니다.
속성 창에서 표시 이름 속성을 선택하고 ContactInformation을 입력합니다.
화면 디자이너에서 ContactName 노드를 선택합니다.
속성 창에서 표시 이름 속성을 선택하고 이름을 입력합니다.
ContactCompany, ContactState, ContactPhone 및 ContactEmail에 대해서도 이 프로세스를 반복하여 표시 이름을 각각 회사, 상태, 전화 및 전자 메일로 변경합니다.

컨트롤 및 표시 순서를 변경하려면

솔루션 탐색기에서 BrowseOrders.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너의 가운데 창에서 맨 위의 타일 목록 | 주문 노드를 선택합니다.
타일 목록 컨트롤 목록을 확장하고 테이블을 선택합니다.

기본적으로 표시되는 타일 목록 대신 테이블 형식으로 주문이 표시됩니다.
솔루션 탐색기에서 ViewContactList.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너 가운데 창에서 ContactPhone 노드를 선택하고 컨트롤 목록을 확장한 다음 텍스트를 선택합니다.

그러면 전화 번호가 기본 전화 번호 뷰어 컨트롤에 의해 표시되는 하이퍼링크가 아닌 일반 텍스트로 표시됩니다.
ContactState 노드를 선택한 다음 ContactCompany 노드 아래로 끌어 내립니다.

변경 내용을 확인하려면

응용 프로그램을 실행합니다. 이제 홈 화면의 제목이 Northwind 연락처로 표시됩니다.
주문 찾아보기 화면을 열면 주문이 테이블 형식으로 표시되어 있는 것을 확인할 수 있습니다.
홈 화면으로 돌아가 연락처 Elizabeth Lincoln의 타일을 선택한 다음 보기 화면에서 고객 정보 탭을 선택합니다.

Northwind 고객 테이블의 정보가 표시되어 있음을 알 수 있습니다.
홈 화면으로 돌아가 연락처 Howard Snyder의 타일을 선택한 다음 고객 정보 탭을 선택합니다.

아무런 정보가 표시되어 있지 않습니다. Northwind 고객 테이블에 일치하는 레코드가 없습니다.
세부 정보 탭을 선택한 다음 편집 단추를 선택하여 편집 화면을 엽니다.

제목이 연락처 정보로 표시되며 필드의 표시 이름이 업데이트되어 있습니다.
대화 상자를 닫은 다음 응용 프로그램을 닫습니다.

자세히 보기

이 단원에서는 화면의 모양을 수정하는 여러 가지 방법에 대해 알아보았습니다. 이 단원에서는 또한 화면 콘텐츠 트리가 화면 디자이너에서 실행 중인 화면에서 사용자 인터페이스와 어떻게 관련되는지를 설명했습니다.

표시 이름 속성을 변경하면 사용자에게 표시되는 사용자 인터페이스 텍스트를 변경한 것입니다. 이전 단원에서는 엔터티 디자이너에서 다른 필드의 표시 이름을 변경했습니다. 엔터티 디자이너에서 표시 이름을 설정할 때 변경 사항이 모든 화면에 전파됩니다. 화면 디자이너에서 설정하면 작업 중인 화면만 변경됩니다.

ContactPhone 필드의 컨트롤 형식을 전화 번호 뷰어에서 텍스트 컨트롤로 바꾸면 각 필드의 사용 가능한 컨트롤 목록에 필드의 기본 데이터 형식에 적합한 컨트롤만 포함되어 있음을 알 수 있습니다. 예를 들어 Text 데이터 형식 필드의 경우 텍스트 상자, 텍스트 영역 또는 텍스트 컨트롤을 선택할 수 있습니다. 이 목록에는 자체 JavaScript 컨트롤을 만들 수 있는 사용자 지정 컨트롤 항목도 포함되어 있습니다. 방법: LightSwitch 응용 프로그램용 HTML 화면에 사용자 지정 컨트롤 추가을 참조하십시오.

예를 들어 ContactState 필드를 목록의 다른 위치에 끌어 넣는 것 이외에 화면 디자이너 왼쪽 창의 필드를 가운데 창으로 끌어 놓을 수 있습니다. 예를 들어, 실수로 ContactState 필드를 삭제하면 왼쪽 창의 연락처 목록에서 다시 끌어 놓을 수 있습니다.

고객 정보 탭을 추가했다면 LightSwitch 응용 프로그램에서 관계 정의 단원에서 만든 관계를 통해 관련된 고객 정보를 끌어옵니다. 다른 소스의 데이터와 연결하는 기능은 LightSwitch의 강력한 기능입니다.