.NETコントロールの使用によるOracle WebCenter Interactionでのマスター/ディテール・ポートレットの作成

このチュートリアルでは、以下を使用した一連のマスター/ディテール・ポートレットの構築方法について説明します。

約1時間

トピック

このチュートリアルでは、以下のトピックについて説明します。

このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロードし、表示されます。 (警告:すべてのスクリーンショットが同時にロードされるため、ご使用のインターネット接続によってはレスポンス・タイムが遅くなる場合があります。)

注:各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にある各アイコンの上にカーソルを置いてください。

概要

このチュートリアルでは、Oracle WebCenter Interactionポータルにおける.NETコントロールの使用について取り上げます。 通常、ページ上の2つのポートレットを使用する場合は、データを表示するためのマスター/ディテール・パターンが使用されます。 理想としては、これは、データの再表示に必要なポートレットのみがリフレッシュされるようにインプレース・リフレッシュを使用して実装されます。 マスター/ディテール・ポートレットのために.NETコントロールを、インプレース・リフレッシュを用いて使用するには、以下が必要です。

トピック・リストに戻る

さまざまな手法の説明に使用されるポートレット・アプリケーションは、3つのポートレットで構成されます。 Select Dateポートレットはカレンダー・コントロールであり、これによってユーザーが特定の日付を選択できます。 日付を選択する際に、Ordersポートレットがその日の(購入した書籍の)請求書を表示します。 Ordersポートレットで請求書を選択する際に、Order Detailsポートレットがその(購入した書籍の)請求書の詳細を表示します。 3つのポートレットはすべて.NETコントロールを使用します。Select DateポートレットはCalendarコントロールを、OrdersポートレットおよびOrder DetailsポートレットはGridViewコントロールを使用します。 アプリケーションのデータはxmlで保存されます。そうすることで、サンプル・データをフラット・ファイルで保存でき、修正および拡張が簡単に行えるためです。

ここで、完了したポートレットがどのように表示されるかを見てみましょう。 ユーザーは、以下の操作を行います。

  1. Select Dateポートレットの日付をクリックし、日付を選択します。 その日に売上があり、請求書が作成された場合は、それらの請求書の一覧がOrdersポートレットに表示されます。
  2. 請求書を表すOrdersポートレットの行をクリックします。 Order Detailsポートレットに、その注文の詳細が表示されます。

3つのポートレットはすべて.NETコントロールを使用し、ポートレット間の通信はScripting Frameworkのイベント・メカニズムを経由します。

 

トピック・リストに戻る

前提条件

このチュートリアルを始める前に以下のことを確認してください。

1.

次のアプリケーションにアクセスできるか、インストール済みであること

  • Oracle WebCenter 10g Release 3以降
  • Visual Studio 2005以降

 

2.

サンプル・コードを作成するためのVisual Studio Webサイトを作成済みであること

このOBE向けにVisual Studio Sample Webサイトを設定するには、以下を実行します。

  1. 始動サンプル・コードおよびソリューション・コードを含むwcc_obe_sample.zipファイルをダウンロードします (こちらをクリックし、ダウンロードします)。
  2. 適切な場所にファイルを解凍します。 サンプルおよびソリューションの2つのフォルダが表示されます。
  3. Visual StudioにWCC_sampleという名前のWebサイトを作成します。
  4. IDK APIにアクセスできるようにWebサイトを設定します(Oracle WebCenter Portlet Toolkitのインストールにより実行できます。ステップ3を参照してください)。
  5. 以下のファイルをWebサイトのルート・ディレクトリにインポートします。
    • orders.xml
    • orderdetails.xml
    • OrderDetails.aspxおよびOrderDetails.aspx.cs
    • Orders.aspxおよびOrders.aspx.cs

 

3.

.NET Web Control Consumer(Oracle WebCenter Portlet Toolkit for .NETの一部)をインストール済みであること

Web Control Consumer(WCC)を設定するには、以下を実行します。

  1. オラクルのOracle WebCenter Interaction Portlet Toolkitをダウンロードします。
  2. インストール手順に従って、少なくとも.NET Web Control Consumerをインストールします。

 

