IWidgets オブジェクト（内部ウインドウ，テーブル等）

IWidgets オブジェクトとは，普通の HTML 要素に様々な機能を付加して操作性をアップさせることができる Javascript オブジェクトです。

現在利用可能な IWidgets オブジェクトには，以下のものがあります。

IWindow : 内部ウインドウ
Celcel : Excel 風の操作性をもつテーブル
IMenu : コンテキストメニュー（右クリックメニュー）
IDebug : デバッグウインドウ

以下では各オブジェクトの機能と使い方を説明します。

IWindow : 内部ウインドウ

内部ウインドウとは，ブラウザ内部にウインドウを表示するためのオブジェクトです。
内部ウインドウには HTML で記述されたものならば何でも表示できます。

例えば，ここをクリックすると，青枠で囲まれた説明部分を内部ウインドウに表示します。

IWindow の機能

IWindow (内部ウインドウ) には以下の機能があります。

通常のウインドウと同様に，タイトルバーのドラッグ操作により，ブラウザ内の任意の位置に移動できる
枠線のドラッグ操作により，ウインドウのサイズを変更することができる
クローズボタンにより，ウインドウを非表示にすることができる

また，タイトルバーを非表示にしたり，枠線のドラックを抑制したりして，利用者によるウインドウ操作をできなくすることも可能です。（詳細は API リファレンスを）

IWindow の使用法

内部ウインドウは IWindow オブジェクトの操作により使用できます。
IWindow オブジェクトの操作は，以下の３ステップで行なえます。

IWindow オブジェクトを使用可能にするために，スクリプト (conga.js) とCSSファイル (conga.css) を読み込み指定する。
表示したい内容をもつHTMLオブジェクトを引数に渡して IWindow オブジェクトを作成する。
ウインドウの表示位置やサイズを設定する。

使用例 (ここをクリックすると表示します)

<html>
<head>

<link rel="stylesheet" href="../dhtml/conga.css" type="text/css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>

<script type="text/javascript">
<!--
function showWindow() {
  var obj = document.getElementById("content");
  var win = new IWindow("test", obj);
  win.setSize(300,200);
}
//-->
</script>
</head>
<body onload="showWindow()">

 <div id="content">
  <p>ウインドウに表示する内容です。</p>
  <p>なんでも表示できます。</p>
 <div>

</body>
</html>

IWindow のコンストラクタは２つの引数を受け取ります。ひとつめはタイトルバーに表示する文字列，２つめはウインドウ表示するオブジェクト（HTML要素）です。
ここでは，setSize メソッドにより，ウインドウのサイズを設定していますが，他にも，setPosition, setBounds メソッドで表示位置あるいはサイズの設定を行なうことができます。
詳細は API リファレンスでご確認ください。

Celcel : Excel 風の操作性をもつテーブル

Web アプリケーションの中のテーブルを Excel ライクに操作できるようにするためのオブジェクトが Celcel です。
例えば，以下に表示されているテーブルは，今は普通のテーブルですが，ここをクリックすると Celcel に変換されます。

	A	B	C	D	E
1
2
3
4
5
6
7
8
9
10

現在実装されている主な機能は以下の通りです。

上下左右キーでセル間を移動
SHIFT+上下左右キーでセルの選択
Ctrl+C,X,V キーあるいは，右クリックメニューで選択範囲のコピー，切り取り，貼り付け (現在のところ IE のみ対応)
スクロールバーを自動追加できる
スクロールしない固定列を左側に，固定行を上側に指定することも可能
列区切り線のドラッグ操作による列幅の変更

Celcel の使用法

HTML で記述した普通の table オブジェクトを引数にして Celcel のコンストラクタを呼び出すことにより Celcel オブジェクトを作成することができます。
コンストラクタでは，固定行数・固定列数を指定することもできます省略可）。
Celcel オブジェクトの作成後は，必要に応じて高さ設定などを行なってください。
その他利用可能なメソッドは API リファレンスでご確認ください。

