WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

BE-Cumulus(3)

by WebSurfer 2010年7月5日 14:40

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

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

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

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

edit.ascx

パラメータの入力・表示が出来るように 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>
・・・後略・・・
edit.ascx.cs

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

  • 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();
  }
}

Tags: , ,

BlogEngine.NET

BE-Cumulus(2)

by WebSurfer 2010年7月5日 12:23

2010 年 6 月の中ごろから、WordPress のプラグイン WP-Cumulus(3D 空間をくるくる回る Flash を使った Tag Cloud)の BlogEngine.NET 1.6.1 への移植を試みていました。

先の ポスト で書きましたパラメータ設定機能の追加で、何とか普通に使えるレベルになったと思います。ここで、備忘録として、移植のために今まで BlogEngine.NET 1.6.1 に手を加えた内容をまとめて書いておきます。

この先、致命的な問題は出ないと期待して、しばらくコードの変更は凍結して、実用に耐えうるか試験したいと思います。もし、このブログを見て、試験するのを手伝ってあげようという奇特な方がおられましたら嬉しいです。その場合はメニューバーの「コンタクト」から連絡ください。

手を加えたのは、widget\Tag cloud フォルダの中にある widget.ascx, widget.ascx.cs, edit.ascx, edit.ascx.cs の 4 つのファイルのみです。以下、それぞれのファイルに手を加えた概要です。

widget.ascx

まず、3D Tag Cloud (Flash) 表示用に HTML の div タグと、ASP.NET サーバーコントロールの Literal を既存のコードに追加します。部分的なコードですが、以下のような感じです。

・・・前略・・・
<asp:Panel ID="panel3dTagCloud" runat="server">
  <div id="wpcumulusflashcontent">
    <p>If you see the icon blow, Flash Player and/or 
       JavaScript are/is not available in your PC.
    ・・・中略・・・
    </p>
  </div>
  <asp:Literal id="Literal1" runat="server"></asp:Literal>
</asp:Panel>
・・・後略・・・

追加した Literal には、Flash 起動用の JavaScript が書き出されるようになっています。その操作はサーバー側で、コードビハインド (widget.ascx.cs) に定義されたプログラムにより行われます。もう少し具体的に書くと、サーバー側で DB に保存されたパラメータ設定値と Tag 情報(名前、リンク先など)を取得し、それを元に SWFObject 1.4 を使った JavaScript を組み立てて、Literal に書き出します。

ブラウザは、サーバーから送信された div タグと JavaScript を含む HTML コードを受け取ります。そうすると、今度はブラウザ側で JavaScript が動き、SWFObject 1.4 が div タグの innerHTML を書き換えて Flash を表示します。

上記に加えて、ASP.NET サーバーコントロールの Panel を用いて、3D + Standard, 3D only, Standard only の 3 種類の表示を切り替えられるようにしています。

widget.ascx.cs

まず、追加した 9 つのパラメータについて、DB から設定値を取得するためのプロパティを widgets_Tag_cloud_widget クラスに追加します。これはオリジナルのコードに含まれていた MinimumPosts プロパティを参考にしました。具体的には以下のような感じです(一例のみ。他に 8 つ必要)。

private string _tagCloudStyle = "0";
private string TagCloudStyle
{
  get
  {
    StringDictionary settings = GetSettings();
    if (settings.ContainsKey("tagcloudstyle"))
    {
      return settings["tagcloudstyle"];
    }
    else
    {
      return _tagCloudStyle;
    }
  }
}

パラメータ設定値は DB のテーブル be_DataStoreSettings に保存されています(SQL Server 使用の場合)。それをプロパティに含まれる GetSettings メソッドで取得するようになっています。DB から取得した設定値は Cache に保存され、Cache にデータがあればそれを返すので、GetSettings が呼ばれるたびに DB にアクセスするという無駄は出ないように考慮されています。

次に、LoadWidget メソッドに以下の追加・変更を加えます。

  • RegisterClientScriptBlock メソッドを使って、外部スクリプトファイル SWFObject.js を参照する script 定義を HTML コードに書き出すためのコードを追加。
  • widget.ascx の Literal に Flash 起動用の JavaScript を書き出すコードを追加。上記で追加したプロパティを使ってパラメータ設定値を取得し、既存の WeightedList プロパティを使って Tag 情報を取得し、それらをベースに SWFObject 1.4 を使った Flash 起動用の JavaScript の文字列を動的に組み立てて、Literal.Text に設定します。
  • 表示方法を切り替えるため、widget.ascx に追加した 2 つの Panel の Visible プロパティの true/false を設定するコードを追加。表示方法は 3D + Standard, 3D only, standard only の 3 種類から選択可です。

LoadWidget メソッド全体のコードは以下のとおりです。

