実稼働前に、開発環境をセットアップします。
netbeans6.1 を開き、プロジェクト ワークスペースで新しいプロジェクトを右クリックし、Web ディレクトリで Web アプリケーションを選択します。
この例では、現在のページで操作を実行し、ページをフリーズして、操作結果を終了または返す前に待機ボックスを表示します。この機能は、ページがロード中であることをユーザーに通知することです。特に特定の大容量データリクエストの場合、この UI により、長い待ち時間による顧客の煩わしさが軽減されます。
簡単に分析すると、この例は 2 つの主要な点で構成されていることがわかります。
1. 静的要素
2. ボックスはいつ表示され、いつ消えますか? このエフェクトの UI は、暗い背景にロード中のボックスです。
静的要素の場合、その外観がどのようなものであっても、その本質は常に HTML、CSS、JavaScript です。もちろん、Flash などの埋め込みコントロールは除きます。実際、埋め込みコントロールは HTML などの静的要素の範囲内には含まれません。
この例では、読み込みのあるボックスは、実際にはスクロール効果のある画像と通常のテキストを含む単なる div ですが、この div は CSS で美化され、Web ページの特性と組み合わせて、JavaScript を使用して制御されます。 divを表示して消えます。
では、このようなエフェクトを作成するにはどうすればよいでしょうか? 作成プロセス全体をわかりやすく説明するために、とりあえず JavaScript に関係なく、最初に div を作成します。
Web ページのディレクトリで右クリックし、[新規] -->[html] を選択します。
htmlを選択し、ファイルにindexという名前を付けます。
ページの作成後、必要な素材はスクロール効果のあるloading.gif画像だけです。この画像を画像フォルダにコピーします。
次に、図に示すように、新しい CSS ファイルを作成し、inc フォルダーを右クリックして、[新規] --> [その他] を選択し、他のディレクトリにある [カスケード スタイル シート] を選択します。
スタイルに名前を付け、[完了] をクリックして CSS ファイルを生成します。この手順で新しく作成された CSS は、ルート スタイル シートの範囲にカーソルを移動すると、CSS のスタイル ジェネレーター ウィンドウを表示します。以下に示すようなエフェクト プレビュー ウィンドウです。
エディターの右側にあるジェネレーター ウィンドウには、多くの属性の GUI 設定があり、対応するコードが自動的に生成されます。たとえば、フォント パネルでは、作成者がスタイルと太さに斜体を選択します。太字を選択してから、下線を選択し、色として #ff0099 (赤の一種) を選択します。対応する色を選択すると、プレビュー効果が次のようになります。
エディターはコードを自動的に生成し、Netbeans がこれを実行した後の効果もプレビュー ボックスに表示されます。
このツールによって生成されるコードはシンプルですが、手書きほど柔軟性や制御が容易ではないことに注意してください。
ここで、必要な待機ボックスのスタイルを定義します。
.loading
{
border:2px Solid #a3bad9;/* 適用されたスタイル オブジェクトの境界線のスタイル*/
color:#003366; /* 適用されたスタイル オブジェクトのコンテンツの色*/
padding:10px; /* 適用されたスタイル オブジェクトのコンテンツとスタイルの境界線 (上、下、左、右) の間の距離 */
margin:0; /* 適用されたスタイル オブジェクトとその周囲の要素 (上、下、左、右) の間の距離 */
z-index:2000; /* Web ページに適用されたスタイル オブジェクトの Z 座標の値*/
width:205px; /* 適用されたスタイルオブジェクトの幅*/
text-align:center; /* 適用されたスタイル オブジェクトのコンテンツを中央に配置します*/
Position:absolute; /* 適用されたスタイルオブジェクトのページ内での位置が表示されます */
font-weight:bold; /* 適用されたスタイルオブジェクトのフォントのスタイル*/
font-size: 13px; /* 適用されたスタイルオブジェクトのフォントのサイズ*/
}
読者が各属性の具体的な意味に興味がある場合は、より深く理解するための情報を探してください。ここでは詳しく説明しません。
CSS を作成した後、作成したindex.html ファイルに次のコードを追加して、CSS スタイルをインポートします。
エリアに参加する
オブジェクト B が透明でオブジェクト A の隣にある場合、第三者がオブジェクト A に接触しようとしてオブジェクト B にのみ遭遇した場合、A に対するすべての接触は無効になります。
分析のこの時点で行う必要があるのは、この特殊効果を備えた div を作成することです。最終的には、これは依然として CSS プロダクションおよびアプリケーションです。
暗い透明効果は CSS の filter 属性を通じて取得でき、新しいスタイル bgdiv を再定義します。
.bgdiv
{
背景:#ccc; /* 背景色*/
不透明度:.3; /* 透明度*/
filter: alpha(opacity=30); /* 透明なフィルター*/
Position:absolute; /* 適用されたスタイルオブジェクトのページ内での位置が表示されます */
z-index:1000; /* Web ページに適用されたスタイル オブジェクトの Z 座標の値*/
width:500px; /* 適用されたスタイルオブジェクトの幅*/
height:500px; /*適用されたスタイルオブジェクトの高さ*/
top: 0px; /* 適用されたスタイル オブジェクトとページの上部の間の距離*/
left: 0px; /* 適用されたスタイル オブジェクトとページの左端の間の距離*/
}
本文領域に次を追加します。
、ファイルを実行すると、次のような効果が得られます。
この時点で UI デザインは完了しましたが、表示される div のサイズは 500*500 でページ全体を満たしておらず、待機ボックスも中央に配置されておらず、効果は最初から表示されています。実際に使用する場合は、背景をページ全体に表示し、待機ボックスを中央に表示し、エフェクトの表示と非表示を制御できる必要があります。
これらのタスクは JavaScript で完了する必要があります。
JavaScript はページ上のほぼすべての静的要素を制御でき、上記の効果は背景の div と wait ボックスを制御することで正式に実現されます。
JavaScript では、ページ上の要素を取得する最も簡単な方法は、ターゲット オブジェクトの ID 属性に値を割り当て、JavaScript の getElementbyId を通じてその値を取得することです。
ここでは、まず bgdiv の ID 属性に次のような値を割り当てます。
まず最初の問題を解決しましょう。それは、JavaScript を使用してページ全体を埋めるレイヤーのサイズを設定することです。
関数 showbg()
{
var bgdiv=document.getElementById("bgdiv"); // bgdiv オブジェクトを取得します。
bgdiv.style.width=document.body.clientWidth; // bgdiv オブジェクトの幅を Web ページの表示領域の幅に設定します。
if (document.body.clientHeight>document.body.scrollHeight) //bgdiv オブジェクトの高さを Web ページの表示領域の高さに設定します
bgdiv.style.height=document.body.clientHeight;
それ以外
bgdiv.style.height=document.body.scrollHeight;
}
ここで説明する必要があるのは、clientWidh とscrollWidth はどちらもビジュアル領域の幅を表すということです。違いは、Web ページにスクロール バーがある場合、scollWidth には ?? までのスクロール バーが含まれるため、scollWidth の方が clientWidth よりも大きいということです。 ??????? 部分はありませんが、clientWidth はそうではなく、表示される部分だけです。
上記の関数では、 clientWidth が幅として使用されています。これは、Web デザインの基本原則によれば、マウスは上下にのみスクロールでき、左にはスクロールできないため、水平スクロール バーを含む Web ページをデザインするのは非常に不親切だからです。ここで clientWidth を直接取得するということは、プロジェクト全体で水平スクロール バーが表示されないようにすることを意味します。
以下の高さの設定では、垂直スクロール バーの有無の互換性が考慮されています。
上記の関数により、呼び出された bgdiv が画面全体に表示されるようになります。
inc フォルダーに新しい JavaScript ファイルを作成し、その中に上記の関数をコピーし、関数を導入する次のコードをページに追加します。
表示しやすくするために、body タグに onload="showbg();" を追加します。ページが読み込まれた後、調整された bgdiv がページ全体に表示されていることがわかります。
待機ボックスの表示位置を調整する原理も同様です。機能は次のとおりです。
関数 showwait()
{
showbg(); // bgdiv を表示
varload=document.getElementById("loaddiv");//読み込みオブジェクトを取得します
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//上からの読み込み距離を設定します
loading.style.left=document.body.clientWidth/2-110;//読み込みと左端の間の距離を設定します
}
onload イベントで showwait を呼び出して、暗い透明な背景に待機ボックスを表示します。
ここで強調する必要があるのは、上記のコードの位置が絶対位置に従って設定されるため、上記のコードを有効にするには、この属性を絶対値に設定する必要があることです。
上記の効果はページを開いた瞬間に表示されます。表示するかどうかを制御したい場合は、値が block の場合は表示され、none の場合は表示されます。は表示されません。
上記の CSS 属性に display: none を追加した場合、ページを開いたときに効果は表示されません。
次に、showbg 関数に bgdiv.style.display="block" を追加します。
showwait 関数にloading.style.display="none"を追加します。
ページの本文領域に表示を追加し、ページを実行すると、表示リンクをクリックすると、図に示すように必要な効果が表示されます。
現れた効果は消えません。著者は、日々の研究作業の中で、ページ上のリンクをクリックしたとき (つまり、サーバーにリクエストを送信したとき)、サーバーが処理を完了しておらず、ページをクライアントに返していないときに、ページ自体は変更されず、いわゆるネットワーク速度の低下も同様です。サーバーが処理を完了すると、HTML がユーザーに返され、ページが変更されます。その後、リンクをクリックしたときに showwait イベントがトリガーされると、サーバーがリクエストの処理を完了し、ページがリダイレクトされて消えるまで、その効果が表示されます。
たとえば、表示されるコードを「表示」に変更してページを実行し、「表示」をクリックすると、待機ボックスが表示され、ページが消えると Sun のホームページが表示されることがわかります。
実際、この例には特別な点はありません。HTML、CSS、JavaScript の要件が非常に高いという点だけです。これら 3 つの静的要素に精通している場合にのみ理解できます。ここで、待機のスクロール画像と背景画像も、外部フレームの画像に基づいていることに注意してください。内線
Netbeans 6.1 のエディタには JavaScript の豊富なプロンプト サポートがあり、キーワード サポートだけでなく、互換性のあるブラウザのプロンプトも表示され、いくつかの簡単な例も提供されていることは言及する価値があります。
この記事では、複雑ではない例を説明するために多くのスペースを費やしていますが、その目的は、詳細な思考と開発プロセスを通じて独自の RIA を開発する方法についての詳細な分析を読者に提供することです。
このタイプの RIA を作成するには、一定のアート基礎とページ デザイン能力が必要ですが、基本的な制作手順は次の 2 つの手順に過ぎないことがわかります。
1. HTML と CSS を使用して独自の UI を作成します。
2. ページの動作モードを注意深く調べ、UI を制御する JavaScript を記述します。
次の記事では、ポップアップ ダイアログ ボックス、ポップアップ メニュー、特殊効果レイヤー、ウィンドウのドラッグなど、より複雑で包括的な例を紹介します。