SHOEISHA iD

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

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

ComponentZine(InputMan)

ファンクションキーに独自の処理を実装したWebページを作成する

InputMan for ASP.NET 3.0J のファンクションキーコントロールを使ったWebページの作成

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

イベント処理の作成

 ファンクションキーを作成したら、キーが押下された時の処理を作成します。

 F3、F4、F5キーには既にブラウザのキー動作を設定してあるので、F1、F2、F6に独自の処理を設定します。F1キーには、独自にHTMLで作成したヘルプページを表示する機能を、F2キーにはテキストボックスの入力値をクリアする機能を、F6キーにはホームページを表示する機能を組み込みます。これらは、FunctionKeyコントロールのクライアント側イベントを使用するので、コードはJavaScriptでWebページのHTML内に作成します。

TextBoxコントロールにデータを読み込む処理

 最初に、F2キーでテキストボックスの入力値をクリアする機能の動作確認をするために、Page_LoadイベントハンドラのTextBoxコントロールにテキストファイルのテキストを読み込む処理を作っておきます。この処理は、Page_Loadイベントハンドラに作成します。

 テキストファイルは、サイトのサブディレクトリ「App_Data」に格納してある「Sample.txt」というファイルで、FileクラスのReadAllTextメソッドを使用して読み込みます。この時、テキストファイルが格納されているサブディレクトリ「App_Data」の絶対パスを、PageクラスのMapPathメソッドで取得してファイル名に結合し、ReadAllTextメソッドでデータを読み出します。

Visual Basic
Imports System.IO
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim pp As String = Page.MapPath("App_Data")
    Dim readText As String = File.ReadAllText(pp & "/Sample.txt", Encoding.Default)
    Me.TextBox1.Text = readText
End Sub
C#
using System.IO;
protected void Page_Load(object sender, EventArgs e)
{
    string pp = Page.MapPath("App_Data");
    string readText = File.ReadAllText(pp + "/Sample.txt", System.Text.Encoding.Default);
    TextBox1.Text = readText;
}

JavaScriptによるイベント処理

 次に、F1、F2、F6キーのイベント処理を作成します。これは、FunctionKeyDownイベントハンドラの作成から始めます。

  1. まず、「Default.aspx」の「デザイン」画面を表示し、プロパティウィンドウの「ClientEvents」を展開して、「FunctionKeyDown」プロパティの値欄をクリックします。リストに[新しいハンドラを追加]が表示されるので、これをクリックします。
    [新しいハンドラを追加]をクリックする
    [新しいハンドラを追加]をクリックする
  2. イベントハンドラの名前を確認するダイアログが表示されるので、そのまま[OK]ボタンをクリックします。
    そのまま[OK]ボタンをクリックする
    そのまま[OK]ボタンをクリックする
  3. 作成したWebページ「Default.aspx」のビューを、「デザイン」から「ソース」に切り替え、HTML編集モードにします。

 自動的に、<head>ブロックにJavaScriptで「FunctionKey1_FunctionKeyDown」イベントハンドラが作成されているので、ここに処理を記述します。処理は、まずイベントハンドラの引数「eArgs」の「FunctionKey」プロパティで、押されたキーの種類を判別します。そして、Webページを表示する場合はwindow.openメソッドで実行します。

 TextBoxコントロールのテキストをクリアする場合は、documentオブジェクトのgetElementByIdメソッドでTextBoxコントロールを把握し、valueプロパティの値を空白にします。

<script language="javascript" type="text/javascript" id="FunctionKey1_Script0">
		function FunctionKey1_FunctionKeyDown(oFunctionKey, eArgs)
		{
            if (eArgs.FunctionKey == FunctionKeys.F1) {
                window.open("ヘルプ.html");
            }
            if (eArgs.FunctionKey == FunctionKeys.F2) {
                document.getElementById("TextBox1").value = "";
            }
            if (eArgs.FunctionKey == FunctionKeys.F6) {
                window.open("http://www.grapecity.com/japan/inputman5/");
            }
        }
</script>

 以上で、できあがりです。

まとめ

 ファンクションキーは、メニューの階層を辿らずに、直接実行したい機能にアクセスできるため、とても便利な機能です。

 InputMan for ASP.NET 3.0J のファンクションキーコントロールは、プロパティの設定だけでファンクションキーを実装でき、イベント処理もJavaScriptで作成できるので、Webページに手軽に実装できます。また、スタイルシートをサポートしているので、Webデザイナと共同でページのデザインを行うことができるのも便利な機能の1つです。

製品情報

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング