Input for ASP.NET Web Forms

Transcription

1 更 新 グレープシティ 株 式 会 社

2 目 次 製 品 の 概 要 3 ComponentOne Studio for ASP.NET Web Forms のヘルプ 3 主 な 特 長 4 クイックスタート 5 手 順 1:フォームへのコントロールの 追 加 5 手 順 2:コントロールの 外 観 の 変 更 5-6 手 順 3:コントロールの 書 式 設 定 6-7 手 順 4:カルチャ 設 定 の 追 加 7-9 手 順 5:クイックスタート Web アプリケーションの 実 行 9 デザイン 時 のサポート 10 C1Input の 各 スマートタグ 10 C1InputMask スマートタグ C1InputDate スマートタグ C1InputNumeric スマートタグ C1InputPercent スマートタグ C1InputCurrency スマートタグ C1Input コンテキストメニュー 18 C1Input の 各 デザイナ 18 C1InputMask C1Input デザイナフォーム C1InputDate C1Input デザイナフォーム C1InputMask の 使 い 方 21 C1InputMask の 定 義 C1InputDate の 使 い 方 24 C1InputDate の 定 義 和 暦 の 設 定 C1InputNumeric の 使 い 方 30 C1InputNumeric の 定 義 30 C1InputPercent の 使 い 方 31 C1InputPercent の 定 義 31 C1InputCurrency の 使 い 方 32 C1InputCurrency の 定 義 32 1 Copyright GrapeCity inc. All rights reserved.

3 C1Input の 外 観 33 テーマ 33 C1Input CSS セレクタ クライアント 側 の 機 能 35 クライアント 側 イベント 35 タスク 別 ヘルプ 36 C1InputMask タスク 36 プロンプト 文 字 列 の 変 更 IP アドレスマスクの 作 成 電 話 番 号 マスクの 作 成 プロンプト 文 字 列 を 含 まない 日 付 マスクの 表 示 39 フォーカス 消 失 時 のプロンプト 文 字 列 の 非 表 示 化 C1InputDate タスク 日 付 書 式 パターンと 日 付 の 設 定 空 の 日 付 値 の 表 示 C1InputNumeric タスク 43 小 数 点 以 下 の 桁 数 の 指 定 最 小 値 / 最 大 値 の 設 定 テーマの 変 更 カスタムテーマの 追 加 カルチャの 選 択 クライアント 側 イベントタスク 49 無 効 な 入 力 の 入 力 時 のツールチップの 表 示 49 トリガーを 使 用 したカスタム UI の 表 示 Copyright GrapeCity inc. All rights reserved.

4 製 品 の 概 要 Input for ASP.NET Web Forms では データエントリと 検 証 コントロールの 完 全 なコレクションが 提 供 されます マスク 日 付 数 値 およびカスタムの 編 集 から 選 択 します 組 み 込 みマスク カスタム 書 式 サポート ローカライズ その 他 多 くの 機 能 を 使 用 できます Input for ASP.NET Web Forms を 構 成 する 各 コントロールは 以 下 のとおりです C1InputCurrency C1InputCurrency コントロールは C1InputNumeric から 派 生 した 通 貨 値 編 集 専 用 コントロールです この 数 値 エ ディタを 使 用 すると アプリケーションでカスタム 検 証 論 理 を 記 述 せずに 入 力 を 指 定 できます 詳 細 については C1InputCurrency の 使 い 方 を 参 照 してください C1InputDate C1InputDate コントロールは C1InputMask から 派 生 した 日 付 / 時 刻 編 集 専 用 コントロールです C1InputDate コ ントロールは 日 付 エディタを 表 示 します 詳 細 については C1InputDate の 使 い 方 を 参 照 してください C1InputMask C1InputMask コントロールは テキストフォーム 内 ですべてのデータ 型 の 情 報 の 入 力 と 編 集 に 使 用 するメイン Web コ ントロールです このコントロールは データの 書 式 設 定 マスクの 編 集 データ 検 証 などの 機 能 をサポートします ま た 追 加 機 能 を 含 む すべてのデータ 型 の 書 式 およびマスクの 編 集 もサポートします メインデータの 編 集 コントロール であることに 加 え C1InputMask は C1InputDate や C1InputNumeric などの 専 用 コントロールの 基 本 クラスとし ても 機 能 します 詳 細 については C1InputMask の 使 い 方 を 参 照 してください C1InputNumeric C1InputNumeric コントロールは C1InputMask から 派 生 した 数 値 の 編 集 専 用 コントロールです この 数 値 エディタ を 使 用 すると アプリケーションでカスタム 検 証 論 理 を 記 述 せずに 入 力 を 指 定 できます 詳 細 については C1InputNumeric の 使 い 方 を 参 照 してください C1InputPercent C1InputPercent コントロールは C1InputNumeric から 派 生 したパーセント 値 編 集 専 用 コントロールです 数 値 エ ディタを 使 用 すると アプリケーションでカスタム 検 証 論 理 を 記 述 せずに 入 力 を 指 定 できます 詳 細 については C1InputPercent の 使 い 方 を 参 照 してください ComponentOne Studio for ASP.NET Web Forms のヘルプ ComponentOne Studio for ASP.NET Web Forms の 各 コントロールで 共 通 したトピック アセンブリの 追 加 テーマの 適 用 ク ライアント 側 情 報 などについては ASP.NET Web Forms ユーザーガイド を 参 照 してください 3 Copyright GrapeCity inc. All rights reserved.

5 主 な 特 長 Input for ASP.NET Web Forms の 主 な 特 長 として 次 の 事 項 が 挙 げられます 充 実 したクライアント 側 オブジェクトモデル マウスアクションやコントロールフォーカスイベントによって さらに 充 実 したクライアント 側 のユーザー 操 作 性 を 作 成 し ます 多 数 のクライアント 側 メソッドによって コントロールの 書 式 色 マスク 最 小 値 / 最 大 値 その 他 多 くを 変 更 しま す 23 種 類 以 上 の 組 み 込 みマスク 23 種 類 以 上 の 組 み 込 みマスクから 選 択 するか 独 自 のマスクをカスタマイズします C1InputMask コントロールは 日 付 時 刻 書 式 曜 日 チューザ および 数 値 範 囲 など 14 種 類 の 組 み 込 み 標 準 マスクを 備 えています C1InputDate コントロールは 長 い/ 短 い 日 付 時 刻 書 式 など 9 種 類 の 組 み 込 み 標 準 マスクを 備 えています どちらもカスタム 書 式 サポートが 含 まれています 無 効 な 入 力 に 対 する 警 告 数 値 入 力 ボックス 内 の 英 数 字 などの 無 効 な 入 力 を 排 除 します 赤 色 のフォントを 使 用 してユーザーに 視 覚 的 に 警 告 し たり エラーメッセージを 表 示 したりできます 豊 富 な 書 式 モデル 可 能 なほぼすべての 書 式 で 入 力 ボックスを 設 定 します 豊 富 な 書 式 モデルによって 開 発 者 はコントロールのテキス ト 枠 線 セルスペース カラースキームなどの 外 観 をカスタマイズできます デザイン 時 のサポート SmartTag を 使 用 して 5つのコントロール 固 有 のデザイナにすばやくアクセスできます マスク 書 式 値 およびカル チャの 各 プロパティを 設 定 し WYSIWYG ウィンドウで 編 集 を 視 覚 化 します 詳 細 については デザイン 時 のサポート を 参 照 してください カルチャサポート 任 意 の 入 力 コントロールによって 使 用 されるカルチャ 設 定 を 定 義 します これは 文 字 列 比 較 数 値 および 日 付 時 刻 書 式 特 殊 文 字 に 適 用 されます 詳 細 については カルチャの 選 択 を 参 照 してください ドロップダウンとスピンボタン 日 付 / 時 刻 と 数 値 編 集 専 用 の 入 力 コントロールである C1InputDate C1InputCurrency およびC1InputNumeric コントロールは ドロップダウンとスピン( 上 / 下 )ボタンをサポートします 日 付 ピッカー カレンダーを C1InputDate コントロールの 日 付 ピッカーとして 使 用 できます トリガーボタンを 有 効 にしてデフォルトカ レンダーを 開 くには 単 に ShowTrigger プロパティを True に 設 定 します 数 値 編 集 C1InputNumeric C1InputCurrency および C1InputPercent コントロールに 対 し 値 の 入 力 制 限 を 設 定 して 小 数 点 以 下 の 桁 数 を 指 定 し 桁 区 切 り 文 字 の 使 用 を 指 定 します パスワード 保 護 C1InputMask コントロールを 使 用 し パスワード 文 字 を 表 示 させて 入 力 テキストを 保 護 します デザイン 時 文 字 (* な ど)を 単 に 選 択 して 実 際 の 入 力 文 字 の 代 用 にします キーボードサポート キーボードサポートを 使 用 して 入 力 値 をすばやく 編 集 します カーソル 位 置 を1つ 左 / 右 や 先 頭 / 末 尾 に 移 動 させた り 範 囲 値 を 増 減 したり コピー&ペースト その 他 多 くの 操 作 ができます テーマ スマートタグをクリックするだけで 6 種 類 のプレミアムテーマ(Arctic Midnight Aristo Rocket Cobalt および Sterling)のいずれかを 選 択 して 外 観 を 変 更 します オプションとして jquery UI からThemeRoller を 使 用 してカスタマ イズしたテーマを 作 成 します 詳 細 については C1Input の 外 観 を 参 照 してください CSS のサポート (Cascading Style Sheet)のスタイルを 使 用 して カスタムスキンを 定 義 します 4 Copyright GrapeCity inc. All rights reserved.

6 クイックスタート このセクションでは C1Input コントロールを 使 用 する Web フォームの 作 成 方 法 について 紹 介 します また コントロールの 外 観 書 式 および 機 能 の 変 更 方 法 についても 示 します ヘルプの 各 手 順 に 従 えば リッチでユーザーフレンドリな Web フォー ムを 作 成 できます 簡 潔 にするために クイックスタートではC1InputMask C1InputDate および C1InputCurrency コントロールについて 説 明 することに 注 意 してください C1InputNumeric および C1InputPercent コントロールは C1InputCurrency コントロール と 同 様 のプロパティを 共 有 しているため このクイックスタートでは 取 り 扱 いません 手 順 1:フォームへのコントロールの 追 加 まず ASP.NET 対 応 Web サイトを 作 成 し C1Input コントロールをツールボックスに 追 加 します まず ASP.NET プロジェクト を 作 成 し C1Input コントロールをツールボックスに 追 加 します 新 規 Web フォームを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ドキュメントウィンドウのすぐ 下 の デザイン タブをクリックして デザインビューに 切 り 替 えます( 必 要 な 場 合 ) 2. このページに 2 列 3 行 のテーブルを 追 加 します([テーブル]メニューから[テーブルの テーブルの 挿 入 ]を 選 択 ) 1 番 目 の 列 はテ キストに 使 用 し 2 番 目 の 列 は C1Input コントロールに 使 用 します テーブルがフォームに 表 示 されます 3. ツールボックスから ドラッグ&ドロップ 操 作 を 実 行 して 以 下 の 各 コントロールをテーブルの2 番 目 の 列 のセルに 配 置 して ページに 追 加 します C1InputMask C1InputDate C1InputCurrency テーブルは 次 のような 表 示 になります 4. テキストをテーブルに 追 加 します この 例 では それぞれ 商 品 番 号 : 注 文 日 : および 単 価 :を 追 加 します 必 要 に 応 じ て テーブルのサイズを 変 更 したり 書 式 を 設 定 したりできます テキストが 追 加 されたテーブルは 次 のような 表 示 になります 5. ソースビューに 切 り 替 えます デザインビューでテーブルとテキストを 追 加 して 作 成 した HTML が 表 示 されます C1Input コントロールが Web フォームに 正 常 に 追 加 されました 次 のトピックでは 入 力 ボックスの 外 観 を 変 更 する 方 法 を 示 します 手 順 2:コントロールの 外 観 の 変 更 このトピックでは テーマを 使 用 して C1Input コントロールの 外 観 を 変 更 する 方 法 を 示 します 以 下 の 手 順 を 実 行 します 1. ドキュメントウィンドウのすぐ 下 の デザイン タブをクリックして デザインビューに 切 り 替 えます 5 Copyright GrapeCity inc. All rights reserved.