4.

OBEをサポートするWeb Center Interactionを設定していること

OBE向けのWeb Center Interactionを設定するには、以下を実行します。

  1. WCC Samplesという名前のAdministrationフォルダを作成します。
  2. このAdministrationフォルダで、リモート・サーバー、3つのWeb Serviceオブジェクト、および3つのポートレットを作成します。 ポートレットには以下の名前を付ける必要があります。
    • Order Details Portlet(OrderDetails.aspxを指すWebサービス・オブジェクトを含む)
    • Orders Portlet(Orders.aspxを指すWebサービス・オブジェクトを含む)
    • Select Date Portlet(SelectDate.aspxを指すWeb Serviceオブジェクトを含む。SelectDate.aspxはまだありませんが、後で作成します。)
  3. 2列のMy Page(WCC Samplesと呼ばれます)を作成し、右側の列にOrderDetailsポートレットを置き、左側の列にOrdersポートレットを置きます。

 

   

トピック・リストに戻る

イベントを発生させるMasterポートレットのコーディング

このトピックでは、Ordersポートレットをコーディングする最初の段階を完了させます。 これを行うために、請求書の一覧を表示するGridViewを追加します。 Select列を、クリックすると適切なイベントを発生させてOrder Detailsポートレットを起動するGridViewに追加します。

Order Detailsポートレットは、このイベントへ登録するようにすでに設定されています(リスンなど)。

XmlDataSourceの追加および構成
請求書を表示するGridViewの追加
行が選択された場合にイベントを発生

トピック・リストに戻る

XmlDataSourceを追加するには、以下の手順を実行します。

1.

Visual Studio Solution Explorerペインで、「Orders.aspx」をダブルクリックしてエディタで開きます。

 

2.

Designモードになっていない場合は、エディタの右下の「Design」をクリックしてDesignモードを選択します。

 

3.

[Ctrl + Alt + X]をクリックしてツールボックスを開き、XmlDataSourceを設計エディタへドラッグします。

 

4.

XmlDataSourceの上の小さな矢印をクリックし、ConfigureDataSourceを選択します。

 

5.

Dataファイルに"~/orders.xml"を入力し、「OK」をクリックします(属性をデータとしてxmlファイルが形式化されているため、Transformファイルに入力する必要はありません。 通常は、xmlファイルはこの方法で形式化されていないため、xsl変換ファイルを使用する必要があります)。

 

トピックに戻る

GridViewを追加するには、以下の手順を実行します。

1.

ツールボックスから、GridViewを設計エディタへドラッグします。

 

2.

GridView Tasksドロップダウン・コントロールで、「XmlDataSource1」データソースを選択します。


3.

設計エディタでGridViewを選択し(エディタのGridViewの外側に点線が表示されます)、プロパティ・パネルでWidthを100%に設定します。

 

4.

ポータルで、WCCサンプルと呼ばれるMy Pageを開きます。 Ordersポートレットに、すべての注文の一覧が表示されます。

 

トピックに戻る

注文を選択したときにOrdersポートレットがイベントを発生させるようにするには、以下の手順を実行します。

1.

エディタをSourceモードに切り替え、最初の<body>タグの真下に次のコード行を追加します。

<pt:namespace pt:token="$$PORTLET_ID$$" 
   xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/' /> 

 

 

2.

form1形式の後に次のJavaScriptブロックを追加します。

<script>
   thisPortlet$$PORTLET_ID$$ = 
      PTPortlet.getPortletByID($$PORTLET_ID$$);       
   function performRaiseEvent$$PORTLET_ID$$(invoiceId) {	 	   
      alert(invoiceId);
      thisPortlet$$PORTLET_ID$$.
         raiseEvent('showOrderDetail', invoiceId );     
   }
</script>

これにより、invoiceIdパラメータを含むイベントが発生します。 イベントはOrder Detailsポートレットによって検出され、関連する詳細が表示されます。

 

3.

