SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)(AD)

ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント(イベントカレンダー/グリッドビュー編)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。今回は、前回に続いて、2015J v1で大きく機能追加されたイベントカレンダー、パフォーマンス改善されたグリッドビュー、そしてマップなどのコントロールについて紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • Visual Studio 2010/2012/2013でVisual BasicやC#を使った開発経験のある方

必要な環境

 Visual Studio 2010/2012/2013を使用してASP.NETによるWebアプリケーション開発を行うことのできる環境。

 本連載で紹介するサンプルは以下の環境で開発、動作確認を行っています。

  • OS:Windows 8.1 Pro
  • 開発ツール:Visual Studio Community 2013 Update 4

イベントをカレンダーで表示する-イベントカレンダー

 皆さんは普段仕事やプライベートでさまざまな予定を手帳などで管理していると思います。特にスマートフォンやタブレットでは、それらの予定(イベント)を管理するために標準でインストールされているカレンダーアプリを使っている方が多いのではないでしょうか。

 ComponentOne Studio for ASP.NET Web Formsにも日付や時間と連動した予定の管理を簡単に実現できるイベントカレンダーコントロールが用意されています。

 イベントカレンダーコントロールは、OutlookスタイルのUIでイベントを管理する機能を備えたコントロールで、イベント管理に必要な機能を簡単な手順でWebアプリケーションに組み込むことができます。イベントカレンダーコントロールをWebフォームに追加し、幅と高さを指定するだけで次のようなページを作ることができます。

イベントカレンダーコントロール表示例
イベントカレンダーコントロール表示例

イベントカレンダーで提供される機能

 イベントカレンダーの主な機能には次のようなものがあります。

イベントカレンダーが提供する主要機能
項目 機能概要
Microsoft Outlookスタイルの予定管理 イベント(終日、時刻指定形、定期的など)を管理し、さまざまなビューでの表示および編集
組み込みデータビュー 1つのプロパティを指定するだけで、日、週、月などのデータビューを切り替える
汎用.NETデータバインディング 簡単な手順で、ADO.NET、OLEDB、および、SQL Serverを含むさまざまなデータソースにバインド
インポート/エクスポート iCalendar、XML、PDF、さまざまな画像形式のファイルとしてデータをインポートおよびエクスポート
ローカライズ 他のコントロールと同様に、カルチャを設定することでローカライズされた曜日やタイトルを表示
CSSサポート 他のコントロールと同様に、CSSのスタイルを使用した見た目のカスタマイズ

組み込みデータビュー

 イベントカレンダーが標準で持っている組み込みデータビューには、日、週、月、リスト形式のものがあります。データビューの見た目はCSSで定義されたテーマを選択することによって切り替えることができます。このテーマの変更や修正についてはテーマローラーのところで説明します。

 各ビューについて、テーマを切り替えて表示した例は次のようになります。

日ビュー(aristo)
日ビュー(aristo)
週ビュー(metro-dark)
週ビュー(metro-dark)
月ビュー(lucid)
月ビュー(lucid)
リストビュー(rocket)
リストビュー(rocket)

iPadスタイルのイベント作成

 イベントの作成や編集は、iPadと同様のスタイルのUIで行うことができます。入力可能な項目には、イベント名、終日かどうか、開始および終了日時、場所、繰り返しかどうか、保存対象のカレンダー選択、メモなどです。

イベント作成画面
イベント作成画面

イベントデータの保存

 それではXMLファイルにイベントデータを保存する例を見ていくことにしましょう。サンプルとしてEventsCalendar.aspxという名前でWebフォームをプロジェクトに追加し、ツールボックスから「C1EventsCalendar」をデザイン画面にドロップしてください。

 他のコントロールと同様にスマートタグを利用することで、基本的なプロパティ値を指定することができます。以下の例では幅と高さを指定しています。

スマートタグによるプロパティ指定
スマートタグによるプロパティ指定

 イベントやカレンダーのデータはXMLファイル以外にも、ADO.NETやOLEDB、SQL Serverなどさまざまなデータソースに連結できます。データ連結を行うにはC1EventsCalendarコントロールのDataStorageプロパティに設定します。

 さらにDataStorageプロパティには、カレンダーデータに関連するCalendarStorageとイベントデータに関連するEventStorageを使用してデータベースなどとのマッピングを指定します。今回の例ではXMLファイルに保存することにしますので、DataStorageのDataFileにXMLファイルのパスを指定します。プロジェクト配下にある「App_Data」以下にc1eventcaldata.xmlというファイル名を指定すると、コードは以下のようになります。

リスト1 イベントデータをXMLファイルに保存する例(EventsCalendar.aspx)
<cc1:C1EventsCalendar ID="C1EventsCalendar1" runat="server"
  Height="500px" Width="800px">
  <DataStorage DataFile="~/App_Data/c1eventcaldata.xml">
  </DataStorage>
</cc1:C1EventsCalendar>

 このプログラムを実行し、いくつかのイベントデータを登録してみましょう。指定したXMLファイルにイベント情報がどのような形式で保存されているか確認してみてください。

複数フォーマットでのインポート/エクスポート

 別ツールとして付属しているC1 ASP.NET Export Serviceを利用すると、イベントカレンダーの画面をPDFやいくつかのフォーマットの画像としてエクスポートすることができます。さらに、C1EventsCalendarコントロールに用意されているImport、Exportメソッドを利用することでXMLやiCalendar形式のファイルでイベントデータをエクスポート、インポートすることができます。

 データ連結やエクスポート、インポート以外のさまざまな機能をご検討の場合には、ComponentOne Studio EventsCalendar for ASP.NET Web Forms ヘルプをご覧いただき、何ができるかを確認してみてください。

次のページ
テーブルデータを表示する-グリッドビュー

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 花田 善仁(ハナダ ヨシヒト)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8886 2021/03/29 14:29

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング