연습: 모바일 사용자를 위한 LightSwitch 클라이언트 만들기

아티클
03/12/2013

사용 하 여 Microsoft LightSwitch for Visual Studio Update 2에 모바일 사용자 수 보기, 추가 및 전화와 태블릿 같은 최신의 터치 지향 장치를 사용 하 여 원격 위치에서에서 데이터를 업데이트 하는 HTML 클라이언트를 만들 수 있습니다.이 연습에서는 고객 서비스 직원이 사람, 트럭 및 상자를 각 작업에 필요한 것 보다 쉽게 예측할 수 있도록 클라이언트 이동 Contoso 가상 이동 회사를 만들게 합니다.

Contoso에 스케줄러는 개인이 직접 또는 전화 잠재 고객에 게 이야기 하 고 방문 후속 작업 정렬 office의 대부분의 시간을 소비 합니다.이러한 작업자는 Silverlight를 기반으로 하며 과도 한 데이터를 입력 하는 키보드와 마우스를 더 잘 지 원하는 풍부한 데스크톱 클라이언트를 사용 합니다.반대로 계획 전문가 하루 종일 방문 후속 작업을 수행 하 여 다양 한 위치 및 각 룸의 크기, 내용 및 항목 요구 사항 등과 같은 정보를 기록에 여행.이러한 모바일 사용자 사진을 가져와서 이동 팀 주차 제한 사항이 나 기타 세부 정보에 대 한 경고를 스케줄러에서 후속 작업 방문할 때마다 정보를 보여 주는 뿐만 아니라 또한 특정 형식의 데이터를 입력을 지 원하는 클라이언트가 필요 합니다.

스케줄러에 대 한 데스크톱 클라이언트 이미 빌드된.계획 전문가 사용 하 여 스케줄러를 정렬 하는 약속을 추적 하 고 각 이동에 대 한 세부 정보를 입력 하는 모바일 클라이언트를 구축해 보겠습니다.

사전 요구 사항

다운로드 및 설치 Microsoft LightSwitch for Visual Studio Update 2.
ContosoMoving 샘플 응용 프로그램을 다운로드 합니다.
다음 절차에서 설명 하는 대로 NuGet 패키지 관리자 확장을 설치 합니다.

NuGet 확장을 설치 하려면

메뉴 모음에서 선택 도구, 확장 및 업데이트.
에 확장 및 업데이트 대화 상자에서 선택 된 온라인 노드.
에 Visual Studio 갤러리 검색 텍스트 상자에 입력 NuGet.
결과 목록에서 선택한 NuGet 패키지 관리자, 다음 선택은 다운로드 단추.

[!참고]

확장을 사용할 수 있도록 Visual Studio 다시 시작 해야 합니다.

시작

모바일 클라이언트를 작성 하기 전에 몇 가지 샘플 데이터 다운로드 데스크톱 클라이언트에 대해 만들어집니다.

샘플 데이터를 만들려면

메뉴 모음에서 파일, 열기, 프로젝트/솔루션을 선택합니다.
다운로드 한 ContosoMoving.sln 파일을 찾습니다 및 다음 파일을 엽니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택합니다.
메뉴 표시줄에서 실행 중인 클라이언트에서 선택 샘플 데이터, 만들기 샘플 데이터.
도구 모음에 만들기 샘플 데이터 화면에서 선택은 모든 샘플 데이터 추가 단추.

샘플 데이터를 생성 하 여에 대 한의 상태, 직원, 고객, 및 약속 엔터티.
도구 모음에서 선택 된 저장 단추.
메뉴 모음에서 선택 홈.
도구 모음에서 선택 된 새로 고침 단추.

예정 된 약속에 대 한 모든 직원의 목록이 표시 되 고 데스크톱 클라이언트에서 다른 화면을 탐색할 수 있습니다.

모바일 클라이언트를 추가 합니다.

다음 HTML 클라이언트 프로젝트를 기존 솔루션에 추가 합니다.

HTML 클라이언트 프로젝트에 추가 하려면