Select列をGridViewに追加します。 前と同様に、GridViewタスクからAdd New Columnを選択します。 ダイアログで、「CommandField」フィールド・タイプを選択し、コマンド・ボタンのタイプで「Select」をクリックして、Buttonタイプは自動的に選択されるLinkにします。 「OK」をクリックします。


4.

GridViewプロパティ・パネルで、SelectedIndexChangedをダブルクリックします。 呼び出すメソッド名を持つプロパティGridView1_SelectedIndexChangedが移入され、C#コード・エディタへ進みます。

 

5.

GridView1_SelectedIndexChanged()メソッドで、以下のコードを追加します。

ClientScript.RegisterClientScriptBlock(typeof(Page),
   "raiseEventShowOrderDetail",
   "<script>performRaiseEvent" + portlet_id +
   "( " + GridView1.SelectedRow.Cells[1].Text + 
   " );</script>"); 

このコードは、選択済みのGridViewの索引が変更されると、performRaiseEvent<portlet_id> JavaScriptメソッドが呼び出されます。

注:RegisterClientScriptBlockメソッドは、ここではJavaScriptをクライアントへ呼び出すために使用されます。 請求書IDが索引1を使用してGridViewの2番目の列から取得される方法に注意してください(索引0は、選択列である最初の列です)。

また、performRaiseEvent<portlet_id>メソッド名は動的に構築する必要があることに注意してください。そのため、ポートレットIDを取得するコードを記述し、それを変数で置く必要があります(この場合、変数の名前はportlet_idです)。

 

6.

int型のクラス変数を宣言します。クラス変数としては、宣言はメソッド内では行えないことを思い出してください。 そのため、クラス変数をPage_Loadメソッドのすぐ上に置きます。

protected int portlet_id; 

 

7.

Page_Load()メソッドで、ポートレットIDを取得する以下のコードを追加します。

portlet_id = 
   Plumtree.Remote.Portlet.
      PortletContextFactory.
         CreatePortletContext(Request, Response).
            GetRequest().GetPortletID();  

このコードにより、HTMLリクエスト・ヘッダーからポートレットIDが取得されます。

 

8.

次にWCC Samples My Pageへ進み、任意の列のSelectリンクをクリックしてみましょう。 それぞれのリンクから、その請求書の詳細がOrder Detailsポートレットに生成されます。

これで、.NETコントロールによってJavaScript関数を呼び出すという目的は達成できました。 ただし、Ordersポートレットにはどの請求書を選択したかが表示されないため、機能的には不十分です。

 

9.

そこで、GridViewのプロパティに少し変更を加えます。 選択した行の背景色を黄色に設定します。

 

10.

WCC Sampleページをブラウザに再ロードし、Ordersポートレットでいくつか選択します。 直前に選択された請求書がハイライトされます。

 

トピックに戻る

トピック・リストに戻る

GridViewが行選択できるように変更

このトピックでは、Ordersポートレットを変更して、Selectリンクをクリックする代わりに、詳細を表示させたい請求書の行をクリックすれば済むようにします。 これを実行するためには、Render()メソッドを書き直すことにより、GridViewの動作方法を変更する必要があります。 OnRowDataBoundイベントに付属するメソッドなど、他のメソッドを使用してGridViewを変更することもできますが、その場合はEventValidationを無効化する必要があります。 Renderメソッドを使用すれば、ClientScriptManagerのRegisterForEventValidation()メソッドを呼び出して、コントロールに追加しようとするイベントを登録できます。 Renderでこれを行わなければならない理由は、Render()が呼出し(RegisterForEventValidation())を行うことができる唯一のメソッドであるためです。

ユーザーによるGridViewの任意の場所のクリックを許可

トピック・リストに戻る

ユーザーがGridViewの任意の場所をクリックできるようにするには、以下の手順を実行します。

1.

コード・ビハインド・ページ(Orders.aspx.cs)に進み、以下のメソッドとコードを追加します。

