[Sitecore WPF]Sitecore Web Part Framework をインストールしてみる

概要:Sitecore の Marketplace に ASP.NET で提供される Portal Framework をSitecore用に拡張したWeb Part Frameworkモジュールが提供されています。今回は Sitecore Web Part Framework のインストールをしてみます。インストールした後サンプルページの解説やインストールコンポーネントの簡単な解説もしてみます。
投稿者：handcraft 公開日：7/27/2013 閲覧数:4429 評価者数：0

Sitecore の Marketplace には ASP.NET で提供される Web Part Framework を拡張した Web Part Framework モジュールが公開されています(下記リンク参照)。Web Part Framework モジュールを使用するとサイトコアでもユーザーがカスタマイズできるポータルページを作成することができます。何回かに分けてポータルフレームワークの使い方を解説していきたいと思います。今回はWeb Part Framework のインストールとサンプルページの説明そしてインストールされるコンポーネントの簡単な説明をしていきます。

Web Part Framework
http://marketplace.sitecore.net/en/Modules/Web_Part_Framework.aspx

検証環境

Sitecore CMS 6.6 Update 6
Web Part Framework Version 2.2.0 Revision 090316
.NET 4.0

Web Part Framwork について

Web Part Framework は ASP.NET の Web Part をベースとしてサイトコア用に拡張したソリューションです。コンテンツツリー上のアイテムを使用してページにユーザーが配置、移動可能なプレゼンテーションコンポーネントを制御できるようになります。上記サイトからパッケージ,pdfドキュメント,ソースコードをダウンロードできます。pdfドキュメントはダウンロードして内容を確認するとよいと思います。ASP.NET Web Part Framework を拡張したものなので、ASP.NET の Web コントロールや User Control, ASP.NET の WebPart を配置できます。Sitecore Web Part Framework では上記に加えてサブレイアウトXSLレンダリングやサイトコアのWebコントロール, サイトコアが拡張したWeb Partをユーザーが配置できるようにすることができます。

1. インストール

早速インストールをしてみます。まずhttp://marketplace.sitecore.net/en/Modules/Web_Part_Framework.aspxのページからパッケージファイルをダウンロードしてください。今回は記事作成時点の最新パッケージ Web Part Framework220 rev 090316.zip をダウンロードしました。マーケットプレースのページではソースコードはドキュメントのpdfファイルもダウンロードすることができます。

サイトコアデスクトップにログインし、スタートメニュー→開発ツール→インストールウィザードをクリックします。インストールウィザードが起動します。次へをクリックします。

パッケージを選択画面が表示されます。アップロードボタンをクリックします。ファイルアップロード画面が表示されるので、Marketplace からダウンロードしたパッケージをアップロードしてください。

アップロードダイアログから復帰すると、アップロードしたファイルが選択されていると思います(そうでない場合は参照ボタンでインストールするパッケージを選択してください)。次へボタンをクリックしてください。

使用許諾契約書画面が表示されます。同意しますを選択して次へボタンをクリックします。

インストール準備完了画面でインストールされるパッケージ名、バージョンを確認してインストールボタンをクリックします。

インストールが始まります。

インストールが完了したら、終了ボタンをクリックしてください。

これで Web Part Framework パッケージをインストールできました。あとは Web.config にポータルフレームワークの設定を記述します。Web.config を開いて、 <system.web> ノードに次の webParts の設定追加します。

    <webParts>
      <personalization
      defaultProvider="SitecorePersonalizationProvider">
        <providers>
          <add name="SitecorePersonalizationProvider"
          type="Sitecore.Modules.WebPartFramework.Web.WebParts.SitecorePersonalizationProvider"
          driver="RegistryPersonalizationDriver"
          database="master"/>
        </providers>
        <authorization>
          <deny users="*" verbs="enterSharedScope" />
          <allow users="*" verbs="modifyState" />
        </authorization>
      </personalization>
    </webParts>

providers の定義で SitecorePersonalizationProvider を設定しています。Database で指定したデータベースにページごと、ユーザーごとのWebPart配置の設定が保存されます。上記の場合、 masterデータベースのProperties テーブルにポータルページのコントロールの配置情報が格納されます。コンテンツデリバリー環境用のWeb.config の場合は web 等適切なデータベース値を設定する必要があります。

