연습: Windows 스토어 앱에서 LightSwitch 데이터 사용

아티클
02/21/2013

이 연습을 수행 하 여 만들거나 구성 하는 방법을 배울 수 있는 Windows 스토어 개방형 데이터 프로토콜 (OData) 데이터를 사용 하는에서 지 원하는 다른 응용 프로그램 또는 응용 프로그램 Visual Studio LightSwitch 응용 프로그램.

사전 요구 사항

이 연습을 완료하려면 Windows 8에서 Visual Studio 2012을 실행 중이어야 합니다.Microsoft 웹 사이트에서 MSDN 샘플 갤러리의 Contoso 생성 응용 프로그램을 다운로드하여 readme.txt 파일의 설치 지침을 따라야 할 수도 있습니다.전에 Windows 스토어 응용 프로그램을 만든 적이 없는 경우 Windows 스토어 응용 프로그램에 대한 프로젝트를 만들 때 개발자 라이선스를 구입할 것인지 묻는 메시지가 표시됩니다.

OData 데이터 소스를 노출하는 방법

메뉴 모음에서 파일, 열기, 프로젝트/위치를 선택합니다.
프로젝트 열기 대화 상자에서 ContosoConstruction.sln 파일을 찾아서 해당 파일을 엽니다.
솔루션 탐색기에서 속성의 바로 가기 메뉴를 열고 열기를 선택합니다.
응용 프로그램 디자이너에서 응용 프로그램 유형 탭을 선택합니다.
클라이언트 섹션에서 웹 옵션 단추를 선택합니다.

이 절차에서는 OData 피드로 Contoso 생성 응용 프로그램에 대한 데이터 소스를 모두 노출합니다.

Windows 저장소 응용 프로그램을 만들려면

메뉴 모음에서 파일, 추가, 새 프로젝트를 선택합니다.
JavaScript의 프로젝트 형식 목록에서 분할 응용 프로그램을 선택합니다.
이름 텍스트 상자에서 ContosoProjects를 입력한 후 확인 단추를 선택합니다.

ContosoConstruction 프로젝트가 솔루션에 추가됩니다.

스크립트 라이브러리를 추가하는 방법

메뉴 모음에서 도구, 라이브러리 패키지 관리자, 패키지 관리자 콘솔을 선택합니다.

패키지 관리자 콘솔 창이 열립니다.
패키지 관리자 콘솔 명령 프롬프트에서 설치 패키지 jQuery를 입력한 다음 Enter 키를 선택합니다.
명령이 완료되면 설치 패키지 datajs를 입력하고 Enter 키를 누릅니다.

명령이 완료되면 다음 JavaScript 파일이 솔루션 탐색기의 스크립트 폴더에 나타납니다.
- datajs-1.0.2.js
- datajs-1.0.2.min.js
- jquery-1.7.1.js
- jquery-1.7.1.min.js
- jquery-1.7.1.-vsdoc.js

Windows 저장소 응용 프로그램을 수정 하려면

솔루션 탐색기에서 default.html 파일을 엽니다.

WinJS references 단원에서 다음 참조를 추가합니다.

<!-- jQuery references --> 
  <script src="/Scripts/jquery-1.7.1.js"></script> 
  <!-- datajs references --> 
  <script src="/Scripts/datajs-1.0.2.js"></script>

솔루션 탐색기에서 js 노드를 확장하고 default.js 파일을 엽니다.
var app = WinJS.Application; 줄에서 다음 변수를 추가합니다.
```
var OData = window.OData;
```
솔루션 탐색기에서 data.js 파일을 엽니다.

sampleGroups 섹션의 코드를 다음 코드로 바꿉니다.

var sampleGroups = [ 
        {
            key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.",
            backgroundImage: darkGray
        },
    ];

주석 // TODO: Replace the data with your real data. 다음에서 함수를 찾아 기존 코드를 다음 코드로 바꿉니다.

//Generic function for loading data via a odata url
    function loadData(data, odataUrl, dataLoaded) {
        if (data) {
            return WinJS.Promise.as(data);
        }
        else {
            return new WinJS.Promise(function (complete, error, progress) {
                OData.read(odataUrl,
                function (data) {
                    complete(dataLoaded(data.results));
                },
                function (dataerror) {
                    error(dataerror);
                });
            });
        }
    }


    var projectsODataUrl = "https://localhost:#####/ApplicationData.svc/Projects";
    //TODO: Replace projectsODataUrl with url for deployed OData service
    //  before publishing this application.
    var _projects;
    //Loads projects
    function loadProjects() {
        loadData(_projects, projectsODataUrl, function (results) {
            _projects = results;
            return _projects;
        }).then(function (projects) {
            var items = [];

            $.each(projects, function (l, e) {
                var notes;
                if (e.Notes === null) {
                    notes = "";
                }
                else {
                    notes = e.Notes;
                }
                items.push({
                    displayName: e.ProjectName, subtitle: "Estimate: $" +
                        e.OriginalEstimate, description: "", content: notes
                });
            });
            showProjects(items.sort(), sampleGroups[0]);
        });
    }

    //Adds projects to binding list.
    function showProjects(items, itemGroup) {
        items.forEach(function (item) {
            list.push(
                {
                    group: itemGroup, title: item.displayName,
                    subtitle: item.subtitle, description: item.description,
                    content: item.content, backgroundImage: lightGray
                }
              )
        });
    }

    loadProjects();

Windows 저장소 응용 프로그램의 기능을 지정 하려면

솔루션 탐색기에서 package.appxmanifest 파일을 엽니다.
기능 탭에서 개인 네트워크(클라이언트 및 서버) 확인란을 선택합니다.

이 절차에서는 엔터프라이즈 응용 프로그램을 인트라넷 리소스에 액세스할 수 있습니다.이 설정은 Windows 스토어의 일반적인 Windows 스토어 응용 프로그램에는 필요 없습니다.

응용 프로그램을 디버깅하고 테스트하는 방법

솔루션 탐색기에서 솔루션 노드의 바로 가기 메뉴를 열고 속성을 선택합니다.
여러 개의 시작 프로젝트 옵션 단추를 선택합니다.
작업 열에서 ContosoConstruction 및 ContosoProjects 프로젝트 모두에 대해 시작을 선택합니다.

중요

ContosoContruction이 시작 순서에서 ContosoProjects 이전에 나열되어 있는지 확인합니다.
솔루션 탐색기에서 data.js 파일을 엽니다.
return new WinJS.Promise를 시작하는 줄에서 중단점을 설정합니다.
F5 키를 선택하여 디버깅을 시작합니다.

응용 프로그램에서 로드를 시작한 후 중단점에 도달하면 실행을 중지합니다.
Contoso 생성 응용 프로그램을 실행하고 있는 브라우저 창에서 주소 표시줄의 포트 번호를 복사합니다.

포트 번호는 URL의 https://localhost: 다음에 오는 숫자 값입니다.
즉시 실행 창에 #####의 포트 번호로 대체될 odataUrl = https://localhost:#####/ApplicationData.svc/Projects을 입력한 다음 Enter 키를 선택합니다.
F5 키를 선택하여 Contoso 프로젝트 앱 로드를 다시 시작합니다.

Contoso 프로젝트 응용 프로그램 표시됩니다.
모든 프로젝트 단추를 선택하여 Contoso 생성 응용 프로그램에서 프로젝트 목록을 표시합니다.

중요
ContosoContruction이 시작 순서에서 ContosoProjects 이전에 나열되어 있는지 확인합니다.

다음 단계

응용 프로그램을 배포할 준비가 되면 각 프로젝트를 독립적으로 게시해야 합니다.먼저, 프로덕션 서버에 LightSwitch 응용 프로그램을 게시합니다.LightSwitch 응용 프로그램이 배포되고 생산 서버에 대한 OData 서비스 URL을 알게 되면 배포하기 전에 Windows 스토어 응용 프로그램에 대해 data.js 파일에서 포트 번호를 업데이트합니다.

참고 항목

기타 리소스

데이터 소스로 사용되는 LightSwitch

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

방법: Windows 저장소 응용 프로그램을 배포할

다음을 통해 공유