protected override void Render
                           (System.Web.UI.HtmlTextWriter writer) {
   foreach (GridViewRow row in GridView1.Rows) {
      if (row.RowType == DataControlRowType.DataRow) { 
         row.Attributes["onclick"] =
         Page.ClientScript.
         GetPostBackEventReference(GridView,
                                   "Select$" + row.RowIndex,
                                   true);
         row.Attributes.Add("style", "cursor:pointer;");
      }
   }
   base.Render(writer);
 } 
これにより、JavaScriptの呼出しが__doPostBack()に追加され、マウスがGridViewに移動するとカーソルをポインタ(手)に変化させるためのスタイルが追加されます。RegisterForEventValidation()への呼出しはないことにも注意してください。 これは、GetPostBackEventReferenceへの最後のパラメータに"true"を追加することにより、システムは自動的にポストバックを登録するためです。

 

 

2.

ソース・ページに進み、Visible = "False"属性を追加することにより、Select行を非表示にします。

コード行は、以下のようになります。

<asp:CommandField ShowSelectButton="True" Visible="False"/> 

(この行を削除することもできます。その場合は、必ずGridView列を参照するGridView1_SelectedIndexChanged()メソッドのコードを調整してください。)

 


3.

次に、WCC Samples My Pageに進み、行の任意の場所をクリックします。 クリックできる場所ならどこでもカーソルが手の形に変わり、Order Detailsポートレットが正しく反応することが分かります。

 

トピックに戻る

トピック・リストに戻る

GridViewがポストバックなしでイベントを発生させるように変更

このトピックでは、GridViewがクライアント側でのみ動作し、サーバーへポストバックしないように変更します。

このトピックでは、__doPostBack()を呼び出さずにScripting Frameworkイベントを発生させることができるようにGridViewを変更する方法を説明します。 前のトピックでは、GridViewによってJavaScript関数を呼び出し、Scriptingフレームワークと通信することができました。 これは、Renderメソッドをオーバーロードして、GridViewのそれぞれの行にonclickメソッドを追加することによって行いました。 onclickメソッドは、サーバー側へポストバックされる__doPostBack()を呼び出し、一部のJavaScriptを書き戻すGridView1_SelectedIndexChangedを呼び出しました。そして、performRaiseEvent<portlet_id>への呼出しを呼び出す原因となりました。

これは優れたソリューションではありますが、場合によっては別の方法が適切なことがあります。 onclickメソッドはGridViewの行に追加できるため、このonclickメソッドにperformRaiseEventメソッドを直接呼び出させることができます。 この方法では、サーバーへのポストバックはなく、その必要もありません (通常、これは利点となりますが、この方法には欠点があることが分かります)。 (onclickメソッドの書込みのため)再度Render()メソッドを使用できますが、ポストバックがないために検証の必要がなく(たとえば、RegisterForEventValidation()を呼び出す必要がありません)、OnRowDataBoundイベントのメソッドを使用できます。 これにより、コードが多少単純になります。

このトピックを進むにつれ、この方法の利点と欠点とが分かるようになります。

クライアント側の関数呼出しを作成するOnRowDataBoundイベントのコーディング
選択した行のハイライト表示を実装するコードの記述
GridViewヘッダーをポータル・スタイルへ設定

トピック・リストに戻る

OnRowDataBoundをコーディングするには、以下の手順を実行します。

1.

設計エディタでGridViewを選択します。

2.

プロパティ・パネルの「Event」アイコンをクリックし、「RowDataBound」をダブルクリックします。 このイベントのデフォルト名を持つメソッドが作成され、コード・エディタが表示されます。


3.

以下のコードをGridView1_RowDataBoundメソッドに追加します(索引はこのID行向けであるため、Select列が存在しても非表示の場合は"1"になり、Select列が削除された場合は"0"になることに注意してください)。

if (e.Row.RowType == DataControlRowType.DataRow) {
   e.Row.Attributes.Add("onclick", 
                        "javascript:performRaiseEvent" + 
                        portlet_id + 
                        "('" + 
                        e.Row.Cells[1].Text + 
                        "');");
   e.Row.Style["cursor"] = "pointer";
}

 

4.

