SharePoint 2010에서의 대화상자(Dialog) (1)

SharePoint 2010의 사용자 인터페이스 중의 또 다른 큰 변화는 대화상자(Dialog)라고 할 수 있습니다. 목록의 항목이나 리본의 컨트롤을 클릭할 경우 아래처럼 대화 상자를 볼 수 있습니다.

여기서는 리본에 컨트롤을 추가했을 경우 컨트롤의 Command에서 해당 대화 상자를 Show 시키는 javascript를 작성해보도록 하겠습니다.

앞에서 다룬 Ribbon에서 CommandUIHandler의 내용을 아래와 구성할 수 있습니다.

<CommandUIHandlers>

        <CommandUIHandler

        Command="Demo_HelloWorld" CommandAction="javascript:

         function demoCallback(dialogResult, returnValue)

         {

         SP.UI.Notify.addNotification('Operation Successful');    

         SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

         }

         var options={

          url:'/_layouts/RibbonDemo/hj.aspx',

          title:'HJ Dialog',

          allowMaximize: true,

          showClose: true,

          width: 600,

          height: 400,

          dialogReturnValueCallback: demoCallback };

          SP.UI.ModalDialog.showModalDialog(options);

         " />

      </CommandUIHandlers>

맨 마지막 부분을 보면  SP.UI.ModalDialog.showModalDialog(options); 으로 구성되어 있으며 대화 상자를 Show 시켜주는 구문입니다.

options에서는 해당 페이지 url, 제목, 높이, 넓이 등을 나열 할 수 있습니다.

dialogReturnValueCallback의 경우는 대화상자를 닫을 경우 호출되는 javascript 함수를 참조합니다.

SP.UI.Notify.addNotification('Operation Successful'); 는 SharePoint에서 오른쪽 상단의 알림을 나타내는 부분을 제공하고 있는데 Notify를 통해 해당 문자열을 3초간 표시해주게 됩니다.

SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); 는 AJAX 스타일의 새로 고침을 제공해주고 있습니다.

전체 Elements.xml은 아래와 같습니다.

배포해서 결과를 확인해보도록 하겠습니다. 물론 hj.aspx가 추가되어 있어야겠죠

대화 상자를 확인 가능합니다. 오른쪽 상단의 X 를 클릭해서 창을 닫아 봅니다. 화면 오른쪽 상단에서 알림을 알아 볼 수 있습니다.

다음 블로그에서는 options에 url외에 html이 올 수 있습니다. 웹 파트에서 대화 상자를 Show 해 보도록 하겠습니다.



Azure가 많은 부분이 Update  되었습니다.

2010년 말에 Azure Platform의 Management Portal 이 새롭게 선보였으며 SQL Azure 에 대한 내용을 업데이트합니다.

Portal에 액세스하기 위해서는 https://windows.azure.com 에 액세스하고 Windows Live ID를 제공하면 됩니다. 리본과 유사하게 변경되었으며 Hosted Service, Storage Account, Database Server, Connect 메뉴가 상단에 보이고 있습니다.

왼쪽 메뉴는 Hosted Services, Storage Account & CDN, Database, Reporting, Service Bus, Access Control & Caching, Virtual Network 로 되어 있습니다.

SQL Azure를 살펴볼 것이므로 왼쪽 메뉴의 Database나 상단 메뉴의 New Database Server 를 클릭해보겠습니다. 

l  Database Server 생성

Database는 New 메뉴를 통해 구독을 생성해야 하며 구독을 생성하고 나면 Create 메뉴가 활성화됩니다.

hongju 라는 Subscription 에 새로운 SQL Azure Database Server를 생성해보겠습니다. Create 메뉴를 클릭하면 먼저 지역을 선택하게 되는데 여기서는 “East Asia”를 선택하고 다음을 클릭 해보겠습니다.

관리자 계정과 비밀번호를 설정하게 됩니다. 비밀번호는 복잡성 규칙을 따르니 복잡하게 구성하면 됩니다.

관리자 계정과 비밀번호를 설정하고 다음을 클릭하면 방화벽 규칙을 지정하는 창을 볼 수 있으며 여기서는 마침을 클릭합니다. 별도로 방화벽 규칙을 지정할 수 있습니다.

작업이 완료되었으면 아래와 같은 Database Server가 생성된 것을 확인할 수 있습니다.

왼쪽 트리를 확장해서 보면 master 데이터베이스가 생성된 것을 알 수 있습니다.

방화벽 규칙을 클릭해서 방화벽을 설정해줄 수 있습니다. 그렇지 않으면 기본값으로 Deny이므로 허용 IP 대역을 설정해야만 합니다.

l  Database 생성

해당 데이터베이스 서버를 클릭하고 데이터베이스를 생성해보도록 하겠습니다.

상단의 Create 메뉴를 클릭합니다.

Create Database 창에서 적절한 데이터베이스 이름을 입력하고 Edition과 Size를 지정합니다.

SharePoint 2010의 사용자 인터페이스 중의 가장 큰 변화는 리본이라고 할 수 있습니다. SharePoint 웹 사이트의 여러 메뉴 들이 복잡하게 구성된 2007 버전과는 달리 2010에서는 아래 그림과 같이 동적으로 바뀌는 리본으로 구성되어 있습니다.

개발 측면으로서 볼 때 리본에 버튼을 추가하거나 해서 사용자 요구사항을 해결해야 할 수 있으며 버튼을 클릭할 경우 추가로 Dialog (대화 상자)를 통해 사용자에게 사용자 인터페이스를 제공할 수 있게 됩니다.

자 그럼 리본에 원하는 버튼을 추가해보도록 하겠습니다.

Visual Studio 2010의 빈 SharePoint 프로젝트를 통해 새로운 프로젝트를 하나 생성합니다. 여기서 프로젝트 이름은 RibbonDemo라고 합니다. 생성된 프로젝트의 솔루션 탐색기를 통해 새 항목을 추가합니다. 새로 추가할 항목은 “빈 요소”입니다.

빈 요소에는 특별한 내용 없이 Elements.xml 파일에 XML 만 보입니다. 정해진 태그를 통해 리본에 대한 내용을 CustomAction으로 생성할 수 있습니다.

Elements 루트 태그 안에 CustomAction 태그를 추가하고 추가된 태그에 아래와 같은 리본에 대한 내용을 나열합니다.

<CustomAction

Id="DemoHelloWorldButton"

RegistrationType="List"

RegistrationId="101"

Location="CommandUI.Ribbon"

 Sequence="10"

 Title="Ribbon Demo">

    <CommandUIExtension>

      <CommandUIDefinitions>

        <CommandUIDefinition

         Location="Ribbon.Documents.New.Controls._children">

          <Button

           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"

           Alt="Hello World Ribbon Button"

           Sequence="10"

           Command="Demo_HelloWorld"

           Image32by32="_layouts/images/ribbondemo/demobutton32.png"

           Image16by16="_layouts/images/ribbondemo/demobutton16.png"

           LabelText="Hello World Demo"

           TemplateAlias="o1"/>

        </CommandUIDefinition>

      </CommandUIDefinitions>

      <CommandUIHandlers>

        <CommandUIHandler

         Command="Demo_HelloWorld" CommandAction="javascript:alert('Hello World!');" />     

      </CommandUIHandlers>

    </CommandUIExtension>

  </CustomAction>

CustomAction의 특성에 보면 Location=”CommandUI.Ribbon” 이라는 내용을 볼 수 있으며 리본으로 처리됩니다. RegistrationId=”101”은 문서 라이브러리를 가리킵니다.

그리고 CommandUIExtension 안에 CommandUIDefinitions, CommnadUIHandlers를 배치합니다.

CommandUIDefinitions 는 리본의 UI를 정의하게 되며 CommnadUIHandlers 는 리본의 UI를 클릭할 경우의 Command, 이벤트를 정의하게 됩니다.

CommandUIDefinition 에도 Location이 보이는데
Location="Ribbon.Documents.New.Controls._children" 의 경우는 문서 라이브러리의 문서 탭의 새로 만들기 그룹 밑의 컨트롤이라는 정보를 나타내게 됩니다.

CommandUIDefinition에 컨트롤 들의 그룹을 추가 할 수 있으나 여기서는 Button 컨트롤만 배치했습니다. 리본에 추가할 수 있는 컨트롤들은 아래 링크를 참조할 수 있습니다.

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

Button 컨트롤의 여러 속성(이미지, 제목 등)을 설정하면 되고 이벤트와 연동하기 위해서는 Command라는 속성을 설정하면 됩니다.

CommnadUIHandler 에는 Button의 Command 속성의 값과 일치하는 이름의 Command를 추가하고 CommandAction에서는 javascript를 통해 대화상자 페이지를 나타내게 할 수 있습니다.

솔루션 탐색기에서 추가 새 항목에서 SharePoint “이미지” 매핑된 폴더를 이용해서 위의 XML처럼 이미지를 추가할 수 있습니다.

TemplateAlias의 경우는 o1(Large 이미지), o2(medium 이미지)로 구분할 수 있습니다.

이제 배포를 해서 결과를 확인합니다.

클릭할 경우 아래와 같은 메시지 박스를 볼 수 있습니다.

XML에서 Button 컨트롤에 보면 ID가 처리되는데 기존에 있는 여러 컨트롤의 ID는 아래 링크를 참조하면 됩니다.

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

이 ID를 이용해서 HideCustomAction을 사용해 기존 Ribbon의 컨트롤을 안보이게도 가능합니다.

다음 블로그에서는 Ribbon을 클릭할 경우 대화 상자를 처리해 보도록 하겠습니다.

MSDN 영문 사이트의 Main Page에 보면 Windows Phone Developer Tool Release 라는 내용에 대한 이미지를 볼 수 있습니다. 릴리스 시점은 추석 연휴 시작하기 전인 9월 16일입니다.

아직 관련 소식에 대한 업데이트가 없어 릴리스에 대한 내용을 알아보도록 하겠습니다.

이미지를 클릭하면 블로그로 이동해서 내용을 살펴보시면 여러 유용한 정보를 알려주고 있으니 Windows Phone 7에 관심 있는 분은 방문해보시기 바랍니다.

http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/09/16/windows-phone-developer-tools-are-final.aspx

 

도구가 새로 릴리스 되었으니 다운로드 받아 설치해보도록 하겠습니다. 개발도구 등의 사이트는 아래 사이트를 방문하면 됩니다.

http://developer.windowsphone.com/windows-phone-7/

이전 버전의 도구(Beta) 가 설치되어 있다면 제거합니다. 도구를 다운로드 받아 설치를 진행합니다. 이전 버전보다는 더 많은 구성요소가 설치됩니다. Expression Blend 4 가 있다면 Expression Blend 4 Add-in for Windows Phone 도구도 설치됩니다.

현재는 Windows Phone Developer Tool 은 영문 버전만 제공되고 있습니다.

설치가 다 되고 나면 Visual Studio 2010에서 새 프로젝트를 생성하려고 하면 Silverlight for Windows Phone에 대한 내용을 볼 수 있으며 아래와 같은 프로젝트 템플릿을 확인할 수 있습니다.

Expression Blend 4 에서도 마찬가지로 Windows Phone에 대한 프로젝트 템플릿을 확인할 수 있습니다.

