Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/02/19 14:00
目次

イベント処理の作成

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

 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つです。

製品情報



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5