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

아티클
06/10/2015

LightSwitch를 사용하여 모바일 사용자가 전화기, 태블릿 등의 최신 터치식 장치로 원격 위치에서 데이터를 보고 추가하고 업데이트할 수 있는 HTML 클라이언트를 만들 수 있습니다. 이 연습에서는 가상 이사 업체인 Contoso Moving의 클라이언트를 만들어 고객 서비스 직원이 각 이사 작업에 필요한 인력, 트럭 및 상자의 수량을 손쉽게 예측할 수 있도록 지원합니다.

Contoso의 예약 직원은 사무실에서 직접 고객을 만나거나 전화를 통해 상담하고 후속 방문을 예약하는 데 대부분의 시간을 보냅니다. 이러한 직원은 키보드 및 마우스를 통한 데이터 입력이 많은 작업을 효과적으로 지원하는 Silverlight 기반의 서식 있는 데스크톱 클라이언트를 사용합니다. 이와는 대조적으로 기획 담당자는 하루 종일 이동하며 여러 곳을 후속 방문하여 각 방의 크기, 이삿짐 및 입력 조건 등의 정보를 기록합니다. 이러한 모바일 사용자의 경우 예약 직원에게 받은 후속 방문 정보를 표시할 뿐 아니라 특정 유형의 데이터를 직업 입력하고, 사진을 찍고, 주차 제한 정보 및 기타 세부 정보를 이사 팀에게 알려 줄 수 있는 클라이언트가 필요합니다.

예약 직원을 위한 데스크톱 클라이언트는 이미 만들었습니다. 이제는 예약 직원이 잡은 약속을 추적하고 각 이사 건에 대한 세부 정보를 입력할 수 있는 기획 담당자의 모바일 클라이언트를 만들어봅니다.

사전 요구 사항

ContosoMoving 샘플 응용 프로그램을 다운로드합니다.

시작

모바일 클라이언트를 만들기 전에, 다운로드한 데스크톱 클라이언트의 샘플 데이터 몇 가지를 만듭니다.

샘플 데이터를 만들려면

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

시/도, 직원, 고객 및 약속 엔터티의 샘플 데이터가 만들어집니다.
도구 모음에서 저장 단추를 선택합니다.
메뉴 모음에서 홈을 선택합니다.
도구 모음에서 새로 고침 단추를 선택합니다.

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

모바일 클라이언트 추가

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

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

솔루션 탐색기에서 ContosoMoving 노드를 선택합니다.
메뉴 모음에서 프로젝트, 클라이언트 추가를 선택합니다.
클라이언트 추가 대화 상자에서 HTML 클라이언트를 선택하고 이름을 MobileClient로 입력한 다음 확인 단추를 선택합니다.

MobileClient 프로젝트 노드가 솔루션 탐색기에 추가됩니다.

화면 만들기 및 탐색 정의

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

홈 화면을 만들려면

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

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

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

모바일 클라이언트가 브라우저에 표시됩니다.

이 때 화면에는 약속만 표시됩니다. 다음은 사용자가 약속을 눌렀을 때 해당 약속의 세부 정보가 표시될 세부 정보 화면을 추가합니다.

세부 정보 화면을 만들려면

화면 디자이너에서 예정된 약속 노드를 선택합니다.
속성 창에서 항목 탭:없음 링크를 선택합니다.
ItemTap 작업 편집 대화 상자에서 기존 메서드 선택 옵션 단추를 선택한 후 목록에서 UpcomingAppointments.ViewSelected를 선택합니다.
탐색 목록에서 **(새 화면)**을 선택한 다음 확인 단추를 선택합니다.

새 화면 추가 대화 상자가 나타납니다.
새 화면 추가 대화 상자에서 세부 정보 보기 화면 템플릿을 선택합니다.
화면 이름 텍스트 상자에 ViewAppointment를 입력합니다.
화면 데이터 목록에서 약속을 선택합니다.
약속 세부 정보, 약속 사진 및 약속 방 확인란을 선택한 다음 확인 단추를 선택합니다.

화면 디자이너에서 탭 레이아웃이 만들어지며 다른 종류의 데이터가 탭별로 구성됩니다.
메뉴 모음에서 디버깅 시작을 선택하여 모바일 클라이언트를 실행합니다.
약속을 눌러 약속 보기 화면을 표시합니다.
브라우저 창의 크기를 변경하여 두 열과 한 열 간에 레이아웃이 어떻게 변경되는지 확인합니다.

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

솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 행 레이아웃 | 세부 정보 노드를 선택합니다.
시작 날짜, 종료 날짜, 메모, 이사 유형, 직원 및 고객 노드를 삭제합니다.
시/도 노드를 이동하여 구/군/시 노드 아래에 표시되도록 합니다.
행 레이아웃 | 오른쪽 노드를 선택하고 추가 노드를 확장한 다음 기타 화면 데이터를 선택합니다.

화면 데이터 추가 대화 상자가 표시됩니다.
추가할 화면 데이터 지정 텍스트 상자에 Customer.Phone을 입력한 후 확인 단추를 선택합니다.
추가 노드를 확장한 다음 기타 화면 데이터를 선택합니다.

화면 데이터 추가 대화 상자가 표시됩니다.
추가할 화면 데이터 지정 텍스트 상자에 Customer.Email을 입력한 후 확인 단추를 선택합니다.

모달 대화 상자를 만들려면

솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 세부 정보 탭의 명령 모음 노드에 대한 바로 가기 메뉴를 연 후 단추 추가를 선택합니다.
단추 추가 대화 상자에서 기존 메서드 선택 옵션 단추를 선택한 후 목록에서 Appointment.edit을 선택합니다.
탐색 목록에서 **(새 화면)**을 선택한 다음 확인 단추를 선택합니다.

새 화면 추가 대화 상자가 나타납니다.
화면 이름 텍스트 상자에 EditAppointment를 입력한 후 확인 단추를 선택합니다.

속성 창에 대화 상자로 표시 확인란이 선택되어 있으며 이는 화면이 모달 대화 상자로 표시됨을 의미합니다.
화면 디자이너에서 열 레이아웃 | 열 노드를 삭제합니다.
추가 노드를 확장한 다음 기타 화면 데이터를 선택합니다.

화면 데이터 추가 대화 상자가 표시됩니다.
추가할 화면 데이터 지정 텍스트 상자에 Appointment.Customer.FirstName을 입력한 후 확인 단추를 선택합니다.
추가 노드를 확장한 다음 기타 화면 데이터를 선택합니다.

화면 데이터 추가 대화 상자가 표시됩니다.
추가할 화면 데이터 지정 텍스트 상자에 Appointment.Customer.LastName을 입력한 후 확인 단추를 선택합니다.
추가 노드를 확장한 다음 기타 화면 데이터를 선택합니다.

화면 데이터 추가 대화 상자가 표시됩니다.
추가할 화면 데이터 지정 텍스트 상자에 Appointment.Customer.Phone을 입력한 후 확인 단추를 선택합니다.
추가 노드를 확장한 다음 기타 화면 데이터를 선택합니다.

화면 데이터 추가 대화 상자가 표시됩니다.
추가할 화면 데이터 지정 텍스트 상자에 Appointment.Customer.Email을 입력한 후 확인 단추를 선택합니다.
왼쪽 창에서 주소, 구/군/시, 시/도 및 우편 번호를 전자 메일 노드 아래로 끌어옵니다.

참고

끌어오는 방법 대신, 이름 및 성 필드와 같은 단계를 수행하여 주소, 주소란2, 구/군/시, 시/도 및 우편 번호 필드를 추가할 수도 있습니다.

대화 상자를 표시하려면

솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 약속 편집 노드를 선택합니다.
속성 창에서 아이콘 목록을 확장한 다음 편집을 선택합니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 모바일 클라이언트를 실행합니다.
실행 중인 클라이언트에서 약속을 눌러 약속 보기 화면을 엽니다.
약속 편집 단추를 눌러 대화 상자를 표시합니다.

확인 및 취소 단추는 자동으로 포함되어 있습니다.

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

클라이언트의 사용자 인터페이스를 사용자 지정하는 방법에는 화면 디자이너에서 설정을 변경하는 방법뿐 아니라 사용자 지정 컨트롤을 추가하고 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 라이브러리에 대한 참조를 추가합니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 클라이언트를 실행합니다.

약속에 서식이 지정되며 시간 및 전화 번호가 추가됩니다.

레이아웃을 타일 목록으로 변경하려면