프로젝트 템플릿을 보면 이전 버전(Beta)와 다르게 CodePlex에서 소개하던 Panorama, Pivot 에 대한 프로젝트 템플릿이 나타나는 것을 알 수 있습니다.

아직 설치를 하지 않으셨다면 설치해서 Windows Phone 개발을 시작해보시기 바랍니다.

앞으로의 블로깅은 모바일에 대한 새로운 기능 위주로 작성할 예정입니다.

Excel 2010의 PowerPivot은 별도의 Add-in을 설치하면 Excel 2010에서 사용할 수 있는 도구입니다.

아래의 사이트에서 다음과 같은 내용을 얘기하고 있습니다.

http://www.powerpivot.co.kr/

PowerPivot for Excel은 많은 사용자들을 확보하고 있는 Microsoft Excel 내에서 가히 독보적인 연산 능력을 직접 발휘할 수 있도록 하는 데이터 분석 도구입니다. Office와 동일한 사용자 인터페이스, 피벗 테이블 및 피벗 차트 보기, 슬라이서 등과 같이 이미 잘 알고 있는 Excel 기능을 사용하여 손쉽게 데이터를 분석할 수 있습니다.

제가 말씀드릴 내용은 SQL Azure의 데이터를 Excel 2010의 PowerPivot에서도 문제없이 접근할 수 있다는 것입니다.

아래 그림은 PowerPivot 창의 화면입니다.

*PowerPivot 탭은 PowerPivot을 설치해야 나옵니다.

[외부 데이터 가져오기] 그룹의 기타 원본을 클릭하면 아래와 같이 SQL Azure에 대한 내용을 볼 수 있습니다.

SQL Azure를 선택하고 서버이름과 인증 정보, 데이터베이스를 선택합니다.

(SQL Azure의 방화벽이 설정되어 있어야 연결할 수 있습니다.)

SQL Azure에 있는 테이블을 선택합니다. 여기서는 Category와 SubCategory 를 선택합니다. 그리고 클라우드가 아닌 로컬 네트워크에 있는 Product 테이블을 선택해서 관계를 적용할 것입니다.로컬 네트워크의 테이블과 연결하는 것은 PowerPivot에서 다양한 데이터 원본을 통해(클라우드 포함해서) Self-분석이 가능하다는 것을 알아보기 위함입니다.

데이터를 가져오기 할 경우에 “XML 구문 분석에 대한 에러”가 발생할 경우는 SQL Server 2008 R2 기능 팩의 Microsoft® SQL Server® 2008 R2용 Microsoft® Analysis Services OLE DB 공급자를 다운로드 받아 설치하면 됩니다.

http://www.microsoft.com/downloads/details.aspx?displaylang=ko&FamilyID=ceb4346f-657f-4d28-83f5-aae0c5c83d52

잘 가져오면 아래와 같이 성공으로 나타납니다.

클라우드 환경이 아닌 로컬 데이터베이스에 있는 Product 테이블을 가져오기 했습니다.

디자인 탭의 관계 만들기를 통해 PowerPivot 테이블 간의 관계(FK)를 정의했습니다.

클라우드의 SQL Azure 를 이용해서 피벗 테이블을 구성한 결과는 아래와 같습니다. 또한 Excel 2010의 슬라이서를 이용했습니다.

이상으로 SQL Azure의 활용 측면으로 Excel 2010의 PowerPivot을 이용해서 SQL Azure의 데이터를 연결하는 내용을 알아보았습니다.

다음은 SQL Reporting Services 에서 SQL Azure 데이터를 나타내보도록 하겠습니다.

이전 내용에서 REST 에 대한 소개와 .NET에서 REST API를 이용해서 SharePoint 데이터를 액세스하는 내용을 알아보았습니다. 이번 내용은 Silverlight 응용 프로그램에서 REST API를 통해 액세스하는 방법을 다루어봅니다.

먼저 Silverlight 응용 프로그램을 생성합니다. Silverlight 디자인은 아래와 같이 Button과 ListBox로 구성합니다.

Silverlight 응용 프로그램에 ListData.svc를 서비스 참조 추가를 통해 프록시 클래스를 생성합니다.

프록시 클래스의 클래스 뷰를 보면 앞에서 살펴본 .NET 응용프로그램과 동일하다는 것을 알 수 있습니다.

Button의 클릭 이벤트를 생성하고 아래와 같은 코드를 작성합니다. HomeDataContext 클래스의 인스턴스를 생성하고 DataServiceQuery 클래스를 통해 비동기적으로 호출합니다.

Xap 파일을 배포해서 SharePoint 2010의 Silverlight 웹 파트에 연결해서 버튼을 클릭하면 손쉽게 Silverlight 응용프로그램에서도 SharePoint 데이터를 REST 를 통해 액세스할 수 있다는 것을 알 수 있습니다.

REST -.NET

Client Side의 OM에서 Client OM은 이전내용에서 다루었으며 이번 블로깅은 SharePoint 2010에서 REST API 에 대한 내용을 다루어 보겠습니다

SharePoint 2010에서는 Representational State Transfer (REST)를 통한 데이터 작업이 가능합니다.

SharePoint 목록 데이터, 문서 라이브러리의 Excel 문서의 차트, 표 등의 데이터를 손쉽게 액세스 할 수 있습니다.

액세스 하는 방법은 ListData.svc 를 통해서 진행하게 됩니다. 응용 프로그램에서 서비스 참조 추가 등을 통해 처리되게 됩니다.

아래 그림은 ListData.svc 를 액세스한 결과입니다.

http:/SiteCollectionName/_vti_bin/ListData.svc

해당 리스트만 보기 위해서는 마지막에 리스트의 이름을 입력합니다.

_vti_bin/ListData.svc/공지사항

