先のポスト BE-Cumulus(2) の続きです。

widget.ascx. widget.ascx.cs はタグクラウドを Widget に表示するユーザーコントロールですが、edit.ascx, edit.ascx.cs はパラメータを編集・保存するために使われるユーザーコントロールです。

Administrators ロールに属するユーザーがログインすると、各 Widget の右上に［移動］［編集］［X］というリンクが表示されます。その［編集］をクリックすると iframe が追加され、そこに編集画面が表示されるようになっています。

編集画面の例は、先のポスト BE-Cumulus に貼り付けた画像を参照してください（クリックすると原寸大のイメージがダウンロードされます）。

パラメータの入力・表示が出来るように ASP.NET サーバーコントロールの TextBox, RadioButtonList を追加します。

形を整えるため table を用いて、その中に html の label、ASP.NET の TextBox、RadioButtonList + ListItem を入れただけです。部分的なコードですが、以下のような感じです。DropDownList + ListItem とその label はオリジナルのコードに含まれているものです。

・・・前略・・・
<h2>General settings</h2>
<table style="width: 100%;">
  <tr>
    <td>
      <label for="<%=ddlNumber.ClientID %>">
        Minimum posts in each tag
      </label>
    </td>
    <td>
      <asp:DropDownList runat="server" ID="ddlNumber">
        <asp:ListItem Value="1" Text="1 (default)" />
        <asp:ListItem Text="2" />
        <asp:ListItem Text="3" />
        <asp:ListItem Text="4" />
        <asp:ListItem Text="5" />
        <asp:ListItem Text="6" />
        <asp:ListItem Text="7" />
        <asp:ListItem Text="8" />
        <asp:ListItem Text="9" />
        <asp:ListItem Text="10" />
      </asp:DropDownList>
    </td>
  </tr>

  <tr>
    <td>            
      <label for="<%=rblTagStyle.ClientID %>">
        Tag cloud style
      </label>
    </td>
    <td>
      <asp:RadioButtonList ID="rblTagStyle" 
        runat="server"
        RepeatLayout="Flow"
        RepeatDirection="Horizontal">
        <asp:ListItem Value="0" Selected="True">
          3D + Standard  
        </asp:ListItem>
        <asp:ListItem Value="1">
          3D only  
        </asp:ListItem>
        <asp:ListItem Value="2">
          Standard only
        </asp:ListItem>
      </asp:RadioButtonList>
    </td>
  </tr>
</table>
<h2>3D tag cloud settings</h2>
<table style="width: 100%;">
  <tr>
    <td>
      <label for="<%=tbxFlashFileName.ClientID %>">
        Flash file name
      </label>
    </td>
    <td>
      <asp:TextBox ID="tbxFlashFileName" runat="server">
      </asp:TextBox> (e.g., tagcloud.swf)
    </td>
  </tr>
  
  ・・・中略・・・

  <tr>
    <td>
      <label for="<%=rblTagDist.ClientID %>">
        Tag distribution
      </label>
    </td>
    <td>
      <asp:RadioButtonList ID="rblTagDist" 
        runat="server" 
        RepeatDirection="Horizontal" 
        RepeatLayout="Flow">
        <asp:ListItem Value="0" Selected="True">
          Evenly  
        </asp:ListItem>
        <asp:ListItem Value="1">
          Random
        </asp:ListItem>
      </asp:RadioButtonList>
    </td>
  </tr>    
</table>
・・・後略・・・

以下の追加・変更を加えます。

• Onload メソッドに、3D Tag Cloud 表示のパラメータ設定値を DB より取得して、edit.ascx に追加した TextBox および RadioButtonList に表示するためのコードをを追加します。オリジナルコードにある minimumPosts の ddlNumber.SelectedValue への設定に習って書けば OK です。
• Save メソッドに、TextBox や RadioButton に入力されたパラメータ設定を settings に取り込み、その内容を DB に保存するコードを追加。settings に指定したキーが見つからなかった場合は、指定したキーを持つ新しいエントリが自動的に作成されます。それから settings がシリアライズされて DB に xml 形式で保存されます。

edit.ascx.cs の全体のコードは以下のとおりです。

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Collections.Specialized;

public partial class widgets_Tag_cloud_edit : WidgetEditBase
{
  protected override void OnLoad(EventArgs e)
  {
    if (!Page.IsPostBack)
    {
      StringDictionary settings = GetSettings();
      string minimumPosts = "1";
      if (settings.ContainsKey("minimumposts"))
      {
        minimumPosts = settings["minimumposts"];
      }
      ddlNumber.SelectedValue = minimumPosts;

      string flashFileName = "tagcloud.swf";
      if (settings.ContainsKey("flashfilename"))
      {
        flashFileName = settings["flashfilename"];
      }
      tbxFlashFileName.Text = flashFileName;

      string tagCloudStyle = "0";
      if (settings.ContainsKey("tagcloudstyle"))
      {
        tagCloudStyle = settings["tagcloudstyle"];
      }
      rblTagStyle.SelectedValue = tagCloudStyle;

      string tagCloudWidth = "180";
      if (settings.ContainsKey("tagcloudwidth"))
      {
        tagCloudWidth = settings["tagcloudwidth"];
      }
      tbxWidth.Text = tagCloudWidth;

      string tagCloudHeight = "170";
      if (settings.ContainsKey("tagcloudheight"))
      {
        tagCloudHeight = settings["tagcloudheight"];
      }
      tbxHeight.Text = tagCloudHeight;

      string tagColor1 = "0x333333";
      if (settings.ContainsKey("tagcolor1"))
      {
        tagColor1 = settings["tagcolor1"];
      }
      tbxTcolor1.Text = tagColor1;

      string tagColor2 = "0x333333";
      if (settings.ContainsKey("tagcolor2"))
      {
        tagColor2 = settings["tagcolor2"];
      }
      tbxTcolor2.Text = tagColor2;

      string tagMouseoverColor = "0xff0000";
      if (settings.ContainsKey("tagmouseovercolor"))
      {
        tagMouseoverColor = settings["tagmouseovercolor"];
      }
      tbxMouseoverColor.Text = tagMouseoverColor;

      string tagRotationSpeed = "100";
      if (settings.ContainsKey("tagrotationspeed"))
      {
        tagRotationSpeed = settings["tagrotationspeed"];
      }
      tbxTagSpeed.Text = tagRotationSpeed;

      string tagDistribution = "0";
      if (settings.ContainsKey("tagdistribution"))
      {
        tagDistribution = settings["tagdistribution"];
      }
      rblTagDist.SelectedValue = tagDistribution;
    }
  }

  public override void Save()
  {
    StringDictionary settings = GetSettings();
    settings["minimumposts"] = ddlNumber.SelectedValue;
    settings["flashfilename"] = tbxFlashFileName.Text;
    settings["tagcloudstyle"] = rblTagStyle.SelectedValue;
    settings["tagcloudwidth"] = tbxWidth.Text;
    settings["tagcloudheight"] = tbxHeight.Text;
    settings["tagcolor1"] = tbxTcolor1.Text;
    settings["tagcolor2"] = tbxTcolor2.Text;
    settings["tagmouseovercolor"] = tbxMouseoverColor.Text;
    settings["tagrotationspeed"] = tbxTagSpeed.Text;
    settings["tagdistribution"] = rblTagDist.SelectedValue;
    SaveSettings(settings);
    widgets_Tag_cloud_widget.Reload();
  }
}