솔루션 탐색기에서 홈 화면을 엽니다.
화면 디자이너에서 목록 | 예정된 약속 노드를 선택한 다음 목록에서 타일 목록을 선택합니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 클라이언트를 실행합니다.

홈 화면에 예정된 약속이 타일식 레이아웃으로 표시됩니다. 브라우저 창의 너비를 변경하여 타일 레이아웃이 창의 너비에 맞게 동적으로 조정되는 것을 확인합니다. 이 시연을 통해 모바일 장치의 화면 크기와 방향에 따라 목록 레이아웃이 변경되는 방식을 확인할 수 있습니다.

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

솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 행 레이아웃 | 세부 정보 노드를 선택합니다.
코드 작성 목록에서 Details_postRender를 선택합니다.

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

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

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

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

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

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

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

Contoso Moving의 기획 담당자는 약속 세부 정보 화면의 약속 사진 탭을 사용하여 고객 사이트의 사진을 찍어 작업을 더 정확하게 견적할 수 있습니다. 이 작업을 수행할 수 있도록 사용자 지정 컨트롤을 클라이언트에 추가합니다.

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

솔루션 탐색기에서 스크립트 노드에 대한 바로 가기 메뉴를 열고 추가를 선택한 다음 기존 항목을 선택합니다.
기존 항목 추가 대화 상자에서 ContosoMoving 폴더를 찾아 이동한 다음 샘플 리소스 폴더를 엽니다.
image_uploader-base64-file-encoder 및 image-uploader 파일을 선택한 다음 추가 단추를 선택합니다.
default.htm 파일을 연 다음 코드 편집기에서 참조용 스크립트 블록의 끝 부분에 image-uploader.js에 대한 참조를 다음과 같이 추가합니다.
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 목록 | 사진 노드를 선택한 다음 목록에서 타일 목록을 선택합니다.
속성 창에서 높이 속성 목록을 열고 나서 컨테이너에 맞게 늘이기를 선택합니다.
최소값 텍스트 상자에 150을 입력합니다.
화면 디자이너에서 사진 탭의 명령 모음 노드에 대한 바로 가기 메뉴를 연 후 단추 추가를 선택합니다.
단추 추가 대화 상자에서 기존 메서드 선택 옵션 단추를 선택한 후 목록에서 Photos.addEditNew를 선택한 후 확인 단추를 선택합니다.

새 화면 추가 대화 상자가 나타납니다.
화면 이름 텍스트 상자에 UploadPhoto를 입력한 후 확인 단추를 선택합니다.
화면 디자이너에서 행 레이아웃 | 오른쪽 노드를 삭제합니다.
캡션 노드를 선택한 후 컨트롤 형식을 텍스트 영역으로 변경합니다.
사진 노드를 선택한 후 컨트롤 형식을 사용자 지정 컨트롤로 변경합니다.
속성 창에서 Render 코드 편집 하이퍼링크를 선택합니다.
코드 편집기에서 Picture1_render 함수에 대한 다음 코드를 추가합니다.
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
이 코드는 화면이 렌더링될 때 ImageUploader 사용자 지정 컨트롤을 초기화합니다.
솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 사진 추가 단추 노드를 선택한 다음 아이콘 속성을 사진 추가로 변경합니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 클라이언트를 실행합니다.
실행 중인 클라이언트에서 약속을 누릅니다.
약속 세부 정보 화면에서 사진 탭을 누릅니다.
사진 추가 단추를 눌러 이미지 업로더 대화 상자를 엽니다.

고객 주소 매핑

기획 담당자는 고객 사이트를 찾을 수도 있어야 하므로 이번에는 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>

솔루션 탐색기에서 ViewAppointment 화면을 엽니다.
화면 디자이너에서 탭 노드의 바로 가기 메뉴를 열고 탭 추가를 선택합니다.
속성 창에서 이름 속성의 값을 맵으로 설정합니다.
행 레이아웃 | 맵 노드의 바로 가기 메뉴를 열고 사용자 지정 컨트롤 추가를 선택합니다.

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

코드 편집기에서 다음 유틸리티 메서드를 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,


        height: "400"
    });
};

Appointment_render 함수에 대한 다음 코드를 추가합니다.

updateMap(element, contentItem);
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 Moving 회사 로고를 추가하여 클라이언트를 개인 설정합니다.

제목을 변경하려면