REST를 액세스 하는 구문은 아래와 같으며 다양하게 액세스 할 수 있습니다.

/_vti_bin/ListData.svc/{Entity}[({identifier})]/[{Property}]

예) 공지사항 #3의 제목

/_vit_bin/ListData.svc/공지사항(9)/제목

* 인터넷 옵션의 피드 보기 사용을 해제해야 결과를 볼 수있습니다.

 
목록과 항목을 액세스 하는 경우는 아래 구문의 예를 통해서 가능합니다. 

정렬 등 옵션에 대한 내용은 아래 표를 참고하십시오. 

REST의 일반적인 내용은 살펴보았습니다. REST를 이용해서 Client Side에서 여러 응용 프로그램을 통해(.NET, Silverlight, Javascript) 액세스 가능합니다. 여기서는 .NET 응용 프로그램에서 액세스 해보도록 하겠습니다.

.NET Windows 응용 프로그램을 생성하고 서비스 참조 추가에 REST URL을 입력하고 프록시 클래스를 생성합니다. 프록시에 대한 클래스 뷰는 아래와 같습니다.

사이트의 제목이 “Home” 이므로 HomeDataContext 클래스가 생성되며 한글 사이트라 “공지사항Item” 이라는 클래스와 클래스의 한글 속성 들을 확인할 수 있습니다.

이제는 프록시 클래스를 통해 DataGrid에 공지사항 목록을 바인딩해보도록 하겠습니다.

아래와 같은 소스를 작성합니다.

WCF 와 달리 HomeDataContext의 클래스는 Uri 를 지정해주어야 합니다.

Where와 OrderBy 는 생략했습니다. 실행한 결과는 아래와 같습니다.

위에서 살펴본 것처럼 REST –ListDataSvc 를 통해 Client Side에서 손쉽게 SharePoint 2010의 SharePoint 데이터를 액세스할 수 있습니다.

목록을 읽기만 하는 것이 아니고 항목을 추가하거나 수정, 삭제할 수 있습니다.

아래 구문으로 공지사항에 항목을 추가해보도록 하겠습니다.

아래 그림을 통해 먼저 공지사항Item 클래스의 다이어그램을 확인해봅니다. (한글 속성.., ㅠㅠ)

아래 코드를 통해 공지사항Item의 인스턴스를 생성해서 DataContext 의 SaveChanges 메서드를 호출
하면 됩니다.

이상으로 SharePoint 2010에서 REST의 소개와 .NET 응용 프로그램에서 REST 를 사용하는 방법을 알아보았습니다.

가이드라고 보기는 어렵고 한글용은 안보여서 구성해본 개발환경 내용~

Active Directory 도메인 서비스 설치

SQL Server 2008 R2 설치

SharePoint 2o10 설치

Office 2010 클라이언트 설치

VS 2010 설치

SharePoint 2010 SDK 설치 등

아래 링크를  참고하셔요.

SharePoint 2010 개발환경 구축 가이드.pdf

Client Object Model에 대해서 다시 한번 정리를 해보도록 하겠습니다.

SharePoint 개체를 액세스 하기 위해서는 Microsoft.SharePoint.dll 이 있어야 하는데 원격 클라이언트에서는 Microsoft.SharePoint.dll 어셈블리를 접근하기 곤란합니다. SharePoint 2010에서는 Client Object Model을 제공해서 원격 클라이언트에서 손쉽게 SharePoint 데이터를 액세스할 수 있습니다.

아래 그림은 Client Object Model을 설명하면서 언급하는 그림인데 저는 먼저 코드를 나열하고 살펴봅니다.

Client Object Model을 사용할 수 있는 주된 이유는 아래 그림의 SharePoint 서버쪽의 Client.svc 때문입니다. Client.svc가 서버 개체 모델을 액세스해서 JSON 포맷으로 결과를 반환해주게 되며 클라이언트에서는 Proxy를 통해 손쉽게 액세스하게 됩니다.

앞에서 한번 살펴보았던 표를 다시 한번 정리 합니다.

SP 이름만 제외하면 서버, 클라이언트 개체 모델이 유사하다는 것을 기억 하시죠?

.NET Managed Client OM

-       Microsoft.SharePoint.Client.dll

-       Microsoft.SharePoint.Client.Runtime.dll

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI

Silverlight Client OM

-       Microsoft.SharePoint.Client.Silverlight.dll

-       Microsoft.SharePoint.Client.Silverlight.Runtime.dll

(C:\Program Files\Common Files\Microsoft Shared\
Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin)

JavaScript Client OM

<SharePoint:ScriptLink ID="ScriptLink1" Name="SP.js" runat="server" OnDemand="true"

    Localizable="false" />

아래 주소를 참고하시면 성능 향상 등의 더 높은 수준의 코드를 살펴보실 수 있습니다.

http://msdn.microsoft.com/en-us/library/ee857094(office.14).aspx

이전 블로그에서는 javascript로 SharePoint 항목의 데이터를 추가하는 것을 알아보았는데 이번 블로그에서는 공지사항 목록을 생성하는 내용을 알아보겠습니다. 여기까지 Client Object Model을 살펴보시면 SharePoint Server Object Model의 내용을 그대로 원격 클라이언트 위에서도 사용이 가능하다는 것을 알 수 있습니다.

Visual Studio 2010을 이용해서 빈 SharePoint 프로젝트를 생성하여 Application Page를 추가합니다. 추가한 페이지에 아래와 같은 코드를 작성하고 결과를 확인해봅니다.

추가한 Application Page 의 PageHead content 부분에 아래 내용을 추가합니다.

<SharePoint:ScriptLink ID="ScriptLink1" Name="SP.js" runat="server" OnDemand="true"

    Localizable="false" />

목록을 생성하는 자바 스크립트 코드를 바로 아래 부분에 추가합니다.