솔루션 탐색기, 선택은 ContosoMoving 노드.
메뉴 모음에서 선택 프로젝트, 클라이언트 추가.
에 클라이언트 추가 대화 상자에서 선택 HTML 클라이언트, 이름을 MobileClient, 다음 선택은 확인 단추.
프로젝트 업그레이드 대화 상자에서 선택 된 확인 단추.

프로젝트 업그레이드 Microsoft LightSwitch for Visual Studio Update 2, 및 마이그레이션 보고서에는 브라우저에 나타납니다.솔루션의 파일 구조를 수정 하 고 해당 버전의 설치는 Lightswitch가 없는 컴퓨터에서 솔루션을 더 이상 열 수 없습니다.

솔루션 탐색기, 데이터 원본 노드 이름이 바뀜 서버, 스크린 노드 이름이 바뀜 클라이언트, 및 노드 추가 명명 된 MobileClient.MobileClient 노드로 표시 된는 시작 클라이언트 응용 프로그램을 디버깅할 때 나타납니다.변경할 수 있는 시작 클라이언트는 클라이언트 노드에 대 한 바로 가기 메뉴를 열고 다음을 선택 시작 클라이언트로 설정.

화면을 만들고 탐색 정의

그런 다음 홈 화면을 만들 고 세부 항목 화면, 스크린 간의 탐색 정의 및 모달 대화 상자를 만듭니다.모바일 클라이언트가 다른 탐색 모델 보다 데스크톱 클라이언트를 사용합니다.일반적으로 하나의 화면에서 모바일 클라이언트를 한 번 표시 되 고 한 화면에서 다른 컴퓨터로 이동할 때 변경 내용이 커밋됩니다.

홈 화면을 만들려면

솔루션 탐색기, 선택은 MobileClient 노드.
메뉴 모음에서 선택 프로젝트, 추가 화면.
에 새 화면 추가 대화 상자에서 선택의 데이터 화면 찾아보기 템플릿.
에 화면 이름 텍스트 상자에 입력 홈.
에 화면 데이터 목록에서 선택 UpcomingAppointments, 다음 선택은 확인 단추.

홈 화면을 사용자 지정 하려면

화면 디자이너에서 선택 된 약속 노드를 다음 선택 행 레이아웃 드롭다운 목록에서.
아래는 행 레이아웃 | 약속 노드를 제외한 모든 노드를 삭제 시작 날짜 및 고객.
메뉴 모음에서 선택 디버깅 시작.

모바일 클라이언트 브라우저에 나타납니다.

이 시점에서 약속만 화면에 표시 됩니다.다음 사용자가 약속을 누르면 약속 세부 정보 표시 되도록 세부 정보 화면을 추가 합니다.

세부 정보 화면을 만들기 위해

솔루션 탐색기, 선택은 MobileClient 노드.
메뉴 모음에서 선택 프로젝트, 추가 화면.
에 새 화면 추가 대화 상자에서 선택 된 보기 세부 정보 화면 템플릿.
에 화면 이름 텍스트 상자에 입력 ViewAppointmentDetail.
에 화면 데이터 목록에서 선택 약속.
선택의 약속 세부 정보, 약속 AppointmentPhotos, 및 약속 장소 확인란을 선택한 다음 선택 된 확인 단추.

화면 디자이너에서는 탭 레이아웃 만들고 다양 한 유형의 데이터 탭으로 구성 됩니다.

세부 정보 화면을 사용자 지정 하려면

솔루션 탐색기을 열고를 ViewAppointmentDetail 화면.
화면 디자이너에서 선택 된 행 레이아웃 | 자세한 내용은 노드.
삭제는 시작 날짜, 종료 날짜, 노트, 이동 유형, 직원, 및 고객 노드.
바로 가기 메뉴를 열고를 탭 노드를 다음 선택 탭 추가.
에 속성 창 설정의 값은 이름 속성을 노트.
화면 디자이너에서 선택 된 행 레이아웃 | 노트 노드를 확장 된 추가 노드를 다음 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Appointment.Notes, 다음 선택의 확인 단추.
선택은 노트 노드를 다음 선택은 텍스트 영역 컨트롤 드롭다운 목록에서.
에 속성 창 설정의 값은 높이 속성을 확장 하 여 컨테이너에.
선택 된 행 레이아웃 | 세부 정보 노드를 확장 된 추가 노드를 다음 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Customer.Phone, 다음 선택의 확인 단추.
선택은 전화 노드를 다음 선택은 전화 번호 편집기 컨트롤 드롭다운 목록에서.
확장 된 추가 노드를 클릭 하 고 다음을 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Customer.Email, 다음 선택의 확인 단추.
선택은 이메일 노드를 다음 선택은 이메일 주소 편집기 컨트롤 드롭다운 목록에서.