Render()メソッド全体をコメント・アウトします。

5.

次にWCC Samples My Pageへ進み、任意の列のSelectリンクをクリックしてみましょう。 機能は以前と同じで、以下の2つの例外があります。

  • ポストバックなし
  • 選択した行のハイライト表示なし

これは、利点(ポストバックなし)と欠点(GridViewの一部の機能ではポストバックが必要)の両方を示しています。 この場合、行のハイライト表示機能のみが必要であるなら、これを追加できます。

 

トピックに戻る

選択した行のハイライト表示を手動で実装するには、以下の手順を実行します。

1.

以下のJavaScript関数をOrders.aspxに追加します。

function hilite(control, rowId){
   if(document.getElementsByTagName){
      var table = document.getElementById(control);
      var rows = table.getElementsByTagName("tr");
      for(i = 1; i < rows.length; i++){
         rows[i].style.backgroundColor = "white"; 
      }
      rows[rowId + 1].style.backgroundColor = "yellow";
   }
}

 

 

2.

以下の行をGridView1_RowDataBoundメソッドに追加します。この行は色を設定してperformRaiseEvent<portlet_id>を呼び出すため、呼出しを行う行のみを削除(またはコメント・アウト)します。

e.Row.Attributes.Add("onclick", 
                     "javascript:hilite('GridView1'," + 
                     e.Row.RowIndex + "); performRaiseEvent" + 
                     portlet_id + "('" + 
                     e.Row.Cells[1].Text + "');");

 

 

3.

ここで、Ordersポートレットの機能を確認します。 Ordersポートレットは、ポストバックしてGridView1_SelectedIndexChangedメソッドを使用しJavaScript関数を呼び出したときとまったく同じように動作するはずです。

選択部分のハイライトの追加のみが目的であれば、この方法が適しています。 JavaScriptの直接的な呼出しは非常に効率的ですが、.NETコントロールはその方法を行うようには設計されておらず、機能に制限がある場合があります。

トピックに戻る

ヘッダー・テキストをOrder Detailsポートレットのヘッダー・テキストに一致させるためには、以下の手順を実行します。

1.

エディタにOrders.aspxをソース・モードで開き、以下の属性を<asp:GridView>ノードに追加します。

AutoGenerateColumns="False" 

GridViewのコードは以下のようになります。 必要がなくなった無関係な属性が含まれていることが分かります。 それらの属性は今はそのままにしておき、後で削除できます。

(これは設計モードで実行できますが、多くの場合はソースに直接変更を加えることも簡単です。 次のいくつかの手順では、直接ソースで作業を行います。)

 

2.

以下を<Columns>ノード内に追加します。

<asp:BoundField DataField="id" 
                HeaderText="Invoice Id" 
                SortExpression="id" />
<asp:BoundField DataField="customer" 
                HeaderText="Customer Name" 
                SortExpression="customer" /> 
<asp:BoundField DataField="date" 
                HeaderText="Date" 
                SortExpression="date" />

 


3.

</Columns>クローズ・タグの後と</asp:GridView>クローズ・タグの前に以下を追加します。

 <HeaderStyle Wrap="False" BackColor="Silver" 
              CssClass="platportletHeaderBg customappText" /> 

ここでは、背景色の設定と、ポータルCSSクラスのGridViewのヘッダー行への追加を行うのみであることに注意してください。

 

4.

WCC Samples My Pageに進みます。 Ordersポートレットの表見出しは、他のポートレットの表見出しと一致するようになります。

 

トピックに戻る

トピック・リストに戻る

イベント検出時の.NETコントロール・ポートレットのリフレッシュ

ここまで、.NETコントロールによってScripting Frameworkを使用し、イベントを発生させる方法について説明しました。 イベントを発生させる代わりに、.NETコントロール・ポートレットがイベントを登録し、そのイベントが検出されたときにインプレース・リフレッシュを実行する必要がある場合は、別の一連の課題を検討する必要があります。