<script language="javascript" type="text/javascript">

function CreateList() {

        var clientContext = new SP.ClientContext.get_current();

        var site = clientContext.get_web();

        //공지사항 목록 생성

        var listCreationInfo = new SP.ListCreationInformation();

        listCreationInfo.set_title("HJ2");

        listCreationInfo.set_templateType(SP.ListTemplateType.announcements);

        listCreationInfo.set_quickLaunchOption(SP.QuickLaunchOptions.on);

        site.get_lists().add(listCreationInfo);

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onSucceeded)

        , Function.createDelegate(this, this.onFailed));

    }

function onSucceeded(sender, args) {

        alert("Succeeded");

    }

function onFailed(sender, args) {

        alert("Failed");

    }

      </script>

목록을 생성하는 코드는 바로 아래 내용입니다. SP.ListCreationInformation을 이용해서 Title과 TemplateType, 빠른 실행 표시를 지정하고 있습니다.

var listCreationInfo = new SP.ListCreationInformation();

listCreationInfo.set_title("HJ2");

listCreationInfo.set_templateType(SP.ListTemplateType.announcements);

listCreationInfo.set_quickLaunchOption(SP.QuickLaunchOptions.on);

실제 생성된 내용을 적용하는 코드입니다.

site.get_lists().add(listCreationInfo);

서버 개체 모델에서 본 것과 거의 동일하다는 것을 알 수 있습니다.

Application Page 의 Main content 부분에 아래 내용을 추가해서 CreateList() 를 호출합니다.

    <input id="Button1" type="button" value="Create List"  onclick=" CreateList()" />

 솔루션 탐색기를 오른쪽 클릭하여 배포를 선택하고 해당 Application Page를 액세스 해서 결과를 확인합니다.

HJ2 라는 공지사항이 생성되어 있고 빠른 실행에 표시되는지 확인합니다.

이상으로 Client Object Model중에서 JavaScript 를 이용한 내용을 알아보았습니다.

이번 블로그는 SharePoint 2010의 데이터 기술 중에서 Client Object Model의 마지막 javascript에 대한 내용을 다루어 보겠습니다.

Javascript는 sp.js를 통해 SharePoint 개체를 접근할 수 있습니다.

SharePoint 2010 프로젝트를 통해 알아보도록 하겠습니다.

빈 SharePoint 프로젝트를 생성하면서 프로젝트 이름을 아래와 같이 “javascriptOM”이라고 합니다.

SharePoint 2010 사이트 주소를 입력하고 Farm Solution 으로 지정합니다.

프로젝트에서 Application Page를 추가하도록 합니다. 솔루션 탐색기에서 오른쪽 클릭해서 추가, 새 항목을 클릭해서 Application Page를 선택하고 이름은 “ClientOM.aspx”라고 지정합니다.

생성된 Application page의 HTML 소스의 Main 부분에 아래와 같은 HTML 코드를 작성합니다.

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>

 

<table>

<tr>

<td>Title:</td>

<td><input id="txtTitle" type="text" /></td>

</tr>

<tr>

<td>Body:</td>

<td><input id="txtBody" type="text" /></td>

</tr>

<tr>

<td colspan="2">  

<input id="btnGo" type="button" value="Javascript Client OM" onclick="javascript:execOM();" />

</td>

</tr>

</table>

</asp:Content>

 

FormDigest 는 SharePoint 데이터를 변경하려고 할 경우 보안의 유효성 검사를 위해 추가해야 합니다.

 

<asp:Content ID="PageHead" 바로 아래 부분에 도구 상자에서 SharePoint Controls 부분에서 ScriptLink를 드래그하고 아래와 같이 속성을 정의합니다.

 

<SharePoint:ScriptLink ID="ScriptLink1" Name="SP.js" runat="server" OnDemand="true"

    Localizable="false" />

 

SharePoint:ScriptLink  아래 부분에 버튼의 onClick 이벤트에 있는 javascript를 작성합니다.

SP.js를 통해 Client Object Model 을 JavaScript를 통해 액세스하는데 HJ라는 공지사항에 항목을 생성하는 내용이며 아래 코드와 같습니다.

 

 

<script language="javascript" type="text/javascript">

    function AddHJItem() {

        var context = new SP.ClientContext.get_current();

        this.site = context.get_web();

        context.load(this.site);

        this.list = site.get_lists().getByTitle("HJ");

        context.load(this.list);

        var listitemCI = new SP.ListItemCreationInformation();

        var item = list.addItem(listitemCI);

        item.set_item("Title", document.getElementById("txtTitle").value);

        item.set_item("Body", document.getElementById("txtBody").value);

        item.update();

        context.executeQueryAsync(Function.createDelegate(this, this.Succeeded)

        , Function.createDelegate(this, this.Failed));

    }

    function Succeeded(sender, args) {

        alert("Succeeded");

    }

    function Failed(sender, args) {

        alert("Failed");

    }

</script>

 

 

 

프로젝트를 배포하고 웹 브라우저를 통해 액세스 해서 텍스트 박스에 값을 입력하고 버튼을 클릭합니다

HJ 공지 사항에서 보면 Javascript를 통해 SharePoint 2010의 공지 사항 항목이 생성된 것을 확인할 수 있습니다.

이상으로 javascript를 통한 SharePoint 2010의 목록을 추가하는 내용을 살펴보았습니다.

이전 블로그에서 설명한 SharePoint 2010 데이터 기술 중에서 Client OM(개체 모델)에 대한 내용을 알아보도록 하겠습니다.

SharePoint 2010 데이터 기술에 대한 내용은 아래 주소를 참고하시기 바랍니다.

http://www.vsts2010.net/224

 