2. サンプルを動かしてみる

インストールが終わったらサイトのパブリッシュをしてください。サイトコアデスクトップをログオフして、パブリッシュ先の外部サイトに接続します。下図のように [SitecoreをインストールしたベースURL]/WPF%20sample.aspx にアクセスするとWeb Part Framework を使用したサンプルアイテムのページを表示することができます。サンプルページには WebPartZone の ZoneTemplate に設定されている ASP.NET 標準の Calnedar コントロールが表示されています。

上手で Minimize リンクボタンをクリックすると下図のようにコントロールが最小化されます。

ドロップダウンリストで Desig Mode を使用すると WebPartZoneに配置されたコントロール(WebPart,UserControl等も含む) をドラッグアンドドロップで移動できるようになります。コントロールは同じ Web Part Zone 内や別の Web Part Zone に移動することができるようになります。他の主要なブラウザーでもドラッグアンドドロップでアニメーションをさせながらWebPartやユーザーコントロールなどのコントロールを移動できるようです。

ドロップダウンリストから Catalog Mode を選択すると下図のようにページがカタログモードになります。カタログモードではページのカタログゾーンに設定されたコントロールをページに追加できるようになります。下図で Page Catalog や Declarative Catalog は ASP.NET Web Part Framework 標準のカタログです。もともとWeb Part Zone に配置されていたが画面から削除されたコントロールやWeb Part Zone には定義されていなかったがカタログゾーンのマークアップに定義されていたコントロールをページに追加できるようになります。下図で Available Web Parts のリンクは Sitecoreで拡張された　カタログゾーンになります。 Available Web Partsのリンクをクリックすると /sitecore/system/Modules/Web Parts 配下のWebPart 定義アイテムをページに追加できるようになります。

WPF Sample.aspx の中身意を見ると

CatalogZone の ZoneTemplate の中に次のようなマークアップがあります。

<framework:SitecoreCatalogPart id=" SitecoreCatalogPart1" runat="server" Source="{083EE64E-BEAE-4AF6-BE83-684FC2D6925D}" />

これは、サイトコアのWebParts定義アイテムとして定義されたWeb Partsコントロールのカタログを追加できるようにするためのマークアップです。

{083EE64E-BEAE-4AF6-BE83-684FC2D6925D} は/sitecore/system/Modules/Web Parts アイテムのGUIDです。なのでSource の値を変更することで他の場所のアイテム配下のWebPartsコントロールを追加できるようにすることもできると思います。

本アイテム配下に作成した WebPart, ReferenceRendering 定義アイテムのWebParts をページ上に追加できるようになります。

<framework:SitecoreCalogPart の上部には下記のようなマークアップがあります。これは ASP.NET Portal Framework で用意されている

このページに追加可能な WebParts をWebPartsTemplateに定義するマークアップになります。Declarative Catalog リンクをクリックしたときに追加できるコントロールを設定するマークアップになります。

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">

<WebPartsTemplate>

</WebPartsTemplate>

</asp:DeclarativeCatalogPart>

サンプルページのドロップダウンで Edit Mode を選択するとコントロールのプロパティを編集できるようになります。編集できるのはあくまで Editor Zoneで編集できるように事前に設定されたプロパティのみになります。

EditorZoneにはWebコントロールの編集用のマークアップが設定されています。AppearanceEditorPart, LayoutEditorPart などは ASP.NET Web Parts Framework 標準で提供されるコントロールです。

そのほか、サンプルページの WebPartZoneのZoneTemplate に配置するコントロールのマークアップを記述することでデフォルトでページに表示されるWebPartsなどのコントロールを登録することができます。もちろんサブレイアウトのユーザーコントロールや、Sublayout, XslFile Webコントロールを使用して静的にバインドするプレゼンテーションコンポーネントを設定したマークアップを記述することもできます。

WebPartZoneや CatalogZone, Editor Zone を使用したサイトコアで管理されるサイトのポータルページの作成はpdfドキュメントとサンプルページのレイアウトの実装を参考にしていただくと分かりやすいと思います。