最初に、使用するメカニズムを決定する必要があります。 WCCが有効化されている場合は、.NETコントロールがポートレットでリフレッシュする際に自動的にインプレース・リフレッシュを行いますが、Scripting FrameworkではRefresh()メソッド、それにRefreshOnEventメソッドが提供されます。

このトピックではWCCの方法を使用しますが、後でOrder Detailsポートレットと、これによるScripting FrameworkのformRefresh()メソッドの使用について説明します。

Ordersポートレットを起動してそれ自体をリフレッシュさせるためには、最初に、カレンダーを使用してイベントを発生させるSelect Dateポートレットを作成します。 それから、Ordersポートレットがこのイベントを検出するようにコーディングし、対象となる日に行われた注文とともにリフレッシュします。

カレンダーを含むポートレットの作成
イベントを発生させるカレンダー・ポートレットのコーディング
Ordersポートレットにイベントを登録
Ordersポートレットが選択された日の請求書を表示するようにコーディング

トピック・リストに戻る

Calendarポートレットを作成するには、以下の手順を実行します。

1.

http://localhost/WCC_Sample」を右クリックし、「Add New Item」を選択します。

 

2.

テンプレートとして「WebForm」を選択し、Webフォームの名前にSelectDate.aspxと入力します。 「Add」をクリックします(必ずSelectDate.aspxの名前を使用してください。Webサービスおよびポートレットは、この名前を使うように設定済みです)。


3.

ツールボックスを使用して、SelectDate設計エディタにカレンダーを追加します。

 

4.

WCC SamplesページにSelectDateポートレットを追加します。

WCC Sample My Pageを再ロードすると、カレンダーが表示されてその上をクリックできますが、まだ何も作用しません。 イベント・フレームワークを追加して、カレンダーとOrdersポートレットとを相互作用させる必要があります。

 

 

トピックに戻る

Calendarポートレットでイベントを発生させるには、以下の手順を実行します。

1.

設計エディタで、カレンダーの日付の1つをダブルクリックします。

Visual StudioがカレンダーのSelectionChangedイベントを構成し、このイベントを処理するメソッドのメソッド・スタブを追加します。 このメソッド・スタブは、必要なコードを追加できるようにコード・エディタに表示されます。

 

2.

Orders.aspx.csで行ったように、ポートレットIDを取得して、保護されたint変数であるportlet_idに保存するために必要なコードを追加します。

それから、以下のコードをCalendar1_SelectionChangedメソッドに追加します。

String javascriptCodeToRaiseEvent =
                 "<script> searchByDate" + 
                 portlet_id + 
                 "('" + Calendar1.SelectedDate.ToShortDateString() + 
                 "'); </script>";   
  
ClientScript.RegisterClientScriptBlock(typeof(Page), 
                                      "raiseSelectDateEvent", 
                                      javascriptCodeToRaiseEvent);

 


3.

Ordersポートレットで行ったように、SelectDate.aspxの<body>オープン・タグのすぐ下に名前空間タグを追加します。

そして、Calendar1_SelectionChangedメソッドに追加したコードによって呼び出される以下のJavaScript関数を追加します。

<script>
   thisPortlet$$PORTLET_ID$$ = PTPortlet.getPortletByID($$PORTLET_ID$$);  
   function searchByDate$$PORTLET_ID$$(orderDate)	{
      thisPortlet$$PORTLET_ID$$.raiseEvent('showOrders', orderDate );
    } 	
</script>

イベント名がsearchByDate<portlet_id>であることに注意してください。

カレンダー向けのDayRenderイベントもありますが、これをポストバックせずにクライアント側だけでJavaScriptを使用するように再記述するのはGridViewを用いるよりも難しいため、最適なのは、ポストバック・アプローチおよびRegisterClientScriptBlock()メソッドを使用することです。

 

4.

最後に、このチュートリアルは2009年5月中には完了しない可能性があるため、SelectDate.aspx.csのPage_Loadメソッドに以下のコードを追加します。

Calendar1.VisibleDate = DateTime.Parse("5, 6, 2009");

