JavaScriptでWindow

ここでは、管理人が Javascriptを駆使して、ブラウザの内部でWindowシステムの構築を目指す
道のりを掲載して行きます。ウィンドウシステムのお手本は Java Swing の JFrame ですが、
JavaScript と CSS でどこまで実現できるか限界にチャレンジ中です。

今週のポイント

2008-05-07
  • addCheckBoxのjavadocを追加しました
  • addRadioのjavadocを追加しました
  • IE6で、リサイズ時にウィンドウ右端が欠ける不具合を修正

    • 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の勉強になっていますので、それだけでも十分です。

    でも、できれば将来的は、仕事でも使えるレベルに仕上げて行きたいな...