탐색을 정의 하려면

솔루션 탐색기을 열고를 홈 화면.
화면 디자이너에서 선택 된 목록 | 예정 된 약속 노드.
에 속성 창에서 선택의 항목을 누릅니다 속성을 다음 선택은 없음 링크.
에 항목 편집을 누릅니다 대화 상자에서 선택 된 기존 메서드를 선택 다음 선택 및 옵션 단추를 showViewAppointmentDetail 드롭다운 목록에서.
에 작업 목록에서 선택 저장.
에 약속 텍스트 상자에 입력 UpcomingAppointments.selectedItem, 다음 선택은 확인 단추.
메뉴 모음에서 선택 디버깅 시작 모바일 클라이언트를 실행 합니다.

각 약속에 다른 화면으로 이동할 수 있는 화살표를 가리킵니다.
표시할 약속 누릅니다의 ViewAppointmentDetail 화면.

모달 대화 상자를 만들려면

솔루션 탐색기을 열고를 ViewAppointmentDetail 화면.
화면 디자이너에서 선택의 대화 상자의 노드를 다음 선택의 추가 노드.
에 속성 창 설정의 값은 이름 속성을 EditContactInformation.
확장 된 추가 노드를 클릭 하 고 다음을 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Appointment.Customer.FirstName, 다음 선택의 확인 단추.
확장 된 추가 노드를 클릭 하 고 다음을 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Appointment.Customer.LastName, 다음 선택의 확인 단추.
확장 된 추가 노드를 클릭 하 고 다음을 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Appointment.Customer.Phone, 다음 선택의 확인 단추.
선택은 전화 노드를 다음 선택은 전화 번호 편집기 컨트롤 드롭다운 목록에서.
확장 된 추가 노드를 클릭 하 고 다음을 선택 기타 화면 데이터.

화면 데이터 추가 대화 상자가 나타납니다.
에 추가할 화면 데이터 지정 텍스트 상자에 입력 Appointment.Customer.Email, 다음 선택의 확인 단추.
선택은 이메일 노드를 다음 선택은 이메일 주소 편집기 컨트롤 목록에서.
왼쪽 창에서 드래그 번 지, 도시, 상태, 및 PostalCode 노드에서 전자 메일.

그 결과 대화 상자의 섹션 예시와 비슷합니다.

[!참고]

드래그 하는 대신 또한 추가할 수는 번 지, 도시, 상태, 및 PostalCode 와 같은 단계를 사용 하 여 필드는 성 및 성 필드.

대화 상자를 표시

솔루션 탐색기을 열고를 ViewAppointmentDetail 화면.
화면 디자이너에서 바로 가기 메뉴를 열고를 행 레이아웃 | 자세한 내용은 노드를 다음 선택 추가 단추.
에 추가 단추 대화 상자에서 선택의 기존 방법 선택 옵션 버튼을 선택 ShowDialog 목록에서 다음 선택의 확인 단추.
선택 된 편집 연락처 정보 표시 노드.
에 속성 창 설정의 값은 이름 속성을 편집.
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.
실행 중인 모바일 클라이언트에서 약속을 열려면 누르십시오 있는 약속 자세히 보기 화면.
눌러은 편집 단추 대화 상자를 표시 합니다.

확인 및 취소 단추 포함 되어 자동으로.

사용자 인터페이스 사용자 지정

화면 디자이너에서 설정을 변경 하 여 뿐 아니라 사용자 지정 컨트롤을 추가 하 고 JavaScript 코드를 작성 하 여 클라이언트의 사용자 인터페이스를 사용자 지정할 수 있습니다.