솔루션 탐색기에서 default.htm 파일을 연 다음 코드 편집기에서 <title>MobileClient</title> 요소를 다음 코드로 바꿉니다.
```
<title>Contoso Moving Mobile</title>
```

아이콘을 추가하려면

솔루션 탐색기에서 콘텐츠 및 이미지 노드를 확장합니다.
user-logo.png 파일을 삭제합니다.
이미지 노드에 대한 바로 가기 메뉴를 열고 추가를 선택한 다음 기존 항목을 선택합니다.
기존 항목 추가 대화 상자에서 ContosoMoving 폴더를 찾아 이동한 다음 샘플 리소스 폴더를 엽니다.
user-logo.png 파일을 선택한 다음 추가 단추를 선택합니다.

참고

또한 user-splash-screen.png 파일을 바꾸면 시작 화면에 표시되는 이미지를 사용자 지정할 수도 있습니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 클라이언트를 실행합니다.

참고

먼저 브라우저 캐시를 지워야 변경 사항이 표시됩니다.

테마 변경

CSS 스타일시트를 만들어 클라이언트의 테마를 정의할 수 있습니다. 기본 테마를 수정하여 클라이언트의 모양을 변경하거나 .css 파일을 변경하여 해당 테마를 바꿀 수 있습니다. 웹 도구인 ThemeRoller를 사용하여, 사용자 지정된 테마가 포함된 a.css 파일을 만듭니다.

테마 간에 전환하려면

솔루션 탐색기에서 default.htm 파일을 연 다음 코드 편집기에서 <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />, <link rel="stylesheet" type="text/css" href="Content/msls-light.css" /> 줄의 “light”를 dark로 바꿉니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 클라이언트를 실행합니다.

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

웹 브라우저에서 ThemeRoller 웹 사이트로 이동합니다.
ThemeRoller 도구 모음에서 가져오기 또는 업그레이드 단추를 선택합니다.

테마 가져오기 대화 상자가 나타납니다.
Visual Studio 솔루션 탐색기의 도구 모음에 있는 목록에서 파일 뷰를 선택합니다.
콘텐츠 노드를 확장한 다음 dark-theme.css 파일을 엽니다.
코드 편집기에서 파일의 전체 내용을 복사합니다.
ThemeRoller에서 dark-theme.css 파일의 내용을 테마 가져오기 대화 상자에 붙여넣은 다음 가져오기 단추를 선택합니다.
왼쪽 창에서 전역 탭을 선택한 다음 모서리 반지름 노드를 확장합니다.
그룹 텍스트 상자에 0.8em을 입력합니다.
단추 텍스트 상자에 1.5em을 입력합니다.

오른쪽 창에 있는 UI 요소의 모서리가 둥글게 변합니다.
오른쪽 창에서 색상표의 한 색상을 견본 A의 배경 영역으로 끌어 옵니다.
다른 색상을 라디오 요소로 끌어 옵니다.

관련된 모든 요소의 색상도 변경됩니다. 한 요소를 가리키면 보색으로 변경되어 선택 색상을 나타냅니다.
ThemeRoller 도구 모음에서 다운로드 단추를 선택합니다.
테마 다운로드 대화 상자에서 테마의 이름을 my-theme로 지정한 다음 Zip 파일 다운로드 단추를 선택합니다.
압축 파일의 내용을 로컬 폴더에 추출합니다.
솔루션 탐색기에서 콘텐츠 노드에 대한 바로 가기 메뉴를 열고 추가를 선택한 다음 기존 항목을 선택합니다.
기존 항목 추가 대화 상자에서 파일을 추출했던 폴더를 찾아 이동한 다음 my-theme.css 파일을 선택하고 추가 단추를 선택합니다.
default.htm 파일을 연 다음 코드 편집기에서 <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> 줄을 찾아 "dark-theme"를 my-theme로 바꿉니다.
메뉴 모음에서 디버그, 디버깅 시작을 선택하여 클라이언트를 실행합니다.

다음 단계

이제 작동 가능한 모바일 클라이언트 응용 프로그램이 만들어졌습니다. 이 응용 프로그램을 모바일 장치에서 테스트하려면 IIS(인터넷 정보 서비스) 또는 Microsoft Azure에 게시합니다.

참고 항목

기타 리소스

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

방법: 3계층 LightSwitch 응용 프로그램 배포

방법: Microsoft Azure에서 LightSwitch 응용 프로그램 호스팅

다음을 통해 공유