Visual Studio 2010 공식 팀 블로그 @vsts2010

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

오피스 2007 부터 적용되어온 리본 UI에 대해서는 이제 모르는 분이 없을 정도로 많이 대중화 되었습니다.

윈도우 7에서는 그림판, 워드패드 등의 기본 프로그램에도 리본 UI가 적용되어서 사용자에게 편리함을 주고 있습니다.

이러한 리본 UI를 적용해서 개발을 하고 싶을 때는 MFC를 이용한 방법이 있습니다.

MFC 프로젝트를 생성하고 마법사에서 오피스 스타일의 프로젝트를 선택하면 리본 UI가 적용되어 사용 할 수 있습니다.

이렇게 프로젝트를 생성하고 실행시켜보면 리본 UI가 적용된 것을 확인 할 수 있습니다.

MFC에서는 이렇게 기본적으로 지원을 해주었지만 또 다른 윈도우 어플리케이션 개발 방법인 WPF에서는 지금까지 정식으로 지원을 하지 못했습니다.

기본 컨트롤에서는 제공하지 못하고 따로 컨트롤이 제작되어 지원을 준비하고 있었는데 이번에 RTW 버전이 출시되어 WPF 기반의 응용 프로그램 개발에서 리본 UI를 쉽게 사용할 수 있게 되었습니다.

RTW 출시 이전 단계에서는 .dll 파일을 수동으로 참조해서 번거롭게 작업을 해야 했었는데 이번 RTW부터 많은 편의성이 향상되었습니다.

첫째,  .MSI 인스톨러를 지원하여 번거로운 작업을 하지 않아도 쉬운 설치로 사용 할 수 있게 개선되었습니다.

둘째, WPF 개발에 많이 사용되는 MVVM 패턴을 지원하여 최신의 개발 방법을 지원하고 있습니다.

셋째, WPF 개발을 할 때 Expression Blend 사용이 거의 필수적인데 Blend에서 디자인 타임에서 리본 UI를 지원하여 편리한 UI 개발을 할 수 있게 되었습니다.

넷째, Visual Studio와 Expression Blend에서 프로젝트 템플릿을 지원하여 리본 UI 스타일 개발을 쉽고 빠르게 해줍니다.

   1: <ribbon:RibbonWindow x:Class="WpfRibbonApplication1.MainWindow"

   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:         xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

   5:         Title="MainWindow"

   6:         x:Name="RibbonWindow"

   7:         Width="640" Height="480">

프로젝트를 생성하고 xaml 코드를 살펴보면 ribbon 네임스페이스에 관련 컨트롤이 추가된 것을 볼 수 있습니다.

리본 UI 컨트롤은 ribbon 접두어를 사용하면 해당 컨트롤이 표시되게 됩니다.

그리고 일반 WPF 프로젝트는 루트 엘리먼트가 Window인데 리본 UI가 적용되면 RibbonWindow가 사용되는 것을 알 수 있습니다.

   1: <ribbon:Ribbon x:Name="Ribbon">

   2:     <ribbon:Ribbon.ApplicationMenu>

   3:         <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">

   4:             <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"

   5:                                               x:Name="MenuItem1"

   6:                                               ImageSource="Images\LargeIcon.png"/>

   7:         </ribbon:RibbonApplicationMenu>

   8:     </ribbon:Ribbon.ApplicationMenu>

   9:     <ribbon:RibbonTab x:Name="HomeTab" 

  10:                       Header="Home">

  11:         <ribbon:RibbonGroup x:Name="Group1" 

  12:                             Header="Group1">

  13:             <ribbon:RibbonButton x:Name="Button1"

  14:                                  LargeImageSource="Images\LargeIcon.png"

  15:                                  Label="Button1" />

  16:  

  17:             <ribbon:RibbonButton x:Name="Button2"

  18:                                  SmallImageSource="Images\SmallIcon.png"

  19:                                  Label="Button2" /> 

  20:         </ribbon:RibbonGroup>

  21:         

  22:     </ribbon:RibbonTab>

  23: </ribbon:Ribbon> 

실제 UI부분의 코드를 보면 이전에는 일일이 직접 코딩을 해줘야 했던 부분이 자동적으로 가능하게 되어 정말 편리하게 변했습니다. 이제 리본 컨트롤을 사용하여 WPF 환경에서도 편리하게 UI 개발을 할 수 있게 되었습니다.

이번에는 간단한 소개 정도로 마치고 다음부터는 WPF에서 리본 컨트롤을 사용하는 세부적인 내용을 차근차근 알아가도록 하겠습니다.

※ WPF Ribbon 컨트롤 다운로드