JavaScript 라이브러리를 사용 하 여 사용자 지정 서식을 적용 합니다.

솔루션 탐색기을 열고를 홈 화면.
화면 디자이너에서 선택 된 행 레이아웃 | 약속 노드를 클릭 하 고 다음 선택 사용자 지정 컨트롤 목록에서.
에 코드 작성 목록에서 선택의 RowTemplate_render 메서드.

다음 코드를 코드 편집기에 추가 된 RowTemplate_render 함수:

myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

이 JavaScript 코드를 사용 하는 contentItem.value 표시할 내용을 결정 하는 멤버 변수 및 format 의 서식을 정의 하는 메서드.

솔루션 탐색기, 선택 파일 보기 의 목록 도구 모음에서.
바로 가기 메뉴에 있는 MobileClient 노드를 선택 NuGet 패키지 관리.
에 NuGet 패키지 관리 대화 상자에서 선택 된 온라인 노드.
에 온라인 검색 텍스트 상자에 입력 moment.js.
선택은 설치 Moment.js 라이브러리를 설치 하려면 단추를 누른 다음 선택은 닫기 단추.
솔루션 탐색기, 확장 된 MobileClient 노드 및 다음 열기는 default.htm 파일.
코드 편집기에서 다음 스크립트 태그 마지막 추가 </script> 태그:
```
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
```
이 태그는 moment.js 라이브러리에 참조를 추가합니다.
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.

약속을 포맷 하 고 시간 및 전화 번호 추가 됩니다.

레이아웃을 변경 하려면

솔루션 탐색기, 선택 논리적 보기 목록 도구 모음에서 열기에는 홈 화면.
화면 디자이너에서 선택 된 목록 | 예정 된 약속 노드를 클릭 하 고 다음 선택 타일 목록 드롭다운 목록에서.
선택 된 사용자 지정 컨트롤 | 약속 노드.
에 속성 창 설정의 값은 너비 280 픽셀 속성.
에 속성 창 설정의 값은 높이 속성을 80 픽셀이.
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.

홈 화면 타일 기반 레이아웃에서 예정 된 약속을 표시합니다.어떻게 레이아웃 타일의 동적 가로 공간을 잘 활용 하기 위해 조정 하는 방법을 보여 주는 브라우저 창의 너비를 변경 합니다.이 데모 방법 목록 레이아웃을 변경할 수 있습니다에 따라 휴대폰의 방향 및 화면 크기에 표시 됩니다.

동적 화면에 제목을 추가 하려면

솔루션 탐색기을 열고를 ViewAppointmentDetail 화면.
화면 디자이너에서 선택 된 행 레이아웃 | 자세한 내용은 노드.
에 코드 작성 목록에서 선택 Details_postRender.

코드 편집기에서 다음 JavaScript 코드를 추가 합니다.

myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Customer.FirstName + " " +
        contentItem.value.Customer.LastName + " " +
        moment(contentItem.value.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.EndDate).format("h:mma");
    };
};

메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.

고객의 이름 및 시작 시간과 종료 시간 약속에 대 한 약속 세부 정보 화면을 표시합니다.

클라이언트를 게시 합니다.

이 지금까지 로컬 브라우저에 표시 하 여 클라이언트를 테스트 했습니다.모바일 장치에서 클라이언트에 액세스 하려면 인터넷 정보 서비스 (IIS)를 게시 해야 합니다.

[!참고]

와 같은 방식으로 Windows Azure 모바일 클라이언트가 게시할 수 있습니다 LightSwitch 응용 프로그램입니다.자세한 내용은 방법: Windows Azure에서 응용 프로그램 호스팅을 참조하십시오.

서버를 구성 하려면

서버에서 응용 프로그램을 배포 됩니다 열 인터넷 정보 서비스 (IIS) 관리자.
에 연결 창에서 서버 노드를 확장 하 고 다음 선택의 기본 웹 사이트 노드.
바로 가기 메뉴를 열고를 기본 웹 사이트 노드를 다음 선택 응용 프로그램 추가.

