WebSurfer's Home

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

カレンダー幅を調整可能にしました

by WebSurfer 2011年10月17日 22:17
ウィジェットのカレンダー幅の設定画面

先のブログ1の記事 カレンダーの表示 で書きましたように、ウィジェットのカレンダーは、デフォルトでは、(1) 月曜日から始まる、(2) 曜日が二文字になる、(3) タイトルが "5月 2010" のようになって、イマイチ気に入らないので修正しています。

ただし、そうすると、カレンダーの表示幅が狭くなってしまうので、ウィジェットを表示するユーザーコントロール \widgets\Calendar\widget.ascx のコードで PostCalendar.Width プロパティの値をハードコーディングして調整していました。

しかし、ハードコーディングしたのでは、スタイルを変えた時などにカレンダーの幅を微調整する場合、いちいち widget.ascx を差し替える必要があります。

それを避けるために、BE-Cumulus(3D Tag Cloud)を実装した時と同様に、Web からブラウザでアクセスして設定できるようにしました。

ウィジェットのパラメータを編集・保存する画面を表示するメカニズムは以下のとおりです。

ログインしてブログのページを見ると、各ウィジェットの右上に[移動]、[編集]、[X]というハイパーリンクが表示されます。このうち[編集]をクリックすると、クライアントスクリプト admin\widget.js の editWidget メソッドが起動され、画面にパラメータの編集・保存のための iframe が追加されます。

iframe 要素の src 属性は admin/WidgetEditor.aspx ページ(編集画面)に設定されています。

admin/WidgetEditor.aspx ページがロードされる際、ウィジェットを表示しているユーザーコントロール wedget.ascx と同じフォルダ内に、編集用のユーザーコントロール edit.ascx が存在する場合、admin/WidgetEditor.aspx ページの <div runat="server" id="phEdit" /> に edit.ascx コントロールを初期化して追加します。

これによってブログの画面に追加された iframe 上で、ウィジェットのパラメータの編集・保存ができるようになります。

パラメータの保存先は、ポストデータのストアを SQL Server または MySQL に設定している場合 be_DataStoreSettings という名前のテーブルです。ただし、パラメータの追加・変更に当たって、テーブルのスキーマの変更は必要ありません。

ウィジェットを変更したり追加したりすることをあらかじめ想定して、パラメータのテーブルへの保存方法や、テーブルからの取得方法を考えて作られているようです。

必要な作業は、widgets\Calendar フォルダにある widget.ascx.cs に手を加え(widget.ascx は変更不要)、edit.ascx と edit.ascx.cs を追加するだけです。

そのコードは、BlogEngine.NET バージョン 2.0 の場合以下のとおりです。バージョン 1.6.1 の場合は、名前空間名やクラス名が異なるので、若干の変更が必要です。

widget.ascx.cs

namespace Widgets.Calendar
{
  using System.Collections.Specialized;
  using System.Web.UI.WebControls;
  using App_Code.Controls;

  public partial class Widget : WidgetBase
  {
    public override bool IsEditable
    {
      get
      {
        // return false;
        return true;
      }
    }

    public override string Name
    {
      get
      {
        return "Calendar";
      }
    }

    // カレンダーの幅を調整できるように追加
    private Unit _widgetsCalendarWidth = 172;

    private Unit WidgetsCalendarWidth
    {
      get
      {
        StringDictionary settings = GetSettings();
        if (settings.ContainsKey("widgetscalendarwidth"))
        {
          return Unit.Parse(settings["widgetscalendarwidth"]);
        }
        else
        {
          return _widgetsCalendarWidth;
        }
      }
    }

    public override void LoadWidget()
    {
      // ウィジェットのカレンダーは、a) 月曜日から始まる、
      // b) 曜日が二文字になる、c) タイトルが 5月 2010 の
      // ようになる。a), b) の問題を解決。
      System.Globalization.CultureInfo ci = 
        System.Threading.Thread.CurrentThread.CurrentUICulture;
      if (ci.Name == "ja-JP" || ci.Name == "ja")
      {
        this.PostCalendar1.DayNameFormat = 
          System.Web.UI.WebControls.DayNameFormat.FirstLetter;
        this.PostCalendar1.FirstDayOfWeek = 
          System.Web.UI.WebControls.FirstDayOfWeek.Sunday;
      }

      // カレンダーの幅を調整できるように追加
      this.PostCalendar1.Width = this.WidgetsCalendarWidth;
    }
  }
}

edit.ascx

<%@ Control Language="C#" 
  AutoEventWireup="true" 
  CodeFile="edit.ascx.cs" 
  Inherits="Widgets.Calendar.WidgetsCalendarEdit" %>

  <label for="<%=tbxWidth.ClientID %>">Width</label>
  <asp:TextBox ID="tbxWidth" runat="server">
  </asp:TextBox> in pixcel

edit.ascx.cs

namespace Widgets.Calendar
{
  using System;
  using System.Collections.Specialized;
  using App_Code.Controls;

  public partial class WidgetsCalendarEdit : WidgetEditBase
  {
    public override void Save()
    {
      StringDictionary settings = this.GetSettings();
      settings["widgetscalendarwidth"] = tbxWidth.Text;
      this.SaveSettings(settings);
    }

    protected override void OnInit(EventArgs e)
    {
      StringDictionary settings = this.GetSettings();

      string widgetsCalendarWidth = "172";
      if (settings.ContainsKey("widgetscalendarwidth"))
      {
        widgetsCalendarWidth = 
          settings["widgetscalendarwidth"];
      }
      tbxWidth.Text = widgetsCalendarWidth;
            
      base.OnInit(e);
    }
  }
}

Tags:

BlogEngine.NET 2.0

About this blog

ここブログ2は日々の出来事、ブログ1はプログラミング関係のトピックスになっています。

Calendar

<<  2024年4月  >>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar