블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Notice

2012.12.13 12:00 SharePoint/SharePoint 2013

 

 SharePoint 2013 App – 자동 호스트 (Autohosted App) (4)

 

여기 글에서는 SharePoint 2013의 자동 호스트 앱의 클라우드 앱 페이지의 모양을 SharePoint 2013Chrome Control 형태로 변경해보도록 하겠습니다. 화면에 출력되는 마스터나 레이아웃 페이지에 작업을 하면 전체적인 모양이 적용됩니다.

아래는 Chrome Control 관련한 링크니 참고하시면 도움이 됩니다.

http://msdn.microsoft.com/en-us/library/fp179916.aspx

http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2012/08/02/optimizing-user-experience-for-sharepoint-2013-apps.aspx

http://www.ilovesharepoint.com/2012/07/building-aspnet-mvc-based-sharepoint.html

 

아래에서 한번 적용해보겠습니다. MVC4 웹 응용 프로그램으로 이동하여 Views 폴더의 Shared_Layout.cshtml 로 이동합니다.

<body> 부분을 아래 내용으로 수정합니다.

<body style="display: none">

<!-- Chrome control  -->

    <div id="chrome_placeholder"></div>

 

jQuery를 위해 <head> 부분에 CDN을 추가합니다.

@Scripts.Render("~/bundles/modernizr")

      <script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"  type="text/javascript">

    </script>

    <script  src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"  type="text/javascript">

    </script>

 

위 부분에 맨 아래에 다음 스크립트를 추가합니다.

<script type="text/javascript">

 

        var hostweburl;

 

        $(document).ready(function () {

            //SPHostURL 매개변수의 값.

            hostweburl =

                decodeURIComponent(

                    getQueryStringParameter("SPHostUrl")

            );

 

            // SharePoint 2013의 주소를 통해 스크립트 경로 생성

            // web_url/_layouts/15/resource

            var scriptbase = hostweburl + "/_layouts/15/";

 

            // SP.UI.Control.js 스크립트 파일 액세스

            $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)

        });

 

 

</script>

 

getQueryStringParameterrenderChrome 메서드를 추가로 생성합니다.

</script> 위에 getQueryStringParameter 내용을 추가합니다.

function getQueryStringParameter(paramToRetrieve) {

            var params =

                document.URL.split("?")[1].split("&");

            var strParams = "";

            for (var i = 0; i < params.length; i = i + 1) {

                var singleParam = params[i].split("=");

                if (singleParam[0] == paramToRetrieve)

                    return singleParam[1];

            }

        }

 

위 함수는 SPHostURL에서 값을 잘라내서(?, &,=) 호스트 주소만 반환해주는 내용입니다.

 

renderChrome에 대한 내용으로 아래를 </Script> 위에 추가합니다.

function renderChrome() {

            // 도움말 계정 등의 페이지 표시

            var options = {

                "appIconUrl": hostweburl +"/_layouts/15/images/siteIcon.png?rev=23",

                "appTitle": "Chrome Control MVC",

                "appHelpPageUrl": hostweburl+"Help.html?"

                    + document.URL.split("?")[1],

                //  chrome resource 가 로드된후 호출되는 메서드

                "onCssLoaded": "chromeLoaded()",

                "settingsLinks": [

                    {

                        "linkUrl": hostweburl+"Account.html?"

                            + document.URL.split("?")[1],

                        "displayName": "Account settings"

                    },

                    {

                        "linkUrl": hostweburl+"Contact.html?"

                            + document.URL.split("?")[1],

                        "displayName": "Contact us"

                    }

                ]

            };

 

            var nav = new SP.UI.Controls.Navigation(

                                    "chrome_placeholder",

                                    options

                                );

            nav.setVisible(true);

        }

 

        function chromeLoaded() {

            $("body").show();

        }

 

위 내용은 Chrome Control을 화면에 표시해주며 추가로 도움말, 설정, 사이트 이미지 등을 chrome_placeholder 라는 div 에 표시해주게 됩니다. 

솔루션을 배포하고 결과를 확인합니다.
 

자바스크립트이므로 필요하시다면 브라우저의 F12 개발자 도구를 통해 디버깅도 가능합니다.
 
 

Custom Action, 목록, 리스트 등의 여러 SharePoint 2013 개체와 Client 웹 파트 등에 대한 내용은 다른 SharePoint 2013 Apps 를 다루고 나서 알아보도록 하겠습니다.

 

신고
posted by 정홍주
2012.12.06 11:00 SharePoint/SharePoint 2013

 

SharePoint 2013 App – 자동 호스트 (Autohosted App) (3)

 

이번 글에서는 이전에서 작업한 SharePoint 2013 에 대한 프로젝트에 SharePoint의 개체를 액세스해보는 코드를 작성해보겠습니다. 이전 버전에서도 제공된 CSOM-클라이언트 개체 모델(Client Side Object Model) 을 자동 호스트 웹 프로젝트에서 액세스 하게 되며 인증에 대한 부분은 TokenHelper.cs 파일을 통해서 처리되게 구성할 수 있습니다.

 

TokenHelper.cs CSOM 코드에 대한 내용은 SharePoint 2013 응용 프로그램을 생성하면 웹 프로젝트에 있는 것을 알 수 있습니다.

 

여기서는 앞에서 작업했던 프로젝트에 CSOM 을 적용해보도록 하겠습니다. 먼저 프로젝트에서 TokenHelper.cs 파일이 있는지 확인하고 소스를 열어 네임스페이스가 프로젝트 이름과 동일한 이름으로 구성되어 있는지 확인합니다. 다르다면 변경해주면 됩니다.

 

namespace AutohostMVC4Web

{

 

    public class TokenHelper

    {

 

MVC 4 프로젝트에 빈 컨트롤러를 추가합니다. 이름은 Home으로 지정하겠습니다.

 

생성된 컨트롤러에 아래와 같은 using 구문을 추가합니다.

using Microsoft.SharePoint.Client;

 

Index 액션 메서드를 아래와 같이 수정합니다.

 

public ActionResult Index()

        {

            var contextToken =               
TokenHelper.GetContextTokenFromRequest(System.Web.HttpContext.Current.Request);

            var hostWeb = System.Web.HttpContext.Current.Request["SPHostUrl"];

 

            using (var clientContext =

                TokenHelper.GetClientContextWithContextToken(hostWeb, contextToken

, Request.Url.Authority))

            {

                Web web = clientContext.Web;

 

                clientContext.Load(web, w => w.Lists.Include(l => l.Title).Where(l => !l.Hidden));

                clientContext.ExecuteQuery();

                clientContext.Dispose();

 

                return View(web.Lists);

            }

        }

 

 

SharePoint URL 을 받아 TokenHelper.GetClientContextWithContextToken 를 통해 CSOMContext 개체를 얻어 옵니다. 그리고는 clientContext를 통해 SharePoint 개체들을 액세스 하게 됩니다.

 

자 그럼 View 에서 화면에 출력해보도록 하겠습니다. Index 메서드에서 오른쪽 클릭하고 뷰를 생성합니다.

뷰에서는 아래와 같은 코드로 변경합니다.

 

@{

    ViewBag.Title = "Index";

}

 

<div>

 

    <ul>

        @foreach (var list in Model)

        {

            <li>@list.Title</li>

        }