응용 프로그램 추가 대화 상자가 나타납니다.
에 별칭 텍스트 상자에 입력 ContosoMoving.
에 실제 경로 텍스트 상자에 클라이언트가 파일에 대 한 경로 입력 (예를 들어, C:\inetpub\wwwroot\Contoso), 다음 선택은 확인 단추.
가운데 창에서 바로 가기 메뉴를 열고를 인증 아이콘을 클릭 하 고 다음을 선택 열기 기능.
에 인증 창에서 다음 값 설정:

이름

상태

익명 인증

Enabled

ASP.Net 가장

Disabled

폼 인증

Enabled

Windows 인증

Disabled

이름	상태
익명 인증	Enabled
ASP.Net 가장	Disabled
폼 인증	Enabled
Windows 인증	Disabled

클라이언트를 게시 하려면

에 디버깅 목록 도구 모음에서 선택 릴리스.
솔루션 탐색기, 선택은 ContosoMoving 노드.
메뉴 모음에서 선택 빌드, 게시 ContosoMoving.

LightSwitch 게시 응용 프로그램 마법사가 나타납니다.
에 응용 프로그램 종류 페이지에서 선택 된 완전 한 응용 프로그램 다음 선택 및 옵션 단추를는 다음 단추.
응용 프로그램 서버 구성 페이지에서 IIS 서버 옵션 단추를 선택합니다.
게시 출력 페이지에서 지금 원격으로 서버에 게시 옵션 단추를 선택합니다.
에 서비스 URL 텍스트 상자에 클라이언트를 게시 하려면 IIS를 실행 중인 서버에 대 한 URL을 입력 합니다.
에 사이트 및 응용 프로그램 텍스트 상자에 입력 기본 웹 사이트/ContosoMoving.
에 사용자 이름 텍스트 상자에 IIS를 실행 하는 서버에 대 한 관리 권한을 가진 사용자의 이름을 입력 합니다.
에 암호 텍스트 상자에 사용자에 게 암호를 입력 하 고 다음 선택의 다음 단추.
에 보안 설정 을 페이지에 응용 프로그램 관리자 탭에서 입력 한 사용자 이름, 전체 이름, 및 암호 처음 관리 클라이언트가 액세스할 수 있는 사용자.

중요

이러한 자격 증명을 게시 한 후 클라이언트 액세스를 해야 합니다.
에 HTTPS 탭에서 선택의 HTTPS 필수 사항은 아닙니다. 아니오, 다음 선택 및 옵션 단추를의 다음 단추.

데이터 연결 페이지가 나타납니다.
에 사용자 연결이 지정 텍스트 상자에서 데이터를 호스팅하는 SQL Server 데이터베이스에 대해 연결 문자열을 입력 합니다.

이 데이터베이스는 IIS와 같은 서버 또는 다른 서버에서 수 있습니다.

팁

열려면 줄임표 단추를 선택할 수 있습니다는 연결 속성 대화 상자 및 연결 문자열을 생성 하는 속성을 입력 합니다.
에 게시 데이터베이스 스키마 텍스트 상자에서 동일한 연결 문자열을 입력 합니다.
게시 단추를 선택하여 응용 프로그램을 게시합니다.

중요
이러한 자격 증명을 게시 한 후 클라이언트 액세스를 해야 합니다.

팁
열려면 줄임표 단추를 선택할 수 있습니다는 연결 속성 대화 상자 및 연결 문자열을 생성 하는 속성을 입력 합니다.

클라이언트를 테스트 하려면

웹 브라우저의 주소 표시줄에 입력 http://IISServer/contosomoving/client, IISServer 서버 클라이언트를 게시의 이름입니다.
에 사용자 이름 및 암호 텍스트 상자 클라이언트 관리자에 지정 된 자격 증명을 입력 한 다음 선택은 로그에 단추.
메뉴 모음에서 선택 샘플 데이터, 만들기 샘플 데이터.

[!참고]

프로덕션 데이터베이스에 샘플 데이터를 추가 해야 디자인 타임에 입력 된 데이터 게시 되지 않습니다.
에 만들기 샘플 데이터 화면에서 선택은 모든 샘플 데이터 추가 도구 모음 단추.