7 2. 1 番 目 のコントロール C1InputMask を 選 択 して スマートタグ( )をクリックします [C1InputMask タスク]メニュー が 表 示 されます 3. [タスク]メニューで [テーマ]の 横 のドロップダウン 矢 印 をクリックし rocket を 選 択 します その 他 の C1Input コント ロールも rocket テーマで 更 新 されます 更 新 されたコントロールの 外 観 は 次 のような 表 示 になります 4. ソースビューに 切 り 替 えます デザインビューでスキームを 変 更 して 作 成 した HTML が 表 示 されます C1Input コントロールの 外 観 が 正 常 に 変 更 されました 次 のトピックでは 入 力 ボックスの 書 式 を 設 定 する 方 法 を 示 します 手 順 3:コントロールの 書 式 設 定 このトピックでは [タスク]メニューを 使 用 して コントロールを 書 式 設 定 する 方 法 を 示 します まず ドキュメントウィンドウのす ぐ 下 の デザイン タブをクリックして デザインビューに 切 り 替 えます 以 下 の 手 順 に 従 って Web フォーム 上 の Input for ASP.NET Web Forms の 各 コントロールを 書 式 設 定 します C1InputMask コントロールを 書 式 設 定 するには 以 下 の 手 順 を 実 行 します 1. C1InputMask を 選 択 して スマートタグ()をクリックします [C1InputMask タスク]メニューが 表 示 されます 2. [マスク]プロパティの 横 の... ボタンをクリックします [ 定 型 入 力 ]ダイアログボックスが 表 示 されます 3. [マスク]テキストボックスに を 入 力 します マスクの 入 力 を 開 始 すると [マスクの 説 明 ] 列 が <ユーザー 設 定 > に 自 動 的 に 切 り 替 わる( 入 力 したマスクがマスクのリストになかった 場 合 )ことに 注 意 してください マスク 値 からの 出 力 値 は [プレビュー プレビュー]テキストボックスに 表 示 されます 4. OK をクリックして [ 定 型 入 力 ]ダイアログボックスを 閉 じます 5. [ 表 示 ] [プロパティウィンドウ]を 選 択 し InvalidClass プロパティの 横 の ui-state-error に 注 意 します ユーザーが 英 数 字 などの 無 効 な 入 力 を 入 力 した 場 合 入 力 の 色 は CSS の ui-state-error に 指 定 された 無 効 なエントリを 識 別 6 Copyright GrapeCity inc. All rights reserved.

8 する 赤 で 表 示 されます C1InputDate コントロールを 書 式 設 定 するには 以 下 の 手 順 を 実 行 します 1. C1InputDate を 選 択 して スマートタグ()をクリックします [C1InputDate タスク]メニューが 表 示 されます 2. 日 付 書 式 を[ 日 付 書 式 ]テキストボックスに 入 力 します この 例 では D を 使 用 します 標 準 書 式 文 字 は 次 のとおりで す プリセットパターン 名 前 d D t T 短 い 日 付 パターン 長 い 日 付 パターン 短 い 時 刻 パターン 長 い 時 刻 パターン F 完 全 な 日 付 / 時 刻 パターン( 短 い 時 刻 ) g 一 般 的 な 時 刻 パターン( 短 い 時 刻 ) G 一 般 的 な 日 付 / 時 刻 パターン( 長 い 時 刻 ) U 世 界 時 のソート 可 能 な 日 付 / 時 刻 パターン [ 結 果 の 日 付 パターン]テキストボックスは 自 動 的 に 更 新 されます 3. [C1InputDate タスク]メニューで [ 日 付 ]の 横 のドロップダウン 矢 印 をクリックして ドロップダウンカレンダーから 日 付 を 選 択 します 4. Visual Studio のプロパティウィンドウでShowSpinner プロパティを 指 定 し ドロップダウン 矢 印 をクリックして True を 選 択 します 注 意 :Visual Studio のプロパティウィンドウの Height と Width プロパティを 使 用 して コントロールをサイズ 変 更 する 必 要 がある 場 合 があります C1InputCurrency コントロールを 書 式 設 定 するには 以 下 の 手 順 に 従 います 1. C1InputCurrency コントロールを 選 択 して Visual Studio のプロパティウィンドウで ShowSpinner プロパティを 表 示 し ます 2. ドロップダウン 矢 印 をクリックして True を 選 択 します C1Input コントロールの 書 式 が 正 常 に 変 更 されました 作 成 した HTML を 表 示 するには ソースビューに 切 り 替 えます 更 新 されたコントロールの 外 観 は 次 のような 表 示 になります( 各 コントロールの 幅 が 200px に 設 定 されていることに 注 意 して ください) 次 のトピックでは ボタンを 追 加 して C1InputDate と C1InputCurrency コントロールのカルチャ 情 報 を 変 更 する 方 法 を 示 し ます 手 順 4:カルチャ 設 定 の 追 加 このトピックでは コードを Button_Click イベントに 追 加 して C1InputDate とC1InputCurrency コントロールの Culture を 設 定 する 方 法 を 例 示 します これを 行 うには 以 下 の 手 順 を 実 行 します 7 Copyright GrapeCity inc. All rights reserved.

9 1. ドキュメントウィンドウのすぐ 下 の デザイン タブをクリックして デザインビューに 切 り 替 えます 2. ツールボックスから Button コントロールを 選 択 して ドラッグ&ドロップ 操 作 で Web フォーム(テーブルのすぐ 下 )に 配 置 します この 手 順 を 繰 り 返 して 2 番 目 の Button コントロールを Web フォームに 追 加 します 3. これで 2つの Button コントロールが 横 に 並 んでフォームに 配 置 されました プロパティウィンドウで いくつかの 基 本 設 定 を 変 更 します Button1 のプロパティ: Button2 のプロパティ: ((ID) = JapanBtn (ID) = USEnglishBtn Text = 日 本 語 Text = 英 語 (アメリカ) Height = 25px Height = 25px Width = 130px Width= 140px 4. 日 本 語 ボタンをダブルクリックして ボタンの Click イベントのイベントハンドラを 作 成 します JapanBtn_Click イベン トに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic Protected Sub FrenchBtn_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles FrenchBtn.Click C1InputDate1.Culture = New System.Globalization.CultureInfo("fr-FR") C1InputCurrency1.Culture = New System.Globalization.CultureInfo("fr-FR") End Sub C# コードの 書 き 方 C# protected void FrenchBtn_Click(object sender, System.EventArgs e) { C1InputDate1.Culture = new System.Globalization.CultureInfo("fr-FR"); C1InputCurrency1.Culture = new System.Globalization.CultureInfo("fr- FR"); } 5. 英 語 (アメリカ) ボタンをダブルクリックして ボタンの Click イベントのイベントハンドラを 作 成 しま す USEnglishBtn_Click イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic Protected Sub USEnglishBtn_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles USEnglishBtn.Click C1InputDate1.Culture = New System.Globalization.CultureInfo("en-US") C1InputCurrency1.Culture = New System.Globalization.CultureInfo("en-US") End Sub C# コードの 書 き 方 C# protected void USEnglishBtn_Click(object sender, System.EventArgs e) { 8 Copyright GrapeCity inc. All rights reserved.

10 C1InputDate1.Culture = new System.Globalization.CultureInfo("en-US"); C1InputCurrency1.Culture = new System.Globalization.CultureInfo("en- US"); } カルチャ 情 報 を 含 む2つのボタンコントロールが Web フォームに 正 常 に 追 加 されました 更 新 された Web フォームの 外 観 は 次 のような 表 示 になります 次 のトピックでは アプリケーションを 実 行 する 方 法 を 示 します Web フォームの 機 能 を 確 認 する 際 に 実 行 するタスクも 示 しま す 手 順 5:クイックスタート Web アプリケーションの 実 行 デバッグ 開 始 ボタンをクリックして アプリケーションを 実 行 します クイックスタートのメイン 手 順 ( 手 順 1~4)を 実 行 した 後 のクイックスタート Web フォームは 次 のような 表 示 になります 変 更 を 確 認 するには 次 のタスクを 実 行 します [ 商 品 番 号 ] 入 力 ボックスに 数 値 を 入 力 します 数 字 が 有 効 です 英 数 字 (a など)を 入 力 してみます 入 力 ボックスがこ れを 許 容 しないことに 注 意 してください [ 注 文 日 ](C1InputDate コントロール) 入 力 を 変 更 するには 次 のタスクを 実 行 します マウスポインタで 上 / 下 スピンボタンをクリックします [ 注 文 日 ] 入 力 ボックス 内 でクリックして キーボードの 上 / 下 矢 印 を 押 します [ 単 価 ](C1InputCurrency コントロール) 入 力 を 変 更 するには 次 のタスクを 実 行 します マウスポインタで 上 / 下 スピンボタンをクリックします [ 単 価 ] 入 力 ボックス 内 でクリックして キーボードの 上 / 下 矢 印 を 押 すか 現 在 の 単 価 を 選 択 して 新 しい 単 価 を 入 力 します C1InputDate と C1InputCurrency コントロールのカルチャを 日 本 語 に 変 更 するには 日 本 語 ボタンをクリックしま す C1InputDate と C1InputCurrency コントロールのカルチャを 英 語 (アメリカ)に 戻 すには 英 語 (アメリカ) ボタンを クリックします おめでとうございます!3 種 類 の C1Input コントロールを 含 む 基 本 的 な Web フォームが 正 常 に 作 成 されました また コント ロールがカスタマイズされ カルチャ 情 報 が 組 み 込 まれて Web フォームの 性 能 も 向 上 しました 9 Copyright GrapeCity inc. All rights reserved.

11 デザイン 時 のサポート C1Input は 視 覚 的 な 編 集 を 提 供 しており Web 入 力 コントロールの 作 成 がより 簡 単 になります 以 下 のセクションでは C1Input で 使 用 可 能 な 各 種 のサポートについて 詳 しく 説 明 します タスクメニューの 起 動 Visual Studio では C1Input の 各 コントロールはスマートタグを 備 えています スマートタグは 各 コントロールで 最 もよく 使 用 されるプロパティを 提 供 するショートカットのタスクメニューを 表 します コントロールの 右 上 端 のスマートタグ( )をクリックし て 各 コントロールのタスクメニューを 呼 び 出 すことができます C1Input の 各 コントロールのスマートタグの 使 用 方 法 につい ての 詳 細 は C1Input の 各 スマートタグ を 参 照 してください コンテキストメニューの 起 動 各 C1Input コンポーネントは 関 連 付 けられたコンテキストメニューを 使 用 して デザイン 時 に 簡 単 に 設 定 できます C1Input のコンテキストメニューについての 詳 細 は C1Input コンテキストメニュー を 参 照 してください C1Input コントロールのプロパティの 表 示 C1Input の 任 意 のコントロールのプロパティにアクセスするには コントロールを 右 クリックして [プロパティ]を 選 択 する か プロパティウィンドウのドロップダウンリストボックスからクラスを 選 択 するだけです C1Input の 各 スマートタグ Visual Studio では C1Input の 各 コントロールはスマートタグ( )を 備 えています スマートタグは 各 コントロールで 最 もよ く 使 用 されるプロパティを 提 供 するショートカットのタスクメニューを 表 します 以 下 の 各 トピックでは C1Input コントロールの 各 スマートタグについて 紹 介 します C1InputMask スマートタグ C1InputMask コントロールでは スマートタグを 使 用 することによって 最 も 一 般 的 な C1InputMask のプロパティにすばやく 簡 単 にアクセスできます [C1InputMask タスク]メニューにアクセスするには C1InputMask コントロールの 右 上 端 のスマートタグ( す [C1InputMask タスク]メニューが 開 きます )をクリックしま 10 Copyright GrapeCity inc. All rights reserved.

12 [C1InputMask タスク]メニューは 次 のように 操 作 します デザイナ [デザイナ]をクリックすると [C1InputMask C1Input デザイナフォーム]が 開 きます デザイナについての 詳 細 は C1InputMask C1Input デザイナフォーム を 参 照 してください プロパティ C1InputMask コントロールの 最 もよく 使 用 されるプロパティです [C1InputMask タスク]メニューには 以 下 の 各 プロパティが 表 示 されます テキスト Text ボックスには ユーザーに 表 示 するテキストを 入 力 します マスク マスクボックスの... ボタンをクリックすると [ 定 型 入 力 ]ダイアログボックスが 表 示 されます 書 式 付 きマスクから 選 択 するか カスタムマスクを 入 力 できます プロンプト 文 字 列 PromptChar ボックスには コントロールにユーザー 入 力 がないときに 表 示 するプロンプト 文 字 列 を 入 力 します デフォ ルトは アンダースコア(_)です パスワード 文 字 列 PasswordChar ボックスには マスクを 指 定 した C1InputMask コントロールで 実 際 の 入 力 文 字 の 代 用 となる 文 字 を 入 力 します カルチャ Culture ボックスのドロップダウン 矢 印 をクリックして カルチャを 選 択 します 各 カルチャには 日 付 時 刻 数 字 通 貨 およびその 他 の 情 報 を 表 示 するためのさまざまな 表 記 規 則 があります テーマ Theme プロパティのドロップダウン 矢 印 をクリックして 組 み 込 みテーマの1つを 選 択 し コントロールの 外 観 を 変 更 し ます 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 11 Copyright GrapeCity inc. All rights reserved.