    </ul>

</div>

 

 

AppManifest.xml 파일을 더블 클릭하여 시작 주소를 Home 으로 지정하고 솔루션을 배포하여 자동 호스트 웹에서 CSOM 결과를 확인합니다. {StandardTokens} 에는 SPHostUrl SPAppWebUrl 이 포함되어 있습니다.

 

 

필요하다면 아래와 같이 디버깅도 가능합니다.

 

 

자동 호스트 웹 응용 프로그램에서 SharePoint 에 있는 개체를 액세스해서 화면에 출력하고 있습니다.

 

 

모양이 너무 간단한데 다음 글에서는 Chrome Style을 적용해보겠습니다.

 

신고
posted by 정홍주
2012.12.04 11:00 SharePoint/SharePoint 2013

 

SharePoint 2013 App – 자동 호스트 (Autohosted App) (2)

 

이번 글에서는 이전에서 작업한 SharePoint 2013 에 대한 앱을 ASP.NET MVC 4를 통해 SQL Azure 에 데이터를 구성해서 처리해보도록 하겠습니다.

 

새로 SharePoint 2013 응용 프로그램 프로젝트를 시작해도 되고 바로 이전에 생성해두었던 프로젝트에 MVC 4 프로젝트를 추가해도 됩니다.

저는 기존 프로젝트의 솔루션 탐색기에서 MVC 4 프로젝트를 추가 해서 작업하도록 하겠습니다. 새로 프로젝트를 생성해도 어차피 MVC 4 프로젝트를 추가해야 하기 때문에 동일한 작업에 해당됩니다.

 

MVC 4 웹 프로젝트의 이름은 AutohostMVC4Web 으로 지정하고 기존 솔루션에 추가합니다. 프로젝트 템플릿은 기본(레이아웃이 없는)으로 지정합니다.

 

솔루션에 추가된 모습은 아래와 같습니다. SharePoint 2013 응용 프로그램과 다른 2 개의 웹 프로젝트입니다. AutohostMVC4Web 프로젝트의 .NET Framework4.5라면 4로 변경합니다. 아니면 아래에서 변경하라는 메시지를 보게 됩니다.

 

나중에 CSOM 코드를 작성하기 위해 기존 웹 프로젝트에 있는 TokenHelper.cs 파일을 새로 추가한 MVC 4 프로젝트로 복사합니다. 네임스페이스를 프로젝트에 맞게 변경해줍니다.

namespace AutohostMVC4Web

{

 

    public class TokenHelper

    {

 

두 개의 웹 프로젝트 중에서 SharePoint 2013 응용 프로그램 프로젝트의 메니페스트에 연결된 웹 프로젝트를 지정해야 합니다. 솔루션 탐색기에서 SharePoint 2013 응용 프로그램 프로젝트를 클릭하고 속성에서 웹 프로젝트를 AutohostMVC4Web 으로 지정합니다. SharePoint 2013 어셈블리 등이 포함된다고 하고 프로젝트를 빌드하면 오류 없이 빌드됩니다.

 

이제 MVC 4 Model, Controller, View 작업을 진행해보도록 하겠습니다. SharePoint 2013 앱에 손쉽게 외부 데이터를 붙이는 내용을 알아보도록 하겠습니다. Windows Azure SQL Database 에 미리 테이블과 데이터를 생성해두었습니다.

 

ADO.NET 엔티티 모델을 추가하고 테이블은 Department 로 지정합니다.

 

프로젝트를 빌드하고 나서 Dept 컨트롤러를 추가하면서 모델과 데이터 컨텍스트를 지정합니다.

 

SharePoint 2013 응용 프로그램 프로젝트의 AppManifest 파일을 더블 클릭하고 시작 페이지를 Dept로 변경해줍니다.

 

자 그럼 프로젝트를 빌드하고 문제가 없으면 프로젝트를 배포하고 테스트 합니다.

 

아래처럼 기존 데이터를 표시해주고 추가, 수정, 삭제 작업을 하는 MVC 4 웹을 SharePoint 2013 App 으로 구성되었습니다.

 

모양이 너무 간단하기도 하고 그렇습니다. 바로 다음 글에서 MVC 4 프로젝트에서 SharePoint 2013 의 사이트의 개체를 액세스하는 것과 전체적인 모양을 지정하는 것을 바로 알아보도록 하겠습니다.

 

 

신고
posted by 정홍주
2012.11.30 11:00 SharePoint/SharePoint 2013

 

SharePoint 2013 – 자동 호스트 (Autohosted App) (1)

 

앞에서 SharePoint 2013 에 대한 앱을 살펴보았는데 그 중에서 자동 호스트 앱을 구성해보도록 하겠습니다. 그리고 ASP.NET MVC 4를 통해 SQL Azure 에 데이터를 구성해서 처리해보려고 합니다. 또한 SharePoint Client Object Model 을 이용해서 개체를 구체적으로 접근해보고 앱 스타일을 SharePoint 2013 스타일을 적용해보겠습니다.

 

먼저 앱을 개발하기 전 준비사항입니다. 로컬에 설치하지 않고도 Office 365를 통해 가능합니다.

l  Office 365 Developer Site (http://dev.office.com)

l  Visual Studio 2012

l  SharePoint development tools in Visual Studio 2012

l  옵션) Windows Azure Account – SQL Azure, Provider App 구성할 경우

 

위 환경이 다 구성되었다면 진행해보도록 하겠습니다.

1.     Visual Studio 2012를 관리자 계정으로 실행을 통해 열어 새 프로젝트 메뉴를 클릭합니다. Office/SharePoint의 응용 프로그램을 클릭합니다.

2.     SharePoint 2013 응용 프로그램을 선택하고 적절한 이름을 입력합니다.
 

3.     새 응용 프로그램 창에서는 Office 365 개발자 사이트 주소와 호스트 방법을 선택하면 됩니다. 호스트 방법은 자동 호스트를 선택하고 마침을 클릭합니다. 
    

4.     ASP.NET 웹 프로젝트와 SharePoint 2013 응용 프로그램 프로젝트가 생성되게 됩니다. SharePoint 2013 응용 프로그램 프로젝트는 Manifest 를 가지고 있으며 실제 ASP.NET 소스는 클라우드로 호스팅되게 됩니다. MVC 4 프로젝트는 별도로 추가하고 설정을 변경해야 합니다. 이는 다음 글에서 다루어 보겠습니다. 

5.     Default.aspx.cs의 경우 Client Side Object Model 에 대한 소스가 구성되어 있습니다. 해당 소스와 TokenHelper.cs 파일을 이용해서 MVC 4 프로젝트에서 이용할 수 있습니다. 

var contextToken = TokenHelper.GetContextTokenFromRequest(Page.Request);

var hostWeb = Page.Request["SPHostUrl"];

 

using (var clientContext = TokenHelper.GetClientContextWithContextToken(hostWeb, contextToken, Request.Url.Authority))

