付箋システム


  1. 目的
    Javaアプレットウインドウの任意の位置に文字列を表示します。文字列の編集、文字表示枠の位置、横幅、フォント、サイズ、背景色を編集可能にします。縦書表示も可能にします。この場合、文字枠の長さを指定可能にします。
    将来の拡張のため、作成、編集日付を記録します。

  2. プロジェクト

    1. データ構造
      付箋の情報を以下のように記録します。
      public class padFmt {
      String string;
      boolean vertSty;//縦書き指定
      int fontsize;
      int color;
      Font font;
      int posx,posy;//描画開始位置
      int rectx,recty;
      int width,height;//文字列表示枠のサイズ、幅、行間、高さ
      Date cDate;//作成日付
      Date eDate;//編集日付
      public padFmt(){};
      }

    2. 操作法
      newボタンで文字編集ダイアログで文字の編集、属性の設定を行います。
      文字枠をクリックして選択します。そのままドラッグすると文字の移動をします。
      選択すると、文字枠の右下にドラッグマークが表示され、これをドラッグすると、文字枠のサイズを変更します。
      文字は、文字枠の幅（縦書きの場合は高さ）で折り返し表示します。
      選択後、編集ボタンを押すと再度文字編集ダイアログを開きます。



    3. padFmtクラス

      1. 文字列の構造
        文字列は、padFmtクラスとして記録します。文字列、縦書き、サイズ、描画位置と大きさ、日付などを記録します。日付はchatなどの応用を考えて追加してあります。

        public class padFmt {
        String string;
        boolean vertSty;//縦書き指定
        int fontsize;
        int color;
        Font font;
        int posx,posy;//描画開始位置
        int rectx,recty;
        int width,height;//文字列表示枠のサイズ、幅、行間、高さ
        Date cDate;//作成日付
        Date eDate;//編集日付

        public padFmt(){};
        }

        このクラスのインスタンスを、Vectorクラスの　pads　に追加して、配置された文字を記録します。Vectorクラスは、要素をリスト形式で、追加（ａｄｄ）、削除できるクラスです。

      2. 主要変数
        Vector pads=new Vector(); 　padFmtのインスタンスを記録します
        selected：　選択された付箋の番号、負の時は選択されていないことを示します
        boolean resizeMode=false；　文字のサイズボックスの変更モードを示します
        boolean dragMode=false;　文字枠の移動モードを示します

      3. 主要メソッド

        1. display_actionPerformed(ActionEvent e)
          付箋を新規作成するため、文字ダイアログを可視にする。

        2. void edit_actionPerformed(ActionEvent e)
          文字属性の編集を開始する。
          setTextDialog()はpadsの付箋情報を文字編集ダイアログに送る。

        3. paint
          付箋を表示する

        4. int foldString(padFmt padelm,Graphics g)
          文字列を枠内で折り返し表示する
          padelm；表示する付箋情報
          行数を戻す

        5. FontMetricsクラス
          padFmt padfmt;
          FontMetrics fm;
          fm=getFontMetrics(padfmt.font);
          padfmt.lnheight=fm.getHeight();行の標準的な高さ

        6. InsPad()
          新規追加および編集処理のデータの追加、変更を行います。
          　selected>=0の場合編集になります。
          新規追加の場合位置と幅は既定値とします
          行頭に日付を設定します
          foldString(padfmt,null);で、文字枠のサイズを決定します
          横書きの場合幅を既定値とし、高さを決定する、
          縦書きの場合高さを既定値とし、幅を決定する。
          新規生成の場合、pads.addElement(padfmt);でデータを追加します

        7. int foldString(padFmt padelm,Graphics g)
          gがnullでなければ、文字列を枠内で折り畳んで表示します。
          nullなら表示はしないで、文字の枠サイズを計算します。
          padelm.vertStyのときは縦書き表示をする。
          rectx,rectyに表示枠の左上の位置を記録する。
          heightに枠のたかさ、widthに幅を記録する。

          1. 横書きの場合
            文字の幅をwidthに加算する。
            widthが枠の幅を超えたら、あるいは、改行コードなら行を折り返す。

          2. 縦書きの場合
            一文字づつ表示する。
            posyで文字のY座標を計算し、文字枠の高さを超えたら、行を折り返す。

          3. ソース
            　padelmの文字列を文字枠の内部で折り返し表示します。

            int foldString(padFmt padelm,Graphics g)
  {
   int endx,lcount=0,lnum=1;

     int stposy;
     int indx,last;
     int lnHeight,vlnHeight,height=0,width=0;
     int posx,posy;
     String line="",cst,pString;
     char ch;
     boolean vert1;
     FontMetrics fm;
     int totalWidth=0,totalHeight=0;
     String dst;

     pString=DateFormat.getTimeInstance().format(padelm.eDate)+"\n"+padelm.string;
     last=pString.length();

     vert1=padelm.vertSty;
     fm=getFontMetrics(padelm.font);
     lnHeight=fm.getHeight();
     vlnHeight=lnHeight-6;
     stposy=padelm.posy+lnHeight-4;
     posx=padelm.posx;posy=padelm.posy;
     for(indx=0;indx<last;indx++){
       ch=pString.charAt(indx);
       if(vert1){//tategaki
         if(ch !='\n'){
           cst="";cst+=ch;
           //System.out.println(cst+":"+posx+":"+height);
            if(g != null) g.drawString(cst,posx,posy);
            posy+=vlnHeight;
            height+=vlnHeight;
            //get max character width
            if(width<fm.charWidth(ch)) width=fm.charWidth(ch);
           }
          if(height>(padelm.height-vlnHeight) || ch=='\n' || indx==last-1){
           //System.out.println("next column:"+height+":"+padelm.height+":"+width);
            posy=padelm.posy;
            posx=posx-(width+6);//4は行間の間隔
            totalWidth=totalWidth+(width+6);
            height=0;width=0;lnum++;
            }
       } else { //yokogaki
       if( width+fm.charWidth(ch)>padelm.width ||ch=='\n' ){
         if(g != null) g.drawString(line,padelm.posx,stposy);
         stposy +=lnHeight;
         totalHeight+=lnHeight;
         width=0;
         line="";lcount=0;lnum++;
        }
       if(ch != '\n') {
         line +=ch;
         lcount++;
         width+=fm.charWidth(ch);
         if(indx==last-1 ) {//残りの文字列を表示する
           if(g !=null) g.drawString(line,padelm.posx,stposy);
           totalHeight+=lnHeight;
          }
       }
      }//if !vert
    }//for
    if(vert1) {
        padelm.width=totalWidth;
        padelm.rectx=padelm.posx-padelm.width+padelm.fontsize;
        padelm.recty=padelm.posy-padelm.fontsize;
      }
    else {
        padelm.height=totalHeight;
        padelm.rectx=padelm.posx;
        padelm.recty=padelm.posy;
      }
    return lnum;
   }

        8. mousePressed(MouseEvent e)
          1. 選択状態の付箋がある場合、
            サイズボックスがクリックされたら、resizeMode=true;とします。
            選択状態の付箋がある場合、右ボタンがクリックされたら、その付箋の情報をpadsの最後に移動し、最上位に表示します。

          2. 選択状態の付箋がない場合、
            マウスの位置を含む付箋を探します
            あれば、その付箋を選択状態しに、番号をselectedに記録します

        9. void mouseDragged(MouseEvent e)
          マウスのドラッグに伴う処理をします。
          選択状態の付箋があり、dragmodeなら、その位置情報を変更する。
          resizeModeなら、文字枠のサイズを変更する

    4. insTextクラス

      1. 機能
        文字ダイアログを開き文字列の編集、属性を設定します。
        フォントサイズ、書体、背景の色、縦書き/横書き　の属性を設定します



      2. 新規クラス（ダイアログ）の作成法
        新規ダイアログの作成法の詳細は、ここを参照して下さい。
        Jbuilderのファイルメニューで新規クラスを選択します。
        パッケージをPad.javaと同じにします。
        Frameをextendsにします。
        　public class insText extends Frame
        サイズを指定すると、統合環境で画面の「設計」が可能になります。

      3. ダイアログの表示
        クラスを生成すると、ダイアログは生成されていますが表示はされません。利用するときは
        　dialog.setVisible(true);
        で表示モードに切り替えます。不要になったら
        　dialog.setVisible(false);非表示にします。

        1. 例：newボタン
          void display_actionPerformed(ActionEvent e) {
          //new pad
          dialog.newpad=true;
          selected=-1;
          dialog.setVisible(true);
          }

      4. 親と子供の接続
        親（padクラス）からは、instxtクラスのインスタンスdialogを作成しているので、dialog.xx の形式でinstextの変数やメソッドにアクセスできます。子供から親をアクセスするため、コンストラクタに親のインスタンス(this)をpad1に渡します。pad1からの参照で、親のリソースにアクセスできます。たとえば、編集ダイアログの「ok]ボタンで、PadクラスのinsPad()を呼び出し、データの追加（編集）を行っています。

      5. クラス
        1. public insText(pad pd, String title)
          コンストラクタでpdに親のpadクラスのインスタンスを受け取ます。

        2. void ok_actionPerformed(ActionEvent e)
          ダイアログを非表示にする
          ボタンからcolorを設定する
          padクラスのInsPad()を呼び出す;

        3. void setFmt(padFmt padfmt)
          padクラスから呼び出される。
          付箋情報を渡す。

  3. 実行

    new ボタンを押すと、別の編集ダイアログが開きます。ここで、文字列を編集し、文字のサイズ、色、縦書き、等の設定をし、okボタンを押します。設定した文字列が元の画面に表示されます。文字列をクリックすると、文字が反転表示されます。右下の■をドラッグすると、文字枠が変形します。反転状態でマウスを文字枠の内部に置きドラッグすると、文字枠が移動します。
    　文字を選択状態として、editボタンを押すと編集ダイアログが現れ、文字列の編集が出来ます。ｄｅｌｅｔｅボタンで削除出来ます。



  4. ダウンロード
    このプロジェクトをダウンロードできます。次の行をクリックして、pad.exeファイルを適当なフォルダに保存します。
    ダウンロード開始
    このファイルは自己解凍型の圧縮ファイルです。このファイルを実行すると指定したフォルダに必要なファイルが生成されます。

  5. 今後の予定

    1. ドローシステムへの拡張
      円、矩形、等基本図形と組み合わせる
      曲線、スケッチ入力に対応する
      図形のグループ化を可能とし、ライブラリに記録する（アイコン、検索）。

    2. ネットへの拡張
      協調作業への応用、
      　企画、共同創作、2次元chat
トップに戻る