SharePoint 2010 박스 위가 아닌 원격에 떨어져 있을 경우 SharePoint 개체를 액세스하려면 웹 서비스를 통해 힘들게 해야 하지만 SharePoint 2010에서는 아주 손쉽게 접근할 수 있도록 Client OM을 제공해주고 있습니다. 생성할 수 있는 유형은 .NET, Silverlight, Javascript 를 통해 접근할 수 있습니다.

 

아래 표를 보시면 클래스와 메서드 등의 경우 서버 개체 모델과 거의 유사하게 구성되어 있습니다.

Server (Microsoft .SharePoint)	.NET Managed (Microsoft.SharePoint .Client)	Silverlight (Microsoft.SharePoint .Client.Silverlight)	JavaScript (SP.js)
SPContext	ClientContext	ClientContext	ClientContext
SPSite	Site	Site	Site
SPWeb	Web	Web	Web
SPList	List	List	List
SPListItem	ListItem	ListItem	ListItem
SPField	Field	Field	Field

 

표에서 보듯이 SP 라는 글자가 없어지고 거의 동일하게 작업이 가능합니다. 하지만 일부는 변경되어 있습니다. 웹 서비스를 통해 CAML을 처리하지 않아도 API를 통해 정말 편하게 접근이 가능합니다.

 

먼저 .NET Client OM을 알아보도록 하겠습니다. 그리고 다음 블로그에서 Silverlight, Javascript를 알아보도록 하겠습니다.

 

Visual Studio 2010을 통해 WPF 응용 프로그램을 생성합니다. 이름은 WpfClientOMDemo라고 하겠습니다.

Button 컨트롤을 디자인 영역으로 드래그하고 Click 이벤트를 생성합니다.

.NET Managed Client OM을 이용하기 위해서는 아래 어셈블리를 참조해야 합니다.

Microsoft.SharePoint.Client.dll

Microsoft.SharePoint.Client.Runtime.dll

 

경로는 아래와 같습니다.

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI

코드보기로 이동하여 소스 코드에 아래 using 구문을 추가합니다.

using Microsoft.SharePoint.Client;

using SP=Microsoft.SharePoint.Client;

 

InitializeComponent() 아래 부분에 다음과 같은 코드를 입력하고 프로젝트 속성에서

.NET Framework 4.0 Client Profile 을 .NET Framework 4.0으로 변경하고 실행해봅니다.

x86은 그대로 두고 진행하면 됩니다.

ClientContext context = new ClientContext("http://sp.webtime.co.kr");

Web site = context.Web;

context.Load(site);

context.ExecuteQuery();

site.Title = site.Title + " Client OM";

site.Update();

context.ExecuteQuery();

위 코드는 SP 라는 이름이 붙어있다면 서버 개체 모델과 동일하다는 것을 알 수 있습니다.

 

결과는 아래처럼 “Home Client OM”으로 변경되어 있습니다.

디자인 보기로 이동하여 ListBox 컨트롤을 드래그합니다.

코드 보기에서 위에서 작성한 코드는 주석처리하고 아래와 같은 코드를 입력합니다.

아래 코드는 목록들의 이름을 리스트박스에 추가해서 나타내는 내용입니다.

 

ClientContext context = new ClientContext("http://sp.webtime.co.kr");

Web site = context.Web;

ListCollection lists = site.Lists;

IEnumerable<Microsoft.SharePoint.Client.List> listcollection =

context.LoadQuery(lists.Include(l => l.Title, l => l.Id));

context.ExecuteQuery();

listbox1.ItemsSource = listcollection;

listbox1.DisplayMemberPath = "Title";

 

 

결과는 다음과 같습니다.

작성한 코드는 주석처리하고 아래와 같은 코드를 입력합니다.

아래 코드는 사이트에 HJ 라는 공지사항을 생성하고 빠른 실행에 표시해주는 코드입니다. 이런 내용을 서버 개체 모델로 하는 것이 아니라 클라이언트 개체 모델로 해주고 있습니다.

ClientContext context = new ClientContext("http://sp.webtime.co.kr");

Web site = context.Web;

ListCreationInformation listCI = new ListCreationInformation();

listCI.Title = "HJ";

listCI.TemplateType = (int)SP.ListTemplateType.Announcements;

listCI.QuickLaunchOption = SP.QuickLaunchOptions.On;

SP.List li = site.Lists.Add(listCI);

site.Update();

 

위에서 생성한 HJ라는 공지사항에 항목을 입력해보겠습니다. 작성된 코드를 주석처리하고

HJ를 찾아서 ListItem을 생성하는 코드를 아래와 같이 작성합니다. ListItemCreationInformation 이라는 클래스를 이용합니다.

 

ClientContext context = new ClientContext("http://sp.webtime.co.kr");

Web site = context.Web;

SP.List li = site.Lists.GetByTitle("HJ");

            ListItemCreationInformation listitemCI = new ListItemCreationInformation();

SP.ListItem item = li.AddItem(listitemCI);

item["Title"] = "hongju";

item["Body"] = "Consulting Services";

item.Update();

context.ExecuteQuery();

 

HJ 라는 공지 사항에 항목이 하나 추가되어 있는 것을 아래 그림과 같이 확인이 가능합니다.

위에서 Client Object Model에 대한 개요와 .NET Managed Client Object Model에 대한 내용을 알아보았습니다. 서버 개체 모델은 서버 박스 위에서 실행되는 웹 파트나 유틸리티를 통해 처리되지만 원격의 클라이언트에서 실행되도록 하려면 SharePoint 2010에서는 Client OM을 사용할 수 있습니다. 다음 블로그에서 Silverlight Client Object Model 을 알아보도록 하겠습니다.

 

결론은 그다지 큰 변화는 없습니다. (VS 2010, SharePoint 2010 RC 한글로 테스트했습니다.)

