ビヘイビア
2000/01/22
s=====================================================[ No.04 2000/01/22 ]==
Dreamweaver Programming < ビヘイビア >
[ BACK NUMBER ]
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/mail/
===========================================================================
◆謹賀新年
===========================================================================
あけましておめでとうございます。と、もう遅いですかね。(^^;
Dreamweaver3が発売されて一週間たったのですが、みなさんは買われたのでしょう
か？Extending Dreamweaverが訳されているので、このメルマガじゃ遅いという方は
そちらを見てください。(^^;
いくつかカスタマイズしたものができたので紹介します。
○テンプレートライブラリ
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/tomoLib/
○テーブル＞画像変換
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/dream/command/
TableToImage.htm
○XML+XSL変換
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/dream/command/
xmlparse.htm
http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/dream/JSExtension/
tomochan.dll
◆ビヘイビア
===========================================================================
ビヘイビアは１から２のときはいろいろ変わったのですが、３での変更は特にな
いようです。ビヘイビアとは、HTMLで起こるイベントに対してJavaScriptを挿入す
るものです。普通なら自分でがりがり書く必要のあるJavaScriptを簡単にパラメー
タを設定するだけで動くJavaScript関数の塊です。これだと、スクリプトが苦手な
人でも簡単にJavaScriptを組み込んで動きのあるHTMLが作れるわけです。
今回は適当なサンプルがなかったので、ビヘイビアの中で一番よく使うスワップイ
メージを例にビヘイビアの作り方を紹介しようと思います。
Configuration/Behaviors/Action/SwapImage.htm
を開きます。見るとこのファイル自体にはスクリプトは書かれておらず、他のスク
リプトファイルを読み込んでスワップイメージのビヘイビアを形成しています。
Dreamweaverにはいろいろと補助スクリプトがたくさんあり、その中のいくつかを
使っているようです。この中でスワップイメージに関するスクリプトファイルがあり
Configuration/Behaviors/Action/SwapImage.js
にビヘイビアの動作に関することが書かれています。
■
最初は設定するビヘイビアが適用できるかどうかを調べる必要があります。
設定できないビヘイビアを呼び出しても意味がありませんからね。
調べるには、canAcceptBehavior()を定義します。
この関数は引数として、適用しようとしているHTMLタグの文字列が受け取れます。
最初にこのタグで設定できるかどうか、調べることができます。
次にビヘイビアで必要なオブジェクトがあるかどうかを調べます。スワップイメー
ジの場合イメージがなかったら意味がないので、イメージが存在するかどうか調べ
ています。最後に、この関数の戻り値を設定します。ビヘイビアが適用できない場
合はfalseを返し、適用できる場合はtrueを返します。また、適用できる場合は
trueでもいいのですが、設定できるonClickなどのイベントを指定するとそれ以外
のイベントではビヘイビアが設定できないようにできます。
例：
Configuration/Behaviors/Action/SwapImage.js：３８行目
■
適用できるのがわかったので、実際にビヘイビアを挿入するためにダイアログを
開きます。ここでダイアログの大きさを指定することができます。指定するには
windowDimensions()を定義します。
この関数は引数として、Dreamweaverを使用しているプラットフォームが受け取れ
ます。プラットフォームは、"Mac","Windows"のどちらかになります。
戻り値として、ダイアログの大きさを指定します。幅、高さとなっています。
例
function windowDimensions( platform )
{
return "480,320";
}
スワップイメージでは定義されてません。定義されていない場合は、デフォルトの
サイズとなります。
ダイアログが表示できてもパラメータが入力できなければ意味がありません。
そこで、パラメータを入力するフォームが必要となります。BODY内にFORMを用意
します。スワップイメージでは、スワップするイメージの一覧、onMouseOutでイメ
ージの復元、プリロードの３つのパラメータがあります。
■
ここで、スワップするイメージの一覧を編集するドキュメントから取得する必要
があるので、Onload時に一覧を作成するスクリプトが挿入されています。
３５行目：
このinitializeUI()中身はSwapImage.jsに記述されています。
initializeUI()はスワップイメージ固有のものなので、参考に読む程度で理解する
必要はありません。フォームに対してなにか初期化する必要がある場合にOnloadに
関数を設定するということを覚えて下さい。
onMouseOutでイメージの復元のオプションをタイムライン上、A,IMG,AREA以外では
できないので、このオプションは選択できないように削除するようになっています。
var removeCheckbox = false;
〜
if (theObj) theObj.outerHTML = ""; //remove restoreOption checkbox
}
次にプリロードをデフォルトでチェックが入っている状態に設定しています。
OLD_PRELOAD_ID = 1;
OLD_PRELOAD_ARRAY = new Array();
document.theForm.preload.checked = (OLD_PRELOAD_ID != 0);
イメージのオブジェクトの一覧を作成し、オプションにイメージの状態を設定して
います。
createObjRefs();
〜
imgSrcArray[i] = "";
}
オプション中でビヘイビアを適用しようとしているイメージを選択状態にしていま
す。
pickSelectedImage();
イメージのURLを設定するテキストボックスにフォーカスを移し、選択状態にして
います。
document.theForm.imgSrc.focus();
document.theForm.imgSrc.select();
■
パラメータが入力され、OKボタンを押すとビヘイビアが適用されます。このときに
挿入するスクリプトを設定する必要があります。behaviorFunction()を定義しま
す。この関数の戻り値がHTMLにスクリプトとして挿入されます。関数が長い場合は
文字が長くなるので、関数名を指定するとビヘイビア内になるスクリプトを検出し
挿入します。
例：
Configuration/Behaviors/Action/SwapImage.js：４９行目
■
次にイベントに挿入する文字列を設定します。関数が用意されても呼び出し部がな
ければ意味がありません。設定するにはapplyBehavior()を定義します。
この関数の戻り値がイベントに挿入されます。関数内では、入力されたフォームの
値を元に呼び出し部を作成します。スワップイメージの場合は、他のイベントに挿
入する部分があるので、さらにいろいろと処理しています。
また、applyBehavior()は引数として固有に識別子を受け取ります。設定したイベ
ントを区別したい場合に引数として挿入したり、タグに名前をつける場合に使用し
たりとできます。
例：
Configuration/Behaviors/Action/SwapImage.js：５９行目
■
これで、ビヘイビアは挿入されました。次にビヘイビアのパラメータを修正する場
合の処理です。onLoadまでの処理は同じなのですが、前回設定したパラメータを取
得しないと修正にはなりません。そこで、inspectBehavior()を定義しこの関数内
で、前回の内容を入力フォームに設定します。この関数は、前回設定したイベント
の文字列を受け取ります。この文字列を使って前回の内容を再現します。
Extending Dreamweaverに書いてあるのですが、この文字列以外の方法で関数内で
ドキュメントの状態を取得するのを止めましょう。と言ってもスワップイメージは
やっています。(^^;
例：
Configuration/Behaviors/Action/SwapImage.js：１６４行目
■
ビヘイビアの削除する場合です。何も設定しなくても設定したイベントや関数は
削除してくれるのですが、スワップイメージのようにイベントや関数以外に特殊な
ことをやっている場合は削除されません。そこで、deleteBehavior()を定義必要が
あります。ビヘイビアが削除されるときに呼び出されます。
例：
Configuration/Behaviors/Action/SwapImage.js：２５２行目
■
ビヘイビアを適用した場合の引数にオブジェクト参照(document.*等)を指定する
場合があります。このオブジェクトが他の編集で参照の仕方が変わったときに引数で
あるオブジェクト参照を修正する必要がでてきます。この修正処理を自動で修正する
機能があります。identifyBehaviorArguments()関数です。この関数で適用したイ
ベントの引数に情報を与えます。この関数は、applyBehavior()同様にイベントに
設定した文字列を受け取ります。関数内で引数の状態を調べ、この引数はどのような
意味を持つかを戻り値として返します。戻り値の意味はExtending Dreamweaverを
参照してください。
例：
Configuration/Behaviors/Action/SwapImage.js：１４３行目
■
一番最初に言うべきだったのかもしれませんが(^^;、ヘルプの設定方法です。
displayHelp() を定義します。ビヘイビアのダイアログでヘルプボタンを押したと
きに呼び出されます。この中で、dw.BrowseDocument()を呼び出してヘルプファイ
ルを表示します。
例：
Configuration/Shared/MM/Scripts/CMN/displayHelp.js：３行目
以上でビヘイビアの説明は終わりです。前回、オブジェクトの後に何を説明しよう
かいろいろ考えました。オブジェクト以外は結構設定が面倒なんですね。
コマンドファイルも簡単そうですが、いろいろと設定できることがあってそれを全部
説明しようと思うと大変です。(^^;次回の発行予定は、２月１２日を予定しています。
Mac World Expoに呼び出されることになると２月２６日になります。(^^;
==========================================================================
Dreamweaver Programming
発行、編集： 植木 友浩
登録、解除： http://www2s.biglobe.ne.jp/~tomoChan/dreamweaver/mail/
注意： 記載された情報は各人の責任においてご利用ください。
この記事により生じるいかなる損害についても責任は
負いかねますのでご了承ください。
Copyright(C) 1999. Tomohiro Ueki. All rights reserved.
===============================================[ Magazine ID: 0000021775 ]=
Thank you!
---------------------------------------------------------------------------
このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用して
発行しています。( http://www.mag2.com/ )
---------------------------------------------------------------------------