public override void LoadWidget()
{
  string root = Utils.AbsoluteWebRoot.ToString();
  StringBuilder sb, cs;

  if (TagCloudStyle == "0" || TagCloudStyle == "1")
  {
    // 3D + Standard または 3D only の場合

    string csname = "3dTagCloudEnablingScript";
    Type cstype = this.GetType();
    ClientScriptManager csm = Page.ClientScript;
    if (!csm.IsClientScriptBlockRegistered(cstype, csname))
    {
      string script = "<script type=\"text/javascript\" src=\"" +
        Utils.RelativeWebRoot + "swfobject.js\"></script>";
      csm.RegisterClientScriptBlock(cstype, csname, script, false);
    }

    sb = new StringBuilder();
    sb.Append("<tags>");

    foreach (string key in WeightedList.Keys)
    {
      string path = "?tag=/" + Utils.RemoveIllegalCharacters(key);
      HtmlGenericControl li = new HtmlGenericControl("li");
      li.InnerHtml = string.Format(LINK,
        Utils.RelativeWebRoot + path, WeightedList[key],
        "Tag: " + key, key);
      ulTags.Controls.Add(li);

      string size = "12";
      switch (WeightedList[key])
      {
        case "biggest":
          size = "18";
          break;
        case "big":
          size = "16";
          break;
        case "medium":
          size = "14";
          break;
        case "small":
          size = "12";
          break;
        case "smallest":
          size = "10";
          break;
        default:
          size = "12";
          break;
      }
      sb.Append(String.Format("<a href='{0}' style='{1}'>{2}</a>", 
        root + path, size, key));
    }
    sb.Append("</tags>");

    cs = new StringBuilder();
    cs.AppendLine("<script type=\"text/javascript\">");
    cs.AppendLine("//<![CDATA[");
    cs.AppendLine("var so = new SWFObject(\"" + 
      Utils.RelativeWebRoot + FlushFileName +
      "\", \"tagcloud\", \"" + TagCloudWidth + "\", \"" +
      TagCloudHeight + "\", \"10\", \"#ffffff\");");
    cs.AppendLine("so.addParam(\"wmode\", \"transparent\");");
    cs.AppendLine("so.addVariable(\"mode\", \"tags\");");
    cs.AppendLine("so.addVariable(\"distr\", \"" +
      ((TagDistribution == "0") ? "true" : "false") + "\");");
    cs.AppendLine("so.addVariable(\"tcolor\", \"" + TagColor1 + "\");");
    cs.AppendLine("so.addVariable(\"tcolor2\", \"" + TagColor2 + "\");");
    cs.AppendLine("so.addVariable(\"hicolor\", \"" + TagMouseoverColor + "\");");
    cs.AppendLine("so.addVariable(\"tspeed\", \"" + TagRotationSpeed + "\");");
    cs.AppendLine("so.addVariable(\"tagcloud\", \"" + sb.ToString() + "\");");
    cs.AppendLine("so.write(\"wpcumulusflashcontent\");");
    cs.AppendLine("//]]>");
    cs.AppendLine("</script>");
    Literal1.Text = cs.ToString();
  }
  else
  {
    // Standard only の場合
    foreach (string key in WeightedList.Keys)
    {
      HtmlGenericControl li = new HtmlGenericControl("li");
      li.InnerHtml = string.Format(LINK,
        Utils.RelativeWebRoot + "?tag=/" + Utils.RemoveIllegalCharacters(key),
        WeightedList[key],
        "Tag: " + key,
        key);
      ulTags.Controls.Add(li);
    }
  }

  if (TagCloudStyle == "0")
  {
    panel3dTagCloud.Visible = true;
    panelStdTagCloud.Visible = true;
  }
  else if (TagCloudStyle == "1")
  {
    panel3dTagCloud.Visible = true;
    panelStdTagCloud.Visible = false;
  }
  else
  {
    panel3dTagCloud.Visible = false;
    panelStdTagCloud.Visible = true;
  }
}

長くなりすぎましたので、edit.ascx, edit.ascx.cs については別のポストに分けます。

Tags: , ,

BlogEngine.NET

BE-Cumulus

by WebSurfer 2010年7月2日 23:58
3D Tag Cloud パラメータ設定画面

3D タグクラウドを表示する tagcloud.swf のパラメータを、コードに埋め込むのではなく、Web からアクセスして変更し、それを保存し、次回の表示に反映できるようにしました。

まず、保存先がどこにあるか探してみましたが、ポストデータのストアを DB に設定していると、パラメータの保存先も DB になり、SQL Server の場合 be_DataStoreSettings という名前のテーブルにあることが分かりました。

そこからコードにどのような変更・追加が必要になるかを調査してみました。

テーブルのスキーマの変更から始まって、それを SELECT, DELETE, UPDATE, INSERT するために、かなりのコードの変更が必要になると思っていましたが、意外と簡単でした。

たぶん、Widget を変更したり、追加したりすることをあらかじめ想定して、パラメータの DB への保存方法や、DB からの取得方法を考えて BlogEngine は作られているのだと思います。

widgets\Tag cloud フォルダにある widget.ascx, edit.ascx およびそのコードビハインドに手を加えるだけで、結構簡単にできました。

詳しくはまた後日報告します。

Tags: , ,

BlogEngine.NET

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  2017年9月  >>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

View posts in large calendar