샘플 데이터를 생성 하 여에 대 한의 상태, 직원, 고객, 및 약속 엔터티.
도구 모음에서 선택 된 저장 단추.
브라우저의 주소 표시줄에 입력 http://IISServer/contosomoving/mobileclient, IISServer 서버 클라이언트를 게시의 이름입니다.
사용자 이름과 암호를 묻는 메시지가 나타나면 입력 ACarter 는 사용자 및 pass@word1 를 암호로 입력.

Adam 카터에 대 한 예정 된 약속을 표시 합니다.

사진 업로드 하는 사용자 지정 컨트롤 추가

약속 세부 정보 화면에는 약속 사진 탭 이동 Contoso는 계획 전문가 작업을 보다 정확 하 게 추정 하는 고객 사이트의 그림을 수행할 수 있도록 합니다.이 작업을 사용 하려면 클라이언트에서 사용자 지정 컨트롤을 추가 합니다.

사용자 지정 컨트롤을 추가 하려면

솔루션 탐색기, 선택 파일 보기 목록 도구 모음에서.
바로 가기 메뉴를 열고를 스크립트 노드를 선택 추가, 다음 선택 기존 항목.
에 기존 항목 추가 대화 상자에서 이동은 ContosoMoving 폴더, 열기는 리소스 폴더 및 다음 열기는 ImageUploader 폴더.
선택은 base64 파일 인코더 및 이미지 업 로더 파일과 다음 선택은 추가 단추.
Default.htm 파일을 열고 코드 편집기에서 다음 참조 이미지 uploader.js을 스크립트 참조 블록의 끝에 추가:
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
솔루션 탐색기, 선택 논리적 보기 목록 도구 모음에서 및 다음 열기는 ViewAppointmentDetail 화면입니다.
화면 디자이너에서 선택 된 약속 사진 노드를 선택 하 고 열 레이아웃 목록에서.
바로 가기 메뉴를 엽니다의 대화 상자의 노드를 다음 선택 추가.
에 속성 창 설정의 값은 이름 속성을 ImageUploader.
값을 설정할 수 있는 높이 및 너비 속성을 확장 하 여 컨테이너에.
화면 디자이너 왼쪽된 창에서 확장은 AppointmentPhotos 노드 및 다음 끌어서는 선택한 항목 노드에 행 레이아웃 | 이미지 업 로더 노드의 가운데 창에서입니다.
새로 추가한 삭제 약속 노드.
선택은 그림 노드를 클릭 하 고 다음을 선택 사용자 지정 컨트롤 목록에서.
에 속성 창에서 선택에서 렌더링 코드 편집 하이퍼링크.
코드 편집기에서 Picture1_render 함수에 다음 코드를 추가 합니다.
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
화면 렌더링 될 때이 코드 ImageUploader 사용자 지정 컨트롤을 초기화 합니다.
화면 디자이너에서 바로 가기 메뉴를 열고를 행 레이아웃 | 약속 사진 노드를 클릭 하 고 다음 선택 추가 단추.
에 추가 단추 대화 상자에서 선택 된 기존 메서드를 선택 옵션 단추.
에 showDialog 목록에서 선택 AppointmentPhotos.AddAndEditNew.
에 이동 하 목록에서 선택 이미지 업 로더, 다음 선택은 확인 단추.
드래그는 추가 약속 사진 위에 나타나도록 단추는 목록 | 약속 사진 노드.
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.
실행 중인 클라이언트에서 약속을 누릅니다.
눌러 약속 세부 정보 화면에 있는 약속 사진 탭.
눌러는 약속 사진 추가 를 열려면 단추를 이미지 업 로더 대화 상자.

고객의 주소를 매핑해야 합니다.

계획 전문가 고객의 사이트를 찾을 수 있어야, 지금 다음에 기능 Bing 지도 컨트롤을 사용 하 여 매핑을 추가 합니다.

지도 컨트롤에 추가 하려면