これにより、カレンダーは確実に2009年5月にオープンします。サンプル・データはこの月の6日、7日、8日および9日向けであるため有益です。

WCC Samples My Pageを表示させることもできます。 Ordersポートレットはまだカレンダー・イベントをリスンするように変更されていないため、カレンダーで日付を選択する機能はありません。ただし、コンパイル・エラーまたはJavaScriptエラーのいずれのエラーもないはずです。

 

トピックに戻る

OrdersポートレットがCalendarポートレットによって発生したイベントをリスンするように変更するには、以下の手順を実行します。

1.

JavaScript行をOrdersポートレットのコードに追加し、カレンダーによって発生するイベントを登録するようにします。

thisPortlet$$PORTLET_ID$$.registerForEvent
                             ('showOrders', 
                              getByDate$$PORTLET_ID$$);

 

2.

上記のコードでコールバック関数として登録されたJavaScript関数を追加します。

function getByDate$$PORTLET_ID$$(theDate) {
  __doPostBack('showOrders',theDate);
} 

このコードは、__doPostBack()関数を使用しますが、これはインプレース・リフレッシュを確実に行うためにWCCを使用することを意味します。 後で、このOBEでは、この目的のために代わりにScripting Frameworkを使用する例を示します。 __doPostBack()は日付パラメータをサーバー側へ渡し、日付パラメータはXmlDataSourceをフィルタリングして対象の日付の請求書のみを返すために使用できます。

ただし、__doPostBack()メソッド呼出しを使用できるようにするには、このJavaScript関数がサーバーによって確実にページに追加されるようにする必要があります。 これを行うためにはいくつか方法がありますが、簡単な方法は、単にLinkButtonをページへ追加する方法です。

<form1>タグ内に以下のコードを追加します。

<asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton> 

 


3.

サーバー側をコーディングする前に、最初にXPath問合せをXmlDataSourceに加えて請求書を返さないようにします。 以下が、これを行うためのXPath問合せです(フィルタリングする文字列が一重引用符の中に入ります。ここでは、請求書を返さないため文字列は空になっています)。

 //Invoice[@date=''] 

asp:XmlDataSource宣言は以下のようになります。

<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
                   DataFile="~/orders.xml" 
                   XPath = "//Invoice[@date='']">
</asp:XmlDataSource>

 

4.

ページを再ロードしてみましょう。 Ordersポートレットにはデータがなくなっています。

 

トピックに戻る

OrdersポートレットがCalendarポートレットによって発生したイベントをリスンするように変更するには、以下の手順を実行します。

1.

以下のコードをPage_Loadメソッドに追加します。

string selectDate = ""; 
if (Request["__EVENTTARGET"] == "showOrders") {
   selectDate = Request["__EVENTARGUMENT"].ToString();    
   Response.Write("Got Request - selectDate is: " + 
                   selectDate + "<br>");
}

ページを再ロードしてから、Select Dateポートレットで日付を選択します。 以下のように、Ordersポートレットの上部に日付が表示されます。

 

 

2.

次に、XPathを設定するコードを追加して、選択した日付の正しい請求書が表示されるようにします。 IsPostBackブールを使用し、これがポストバックかそうでないかを確認します。 この方法では、最初のページ・ロード時に異なるメッセージを与えることができます。

以下のコードをPage_Loadメソッドの、日付の値を取得するために前に追加したコードのすぐ下に追加します。

if (IsPostBack) {
   XmlDataSource1.XPath = "//Invoice[@date='" + selectDate + "']";
   GridView1.DataBind();
   if (GridView1.Rows.Count == 0) {
      Response.Write("No invoices for that date.<br>");
   }
}


3.

再度ページを再ロードし、日付を選択します。 6日、7日、8日および9日のみに請求書が含まれていることを思い出してください。 選択した日付の請求書がOrdersポートレットに表示されます。

 
4.

else文を追加し、ページが最初にロードされたときに関連するテキストがポートレットに含まれるようにします。

以下のelseブロックを追加します(if(IsPostBack)ブロックの直後に置きます)。

else {
   Response.Write
     ("Select a date from the Date Select portlet.<br>");
} 