3. インストールコンポーネントの確認

インストールとサンプルの動作させてみたので、インストールコンポーネントを簡単に見ていきたいと思います。詳細は pdf ドキュメントを参照してください。

3.1 インストールされるアイテム

/sitecore/content/Home/WPF Sample
サンプルページ表示用のコンテンツアイテムです。アイテムのレイアウト詳細のレイアウトに /sitecore/layout/Layouts/WPF Layout レイアウト定義アイテムが設定されています。WPF Layout 定義アイテムはサンプルページ用のaspxファイル用のアイテムになります。

3.2 定義アイテム

/sitecore/layout/Layouts/WPF Layout
サンプルページ表示用のレイアウト定義アイテムです。aspx ファイルは　/layouts/WPF Layout.aspx　に配置されています。 WPF Layout.aspx の中身を参照するとほとんど ASP.NET Web Parts Framework を使用するのと同じ感覚でマークアップを記述できることがわかると思います。

WPF Layout.aspx で注意する点としては、 aspxファイルを表示したときユーザーがログオンしていない場合、 extranet\WPFGuest というユーザーでログオンするコードが記述されていることです(下記コード例参照)。そのため匿名ユーザーでサンプルページを表示すると extranet\WPFGuest ユーザーでログオンし、ポータルページ上のパーソナライゼーションの設定が WFPGuest ユーザーの設定として保存されるということです。内部的な話になりますが、ポータルページのカスタマイズの設定は Properties テーブルに保存されます。

protected override void OnPreInit(EventArgs e)

{
    if (!Sitecore.Context.IsLoggedIn)
         {
            Sitecore.Security.Authentication.AuthenticationManager.Login( "extranet\\WPFGuest", "wpf");
         }
}

/sitecore/system/Modules/Web Parts
本アイテム配下に WebPart 用の定義アイテム(WebPart, ReferenceRendering) を作成するとポータルページにユーザーがプレゼンテーションコンポーネントを配置できるようになります。

/sitecore/templates/WebPart Framework
配下に次のデータテンプレートが登録されます。

WebPart
ReferenceRendering
Web Part Node

WebPart, ReferenceRendering はともに WebPart の定義アイテム用のテンプレートになります。WebPart はサイトコアで拡張した WebPart クラスを拡張して作成した WebPart クラスを登録するためのテンプレートです。ReferenceRendering はWebPartを含む複数のプレゼンテーションコンポーネントを1つのWebPartとして登録するためのデータテンプレートです。データソースを指定することができます。いずれも /sitecore/system/Modules/Web Parts 配下にWebPartsの定義アイテムを作成するときに使用するデータテンプレートになります。

Web Part Node データテンプレートはページに表示するサブレイアウトなど、WebPart を含むプレゼンテーションコンポーネントの配置情報を定義するためのアイテムになります。標準のASP.NET Web Part Frameworkで WebPartZoneのZoneTemplate にページにデフォルトで表示するコントロールのマークアップを記述しますが、 Web Part Node を使用することでコンテンツツリーのアイテムを使用してページにデフォルトで表示するプレゼンテーションコンポーネントの定義をすることができます。

3.4 ユーザー

extranet\WPFGuest というユーザーが作成されます。このユーザーはサンプルページで使用されます。本番で使用する場合は削除して下さい。

3.5作成されるファイル

次のファイルが作成されます。DefaultFramework.cssはサンプルページで使用されているcssファイルです。

/App_Config/Include/WebPartFramework.config
/layouts/WPFLayout.aspx
/DefaultFramework.css

4. まとめ

今回の説明は以上です。サイトコアのアドオンモジュール Web Part Framework をインストールし、サンプルを動かし、インストールされるコンポーネントの簡単な説明をしました。

次回以降 WebPart, REferenceRendering, Web Part Node データテンプレートを使用するサンプルをご紹介してみたいと思います。

記事を評価する

名前
Eメール(option)
Webサイト(option)
コメント
キャプチャの答え

Netplanetes Memo

技術的な備忘録,プログラミングサンプル,ツールを公開しているサイトです