JavaScriptでWindow
ここでは、管理人が Javascriptを駆使して、ブラウザの内部でWindowシステムの構築を目指す
道のりを掲載して行きます。ウィンドウシステムのお手本は Java Swing の JFrame ですが、
JavaScript と CSS でどこまで実現できるか限界にチャレンジ中です。
今週のポイント
- 2008-05-07
addRadio関数で登録した radioボタンが IEで動作しない不具合に、何とか対応しました。
結局 IE の radio.setAttribute( 'name', グループ名 ); では グルーピングされないため、
javascriptでグループを管理する処理を追加して、無理やり on/offを切り替えることにしました。
今週の latest デモページに、radioボタンのサンプルプログラムを掲載しています。
何を作ろうとしているか
とりあえず、左のメニューの「現在の最新版」→「デモページ」をご覧ください。
自分で JavaScriptで ウィンドウを作ってみたくなったら、左のメニューの
「ドキュメント」→「始めてみよう」をご覧ください。
機能実装計画
Windowシステムとして使う上で、必要になると思う機能を列挙してみました。
実装予定の優先度の高いものから、順に実装していきます。
大分類 | 小分類 | 実装予定 |
---|---|---|
Windowフレーム | 閉じる(非表示) | 2008-03-10済み |
最小化 | 2008-03-17済み | |
リサイズ | 2008-03-24済み | |
Windowタイトル | タイトル文字列設定 | 2008-03-10済み |
タイトル文字列取得 | 2008-03-17済み | |
アイコン登録 | 優先度 低 | |
Window部品 | 見出し文字列 | 2008-03-10済み |
複数行編集( textarea ) | 2008-03-10済み | |
コールバックボタン | 2008-03-10済み | |
汎用部品( DOMオブジェクト )の追加 | 2008-03-17済み | |
ドロップダウンリスト | 優先度 中 | |
チェックボックス | 2008-05-07済み | |
ラジオボタン | 2008-05-07済み | |
画像 | 優先度 中 | |
部品の削除 | 2008-04-07済み | |
フォント設定など | 全部品共通で、style指定でできるはず。 | |
レイアウトマネージャ | デフォルト com_jxpath_BoxLayoutY |
2008-03-17 済み |
com_jxpath_BoxLayoutX | 2008-03-17 済み | |
レイアウトマネージャの切り替え | 2008-03-17 済み | |
GridLayout 横M個の部品で改行する |
優先度 高 | |
GridBagLayout GridLayoutの部品に、縦横格子連結指定を追加 |
優先度 中 | |
TableLayout HTMLのtable と同様に rowspan, colspanを指定できる |
2008-04-07済み | |
任意のパーツにレイアウトマネージャ を設定する。現在は com_jxpath_com 全体で1つして設定できない。 |
優先度 中 |
開発の履歴
- 2008-04-21
- IEで radioボタンがonにならない不具合を調査中。
- 同じくIEで radioボタンがグルーピングできない不具合を調査中。
- 2008-04-14
- com_jxpath_win.addRadio( aName, aClickFunc, aConstrains )を追加
- com_jxpath_win.addIFrame( aSrc, aConstrains )を追加
- 上記の 2関数とも、aConstrainsは省略可能です。
- 現在の最新版に、radioとiframeを使ったデモを掲載
- 2008-04-07
- TableLayout を追加し、かなり自由に部品を配置できるようになりました
サンプルは、デモページをご覧ください。 - JavaDoc に com_jxpath_TableLayoutを追加しました。
- JavaDoc に com_jxpath_Constraintsを追加しました。
- IEの苦労話 に class設定 を追加
- IEの苦労話 に table部品の追加 を記述
- IEの苦労話 に rowspan,colspan を追加
- 2008-04-01
- 部品の配置を left, center, right 指定する機能を追加
- 2008-03-31
- Windowサイズの変更時に textareaを自動拡大( ただし横方向のみ )
- 2008-03-24
- マウスによる Windowサイズの変更を実装した
- Internet Explorerで動作しなかった不具合を修正
- 2008-03-17
- JavaDoc風 APIを作成した
- 汎用のWindow部品( DOMオブジェクト )を追加できるようにした
- レイアウトマネージャ( com_jxpath_BoxLayoutY と com_jxpath_BoxLayoutX )を追加
- レイアウトマネージャを設定できるようにした
- Windowの最小化ができるようになった
- Windowのドラッグ時に、マウスについていけなくなる不具合を改良
- 2008-03-10
- Windowを生成して、ドラッグとクローズができるようになった
- Titleを設定できる
- 見出し文字列を追加できる
- textarea を追加できる
- ボタンを追加できる
終わりに
「こんなもの、使い物になるのか?」という声も聞こえてきそうですが、
管理人には、JavaScriptの勉強になっていますので、それだけでも十分です。
でも、できれば将来的は、仕事でも使えるレベルに仕上げて行きたいな...