솔루션 탐색기, 선택 파일 보기 목록 도구 모음에서.
바로 가기 메뉴를 열고를 스크립트 노드를 선택 추가, 다음 선택 기존 항목.
에 기존 항목 추가 대화 상자에서 이동을 ContosoMoving 폴더 및 다음 열기는 리소스 폴더.
선택은 lightswitch.bing maps.js 파일을 및 다음 선택은 추가 단추.

Default.htm 파일을 열고 코드 편집기에서 참조 스크립트 블록의 시작에 대 한 참조를 추가 합니다.

<script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

스크립트 참조 블록 끝에 JavaScript 파일에 참조를 추가 합니다.

<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

솔루션 탐색기, 선택 논리적 보기 목록 도구 모음에서 및 다음 열기는 ViewAppointmentDetail 화면입니다.
화면 디자이너에서 바로 가기 메뉴를 열고를 탭 노드를 클릭 하 고 다음을 선택 탭 추가.
에 속성 창 설정의 값은 이름 속성을 맵.
드래그는 행 레이아웃 | 맵 이 나타나도록 노드는 행 레이아웃 | 노트 노드.
바로 가기 메뉴를 열고를 행 레이아웃 | 맵 노드를 클릭 하 고 다음 선택 사용자 지정 컨트롤 추가.

사용자 지정 컨트롤 추가 대화 상자가 나타납니다.
에 지정 새 사용자 정의 컨트롤의 데이터를 텍스트 상자에 입력 약속, 다음 선택은 확인 단추.
에 속성 창에서 선택에서 렌더링 코드 편집 하이퍼링크.

다음 유틸리티 메서드 전에 코드 편집기에서 추가 된 Appointment_render 함수:

function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        width: "600",
        height: "400"
    });
};

다음 코드를 추가 된 Appointment_render 함수:

mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

화면 렌더링 될 때이 코드 약속 필드 맵 컨트롤에 바인딩합니다.

메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.
실행 중인 클라이언트에서 약속을 누릅니다.
약속 세부 정보 화면에서를 누릅니다의 맵 탭 고객 주소의 지도를 표시 합니다.

브랜드를 추가 합니다.

그런 다음 클라이언트의 제목, MobileClient 하 고 클라이언트에 맞게 이동 Contoso 회사 로고를 추가 합니다 것 보다 의미 있는 이름 변경 합니다.

제목을 변경 하려면

솔루션 탐색기, 선택 파일 보기 의 목록 도구 모음에서.
Default.htm 파일을 열고 다음 코드 편집기에서 대체 된 <title>MobileClient</title> 요소를 다음 코드로:
```
<title>Contoso Moving Mobile</title>
```

아이콘을 추가 하려면

솔루션 탐색기, 확장 된 콘텐츠 및 이미지 노드.
삭제는 사용자 logo.png 및 사용자-시작-screen.png 파일입니다.
바로 가기 메뉴를 열고를 이미지 노드를 선택 추가, 다음 선택 기존 항목.
에 기존 항목 추가 대화 상자에서 이동을 ContosoMoving 폴더 및 다음 열기는 리소스 폴더.
선택은 logo.png 파일을 및 다음 선택은 추가 단추.
솔루션 탐색기, 바로 가기 메뉴를 엽니다의 logo.png 노드를 선택 이름 바꾸기, 다음을 입력 하 고 사용자 logo.png.
바로 가기 메뉴를 열고를 이미지 노드를 선택 추가, 다음 선택 기존 항목.
에 기존 항목 추가 대화 상자에서 선택의 logo.png 파일을 및 다음 선택은 추가 단추.
솔루션 탐색기, 바로 가기 메뉴를 엽니다의 logo.png 노드를 선택 이름 바꾸기, 다음을 입력 하 고 사용자-시작-screen.png.
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.

[!참고]

변경 내용을 표시 하기 전에 브라우저 캐시를 지워야 할 수 있습니다.

테마 변경

Css 스타일 시트 (CSS)를 사용 하는 클라이언트의 테마를 정의할 수 있습니다..Css 파일을 변경 하 여 해당 테마를 바꿀 수 있습니다, 클라이언트의 모양을 변경 하려면 기본 테마를 수정할 수 있습니다.A.css 파일을 사용자 지정된 테마를 만들려면 Themeroller를 하는 웹 도구를 사용 합니다.

테마 간에 전환 하려면

솔루션 탐색기, 선택 파일 보기 의 목록 도구 모음에서.
Default.htm 파일을 열고 다음 코드 편집기에서 줄 바꾸기 <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> 다음 코드를 사용 합니다.
```
<link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" />
```
솔루션 탐색기, 확장 된 콘텐츠 노드 및 다음 열기는 사용자 customization.css 파일.
파일에 주석 검색 /* if light theme change ‘white’ to ‘black */, 다음 대체 msls-white-icons 과 다음 문자열을 각각 네 개의 항목:
```
msls-black-icons
```
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.

기존 테마를 사용자 지정 하려면

웹 브라우저에서 탐색의 ThemeRoller 웹 사이트.
ThemeRoller 도구 모음의 선택은 가져오기 또는 업그레이드 단추.

가져오기 테마 대화 상자가 나타납니다.
Visual Studio의 솔루션 탐색기, 선택 파일 보기 의 목록 도구 모음에서.
확장은 콘텐츠 노드 및 다음 열기는 조명 theme.css 파일.
코드 편집기에서 파일의 전체 내용을 복사 합니다.
Themeroller에 내용을 붙여 넣습니다.는 라이트 theme.css 파일에 가져오기 테마 대화 상자를 연 다음 선택은 가져오기 단추.
왼쪽된 창에서 선택 된 글로벌 탭을 클릭 한 다음 확장은 모퉁이 반경 을 노드.
에 그룹 텍스트 상자에 입력 0.8em.
에 단추 텍스트 상자에 입력 1.5em.

이제 오른쪽 창에서 UI 요소 둥글게 합니다.
에 B 탭에서 선택 된 삭제 링크.

LightSwitch만 사용 하는 글로벌 및 견본 A 설정 합니다.추가 견본을 제거 하면.css 파일의 크기를 줄입니다.
추가 견본을 제거 하는 프로세스를 반복 합니다.
오른쪽 창에서 색 색상표의 배경 영역에 끌어 견본 A.
다른 색상으로 드래그를 라디오 1 요소.

또한 모든 관련 된 요소 색을 변경합니다.요소를 가리키면 보색 선택 색을 나타내는 색으로 변경 합니다.
ThemeRoller 도구 모음의 선택은 다운로드 단추.
에 테마 다운로드 대화 상자에서 선택 된 다운로드 Zip 단추.
로컬 폴더에 압축된 파일의 압축을 풉니다.
솔루션 탐색기, 바로 가기 메뉴를 엽니다의 콘텐츠 노드를 선택 추가, 다음을 선택 하 고 기존 항목.
에 기존 항목 추가 대화 상자, 압축을 푼 파일이 있는 폴더로 이동 하 고, 선택의 item.css 내 파일과 다음 선택은 추가 단추.
Default.htm 파일을 열, 줄을 찾습니다 <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> 코드 편집기 및 다음 코드 줄의 다음 바꾸기:
```
<link rel="stylesheet" type="text/css" href="Content/my-theme.css" charset="utf-8" />
```
메뉴 모음에서 선택 디버깅, 디버깅 시작 클라이언트를 실행 합니다.

클라이언트에서 다시 게시

클라이언트가 완료 했으므로 IIS를 다시 게시 합니다.

클라이언트에 다시 게시

솔루션 탐색기, 선택은 ContosoMoving 노드.
메뉴 모음에서 선택 빌드, 게시 ContosoMoving.
에 LightSwitch 게시 응용 프로그램 마법사, 선택의 게시 단추는 클라이언트를 게시 합니다.
브라우저의 주소 표시줄에 입력 http://IISServer/contosomoving/mobileclient, IISServer 서버 클라이언트를 게시의 이름입니다.
사용자 이름과 암호를 묻는 메시지가 나타나면 입력 ACarter 는 사용자 및 pass@word1 를 암호로 입력.

클라이언트를 가장 최근의 변경 내용을 반영 합니다.

[!참고]

브라우저 캐시를 지워야 할 수 있습니다.

참고 항목

기타 리소스

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

다음을 통해 공유