Celcel 化可能な table の記述方法

Celcel を使用するためには，以下のように table タグを記述する必要があります。

全ての列に対して col タグを記述し，style 属性で列幅指定を行なう
選択可能（カーソル移動可能）とするセルは，編集不可のものであっても input タグで値表示を行なうようにする。（編集不可としたい場合は，readonly 属性を指定する）

なお，Celcel 処理後の table 位置を固定するために，table オブジェクトには div タグで専用の（該当 table 以外に子要素をもたない）親要素を指定しておくこと（<div>...</div>で囲んでおくこと）をお勧めします。

使用例 (ここをクリックすると表示します)

<html>
<head>
<link rel=stylesheet type="text/css" href="../dhtml/conga.css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
function toCelcel() {
  var obj = document.getElementById("table");
  var celcel = new Celcel(obj, 1, 1);
  celcel.setHeight(100);
}
//-->
</script>
</head>
<body onload="toCelcel()">

<div>
<table id="table">

<col style="width:20px"/>
<col style="width:80px"/>
<col style="width:120px"/>
<col style="width:40px"/>

<tr>
 <th></th>
 <th>A</th>
 <th>B</th>
 <th>C</th>
</tr>

<tr>
 <th>1</th>
 <td><input type="text" value="aaa"/></td>
 <td><input type="text" value="abcdefghijklmnopqrstuvwxyz"/></td>
 <td><input type="text" value="あいうえお"/></td>
</tr>

<tr>
 <th>2</th>
 <td><input type="text" value="aaa"/></td>
 <td><input type="text" value="abcdefghijklmnopqrstuvwxyz"/></td>
 <td><input type="text" value="あいうえお"/></td>
</tr>

<tr>
 <th>3</th>
 <td><input type="text" value="aaa"/></td>
 <td><input type="text" value="abcdefghijklmnopqrstuvwxyz"/></td>
 <td><input type="text" value="あいうえお"/></td>
</tr>

</table>
</div>

</body>
</html>

その他・注意点

2005年9月時点では，firefox ではいまひとつちゃんと動かない部分がいくつかあります。

IMenu : コンテキストメニュー（右クリックメニュー）

IMenu は，右クリックした際に表示されるメニューです。
IMenu の addItem メソッドでメニュー項目を追加し，addTarget メソッドで右クリックメニュー表示対象となるオブジェクトを指定することにより，右クリックメニュー表示が可能になります。
詳細は API リファレンスでご確認ください。

使用例 (ここをクリックすると表示します)

<html>
<head>
<link rel="stylesheet" href="../dhtml/conga.css" type="text/css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
function init() {
  var menu = new IMenu();
  menu.addItem("テスト１", test1);
  menu.addItem("テスト２", test2);
  var obj = document.getElementById("target");
  menu.addTarget(obj);
}

function test1() {alert("test1");}
function test2() {alert("test2");}

//-->
</script>
</head>
<body onload="init()">

<div style="margin:20px;width:100px;height:100px;border:solid blue 1px;"
     id="target">
メニューが表示できる部分
</div>

</body>
</html>

IDebug : デバッグウインドウ

IDebug は内部ウインドウを使用したデバッグ表示のためのツールです。
Javascript の任意の場所で，IDebug.print("...") メソッドを呼び出せば，デバッグ表示を行なうことができます。
多機能ではありませんが，alert("...") でのデバッグ表示に比べれば「OK」ボタンを押さなくて良い分楽ではないかと...。

使用例 (ここをクリックすると表示します)

<html>
<head>
<link rel="stylesheet" href="../dhtml/conga.css" type="text/css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>
</head>
<body>

<div style="margin:20px;width:100px;height:100px;border:solid blue 1px;"
 onmouseover="IDebug.print('きた')">
ここにマウスが載るとデバッグ表示します
</div>

</body>
</html>

TOP