프로젝트 템플릿이 추가될 예정이지만 출시 버전에는 예전과 동일합니다. 이전 버전의 화면은 생략하겠습니다.

프로젝트 항목들도 크게 바뀐 것은 없지만 Workflow Association Form, Workflow Initiation Form이 빠져버렸습니다. 좀 지켜봐야 할 것 같습니다.

일반 웹 파트 소스 코드는 기존에는 클래스의 생성자와 CreateChildControls, RenderContents 메서드가 있었고 base 메서드를 호출해주었는데 출시 버전에서는 달랑 CreateChildControls 메서드만 아래 그림처럼 제공해줍니다.

SharePoint Explorer 의 모습도 변화 없다는 것을 확인할 수 있습니다.

RC 버전에서 본격적으로 준비를 해야 하지 않나 생각됩니다.

 출시도 되었으니 계속 블로깅 하도록 하겠습니다.

앞의 블로그에서 Web Part에 대한 내용을 살펴보았는데 솔루션 탐색기에 보면 Feature 폴더가 생겨 있는 것을 알 수 있습니다. 그리고 Web Part 폴더 항목을 보면 Elements.xml 파일이 있는 것도 알 수 있습니다.

실제로 2007 버전부터 Feature가 사용되었으며 개발자들이 생성할 경우는 수작업을 해주어야만 했습니다. 2010에서는 수작업이 많이 줄어든 모습을 알아보도록 하겠습니다.

이번 시간에는 xml 파일에 속성을 추가해보고 Feature Designer를 살펴보도록 하겠습니다.

Visual Studio 2010의 SharePoint 프로젝트의 Visual Web Part를 이용해서 Feature Designer를 알아봅니다.

프로젝트 이름을 FeatureDemo로 Empty 프로젝트를 생성하면 아래와 같이 솔루션 탐색기를 살펴볼 수 있습니다. Empty 프로젝트라 Features 폴더 밑에는 아직 아무것도 없습니다.

Visual Web Part 항목을 하나 추가합니다. 그러면 솔루션 탐색기는 아래 그림과 같이 변경됩니다.

Feature1을 오른쪽 클릭해서 이름을 VisualWPFeature로 변경합니다. VisualWPFeature을 오른쪽 클릭하면 View Designer를 메뉴를 클릭 해 볼 수 있습니다.

Title에 해당하는 제목을 FeatureDemo 라고 변경합니다. 설명에는 간단한 설명을 나열합니다. Scope는 사이트 컬렉션 또는 웹 등에서 보여주는 범위를 지정할 수 있습니다. 여기서는 Site로 지정합니다. 왼쪽에는 Package Explorer 가 나와 있습니다.

 

 

자 그럼 다른 쪽의 Feature 관련 내용을 알아봅니다. 솔루션 탐색기의 FeatureDemo 프로젝트를 오른쪽 클릭하고 속성을 선택하면 왼쪽에서 SharePoint 메뉴를 확인 가능합니다.

아래쪽 Edit Configuration에서 보면 Default, No Activation을 볼 수 있으며 Default를 선택하고 View 버튼을 클릭해봅니다.

배포 단계를 알 수 있으며 Activate Features 내용을 확인할 수 있습니다. No Activation은 배포후비활성화로 활성화 옵션이 없다는 것을 알 수 있습니다. 여기서는 Active Deployment Configuration에서 No Activation을 선택합니다.

 

FeatureDemo 프로젝트를 오른쪽 클릭하고 Deploy를 선택합니다. 배포가 완료되고 나면

Output 창에서 아래와 같은 배포 단계 결과를 확인할 수 있습니다. 현재 Feature는 비활성화 되어있기 때문에 단계에서 누락되어 있다는 것을 확인 가능합니다.

해당 사이트로 이동해서 사이트 설정의 사이트 컬렉션 기능으로 이동해보면 비활성화되어 있는 것을 아래와 같이 확인 가능합니다.

간단히 Feature를 Event Handler, Web Part 등의 작업시 이전 버전과는 수작업이 많이 필요 없다는 것을 살펴보았습니다. 앞으로 계속 보시게 될 겁니다.

Visual Studio 2010에서 새롭게 제공되는 Visual Web Part를 생성해서 배포, 테스트하는 예를 알아보도록 하겠습니다.

이전버전의 웹 파트는 디자인하기가 시간이 걸리는 작업이며 AJAX 기능을 구현하려고 해도 설정과 코딩이 필요합니다. 하지만 Visual Studio 2010에서 Visual Web Part를 이용하면 얼마나 쉽게 생성할 수 있는지 알아보겠습니다.

Visual Studio 2010에서 프로젝트를 생성하면서 Empty SharePoint Project에서 새 항목을 추가하면서 Visual Web Part를 추가해도 되고 별도로 Visual Web Part 프로젝트를 통해서 생성해 됩니다.

Empty SharePoint Project는 해보았으니 새롭게 Visual Web Part 를 구성해보겠습니다.

프로젝트 이름은 VisualWPDemo 라고 하고 OK을 선택합니다.

SharePoint Customization Wizard에서는 OK를 선택합니다.

생성된 프로젝트의 솔루션 탐색기를 보면 새 항목으로 Visual Web Part 항목이 추가된 것을 알 수 있습니다. Visual Web Part에서는 Web Part와 항목이 동일한데 ascx와 ascx.cs가 들어가 있는 것을 확인할 수 있습니다.

그리고 VisualWebPart1.cs에서는 ascx 컨트롤을 CreateChildControls에서 로딩하는 것을 아래 그림에서 알 수 있습니다.

개발자들이 ascx에서 데이터바인딩과 디자인, AJAX 등에 대한 구현을 하면 일반 웹 파트와 동일하게 사용자 정의 컨트롤(ascx)이 Controls에 추가되어 처리됩니다.

 

자 그럼 데이터 바인딩과 AJAX를 가미해서 배포해보도록 하겠습니다.

AJAX 웹 파트를 위한 복잡한 web.config 구성 작업은 필요 없습니다.

디자인은 아래 그림에서처럼 AJAX의 UpdatePanel 안에 DropDownList와 GridView를 배치하고 GridView는 디자인을 적용했습니다.

ascx.cs 코딩은 생략하겠습니다. 일반적인 ADO.NET 이라..,

 

결과는 아래와 같습니다. 간단하게 AJAX 기능과 컨트롤의 디자인을 적용된 것을 확인 할 수 있습니다.

SharePoint 2010 개발 중에서 Visual Web Part에 대한 내용을 알아보았습니다.

일반 웹 파트 개발과 병행해서 사용하면 좋을 듯 합니다.

이전 블로그에서는 개발 환경 테스트 개념으로 간단한 Web Part를 생성해보았는데

여기서는 데이터베이스 연동과 여러 기능을 붙여 좀더 구체적으로 Web Part를 생성해보겠습니다.

말씀드릴 내용은 MOSS 2007에서 했던 내용과 동일한 내용입니다. Hello World는 너무 간단하여 데이터베이스 연동과 속성 노출 등을 구성해봅니다.

다음 블로그에서는 VS 2010에서의 SharePoint 지원 내용으로 Visual Web Part와 AJAX를 가미해서 보다 더 쉽고 강력하게 개발하는 내용을 다뤄보겠습니다.

완성된 모습은 아래와 같습니다. 텍스트 상자에 카테고리 ID를 입력하고 버튼을 누르면 해당 제품 이름과 가격 리스트가 표시되며 속성을 노출해서 카테고리 ID 기본값을 입력할 수 있습니다.

새로운 프로젝트를 생성합니다. SharePoint의 Empty 프로젝트를 선택하고 이름은 SP10WP 라고 지정합니다.

SharePoint Customization Wizard에서는 http://sp10:8090으로 선택합니다.

솔루션 탐색기에서 추가 > 새 항목> 웹 파트를 새로 추가합니다. 이름은 ProductsWP라고 합니다.

생성된 웹 파트 항목의 솔루션 탐색기 구조는 아래처럼 구성되어 있습니다.

Feature와 Package가 포함되어 있으며 디자이너를 통해 편집이 가능하며 향후 구체적으로 다루어 보겠습니다.

ProductsWP 폴더는 Elements.xml와 ProductsWP.cs, ProductsWP.webpart로 구성되어 있습니다.

Elements.xml은 Feature의 구체적인 파일로서 웹 파트 위치나 URL 등을 지정할 수 있습니다.

ProductsWP.webpart는 웹 파트의 메타데이터를 나타내는 파일입니다.

ProductsWP.cs 는 코딩으로 컨트롤과 데이터바인딩, 속성 등을 정의하는 파일입니다.

 

코드에서는 구체적으로 보지 말고 RenderContents, OnLoad 메서드만 보도록 하겠습니다.

해당 메서드에서는 화면에 입력 폼을 구성하고 데이터베이스 연동하여 데이터 바인딩을 해주는 내용입니다.

OnLoad 에서 컨트롤을 생성해주는 내용입니다. Web Part 항목에서는 디자이너를 제공하지 않아 직접 아래와 같이 생성해야 합니다.

속성 노출에 대한 내용은 아래와 같습니다.

위의 실제 결과는 아래 그림과 같습니다.

Hello World 보다 좀 더 발전된 웹 파트를 VS 2010 환경하에서 생성하고 테스트해보았습니다. 코드가 상당히 손이 많이 가고 디자인하기 좀 곤란한 측면이 있습니다. 하지만 어떤 경우에서는 위와 같이 생성해야 할 듯 합니다. 다음에 다룰 내용은 Visual Web Part와 AJAX로 더 손쉽고 강력하며 디자인이 지원되는 모습을 알아보도록 하겠습니다.

SharePoint 2010 개발을 하기 위해 SharePoint 2010, Visual Studio 2010를 설치해서 개발 환경을 구성해보도록 하겠습니다. 구체적인 화면 하나하나는 생략하고 간단하게 개발 환경 구성을 정리했습니다.

1.     Windows 2008 R2 64비트 설치합니다.

2.     Windows 2008 R2 64비트 역할을 아래와 같이 추가합니다.

가.   웹 서버 역할

 

나.   .NET Framework 3.5 SP1

3.     Litwareinc.com 으로 Active Directory를 구성합니다.

4.     SQL Server 2008 R2를 설치합니다. R2를 설치하는 이유는 PowerPivot등을 테스트하기 위해서 위해서입니다.

 

5.     SharePoint 2010 설치 미디어를 실행합니다.

6. Software prerequisites 설치합니다. 인터넷으로 다운로드 받기 때문에 인터넷이 연결되어야 합니다.

7.     SharePoint Server를 설치합니다.

  가.   SharePoint Server 설치 시작

  나.   Server Farm 선택

다.   Configuration 마법사

   라.   중앙 관리 사이트에서 Farm 구성

  마.   SharePoint 사이트 생성

몇몇 구성은 아직 하지 않았지만 이상으로 SharePoint 2010 설치가 완료되었습니다.

 

8.     Office 2010을 설치합니다.

9.     Visual Studio 2010 설치하여 새 프로젝트에서 SharePoint 를 클릭해서 보시면 아래와 같은 화면을 보실 수 있습니다

다음 블로그에서 간단한 웹 파트를 생성해서 개발 환경 구성이 완료되었는지 확인해보도록 하겠습니다.