最終的に、デバッグに使用されたResponse.Write文はすべて削除します (if(IsPostBack)ブロック内の日付を取得するコードも移動できます)。

 

5.

SelectDateポートレットおよびOrdersポートレットのコーディングが完了しました。 WCC Samples My Pageに進み、ポートレットを試してみます。 2009年5月6日、7日、8日および9日の請求書が取得できます。

 

トピックに戻る

トピック・リストに戻る

Oracle Scripting Frameworkの使用による.NETコントロール・ポートレットのリフレッシュ

このOBEの最後では、OrderDetailsポートレットを確認します。 このポートレットで使用した手法と異なり、.NETコントロール・ポートレットはScripting Frameworkを使用してリフレッシュを行います。 コードはドキュメント化されていますが、以下に詳細な説明をします。

OrderDetailsは、Scripting Frameworkを使用して、.NETコントロールをポータルで使用する方法を説明するために設計されています。 また、OrderDetailsはWCCを使用しません。 以下のコード・サンプルから分かるように、WCCは無効化されています (通常、WCCはWebサイトのすべてのWebフォームのWeb.Configで定義されます。そのため、あるWebサイトでWCCが有効化されている場合、そのWebサイトの特定のWebフォームでWCCを稼働させたくない場合は明示的に無効化する必要があります)。

トピック・リストに戻る

Scripting Frameworkを使用してリフレッシュを行う.NETコントロール・ポートレットのaspxページを作成するには、以下のコードの使用に注意してください。

1.

Scripting Frameworkを使用する際にデータをサーバー側へ戻すために、OrderDetailsポートレットはフォームに非表示入力を追加します (もう1つの優れた方法として、セッション・プリファレンスを使用して値を保存する方法があります)。

 

2.

OrderDetailsでは、Ordersポートレットと同様にXmlDataSourceを使用します。 ただし、OrderDetailsポートレットの場合、XPathはID属性上でフィルタ処理を行います。

 

3.

GridViewは、上で定義されたXmlDataSourceを使用します。 OrderDetailsはWCCを使用しないため、GridView ID(GridView1)は再書込みされない点に注意してください(そのため、ページ上の別のポートレットの別のGridViewとぶつかり合う可能性があります)。 ただし、コードの後半に見られるように、コード・ビハインド・ページで明示的に再書込みを行う方法があります。


4.

JavaScriptブロックには、イベントを登録するためのコマンドとコールバック関数が含まれます。 この関数には以下の2つの文があります。

  1. イベントによって渡される値をフォーム、フォーム1の非表示フィールドに保存する文
  2. フォーム名で渡すPTPortletのformRefreshメソッドへの呼出し。 フォーム名は明確な名前であり、aspxファイルおよびポートレットIDで定義された名前で構成されます。C#ファイルでは、WCCがこのポートレットで無効化されていても、これが実行される様子が分かります。

 

トピックに戻る

Scripting Frameworkを使用してリフレッシュを行う.NETコントロール・ポートレットのコード・ビハインド・ページを作成するには、以下のコードの使用に注意してください。

1.

以下の(Page_Loadメソッドの)コードにより、WCCを使用しないScripting Frameworkとの.NETコントロール・ポートレットの使用を説明するためにWCCが無効化されます。

 

 

2.

Ordersポートレットの場合と同様に、XPathをXmlDataSourceとともに使用するためのコードはif(IsPostBack)ブロックに含まれます。 invoiceIdはフォームの非表示フィールドから取得され、XPathの構築に使用されます。

最後に、OrderDetailsポートレットはWCCを使用しませんが、.NETコントロールの名前はOnPreRenderメソッドの以下のコードを使用して明確にできます。

 

トピックに戻る

トピック・リストに戻る

このチュートリアルでは、次の内容について学習しました。

トピック・リストに戻る

WCI(Web Center Interaction)の開発について詳しくは、以下を参照してください。

トピック・リストに戻る

このアイコンの上にカーソルを置くと、すべてのスクリーンショットが非表示になります。