13 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください また C1InputMask の 使 い 方 もあわせて 参 照 してください バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます C1InputDate スマートタグ C1InputDate コントロールでは スマートタグを 使 用 することによって 最 も 一 般 的 な C1InputDate のプロパティにすばやく 簡 単 にアクセスできます [C1InputDate タスク]メニューにアクセスするには C1InputDate コントロールの 右 上 端 のスマートタグ( す [C1InputDate タスク]メニューが 開 きます )をクリックしま [C1InputDate タスク]メニューは 次 のように 操 作 します デザイナ [デザイナ]をクリックすると [C1InputDate C1Input デザイナフォーム]が 開 きます デザイナについての 詳 細 は C1InputDate C1Input デザイナフォーム を 参 照 してください プロパティ 12 Copyright GrapeCity inc. All rights reserved.

14 C1InputDate コントロールの 最 もよく 使 用 されるプロパティです [C1InputDate タスク]メニューには 以 下 の 各 プロパティが 表 示 されます 日 付 カレンダーから 日 付 を 選 択 するには [Date]ボックスに 日 付 を 入 力 するか ドロップダウン 矢 印 をクリックします 日 付 書 式 [DateFormat]ボックスには 日 付 書 式 パターンを 入 力 します デフォルト 値 は d です カルチャ [Culture]ボックスのドロップダウン 矢 印 をクリックして カルチャを 選 択 します 各 カルチャには 日 付 時 刻 数 字 通 貨 およびその 他 の 情 報 を 表 示 するためのさまざまな 表 記 規 則 があります テーマ Theme プロパティのドロップダウン 矢 印 をクリックして 組 み 込 みテーマの1つを 選 択 し コントロールの 外 観 を 変 更 し ます 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください また C1InputDate の 使 い 方 もあわせて 参 照 してください バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます C1InputNumeric スマートタグ C1InputNumeric コントロールでは スマートタグから 最 も 一 般 的 な C1InputNumeric のプロパティにすばやく 簡 単 にアクセ スできます [C1InputNumeric タスク]メニューにアクセスするには C1InputNumeric コントロールの 右 上 端 のスマートタグ( リックします [C1InputNumeric タスク]メニューが 開 きます )をク 13 Copyright GrapeCity inc. All rights reserved.

15 [C1InputNumeric タスク]メニューは 次 のように 操 作 します プロパティ C1InputNumeric コントロールの 最 もよく 使 用 されるプロパティです [C1InputNumeric タスク]メニューには 以 下 の 各 プロ パティが 表 示 されます 値 [Value]ボックスには ユーザーに 表 示 する 数 値 を 入 力 します 最 小 有 効 値 [MinValue]ボックスには ユーザーが 入 力 できる 最 小 値 を 入 力 します 最 大 有 効 値 [MaxValue]ボックスには ユーザーが 入 力 できる 最 大 値 を 入 力 します 小 数 点 以 下 桁 数 [DecimalPlaces]ボックスには 表 示 する 小 数 点 以 下 の 桁 数 を 入 力 します デフォルト 値 は 2 です カルチャ [Culture]ボックスのドロップダウン 矢 印 をクリックして カルチャを 選 択 します 各 カルチャには 日 付 時 刻 数 字 通 貨 およびその 他 の 情 報 を 表 示 するためのさまざまな 表 記 規 則 があります テーマ Theme プロパティのドロップダウン 矢 印 をクリックして 組 み 込 みテーマの1つを 選 択 し コントロールの 外 観 を 変 更 し ます 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 14 Copyright GrapeCity inc. All rights reserved.

16 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください また C1InputNumeric の 使 い 方 もあわせて 参 照 してください バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます C1InputPercent スマートタグ C1InputPercent コントロールでは スマートタグから 最 も 一 般 的 な C1InputPercent のプロパティにすばやく 簡 単 にアクセス できます [C1InputPercent タスク]メニューにアクセスするには C1InputPercent コントロールの 右 上 端 のスマートタグ( クします [C1InputPercent タスク]メニューが 開 きます )をクリッ [C1InputPercent タスク]メニューは 次 のように 操 作 します プロパティ C1PerecentEdit コントロールの 最 もよく 使 用 されるプロパティです [C1InputPercent タスク]メニューには 以 下 の 各 プロパ ティが 表 示 されます 値 [Value]ボックスには ユーザーに 表 示 する 数 値 を 入 力 します 最 小 有 効 値 [MinValue]ボックスには ユーザーが 入 力 できる 最 小 値 を 入 力 します 最 大 有 効 値 [MaxValue]ボックスには ユーザーが 入 力 できる 最 大 値 を 入 力 します 小 数 点 以 下 桁 数 15 Copyright GrapeCity inc. All rights reserved.

17 [DecimalPlaces]ボックスには 表 示 する 小 数 点 以 下 の 桁 数 を 入 力 します デフォルト 値 は 2 です カルチャ [Culture]ボックスのドロップダウン 矢 印 をクリックして カルチャを 選 択 します 各 カルチャには 日 付 時 刻 数 字 通 貨 およびその 他 の 情 報 を 表 示 するためのさまざまな 表 記 規 則 があります テーマ Theme プロパティのドロップダウン 矢 印 をクリックして 組 み 込 みテーマの1つを 選 択 し コントロールの 外 観 を 変 更 し ます 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください また C1InputNumeric の 使 い 方 もあわせて 参 照 してください バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます C1InputCurrency スマートタグ C1InputCurrency コントロールでは スマートタグから 最 も 一 般 的 なメソッドやプロパティにすばやく 簡 単 にアクセスできま す [C1InputCurrency タスク]メニューにアクセスするには C1InputCurrency コントロールの 右 上 端 のスマートタグ( リックします [C1InputCurrency タスク]メニューが 開 きます )をク 16 Copyright GrapeCity inc. All rights reserved.

18 [C1InputCurrency タスク]メニューは 次 のように 操 作 します プロパティ C1InputCurrency コントロールの 最 もよく 使 用 されるプロパティです [C1InputCurrency タスク]メニューには 以 下 の 各 プ ロパティが 表 示 されます 値 [Value]ボックスには ユーザーに 表 示 する 数 値 を 入 力 します 最 小 有 効 値 [MinValue]ボックスには ユーザーが 入 力 できる 最 小 値 を 入 力 します 最 大 有 効 値 [MaxValue]ボックスには ユーザーが 入 力 できる 最 大 値 を 入 力 します 小 数 点 以 下 桁 数 [DecimalPlaces]ボックスには 表 示 する 小 数 点 以 下 の 桁 数 を 入 力 します デフォルト 値 は 2 です カルチャ [Culture]ボックスのドロップダウン 矢 印 をクリックして カルチャを 選 択 します 各 カルチャには 日 付 時 刻 数 字 通 貨 およびその 他 の 情 報 を 表 示 するためのさまざまな 表 記 規 則 があります テーマ Theme プロパティのドロップダウン 矢 印 をクリックして 組 み 込 みテーマの1つを 選 択 し コントロールの 外 観 を 変 更 し ます 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 17 Copyright GrapeCity inc. All rights reserved.

19 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください また C1InputNumeric の 使 い 方 もあわせて 参 照 してください バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます C1Input コンテキストメニュー 各 C1Input コントロールは デザイン 時 に 使 用 する 追 加 機 能 のコンテキストメニューを 備 えています C1Input コントロール のどれかを 右 クリックすると 次 のようなコンテキストメニューが 開 きます C1Input の 各 デザイナ C1Input は マスクや 日 付 書 式 を 簡 単 に 指 定 できる C1InputMask とC1InputDate の 各 デザイナを 備 えています 以 下 の 各 トピックでは これらのデザイナについて 説 明 します C1InputMask C1Input デザイナフォーム [C1InputMask C1Input デザイナフォーム]を 表 示 するには C1InputMask コントロールの 右 上 端 のスマートタグ( リックして [デザイナ]を 選 択 します 次 のようなデザイナが 表 示 されます )をク 18 Copyright GrapeCity inc. All rights reserved.

