SharePoint 2010에서의 Ribbon

 

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을 클릭할 경우 대화 상자를 처리해 보도록 하겠습니다.