            {

                clientContext.Load(clientContext.Web, web => web.Title);

                clientContext.ExecuteQuery();

 

위 소스는 사이트의 제목을 출력해주는 내용입니다.

6.     SharePoint 2013 응용 프로그램 프로젝트의 속성을 보면 아래와 같은 정보를 알 수 있습니다. (해당 사이트 URL, 연결할 웹 프로젝트)

 

7.     SharePoint 2013 응용 프로그램 프로젝트에서 AppManifest.xml 을 더블 클릭합니다
 

오른쪽 클릭해서 코드보기를 보면 XML 내용을 확인하거나 직접 수정할 수 도 있습니다.

<?xml version="1.0" encoding="utf-8" ?>

<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->

<App xmlns="http://schemas.microsoft.com/sharepoint/2012/app/manifest"

     Name="SharePointAutohostMVC4"

     ProductID="{61bb6727-7a7a-49eb-a1cb-6758b3b10bf9}"

     Version="1.0.0.0"

     SharePointMinVersion="15.0.0.0"

>

  <Properties>

    <Title>SharePointAutohostMVC4</Title>

    <StartPage>~remoteAppUrl/Pages/Default.aspx?{StandardTokens}</StartPage>

  </Properties>

 

  <AppPrincipal>

    <AutoDeployedWebApplication/>

  </AppPrincipal>

 

  <AppPrerequisites>

    <AppPrerequisite Type="AutoProvisioning" ID="RemoteWebHost" />

  </AppPrerequisites>

</App>

 

간단히 프로젝트를 살펴보았고 솔루션을 배포해서 결과를 확인해보겠습니다. 솔루션을 오른쪽 클릭하고 솔루션 배포를 선택합니다. ASP.NET 소스는 클라우드(O365.aspp.net) 로 프로젝트의 ManifestSharePoint Online로 배포되게 됩니다.

Office 365 인증 창이 나오면 로그온합니다. 아래 그림처럼 신뢰하겠냐는 창이 나오면 신뢰를 클릭합니다.
 

8.     결과를 확인이 가능하며 웹 페이지 주소를 확인해보면 클라우드 주소인 것을 확인할 수 있습니다. 글자만 나오지만 해당 소스에서 CSOM(Client Side Object Model)을 통해 액세스되었으며 앱의 카탈로그에 나오는 것을 확인할 수 있습니다.
 
 

 

다음 글에서 ASP.NET MVC 4SQL Azure 를 통해 자동 호스트 앱을 구성해보도록 하겠습니다.

 

 

신고
posted by 정홍주
prev 1 next

티스토리 툴바