20 定 型 入 力 エディタ タブ デザイナの 定 型 入 力 エディタ タブには C1InputMask コントロールのマスクオプションが 表 示 されます [マスク]テキスト ボックスは 1つ 以 上 のプレースホルダ(0 9 # など)とリテラル( 電 話 番 号 の 局 番 を 囲 むカッコなど)で 構 成 されるマスク 文 字 列 を 表 示 します [プレビュー プレビュー]ボックスは Web ブラウザに 表 示 されるマスクの 外 観 を 表 示 します 注 意 :すべての 入 力 マスクが 存 在 しない 値 から 保 護 されるわけではありません たとえば プリセットされた9 桁 郵 便 番 号 マスクは 00000~0000 のような 郵 便 番 号 が 存 在 しなくても この 入 力 値 を 許 容 します 同 様 に 状 態 省 略 時 のプリ セットマスクにより PD はそのような 状 態 が 存 在 しない 場 合 でも 通 過 させることができます それでも プリセットマスク は 明 らかな 不 正 入 力 に 対 する 防 御 の 最 前 線 として 役 立 ちます C1InputDate C1Input デザイナフォーム [C1InputDate C1Input デザイナフォーム]を 表 示 するには C1InputDate コントロールの 右 上 端 のスマートタグ( リックして [デザイナ]を 選 択 します 次 のようなデザイナが 表 示 されます )をク 19 Copyright GrapeCity inc. All rights reserved.

21 日 付 書 式 プリセット タブ デザイナの 日 付 書 式 プリセット タブには C1InputDate コントロールの 日 付 書 式 オプションが 表 示 されます [ 日 付 書 式 ] ボックスは プレースホルダ(dddd)とリテラル 文 字 ( 区 切 り 文 字 など)で 構 成 される 日 付 書 式 パターンを 表 示 します [プレ ビュー]ボックスは Web ブラウザに 表 示 されるマスクの 外 観 を 表 示 します 20 Copyright GrapeCity inc. All rights reserved.

22 C1InputMask の 使 い 方 C1InputMask コントロールは 基 本 的 に ユーザー 入 力 の 有 効 / 無 効 を 識 別 するマスクを 使 用 する 高 度 な TextBox コント ロールです これは テキスト 形 式 で 任 意 のデータ 型 の 情 報 を 入 力 / 編 集 するために 使 用 するメイン Web コントロールで す C1InputMask は C1InputDate と C1InputNumeric コントロールの 基 本 クラスとして 機 能 します 次 の 図 は 電 話 番 号 Mask を 持 つ C1InputMask コントロールを 示 しています MaskFormat プロパティを 使 用 すると アプリケーション 内 にカスタム 検 証 論 理 を 記 述 せずに 以 下 の 入 力 を 指 定 できます 主 な 利 点 マスクリテラル(C1InputMask コントロールに 直 接 表 示 される 文 字 ) 例 : 電 話 番 号 のハイフン(-) マスク 内 の 特 定 の 位 置 に 要 求 される 入 力 タイプ 例 : 数 字 または 英 字 カスタム 入 力 文 字 C1InputMask の 主 な 利 点 は 次 のとおりです C1InputMask の 大 部 分 の 基 本 プロパティとメソッドは テキスト 入 力 時 の 動 作 が System.Windows.Forms.MaskedTextBox コントロールと 同 じであるため 習 得 が 簡 単 C1InputMask の 各 プロパ ティとメソッドは 追 加 機 能 によって 区 別 されます C1Input コントロール 間 でコピー&ペーストが 可 能 キーボードサポート: 左 / 右 矢 印 :カーソルを 左 / 右 位 置 に1つ 移 動 します [Home]/[End]:カーソルを 先 頭 または 末 尾 に 移 動 します 上 / 下 矢 印 : 列 挙 / 数 値 範 囲 の 場 合 列 挙 / 数 値 範 囲 の 値 を 増 減 します [Del]/[Back Space]: 列 挙 / 数 値 範 囲 の 場 合 列 挙 / 数 値 範 囲 の 値 を 初 期 値 に 設 定 します [Ctrl]+[C]/[Ctrl]+[V]:コピー&ペーストキーボードショートカットのサポート C1InputMask に 特 定 のカルチャを 選 択 可 能 例 : 英 語 スペイン 語 ドイツ 語 ロシア 語 など クライアントスクリプトからオンザフライで C1InputMask の 大 部 分 のプロパティを 変 更 可 能 クライアント 側 イベントが 使 用 可 能 なため ポストバックが 不 要 となり Web フォームのパフォーマンスが 向 上 C1InputMask の 定 義 C1InputMask コントロールは 有 効 なユーザー 入 力 と 無 効 なユーザー 入 力 を 区 別 するマスクを 使 用 します マスクを 定 義 す るには C1InputMask スマートタグまたは C1InputMask デザイナなどの 視 覚 的 なデザイナを 使 用 するか プログラムで C1InputMask オブジェクトを 使 用 します よく 使 用 される C1InputMaskタスクについては C1InputMask タスク トピックを 参 照 してください C1InputMask のマスクタイプ 下 の 表 に マスクのいくつかの 例 とその 動 作 を 示 します マスク 動 作 00/00/0000 国 際 的 な 日 付 書 式 の 日 付 ( 日 数 字 月 年 ) / 文 字 は 論 理 日 付 区 切 り 記 号 で アプリケーションの 現 在 の カルチャに 適 切 な 日 付 区 切 り 記 号 としてユーザーに 表 示 されます 日 付 パターンを 指 定 する 場 合 日 付 や 時 刻 を 入 力 するための 充 実 したインタフェースを 提 供 する C1InputDate コントロールを 使 用 できることに 注 意 し てください 00->L<LL 米 国 書 式 の 日 付 ( 日 省 略 月 名 および 年 ) 大 文 字 の 語 頭 の 後 に 小 文 字 が 続 く3 文 字 の 省 略 月 名 を 表 示 し ます (999) 000- 米 国 電 話 番 号 局 番 (オプション) ユーザーがオプション 文 字 を 入 力 しないときは スペースを 入 力 するか 21 Copyright GrapeCity inc. All rights reserved.

23 0000 最 初 の0で 示 される 位 置 にマウスポインタを 直 接 入 れることができます $999, ~ 範 囲 の 通 貨 値 通 貨 桁 区 切 り および 小 数 点 の 各 文 字 は 実 行 時 に カルチャ 固 有 の 等 価 に 置 換 されます Mask は C1InputMask コントロールのデフォルトプロパティです 編 集 マスクを 定 義 する 場 合 コントロール 内 の 各 文 字 位 置 は 特 殊 プレースホルダまたはリテラル 文 字 のいずれかにマップします リテラル 文 字 (リテラル)は 使 用 されているデータの タイプについて 視 覚 的 なキューを 提 供 します たとえば 電 話 番 号 の 局 番 を 囲 むカッコとダッシュは リテラルです 例 :(412) マスクの 編 集 機 能 により 無 効 な 文 字 がコントロールに 入 力 されないようにして ユーザーインタフェースをさらに 強 化 することができます C1InputMask 文 字 マスク 入 力 を 有 効 にするには MaskFormat プロパティを 1つまたは 複 数 のプレースホルダとリテラルで 構 成 されるマスク 文 字 列 に 設 定 します 下 の 表 に 使 用 可 能 なプレースホルダを 示 します マスク 要 素 説 明 0 数 字 ( 必 須 ) この 要 素 は 0~9の1 桁 の 数 字 を 受 け 付 けます 9 数 字 またはスペース(オプション) # 数 字 またはスペース(オプション) マスク 内 でこの 位 置 が 空 白 のとき Text プロパティではス ペースとして 表 示 されます プラス(+)とマイナス(-) 符 号 が 許 容 されます L 文 字 ( 必 須 ) 入 力 を ASCII 文 字 a-z と A-Z に 制 限 します このマスク 要 素 は 正 規 表 現 の [a-za-z] と 等 価 です? 文 字 (オプション) 入 力 を ASCII 文 字 a-z と A-Z に 制 限 します このマスク 要 素 は 正 規 表 現 の [a-za-z]? と 等 価 です & 文 字 ( 必 須 ) C 文 字 (オプション) 任 意 の 非 制 御 文 字 A 英 数 字 (オプション). 小 数 点 プレースホルダ 使 用 される 実 際 の 表 示 文 字 は Culture プロパティに 適 切 な 小 数 点 プレースホルダとなります, 3 桁 プレースホルダ 使 用 される 実 際 の 表 示 文 字 は Culture プロパティに 適 切 な3 桁 プレー スホルダとなります : 時 刻 区 切 り 文 字 使 用 される 実 際 の 表 示 文 字 は Culture プロパティに 適 切 な 時 刻 プレース ホルダとなります / 日 付 区 切 り 文 字 使 用 される 実 際 の 表 示 文 字 は Culture プロパティに 適 切 な 日 付 プレース ホルダとなります $ 通 貨 記 号 使 用 される 実 際 の 表 示 文 字 は Culture プロパティに 適 切 な 通 貨 記 号 となりま す < シフトダウン 後 続 のすべての 文 字 を 小 文 字 に 変 換 します > シフトアップ 後 続 のすべての 文 字 を 大 文 字 に 変 換 します 直 前 のシフトアップまたはシフトダウンを 無 効 にします H K すべての 半 角 文 字 半 角 カタカナ 9 全 角 の 数 字 22 Copyright GrapeCity inc. All rights reserved.

24 K J Z 全 角 カタカナ ひらがな すべての 全 角 文 字 \ エスケープ マスク 文 字 をエスケープして リテラルに 変 えます \\ は バックスラッシュのエ スケープシーケンスです <<n...m>> ユーザー 入 力 を 宣 言 された 数 値 範 囲 に 制 限 します 例 :<< >> <<Value1 Value2 Value3>> ユーザー 入 力 をセットオプションの1つに 制 限 します 文 字 ( )は オプション 値 の 間 の 区 切 り 文 字 として 機 能 します 例 :<<オプション1 オプション2 オプション3>> その 他 のすべての 文 字 リテラル すべての 非 マスク 要 素 は C1InputMask 内 にそのまま 表 示 されます リテラルは 常 に 実 行 時 にマスク 内 の 静 的 位 置 を 占 め ユーザーによって 移 動 または 削 除 できません C1InputMask が 前 のマスクでフィルタされたユーザー 入 力 をすでに 含 んでいる 場 合 に マスクを 変 更 すると C1InputMask はその 入 力 を 新 しいマスク 定 義 に 移 植 しようとします Mask プロパティを 設 定 するには 以 下 の 手 順 に 従 います 1. C1InputMask コントロールを 選 択 し そのスマートタグをクリックして [C1InputMask タスク]メニューを 開 きます 2. [マスク]プロパティの 横 の... ボタンをクリックします [ 定 型 入 力 ]ダイアログボックスが 表 示 されます 3. データ 書 式 を 選 択 して [マスク]テキストボックスにマスクを 定 義 します [プレビュー プレビュー]テキストボックスにマスクのプレ ビューが 表 示 されることに 注 意 してください 4. OK をクリックして [ 定 型 入 力 ]ダイアログボックスを 閉 じます 23 Copyright GrapeCity inc. All rights reserved.

25 C1InputDate の 使 い 方 C1InputDate コントロールは C1InputMask から 派 生 した 日 付 / 時 刻 編 集 専 用 コントロールです 日 付 固 有 のマスクの 編 集 フィールドを 使 用 して ユーザーは 日 付 をコントロールに 直 接 入 力 するか 上 / 下 矢 印 キーを 使 用 して 現 在 のフィールドの 値 を 増 減 できます 次 の 図 は C1InputDate コントロールを 示 しています DateFormatプロパティを 使 用 すると アプリケーション 内 にカスタム 検 証 論 理 を 記 述 せずに 以 下 の 入 力 を 指 定 できます 主 な 利 点 マスクリテラル(C1InputDate コントロールに 直 接 表 示 される 文 字 ) 例 : 時 間 のコロン(:) 日 付 の 区 切 り 文 字 (/) マスク 内 の 特 定 の 位 置 に 要 求 される 入 力 タイプ 例 : 数 字 または 英 字 カスタム 入 力 文 字 C1InputDate の 主 な 利 点 は 次 のとおりです C1InputDate コントロールは 日 付 エディタを 表 示 します DateFormat プロパティを 使 用 して 日 付 書 式 文 字 または パターンを 設 定 または 取 得 します C1InputDate コントロールは C1Calendar コントロールをインタラクティブ 操 作 するように 設 定 できます Calendar プ ロパティを 使 用 して C1InputDate を C1Calendar と 統 合 します C1InputDate に 特 定 のカルチャを 選 択 可 能 例 : 英 語 スペイン 語 ドイツ 語 ロシア 語 など 日 付 パターン その 他 の 日 付 文 字 列 の 側 面 は 選 択 された Culture プロパティによって 決 まります クライアント 側 イベントが 使 用 可 能 なため ポストバックが 不 要 となり Web フォームのパフォーマンスが 向 上 C1InputDate の 定 義 マスクを 定 義 するには C1InputDate スマートタグまたは C1InputDate C1Input デザイナフォームなどの 視 覚 的 なデザイナを 使 用 するか プログラムで C1InputDate オブジェクトを 使 用 します 実 行 時 にユーザーが 日 付 を 編 集 する 際 は 以 下 の 点 に 注 意 します 文 字 列 形 式 で 表 された 書 式 付 きフィールド( 長 い 日 付 パターンの 月 名 または 曜 日 名 など)は キーボードで 数 値 として 入 力 でき それらの 文 字 列 表 現 は 自 動 的 に 更 新 されます 上 / 下 矢 印 を 使 用 して 現 在 のフィールドを 増 減 できます C1InputDate の 一 般 プロパティ 下 の 表 に C1InputDate コントロールの 一 般 プロパティを 示 します プロパティ Date 説 明 DateTime 値 DateFormat 日 付 書 式 パターンまたは 日 付 書 式 文 字 (プリセット 文 字 ) DateFormatResultPattern Placeholder WebCalendar DisplayFormat カルチャによって 決 まる 結 果 の 日 付 書 式 パターン( 取 得 のみ) 空 の 状 態 で 表 示 されるテキストを 示 します C1InputDate コントロールとインタラクティブ 操 作 する C1WebCalendar コントロールを 取 得 また は 設 定 します コントロールがフォーカスを 失 ったときに 表 示 する 日 付 書 式 パターン C1InputDate 書 式 文 字 24 Copyright GrapeCity inc. All rights reserved.

26 C1InputDate 書 式 文 字 は 大 文 字 と 小 文 字 を 区 別 します 下 の 表 に 標 準 書 式 文 字 を 示 します プリセットパターン d D t T 名 前 短 い 日 付 パターン 長 い 日 付 パターン 短 い 時 刻 パターン 長 い 時 刻 パターン F 完 全 な 日 付 / 時 刻 パターン( 短 い 時 刻 ) g 一 般 的 な 時 刻 パターン( 短 い 時 刻 ) G h 一 般 的 な 日 付 / 時 刻 パターン( 長 い 時 刻 ) U 世 界 時 のソート 可 能 な 日 付 / 時 刻 パターン C1InputDate 書 式 パターン C1InputDate パターンは 大 文 字 と 小 文 字 を 区 別 します 下 の 表 に 標 準 パターンを 示 します 書 式 パターン d dd ddd dddd M MM MMM MMMM y yy yyyy h hh H HH m mm s ss t 説 明 月 の 日 1 桁 の 日 は 前 にゼロが 付 きません 月 の2 桁 の 日 1 桁 の 日 は 前 にゼロが 付 きます 曜 日 の 省 略 名 曜 日 の 完 全 名 数 字 月 1 桁 の 月 は 前 にゼロが 付 きません 数 字 月 1 桁 の 月 は 前 にゼロが 付 きます 月 の 省 略 名 月 の 完 全 名 下 2 桁 の 年 ( 西 暦 ) 下 2 桁 の 年 ( 西 暦 )が 10 未 満 の 場 合 年 は 前 にゼロを 付 けず に 表 示 されます 下 2 桁 の 年 ( 西 暦 ) 下 2 桁 の 年 ( 西 暦 )が 10 未 満 の 場 合 年 は 前 にゼロを 付 けて 表 示 されます 4 桁 の 年 (0000~9999) 12 時 間 表 示 の 時 1 桁 の 時 は 前 にゼロが 付 きません 12 時 間 表 示 の 時 1 桁 の 時 は 前 にゼロが 付 きます 24 時 間 表 示 の 時 1 桁 の 時 は 前 にゼロが 付 きません 24 時 間 表 示 の 時 1 桁 の 時 は 前 にゼロが 付 きます 分 1 桁 の 分 は 前 にゼロが 付 きません 分 1 桁 の 分 は 前 にゼロが 付 きます 秒 1 桁 の 秒 は 前 にゼロが 付 きません 秒 1 桁 の 秒 は 前 にゼロが 付 きます AM/PM 指 定 子 の 最 初 の 文 字 25 Copyright GrapeCity inc. All rights reserved.

27 tt e ee eee(さらに 任 意 の 個 数 の 文 字 e を 付 加 可 能 ) g AM/PM 指 定 子 年 号 を1 桁 以 上 の 数 値 で 表 示 します(1-??) 年 号 を2 桁 以 上 の 数 値 で 表 示 します(01-??) ee と 同 様 に 機 能 します 年 号 をアルファベットで 表 示 します(M T S H) gg 年 号 の 最 初 の 文 字 (DBCS)を 表 示 します( 明 大 昭 平 ) ggg 完 全 な 年 号 (DBCS)を 表 示 します( 明 治 大 正 昭 和 平 成 ) gggg(さらに 任 意 の 個 数 の 文 字 g を 付 加 可 能 ) 書 式 文 字 列 に 他 の g または gg または ggg パターンがない 場 合 は ggg と 同 様 に 機 能 します 注 意 :パターン 内 の 文 字 がシングルクォーテーションマーク(')で 囲 まれている 場 合 これらの 文 字 はリテラルとして 処 理 されます たとえば 日 付 のパターン 'dd:' dd.mm.yyyy は 文 字 列 dd: を 出 力 します C1InputDate 表 示 書 式 パターン キーワード e ee eee(さらに 任 意 の 個 数 の 文 字 e を 付 加 可 能 ) 説 明 年 号 を1 桁 以 上 の 数 値 で 表 示 します(1-??) 年 号 を2 桁 以 上 の 数 値 で 表 示 します(01-??) ee と 同 様 に 機 能 します E 和 暦 年 を2 桁 で 表 示 し 開 始 年 を 元 と 表 示 ( 先 頭 に0を 付 けない)( 例 : 平 成 元 年 ) EE 和 暦 年 を2 桁 で 表 示 し 開 始 年 を 元 と 表 示 ( 先 頭 に0を 付 ける)( 例 : 平 成 元 年 ) d 先 頭 に0を 付 けない 数 字 で 日 を 表 示 します(1-31) dd 先 頭 に0を 付 けた 数 字 で 日 を 表 示 します(01-31) ddd dddd ddddd(さらに 任 意 の 個 数 の 文 字 d を 付 加 可 能 ) g 現 在 のスレッドに 関 連 付 けられた DateTimeFormatInfo.AbbreviatedDayNames() プロパ ティまたは 指 定 された 書 式 プロバイダによって 定 義 された 日 を 表 示 します 現 在 のスレッドに 関 連 付 けられた DateTimeFormatInfo.DayNames() プロパティまたは 指 定 された 書 式 プロバイダによって 定 義 された 日 を 表 示 します dddd と 同 様 に 機 能 します 年 号 をアルファベットで 表 示 します(M T S H) gg 年 号 の 最 初 の 文 字 (DBCS)を 表 示 します( 明 大 昭 平 ) ggg 完 全 な 年 号 (DBCS)を 表 示 します( 明 治 大 正 昭 和 平 成 ) gggg(さらに 任 意 の 個 数 の 文 字 g を 付 加 可 能 ) ggg と 同 様 に 機 能 します h 先 頭 に0を 付 けない 数 字 で 12 時 間 制 の 時 間 を 表 示 します(0-11) hh 先 頭 に0を 付 けた 数 字 で 12 時 間 制 の 時 間 を 表 示 します(00-11) hhh(さらに 任 意 の 個 数 の 文 字 h を 付 加 可 能 ) hh と 同 様 に 機 能 します 26 Copyright GrapeCity inc. All rights reserved.

28 H 先 頭 に0を 付 けない 数 字 で 24 時 間 制 の 時 間 を 表 示 します(0-23) HH 先 頭 に0を 付 けた 数 字 で 24 時 間 制 の 時 間 を 表 示 します(00-23) HHH(さらに 任 意 の 個 数 の 文 字 H を 付 加 可 能 ) HH と 同 様 に 機 能 します m 先 頭 に0を 付 けないの 数 字 で 分 を 表 示 します(0-59) mm 先 頭 に0を 付 けない 数 字 で 分 を 表 示 します(00-59) mmm(さらに 任 意 の 個 数 の 文 字 m を 付 加 可 能 ) mm と 同 様 に 機 能 します M 先 頭 に0を 付 けない 数 字 で 月 を 表 示 します(1-12) MM 先 頭 に0を 付 けた 数 字 で 月 を 表 示 します(01-12) MMM MMMM MMMMM(さらに 任 意 の 個 数 の 文 字 M を 付 加 可 能 ) 現 在 のスレッドに 関 連 付 けられた DateTimeFormatInfo.AbbreviatedMonthNames() プロ パティまたは 指 定 された 書 式 プロバイダによって 定 義 された 月 を 表 示 します 現 在 のスレッドに 関 連 付 けられた DateTimeFormatInfo.MonthNames() プロパティまたは 指 定 された 書 式 プロバイダによって 定 義 された 月 を 表 示 します MMMM と 同 様 に 機 能 します s 先 頭 に0を 付 けない 数 字 で 秒 を 表 示 します(0-59) ss 先 頭 に0を 付 けた 数 字 で 秒 を 表 示 します(00-59) sss(さらに 任 意 の 個 数 の 文 字 s を 付 加 可 能 ) t tt ttt(さらに 任 意 の 個 数 の 文 字 t を 付 加 可 能 ) ss と 同 様 に 機 能 します A.M./P.M. 指 定 子 の 最 初 の 文 字 を 表 示 します A.M./P.M. 指 定 子 を 表 示 します tt と 同 様 に 機 能 します y 先 頭 に0を 付 けない 数 字 で 年 を 表 示 します(0-99) yy 先 頭 に0を 付 けた 数 字 で 年 を 表 示 します(00-99) yyy 先 頭 に0を 付 けない 数 字 で 年 を 表 示 します(1-9999) yyyy 4 桁 の 数 字 で 年 を 表 示 します( ) yyyyy(さらに 任 意 の 個 数 の 文 字 y を 付 加 可 能 ) A d D yyyy と 同 様 に 機 能 します AD 表 現 A.D. を 表 示 します ShortDatePattern LongDatePattern f/f 完 全 な 日 時 ( 長 い 日 付 と 短 い 時 刻 ) g 一 般 ( 短 い 日 付 と 短 い 時 刻 ) G 一 般 ( 短 い 日 付 と 長 い 時 刻 ) m/m r/r MonthDayPattern RFC1123Pattern 27 Copyright GrapeCity inc. All rights reserved.

29 s t T u SortableDateTimePattern shorttimepattern LongTimePattern UniversalSortableDateTimePattern U グリニッジ 標 準 時 による 完 全 な 日 時 ( 長 い 日 付 と 長 い 時 刻 ) y/y YearMonthPattern 和 暦 の 設 定 C1InputDate コントロール で 使 用 する 和 暦 設 定 の 定 義 について 解 説 します 和 暦 設 定 C1InputDate コントロール で 利 用 する 和 暦 設 定 をカスタマイズすることができます ページ 上 に 和 暦 定 義 が 存 在 する 場 合 wijinputdate ウィジェットではページ 上 設 定 を 参 照 します ページ 上 に 和 暦 定 義 が 存 在 しない 場 合 はデフォルトの 設 定 を 有 効 にします 和 暦 の 定 義 方 法 以 下 に 和 暦 定 義 の 設 定 例 を 示 します wijinputdate ウィジェットのデフォルトは 下 記 設 定 と 同 じです 和 暦 定 義 の 設 定 例 <script type="text/javascript"> window.eras = [{ name: " 明 治 ", abbreviation: " 明 ", symbol: "Meiji", startdate: " ", shortcuts: "1,M" }, { name: " 大 正 ", abbreviation: " 大 ", symbol: "Taisho", startdate: " ", shortcuts: "2,T" }, { name: " 昭 和 ", abbreviation: " 昭 ", symbol: "Showa", startdate: " ", shortcuts: "3,S" }, { name: " 平 成 ", abbreviation: " 平 ", symbol: "Heisei", startdate: " ", shortcuts: "4,H" }, { name: " 新 历 ", abbreviation: " 新 ", symbol: "After", startdate: " ", shortcuts: "5,A" } ]; </script> 和 暦 定 義 の 詳 細 以 下 に 和 暦 定 義 の 各 設 定 の 詳 細 を 解 説 します name abbreviation symbol startdate shortcuts 年 号 の 正 式 名 称 キーワード"ggg"で 使 用 します 年 号 の 略 称 キーワード"gg"で 使 用 します 年 号 のアルファベット 略 称 キーワード"g"で 使 用 します 年 号 の 開 始 日 ハイフン(-) 区 切 りで 年 月 日 を 指 定 します 和 暦 を 入 力 する 際 のショートカットキー ( 数 字 アルファベットを 設 定 できます 複 数 キーワードを 設 定 する 場 合 はカンマ 区 切 りで 設 定 します) 28 Copyright GrapeCity inc. All rights reserved.

30 使 用 例 和 暦 設 定 ファイルを 参 照 してwijinput ウィジェットを 使 用 したサンプルです 和 暦 設 定 は 独 立 したjsファイルに 定 義 し ページ 上 でjsファイルを 参 照 することで 和 暦 設 定 をアプリケーション 内 で 一 元 管 理 することをお 勧 めします ソースビュー <script type="text/javascript"> window.eras = [{ name: " 明 治 ", abbreviation: " 明 ", symbol: "Meiji", startdate: " ", shortcuts: "1,M" }, { name: " 大 正 ", abbreviation: " 大 ", symbol: "Taisho", startdate: " ", shortcuts: "2,T" }, { name: " 昭 和 ", abbreviation: " 昭 ", symbol: "Showa", startdate: " ", shortcuts: "3,S" }, { name: " 平 成 ", abbreviation: " 平 ", symbol: "Heisei", startdate: " ", shortcuts: "4,H" }, { name: " 新 历 ", abbreviation: " 新 ", symbol: "After", startdate: " ", shortcuts: "5,A" } ]; </script> <cc1:c1inputdate ID="C1InputDate1" runat="server" Date="04/11/ :53:00" DisplayFormat="ggg ee/mm/dd"> </cc1:c1inputdate> 29 Copyright GrapeCity inc. All rights reserved.

31 C1InputNumeric の 使 い 方 C1InputNumeric コントロールは C1InputMask から 派 生 した 数 値 の 編 集 専 用 コントロールです この 数 値 エディタを 使 用 すると アプリケーションでカスタム 検 証 論 理 を 記 述 せずに 入 力 を 指 定 できます 次 の 図 は C1InputNumeric コントロールを 示 しています 主 な 利 点 C1InputNumeric の 主 な 利 点 は 次 のとおりです C1InputNumeric コントロールは 数 値 エディタを 表 示 します C1InputNumeric に 特 定 のカルチャを 選 択 可 能 例 : 英 語 スペイン 語 ドイツ 語 ロシア 語 など C1InputNumeric は 選 択 された Culture プロパティを 使 用 して 数 値 グループ 区 切 り 文 字 ( 桁 区 切 り 文 字 ) 小 数 点 文 字 および 符 号 を 表 示 することに 注 意 してください MinValue と MaxValue プロパティを 簡 単 に 変 更 可 能 な 数 値 範 囲 をサポート クライアント 側 イベントが 使 用 可 能 なため ポストバックが 不 要 となり Web フォームのパフォーマンスが 向 上 C1InputNumeric の 定 義 C1InputNumeric コントロールは 数 値 データを 表 示 する 数 値 範 囲 サポートを 備 えています C1InputNumeric コントロールは 数 値 を 厳 密 に 処 理 するため 指 定 する 入 力 マスクはありません C1InputNumeric を 定 義 するには 最 小 値 と 最 大 値 小 数 点 以 下 の 桁 数 (ゼロ 可 能 )を 入 力 して カルチャ 固 有 の 桁 区 切 り 文 字 を 表 示 するかどうかを 指 定 するだけです C1InputNumeric コントロールの 値 を 定 義 するには C1InputNumeric スマートタグを 使 用 するか プログラムで C1InputNumeric オブジェ クトを 使 用 します ユーザーが 実 行 時 に 値 を 編 集 するとき 上 矢 印 または 下 矢 印 キーを 使 用 して 現 在 のフィールドを 増 減 できることに 注 意 してください よく 使 用 される C1InputNumeric タスクについては C1InputNumeric タスク トピックを 参 照 してください C1InputNumeric の 一 般 プロパティ 下 の 表 に C1InputNumeric コントロールの 一 般 プロパティを 示 します プロパティ Value Text MinValue MaxValue 説 明 Double 型 C1InputNumeric コントロールの 数 値 String 型 カルチャ 情 報 (グループ 区 切 り 文 字 など)に 準 じて 表 示 可 能 なテキスト 入 力 可 能 な 最 小 値 入 力 可 能 な 最 大 値 DecimalPlaces 表 示 する 小 数 点 以 下 の 桁 数 (デフォルト:2)を 示 します ShowGroup Placeholder 桁 グループ 区 切 り 文 字 を3 桁 ごとに 挿 入 するかどうかを 示 します( 桁 グループの 桁 数 は 選 択 されたカルチャによって 異 なりま す) 空 の 状 態 で 表 示 されるテキストを 示 します C1InputNumeric コントロールのプロパティとイベントの 大 部 分 は C1InputMask コントロールと 同 じです ただし 数 値 コントロールでは 使 用 されない 隠 しプロパティ (AllowPromptAsInput Mask HidePromptOnLeave PasswordChar PromptChar ResetOnPrompt ResetOnSpace SkipLiterals など)は 除 きます 30 Copyright GrapeCity inc. All rights reserved.

32 C1InputPercent の 使 い 方 C1InputPercent コントロールは C1InputNumeric から 派 生 したパーセント 値 編 集 専 用 コントロールです この 数 値 エディタ を 使 用 すると アプリケーションでカスタム 検 証 論 理 を 記 述 せずに 入 力 を 指 定 できます 次 の 図 は C1InputPercent コント ロールを 示 しています 主 な 利 点 C1InputPercent の 主 な 利 点 は 次 のとおりです C1InputPercent コントロールは 数 値 エディタを 表 示 します C1InputPercent を 使 用 して パーセント 値 を 入 力 でき ます C1InputPercent に 特 定 のカルチャを 選 択 可 能 例 : 英 語 スペイン 語 ドイツ 語 ロシア 語 など 数 値 パターン およ び 数 値 文 字 列 のその 他 の 側 面 (パーセント 記 号 と 配 置 )は 選 択 されたCulture プロパティによって 異 なることに 注 意 し てください クライアント 側 イベントが 使 用 可 能 なため ポストバックが 不 要 となり Web フォームのパフォーマンスが 向 上 注 意 :C1InputPercent コントロールのプロパティは C1InputNumeric コントロールと 同 じです C1InputPercent の 定 義 C1InputPercent コントロールは 数 値 データを 表 示 する 数 値 範 囲 サポートを 備 えています C1InputPercent コントロール の 値 を 定 義 するには C1InputPercent スマートタグを 使 用 するか プログラムで C1InputPercent オブジェクトを 使 用 します ユーザーが 実 行 時 に 値 を 編 集 するとき 上 矢 印 または 下 矢 印 キーを 使 用 して 現 在 のフィールドを 増 減 できることに 注 意 してく ださい C1InputPercent コントロールのプロパティは C1InputNumeric コントロールと 同 じです よく 使 用 される C1InputPercent タ スクについては C1InputNumeric タスク トピックを 参 照 してください 31 Copyright GrapeCity inc. All rights reserved.

33 C1InputCurrency の 使 い 方 C1InputCurrency コントロールは C1InputNumeric から 派 生 した 通 貨 値 編 集 専 用 コントロールです この 数 値 エディタを 使 用 すると アプリケーションでカスタム 検 証 論 理 を 記 述 せずに 入 力 を 指 定 できます 次 の 図 は C1InputCurrency コントロー ルを 示 しています 主 な 利 点 C1InputCurrency の 主 な 利 点 は 次 のとおりです C1InputCurrency コントロールは 数 値 エディタを 表 示 します C1InputCurrency を 使 用 して 通 貨 値 を 入 力 できま す C1InputCurrency に 特 定 のカルチャを 選 択 可 能 例 : 英 語 スペイン 語 ドイツ 語 ロシア 語 など 数 値 パターン およ び 数 値 文 字 列 のその 他 の 側 面 (パーセント 記 号 と 配 置 )は 選 択 された Culture プロパティによって 異 なることに 注 意 してください クライアント 側 イベントが 使 用 可 能 なため ポストバックが 不 要 となり Web フォームのパフォーマンスが 向 上 注 意 :C1InputCurrency コントロールのプロパティは C1InputNumeric コントロールと 同 じです C1InputCurrency の 定 義 C1InputCurrency コントロールは 数 値 データを 表 示 する 数 値 範 囲 サポートを 備 えています C1InputCurrency コントロー ルの 値 を 定 義 するには C1InputCurrency スマートタグを 使 用 するか プログラムで C1InputCurrency オブジェクトを 使 用 します ユーザーが 実 行 時 に 値 を 編 集 するとき 上 矢 印 または 下 矢 印 キーを 使 用 して 現 在 のフィールドを 増 減 できることに 注 意 してく ださい C1InputCurrency コントロールのプロパティは C1InputNumeric コントロールと 同 じです よく 使 用 される C1InputCurrency タスクについては C1InputNumeric タスク トピックを 参 照 してください 32 Copyright GrapeCity inc. All rights reserved.

34 C1Input の 外 観 6つのプレミアムテーマ(Arctic Midnight Aristo Rocket Cobalt および Sterling)の1つを 選 択 して 入 力 コントロールの 外 観 を 変 更 します あるいは jquery UI から ThemeRoller を 使 用 して カスタマイズした 独 自 のテーマを 作 成 できます テーマ C1Input は C1Input コントロールごとに6 種 類 の 組 み 込 みスタイルを 備 えているため コントロールを 自 動 的 に 書 式 設 定 で きます 組 み 込 みテーマには arctic aristo cobalt midnight rocket および sterling が 含 まれます 以 下 の 例 では C1InputMask コントロールを 示 していますが すべてのコントロールのテーマは 同 じです arctic 以 下 の 画 面 は arctic テーマを 表 示 しています aristo 以 下 の 画 面 は aristo テーマを 表 示 しています これは すべての C1Input コントロールのデフォルト 書 式 です cobalt 以 下 の 画 面 は cobalt テーマを 表 示 しています midnight 以 下 の 画 面 は midnight テーマを 表 示 しています rocket 以 下 の 画 面 は rocket テーマを 表 示 しています sterling 以 下 の 画 面 は sterling テーマを 表 示 しています C1Input CSS セレクタ CSS スタイルを 使 用 すれば 任 意 の C1Input 要 素 をスタイル 設 定 して 外 観 を 独 特 なものにできます カスタマイズ 処 理 を 簡 素 化 するために ComponentOne Studio には 6 種 類 の 組 み 込 みテーマごとに CSS セレクタが 組 み 込 まれています テーマに 33 Copyright GrapeCity inc. All rights reserved.

35 ついての 詳 細 は テーマ を 参 照 してください 背 景 テキスト フォント 枠 線 輪 郭 マージン 埋 め 込 み リスト 表 などの 一 般 的 な CSS プロパティを 該 当 する CSS セレク タに 適 用 できます 以 下 のトピックでは 一 般 に 使 用 される 個 々の CSS セレクタとグループ 化 された CSS セレクタについて 詳 細 に 説 明 します 個 々の CSS セレクタをグループとして 組 み 合 わせ CSS セレクタをより 具 体 的 かつ 強 力 なものにすることができます CSS セレクタ.wijmo-input-trigger.wijmo-wijinput-input.wijmo-wijinput-mask.wijmo-wijinput-date.wijmo-wijinputspinner.wijmo-wijinputspinup.wijmo-wijinputspindown.wijmo-wijinputnumeric.wijmo-wijinputwrapper.wijmo-wijinput uistate-focus 説 明 トリガーボタンにスタイルを 適 用 します スピナーボタンにスタイルを 適 用 します 上 スピンボタンにスタイルを 適 用 します 下 スピンボタンにスタイルを 適 用 します すべての 入 力 タイプの 最 も 外 側 のコンテナにスタイルを 適 用 します すべてのマスク 入 力 (C1InputMask)の 最 も 外 側 のコンテナにスタイルを 適 用 します 数 値 入 力 タイプ(C1InputNumeric C1InputCurrency および C1InputPercent)の 最 も 外 側 の コンテナにスタイルを 適 用 します すべての 日 付 入 力 タイプ(C1InputDate)の 最 も 外 側 のコンテナにスタイルを 適 用 します 入 力 要 素 の 直 接 のラッパーにスタイルを 適 用 します フォーカス 状 態 にあるすべての 入 力 タイプの 最 も 外 側 のコンテナにスタイルを 適 用 します 34 Copyright GrapeCity inc. All rights reserved.

36 クライアント 側 の 機 能 C1Input コントロールは サーバー 側 コントロールのメンバとほぼ 同 等 の 非 常 に 充 実 したクライアント 側 オブジェクトモデルを 備 えています C1Input コントロールが 表 示 されると クライアント 側 コントロールのインスタンスが 自 動 的 に 生 成 されます これは サーバー にポストバックしなくても C1Input コントロールのプロパティやメソッドにアクセスできるということです クライアント 側 コードを 使 用 すれば 時 間 をかけて Web サーバーに 情 報 を 送 信 しなくても Web ページに 多 くの 機 能 を 実 装 で きます そのため クライアント 側 オブジェクトモデルを 使 用 することで Web サイトの 効 率 を 高 めることができます クライアント 側 イベント C1Input には 無 効 な 文 字 の 入 力 などのアクションが 発 生 したときに C1Input コントロールを 操 作 可 能 にする 複 数 のクライア ント 側 イベントが 含 まれています クライアント 側 イベントの 表 にリストされたサーバー 側 プロパティを 使 用 して 特 定 のクライアント 側 イベントに 反 応 する JavaScript 関 数 の 名 前 を 指 定 できます たとえば invalidinput という JavaScript 関 数 を 無 効 な 文 字 が 入 力 されたときに 反 応 するように 割 り 当 てるには OnClientInvalidInput プロパティを invalidinput に 設 定 します 下 の 表 に クライアントスクリプトで 使 用 できるイベントを 示 します これらのプロパティはサーバー 側 で 定 義 されていますが 実 際 のイベントや 各 JavaScript 関 数 用 に 宣 言 する 名 前 はクライアント 側 で 定 義 されます イベントのサーバー 側 プロパティ 名 イベント 名 説 明 OnClientInitialized initialized コントロールを 初 期 化 した 後 に 発 生 します OnClientInitializing initializing コントロールを 初 期 化 する 前 に 発 生 します OnClientInvalidInput invalidinput 無 効 な 文 字 が 入 力 されたときに 発 生 します OnClientTextChanged textchanged 入 力 のテキストが 変 更 されたときに 発 生 しま す OnClientTriggerMouseDown triggermousedown マウスがトリガーボタン 上 で 押 されたときに 発 生 します OnClientTriggerMouseUp triggermouseup マウスがトリガーボタン 上 で 離 されたときに 発 生 します OnClientDateChanged (InputDate only) datechanged 日 付 値 が 変 更 された 後 に 発 生 します OnClientValueBoundsExceeded (InputNumber only) valueboundsexceeded 入 力 の 値 が 有 効 範 囲 を 超 えたときに 発 生 しま す OnClientValueChanged (InputNumber only) valuechanged 値 が 変 更 された 後 に 発 生 します C1Input クライアント 側 イベントの 説 明 と 構 文 の 例 については クライアント 側 リファレンス でも 確 認 できます 35 Copyright GrapeCity inc. All rights reserved.

37 タスク 別 ヘルプ タスク 別 ヘルプは Visual Studio のプログラミングに 精 通 しているユーザーを 対 象 としています ヘルプに 記 述 された 手 順 に 従 うことによって C1Input のさまざまな 機 能 をデモンストレーションするプロジェクトを 作 成 して C1Input の 用 途 を 理 解 するこ とができます タスク 別 ヘルプの 各 トピックでは 新 しい ASP.NET プロジェクトを 既 に 作 成 していることを 前 提 としています C1InputMask タスク このセクションでは C1InputMask コントロールを 使 用 して 個 別 のタスクを 実 行 する 方 法 について 説 明 します 以 下 の 各 ト ピックでは C1InputMask コントロールを Web フォームに 追 加 してあるものと 想 定 しています プロンプト 文 字 列 の 変 更 実 行 時 に C1InputMask コントロールはマスクを 一 連 のプロンプト 文 字 列 (# または _ など)として 表 示 します プロンプト 文 字 列 は 各 編 集 可 能 なマスク 位 置 を 表 します プロンプト 文 字 列 を 変 更 するには PromptChar プロパティを 使 用 します この 例 では (999) の 電 話 番 号 マスクを 持 つ C1InputMask コントロールを 使 用 します タスクメニューを 使 用 してプロンプト 文 字 列 を 変 更 するには 以 下 の 手 順 を 実 行 します 電 話 番 号 のPromptChar プロパティを 変 更 するには [C1InputMask タスク]メニューを 開 き [プロンプト 文 字 列 ]テキスト ボックスに 数 値 記 号 (#)を 入 力 します.html マークアップを 使 用 してプロンプト 文 字 列 を 変 更 するには 以 下 の 手 順 を 実 行 します プロンプト 文 字 列 を C1InputMask の 数 値 記 号 (#)に 変 更 するには.aspx ページで 次 のマークアップを 使 用 します ソースビュー <cc1:c1inputmask runat="server" Mask="(999) " 36 Copyright GrapeCity inc. All rights reserved.

38 Text="412" PromptChar="#"> </cc1:c1inputmask> このトピックの 作 業 結 果 プロジェクトを 実 行 します 次 のように Web ブラウザに 数 値 記 号 (#)がプロンプト 文 字 列 として 表 示 されることに 注 意 してくだ さい コントロールにText プロパティが 指 定 されたため 412 の 局 番 が 数 値 記 号 の 代 わりに 表 示 されていることに 注 意 してください 入 力 ボックスがフォーカスを 失 くしたときにプロンプト 文 字 列 を 非 表 示 にする 方 法 についての 詳 細 は フォーカス 消 失 時 のプロ ンプト 文 字 列 の 非 表 示 化 トピックを 参 照 してください IP アドレスマスクの 作 成 以 下 の 例 では 数 値 範 囲 を 使 用 して IP アドレスを 編 集 するためのマスク 付 きテキストボックスを 表 す 方 法 について 示 します この 例 では <<0 255>>\.<<0 255>>\.<<0 255>>\.<<0 255>> のカスタムマスクを 持 つC1InputMask コントロール を 使 用 します タスクメニューを 使 用 して IP アドレスマスクを 作 成 するには 以 下 の 手 順 を 実 行 します 特 定 のテキストを 指 定 した IP アドレス 値 を 表 示 するには 以 下 のタスクを 実 行 します 1. [C1InputMask タスク]メニューを 開 き マスクボックスの... ボタンをクリックして [ 定 型 入 力 ]ダイアログボックスを 開 きます 2. [マスク]テキストボックスに << >>\.<< >>\.<< >>\.<< >> と マスクを 入 力 します マスクの 入 力 を 開 始 すると デザイナが <ユーザー 設 定 > に 自 動 的 に 切 り 替 わる( 入 力 したマスクがマスクリストにな かった 場 合 )ことに 注 意 してください 3. OK をクリックします 37 Copyright GrapeCity inc. All rights reserved.

39 4. [タスク]メニューがまだ 開 いた 状 態 で [Text]テキストボックスに を 入 力 します ソースビュー.html マークアップを 使 用 して IP アドレスマスクを 作 成 するには 以 下 の 手 順 を 実 行 します IP アドレスのマスク 値 を 作 成 するには.aspx ページで 次 のマークアップを 使 用 します <cc1:c1inputmask runat="server" Mask="<< >>\.<< >>\.<< >>\.<< >>" Text=" "> </cc1:c1inputmask> 注 意 : < または > の 文 字 により 後 続 の 文 字 は 命 令 をシフトダウンまたはシフトアップします \ を 付 けない. 文 字 は 小 数 点 プレースホルダとして 機 能 し 使 用 される 実 際 の 表 示 文 字 は Culture プロパティの 値 に 適 切 な 小 数 点 プ レースホルダとなります このトピックの 作 業 結 果 プロジェクトを 実 行 します 次 のように のテキストを 持 つ IP アドレスマスクが Web ブラウザに 表 示 されること に 注 意 してください 電 話 番 号 マスクの 作 成 以 下 の 例 では MaskFormat プロパティの 列 挙 体 部 分 を 使 用 する 方 法 を 示 します この 例 では (999) の 電 話 番 号 マスクを 持 つC1InputMask コントロールを 使 用 します タスクメニューを 使 用 して 電 話 番 号 マスクを 作 成 するには 以 下 の 手 順 を 実 行 します 412 局 番 を 持 つ 電 話 番 号 値 を 表 示 するには 以 下 のタスクを 実 行 します 1. [C1InputMask タスク]メニューを 開 き マスク プロパティの... ボタンをクリックして [ 定 型 入 力 ]ダイアログボックス を 開 きます 2. マスク 値 に 電 話 番 号 を 選 択 して OK をクリックします 3. [タスク]メニューがまだ 開 いた 状 態 で [テキスト]テキストボックスに 412 を 入 力 します ソースビュー.html マークアップを 使 用 して 電 話 番 号 マスクを 作 成 するには 以 下 の 手 順 を 実 行 します 412 局 番 を 持 つ 電 話 番 号 値 を 表 示 するには.aspx ページで 次 のマークアップを 使 用 します <cc1:c1inputmask runat="server" Mask="(999) " Text="412"> </cc1:c1inputmask> 注 意 : 文 字 9 は 数 字 またはスペース(オプション)のマスク 要 素 として 機 能 します 文 字 0 は 数 字 ( 必 須 )のマスク 要 素 として 機 能 します このマスク 要 素 は 0~9の1 桁 の 数 字 を 受 け 付 けます このトピックの 作 業 結 果 プロジェクトを 実 行 します 次 のように 412 のテキストを 持 つ 電 話 番 号 マスクが Web ブラウザに 表 示 されることに 注 意 してく ださい 38 Copyright GrapeCity inc. All rights reserved.

40 プロンプト 文 字 列 を 含 まない 日 付 マスクの 表 示 プロンプト 文 字 列 ( / / など)を 含 まない 日 付 の 入 力 ボックスを 作 成 するには C1InputMask コントロールを 使 用 し て PromptChar プロパティをスペース に 設 定 します タスクメニューを 使 用 してプロンプト 文 字 列 を 含 まない 短 い 日 付 マスクを 作 成 するには 以 下 の 手 順 を 実 行 します プロンプト 文 字 列 を 含 まない[ 短 い 日 付 ] 入 力 ボックスを 作 成 するには 以 下 のタスクを 実 行 します 1. [C1InputMask タスク]メニューを 開 き Mask プロパティの... ボタンをクリックして [ 定 型 入 力 ]ダイアログボックスを 開 きます 2. マスク 値 に 短 い 日 付 を 選 択 して OK をクリックします 3. [タスク]メニューがまだ 開 いた 状 態 で [PromptChar]テキストボックスに スペース 文 字 ( )を 入 力 します デフォル トのアンダスコア(_)は 削 除 する 必 要 があることに 注 意 してください.html マークアップを 使 用 してプロンプト 文 字 列 を 含 まない 短 い 日 付 マスクを 作 成 するには 以 下 の 手 順 を 実 行 しま す プロンプト 文 字 列 を 含 まない[ 短 い 日 付 ] 入 力 ボックスを 作 成 するには.aspx ページで 次 のマークアップを 使 用 します ソースビュー <cc1:c1inputmask runat="server" Mask="00/00/0000" PromptChar=" "> </cc1:c1inputmask> コードを 使 用 してプロンプト 文 字 列 を 含 まない 短 い 日 付 マスクを 作 成 するには 以 下 の 手 順 を 実 行 します C1InputMask コントロールにプロンプト 文 字 列 を 含 まない 短 い 日 付 マスクを 作 成 するには Web ページをダブルクリックし て Load イベントのイベントハンドラを 作 成 します Page_Load イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic With C1InputMask1.Mask = "00/00/0000".PromptChar = " " End With C# コードの 書 き 方 C# this.c1inputmask1.mask = "00/00/0000"; this.c1inputmask1.promptchar = char.parse(" "); このトピックの 作 業 結 果 プロジェクトを 実 行 します 次 のように 短 い 日 付 マスクがプロンプト 文 字 列 を 含 まずに 表 示 されることに 注 意 してください 39 Copyright GrapeCity inc. All rights reserved.

41 フォーカス 消 失 時 のプロンプト 文 字 列 の 非 表 示 化 コントロールが 入 力 フォーカスを 消 失 するときプロンプト 文 字 列 を 非 表 示 にするには HidePromptOnLeave プロパティを True に 設 定 します.html マークアップを 使 用 してフォーカス 消 失 時 にプロンプト 文 字 列 を 非 表 示 にするには 以 下 の 手 順 を 実 行 します.aspx ページのマークアップで 以 下 を 挿 入 します ソースビュー <cc1:c1inputmask runat="server" Mask="(999) " PromptChar="#" HidePromptOnLeave="True"> </cc1:c1inputmask> Input for ASP.NET Web Forms コードを 使 用 してフォーカス 消 失 時 にプロンプト 文 字 列 を 非 表 示 にするには 以 下 の 手 順 を 実 行 します フォーカス 消 失 時 にC1InputMask コントロールのプロンプト 文 字 列 を 非 表 示 にするには 以 下 の 手 順 を 実 行 します 1. Web ページをダブルクリックして Load イベントのイベントハンドラを 作 成 します 2. Page_Load イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic With C1InputMask1.Mask = "(999) ".PromptChar = "#".HidePromptOnLeave = True End With C# コードの 書 き 方 C# this.c1inputmask1.mask = "(999) "; this.c1inputmask1.promptchar = char.parse("#"); this.c1inputmask1.hidepromptonleave = true; このトピックの 作 業 結 果 プロジェクトを 実 行 します 電 話 番 号 マスクのプロンプト 文 字 列 が 非 表 示 になっていることに 注 意 してください 入 力 ボックス 内 でクリックして フォーカスを 取 得 すると プロンプト 文 字 列 (# など)が 表 示 されます 入 力 ボックスの 外 でクリックして フォーカスを 失 くすと プロンプト 文 字 列 が 再 び 非 表 示 になります プロンプト 文 字 列 の 変 更 に ついての 詳 細 は プロンプト 文 字 列 の 変 更 トピックを 参 照 してください C1InputDate タスク 40 Copyright GrapeCity inc. All rights reserved.

42 このセクションでは C1InputDate コントロールを 使 用 して 個 別 のタスクを 実 行 する 方 法 について 説 明 します 以 下 の 各 ト ピックでは C1InputDate コントロールを Web フォームに 追 加 してあるものと 想 定 しています 日 付 書 式 パターンと 日 付 の 設 定 以 下 の 例 では C1InputDate コントロールの 日 付 書 式 パターンの 設 定 方 法 について 例 示 します タスクメニューを 使 用 して 日 付 書 式 パターンを 設 定 するには 以 下 の 手 順 を 実 行 します 1. [C1InputDate タスク]メニューを 開 き [デザイナ]を 選 択 します C1InputDate C1Input デザイナフォームが 表 示 さ れます 2. 書 式 付 き 日 付 パターンを 選 択 します この 例 では 長 い 日 付 パターンを 選 択 します デザイナに 次 のようなプレビューが 表 示 されることに 注 意 してください 3. OK をクリックします 4. タスクメニューがまだ 開 いている 状 態 で [ 日 付 ]のドロップダウン 矢 印 をクリックします カレンダーが 表 示 されます 5. 今 日 の 日 付 に 選 択 する 日 付 を 選 択 します.html マークアップを 使 用 して 日 付 書 式 パターンを 設 定 するには 以 下 の 手 順 を 実 行 します 日 付 書 式 値 に 長 い 日 付 パターン 書 式 を 表 示 するには.aspx ページに 次 のマークアップを 使 用 します ソースビュー <cc1:c1inputdate runat="server" Date=" " DateFormat="D"> </cc1:c1inputdate> コードを 使 用 して 日 付 書 式 パターンを 設 定 するには 以 下 の 手 順 を 実 行 します 41 Copyright GrapeCity inc. All rights reserved.

43 C1InputDate コントロールに 日 付 書 式 パターンを 設 定 するには Web ページをダブルクリックして Load イベントのイベント ハンドラを 作 成 します Page_Load イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic ' コントロールを 長 い 日 付 パターンとして 書 式 設 定 します Me.C1InputDate1.DateFormat = "D" ' 日 付 を 設 定 します Me.C1InputDate1.Date = " " C# コードの 書 き 方 C# // コントロールを 長 い 日 付 パターンとして 書 式 設 定 します this.c1inputdate1.dateformat = "D"; // 日 付 を 設 定 します this.c1inputdate1.date = DateTime.Parse(" "); このトピックの 作 業 結 果 プロジェクトを 実 行 して 日 付 書 式 パターンが 更 新 されたことに 注 意 してください 空 の 日 付 値 の 表 示 C1InputDate コントロールを 含 むプロジェクトを 実 行 すると コントロールをどのようにカスタマイズしたかに 関 係 なく コント ロール 内 にデフォルト 日 付 で 現 在 の 日 付 が 自 動 的 に 表 示 されます( 日 付 書 式 パターンと 日 付 の 設 定 を 参 照 ) 日 付 を 空 の 状 態 にして このデフォルトの 日 付 を 表 示 しない 場 合 以 下 の 手 順 を 実 行 します デザイナの 使 用 1. ツールボックスからC1InputDate コントロールをWebフォーム 上 にドラッグドロップします C1InputDate コントロール では 現 在 の 日 付 が 表 示 されます 2. デザインビューでC1InputDate コントロールを 選 択 し [プロパティ]ウィンドウに 移 動 します 3. [プロパティ] ウィンドウに Placeholder プロパティをご 希 望 の 値 や{ 空 白 } 値 に 設 定 します 42 Copyright GrapeCity inc. All rights reserved.

44 4. プロジェクトを 実 行 して C1InputDate コントロールの { 空 白 } に 注 意 してください 注 意 :コントロールに 割 り 当 てた 空 値 は プロジェクトを 初 めて 実 行 するときに 表 示 されます いったんコントロールを 選 択 して 日 付 を 切 り 替 えた 場 合 空 値 を 再 表 示 する 唯 一 の 方 法 は ページ 上 の 別 のコントロールを 選 択 することです コ ントロール 内 の 日 付 は 削 除 できません 空 値 のテキストしか 表 示 できます C1InputNumeric タスク このセクションでは C1InputNumeric コントロールを 使 用 して 個 別 のタスクを 実 行 する 方 法 について 説 明 します C1InputCurrency と C1InputPercent コントロールのプロパティが C1InputNumeric コントロールと 同 じであることに 注 意 し てください そのため 以 下 の 各 タスクは C1InputCurrency と C1InputPercent コントロールにも 適 用 されます 以 下 の 各 トピックでは C1InputNumeric コントロールが Web フォームに 追 加 されていることを 前 提 にしています 小 数 点 以 下 の 桁 数 の 指 定 以 下 の 例 では C1InputNumeric コントロールに 表 示 する 小 数 点 以 下 の 桁 数 を 簡 単 に 指 定 する 方 法 について 説 明 します タスクメニューを 使 用 して 小 数 点 以 下 の 桁 数 値 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. [C1InputNumeric タスク]メニューを 開 きます 2. コントロールの 値 を に 設 定 します 3. 小 数 点 以 下 桁 数 値 に 3 を 入 力 します 値 に を 入 力 しても 小 数 点 以 下 桁 数 値 を3に 変 更 しないと 小 数 点 以 下 2 桁 (デフォルト)のみが 表 示 されること に 注 意 してください すなわち 2.34 となります 43 Copyright GrapeCity inc. All rights reserved.

45 .html マークアップを 使 用 して 小 数 点 以 下 の 桁 数 を 設 定 するには 以 下 の 手 順 を 実 行 します 値 を に DecimalPlaces 値 を 3 に 設 定 するには.aspx ページで 次 のマークアップを 使 用 します ソースビュー <cc1:c1inputnumeric runat="server" DecimalPlaces="3" Value="2.345"> </cc1:c1inputnumeric> コードを 使 用 して 小 数 点 以 下 の 桁 数 を 設 定 するには 以 下 の 手 順 を 実 行 します C1InputNumeric コントロールの 小 数 点 以 下 の 桁 数 値 を 設 定 するには Web ページをダブルクリックして Load イベントの イベントハンドラを 作 成 します Page_Load イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic ' 数 値 を 設 定 します Me.C1InputNumeric1.Value = ' 小 数 点 以 下 の 桁 数 を 設 定 します Me.C1InputNumeric1.DecimalPlaces = 3 C# コードの 書 き 方 C# // 数 値 を 設 定 します this.c1inputnumeric1.value = 2.345; // 小 数 点 以 下 の 桁 数 を 設 定 します this.c1inputnumeric1.decimalplaces = 3; 最 小 値 / 最 大 値 の 設 定 以 下 の 例 では MinValue とMaxValue プロパティを 簡 単 に 変 更 可 能 な C1InputNumeric コントロールの 数 値 範 囲 サポー トについて 示 します タスクメニューを 使 用 して 数 値 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. [C1InputNumeric タスク]メニューを 開 きます 2. 最 小 有 効 値 に 1 を 入 力 します 3. 最 大 有 効 値 に 1000 を 入 力 します 4. タスクメニューがまだ 開 いた 状 態 で [ 値 ]テキストボックスに 1 を 入 力 します.html マークアップを 使 用 して 数 値 を 設 定 するには 以 下 の 手 順 を 実 行 します MinValue を 1 に MaxValue 値 を 1000 に Value を 1 に 設 定 するには.aspx ページで 次 のマークアップを 使 用 します ソースビュー <cc1:c1inputnumeric runat="server" MaxValue="1000" MinValue="1" Value="1"> 44 Copyright GrapeCity inc. All rights reserved.

46 </cc1:c1inputnumeric> コードを 使 用 して 数 値 を 設 定 するには 以 下 の 手 順 を 実 行 します C1InputNumeric コントロールの 数 値 を 設 定 するには Web ページをダブルクリックして Load イベントのイベントハンドラを 作 成 します Page_Load イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic With C1InputNumeric1.MaxValue = 1000.MinValue = 1.Value = 1 C# コードの 書 き 方 C# this.c1inputnumeric1.maxvalue = 1000; this.c1inputnumeric1.minvalue = 1; this.c1inputnumeric1.value = 1; プログラムを 実 行 して 次 のことを 確 認 します 入 力 コントロールが 1.00 を 表 示 している 状 態 で マウスポインタで 下 スピンボタンをクリックします コントロールが 1.00 より 小 さい 値 を 表 示 しないことに 注 意 してください 入 力 コントロールが を 表 示 している 状 態 で マウスポインタで 上 スピンボタンをクリックします コントロールが より 大 きい 値 を 表 示 しないことに 注 意 してください テーマの 変 更 6つの 組 み 込 みテーマの1つを 使 用 して C1Input コントロールを 書 式 設 定 できます 以 下 の 例 では C1InputMask コント ロールを 使 用 します スマートタグを 使 用 したテーマの 変 更 コントロールの[タスク]メニューを 使 用 して デザイン 時 に C1Input コントロールのスタイルを 変 更 できます 1. C1InputMask スマートタグをクリックして [C1InputMask タスク]メニューを 開 きます 2. [テーマ]の 横 のドロップダウン 矢 印 をクリックします 3. リストされた 組 み 込 みテーマの1つを 選 択 します テーマがC1InputMask コントロールに 適 用 されます コードでのテーマの 変 更 プログラムで C1Input コントロールのスタイルを 変 更 するには 次 のコードを 使 用 します この 例 では midnight が 使 用 され ますが 任 意 の 組 み 込 みテーマに 置 き 換 えることができます Visual Basic コードの 書 き 方 Visual Basic C1InputMask1.Theme = "midnight" C# コードの 書 き 方 45 Copyright GrapeCity inc. All rights reserved.

47 C# C1InputMask1.Theme = "midnight"; カスタムテーマの 追 加 C1Input は 6つの 組 み 込 みテーマを 提 供 していますが 異 なるテーマを 使 用 したい 場 合 CDN URL を 使 用 して 既 存 のテー マを 選 択 するか jquery ThemeRoller Web アプリケーションを 使 用 して 独 自 のテーマを 作 成 できます 以 下 の 例 で は C1InputDate コントロールを 使 用 します CDN URL の 使 用 1. C1InputDate スマートタグをクリックして [タスク]メニューを 開 きます 2. [CDN の 使 用 ]を 選 択 します 3. テーマ プロパティで CDN URL を 入 力 して テーマを 指 定 します CDN URL は にあります この 例 では sunny テーマ ( 使 用 します このテーマ 設 定 は Web.config ファイルの <appsettings> に 格 納 されます ソリューションエクスプローラ で Web.config ファイルをダブルクリックします <appsettings> タグに WijmoTheme キーと 値 が 含 まれているこ とに 注 意 してください 追 加 した CDN URL がここに 指 定 されています 4. プロジェクトを 実 行 して テーマが C1InputDate に 適 用 されることに 注 意 してください jquery ThemeRoller の 使 用 1. に 進 みます 2. Roll Your Own タブで 設 定 値 を 変 更 してカスタムテーマを 作 成 します フォント 色 背 景 などをカスタマイズできま す あるいは Gallery タブをクリックして 既 存 のテーマを 選 択 します 3. Download ボタンをクリックし 次 に Build Your Download ページで Download をもう 一 度 クリックします 4. テーマの.zip ファイルを Visual Studio プロジェクトフォルダ 内 のフォルダに 保 存 して 解 凍 します この 例 で は customtheme フォルダを 作 成 しました 5. ソリューションエクスプローラで [すべてのファイルを 表 示 ]をクリックし customtheme フォルダを 右 クリックして [プ 46 Copyright GrapeCity inc. All rights reserved.

48 ロジェクトに 含 める]を 選 択 します 6. C1InputDate スマートタグをクリックして [タスク]メニューを 開 きます 7. [CDN の 使 用 ]を 選 択 します 8. テーマ プロパティで カスタムテーマの.css へのパス(customtheme/css/custom-theme/jquery-ui custom.css など)を 入 力 します このテーマ 設 定 は Web.config ファイルの <appsettings> に 格 納 されます ソリューションエクスプローラ で Web.config ファイルをダブルクリックします <appsettings> タグに WijmoTheme キーと 値 が 含 まれている ことに 注 意 してください 追 加 したカスタムテーマはここに 指 定 されています 9. プロジェクトを 実 行 して テーマが C1InputDate に 適 用 されることに 注 意 してください カルチャの 選 択 以 下 のトピックでは C1InputCurrency コントロールのCulture プロパティの 使 用 方 法 について 示 します ただし Culture プ ロパティは すべての C1Input コントロールで 使 用 可 能 であることに 注 意 してください デザイナの 使 用 任 意 の C1Input コントロールに 特 定 のカルチャを 選 択 できます コントロールのCulture プロパティを 設 定 するには その[タ スク]メニューを 単 に 開 き ドロップダウンリストからカルチャを 選 択 します 47 Copyright GrapeCity inc. All rights reserved.

49 HTML マークアップの 使 用 Culture 値 を 設 定 するには.aspx ページに 次 のマークアップを 使 用 します ソースビュー <cc1:c1inputcurrency runat="server" Culture="ja-JP"> </cc1:c1inputcurrency> コードの 使 用 C1InputCurrency コントロールの Culture を 設 定 するには Web ページをダブルクリックして Load イベントのイベントハン ドラを 作 成 します Page_Load イベントに 次 のコードを 入 力 します Visual Basic コードの 書 き 方 Visual Basic Me.C1InputCurrency1.Culture = New System.Globalization.CultureInfo("ja-JP") C# コードの 書 き 方 C# this.c1inputcurrency1.culture = new System.Globalization.CultureInfo("ja-JP"); このトピックの 作 業 結 果 以 下 の C1InputCurrency コントロールでは 円 を 示 します 48 Copyright GrapeCity inc. All rights reserved.

50 クライアント 側 イベントタスク このセクションでは C1Input コントロールを 使 用 して さまざまなクライアント 側 イベントタスクを 実 行 する 方 法 について 説 明 し ます 無 効 な 入 力 の 入 力 時 のツールチップの 表 示 このトピックでは ツールチップを 表 示 する 方 法 について 示 します この 例 では 無 効 な 文 字 が C1InputMask コントロールに 入 力 されたときに c1tooltip を 使 用 します 1. フォーム 上 の C1InputMask コントロールを 右 クリックし [プロパティ]を 選 択 して Visual Studio のプロパティウィンド ウを 開 きます 2. MaskFormat プロパティの 横 に を 入 力 します 3. OnClientInvalidInput プロパティの 横 に invalidinput を 入 力 します 4. ソース タブを 選 択 して ソースビューを 開 きます 5..aspx ソースで 次 のスクリプトマークアップを 入 力 します ソースビュー <script type="text/javascript"> function invalidinput(e, data) { $(data.widget.element).wijtooltip({ title: '\"' + data.char + '\" は \"' + data.widget.options.mask + '\" のマ スクに 対 して 無 効 な 入 力 です ', triggers: 'custom', showing: function () { window.settimeout(function () { $(data.widget.element).wijtooltip('hide'); }, 3000); } }); $(data.widget.element).wijtooltip('show'); } </script> 無 効 な 文 字 が C1InputMask コントロールに 入 力 されると ツールチップが 表 示 され 次 の 図 のようになります トリガーを 使 用 したカスタム UI の 表 示 このトピックでは トリガーボタンがクリックされたときにカスタムインタフェースを 表 示 する 方 法 について 例 示 します この 例 で は ユーザーが C1InputNumeric コントロール 内 の 矢 印 をクリックすると ドロップダウンスライダが 表 示 され スライダのつ まみがドラッグされると 入 力 値 が 変 化 します 1. フォーム 上 の C1InputNumeric コントロールを 右 クリックし [プロパティ]を 選 択 して Visual Studio のプロパティウィ ンドウを 開 きます 2. ShowDropDownButton プロパティを True に 設 定 し DecimalPlaces プロパティを 0 に 設 定 します 3. OnClientDropDownButtonMouseDown プロパティの 横 に triggerclicked を 入 力 します 4. ソース タブを 選 択 して ソースビューを 開 きます 5..aspx ソースで 最 後 の </asp:content> 直 前 に 次 のスクリプトマークアップを 入 力 します ソースビュー <script type="text/javascript"> 49 Copyright GrapeCity inc. All rights reserved.

51 $(function () { $(".dropdown-container").c1popup({ autohide: true, showeffect: 'drop', hideeffect: 'fade' }); }); function triggerclicked(e) { var $input = $('#<%=C1InputNumeric1.ClientID%>'); var val = $input.c1inputnumeric('option', 'value'); var $volumeslider = $('.valueslider'); $volumeslider.slider({ min: 0, max: 5, value: val, step: 1, orientation: 'vertical', range: 'min', slide: function (e, ui) { $input.c1inputnumeric('option', 'value', ui.value); } }); $(".dropdown-cntainer").c1popup('show', { } }); of: $('.wijmo-wijinput'), at: 'right bottom', my: 'right top', offset: "4 2" 6. <asp:content ContentPlaceHolderID="HeadContent"> タグ 内 に.dropdown-container と.valueslider に 対 して 以 下 のマークアップを 追 加 します ソースビュー <asp:content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <style type="text/css">.dropdown-container { height: 127px; margin: 0; padding: 0; width: 25px; }.valueslider { left: 4px; height: 103px; } </style> </asp:content> 50 Copyright GrapeCity inc. All rights reserved.

52 7. その 後 <asp:content ContentPlaceHolderID="MainContent"> タグ 内 に 下 記 のマークアップを 追 加 しま す ソースビュー <div class="dropdown-container"> <div class="valueslider ui-state-default ui-corner-top"></div> </div> ユーザーがドロップダウン 矢 印 をクリックしたとき スライダがポップアップします スライダが 動 くと 数 量 が 変 化 し 次 のような 表 示 になります 51 Copyright GrapeCity inc. All rights reserved.