Yahoo! UI Libraryの訳
Yahoo! UI Libraryが公開されています。Javascriptのライブラリがいぱーい
http://developer.yahoo.net/yui/
どれ、せっかく今やってる勉強とかぶってるから、ちょびちょび訳してサンプルを作って見ようかな。雰囲気掴めればいいや程度のアバウトな訳です。的確に訳すのは難しそう
- Getting Started
- Licensing
- Download
- Components
Yahoo! User Interface Library
The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX. The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM). The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.
Yahoo ユーザーインターフェースライブラリは、Javascriptで書かれたユーティリティとコントローラー？のセットです。DOMスクリプティングやHTML&AJAXといったWEBアプリケーションをカコよく作り上げるのに使えます。UIライブラリを使うと、開発者のインターフェースを イベントや、ページ内でのHTTPリクエスト、DOMなどといったブラウザのインフラへである要素に強化・正規化することで リッチクライアントサイドのイイところの実現促進をしてくれます。
Yahoo! UIライブラリ・コントローラは、数行のコードとCSSファイルを書けば、視覚的でインタラクティブなユーザーインターフェースとなるエレメントを作ってくれます。Yahoo UIライブラリに含まれてるコードは全部、BSDライセンスに乗っ取ってオープンソースとしてリリースされています。誰でも無料で使えまっせ！
案外 訳すの難しいな。かなり意訳で。
1.Getting Started
To get started with the Yahoo! UI Library:Download the Yahoo! UI components
The Yahoo! UI Library files are provided as downloadable ZIP files. You can download the Yahoo! UI Library as a complete package or use only the components you need. We do not host the Yahoo! UI library components; you must download the component you are interested in (or the entire package) and install it on your own web server.1.まずはじめに。Yahoo! UIライブラリを使うに当たってだな
Yahoo UIコンポーネントをダウンロードしる！
Yahoo!UIライブラリのファイルはZIPとしてダウンロードできるようにして配っています。コンポーネントがまるまる全部入ったパッケージ、もしくは必要な分だけをダウロードできます。あなたの興味を惹いたもの、もしくは全部をダウンロードしてブラウザにインスコしちゃってください。もう勝手にしてくれと。
大体こんな訳だろ 大事なところは慎重に訳します。
2.Include one or more library files in your web page
To use a specific component from the Yahoo! UI Library, include the path to that library in a <script> tag within your web page. Some components may have dependencies on other components, in which case you must include all the necessary components in individual <script> tags.2.WEBページにライブラリを組み込むには
Yahoo! UIライブラリの中のコンポーネントを使うに当たって: ページの<sciprt>タグの中にライブラリへのパスを通してください。いくつかのコンポーネントは他のコンポーネントに依存性を持っています。そういう場合は 必要なコンポーネントを一個一個<scirpt>タグで組み込まないといけないです。
<scirpt src="hogehoge">ってことですね。依存性があるコンポーネントもあると。
3.Include a CSS file, if necessary
Most Yahoo! UI Library Controls have a corresponding CSS file that determines the appearance of that component. You will also need to include that CSS file in a <style> tag in your web page. Although you are free to modify the CSS file to achieve a presentation specifically tailored to your site, you may find it helpful to use the included file as a starting point. (Note that unlike controls, utilities do not come with CSS files).
3.必要に応じてCSSファイルも組み込んで
Yahoo! UIライブラリのほとんとが、CSSファイルに対応しています。コンポーネントの演出はCSSファイルが決定付けます。ページにCSSファイルを組み込むには<style>タグが必要です。CSSファイルを組み込んでおくと、取っ掛かりが楽になると思います。といっても自分のサイトに合わせて、CSSファイルに手を加えてもらっても構いません。
CSSについて注意書き。基本事項ですね
Explore the documentation and examples
Each component includes detailed API documentation as well as examples of common use to help you get the specific results you're seeking. Be sure to review the API as you get started to ensure that you have a sense of what's possible. Understanding the API will be an important step on the road to a successful implementation.
4.ドキュメントとサンプルにも目を通しておくのだよ
どのコンポーネントにも詳細なAPIドキュメントが含まれています。･･･（うまく訳せないので一部飛ばします） （このライブラリで）何ができるのかをしっかりと押さえておくためにも、APIを見ておくこと！APIのことをちゃんと分かっておけば上出来な実装?に結びつく大事な一歩になるっしょ。
とりあえずここまで。
ライブラリの実装に当たって、特別重要なことはかかれてないですね
Yahoo! UI Library の訳 その２
http://developer.yahoo.net/yui/ の後半部分を訳して見ます。訳すのは
- Components
- Design Patterns
の導入部
Yahoo! User Interface Library
Components
Yahoo! User Interface Library components fall into two groups: Core Utilities and UI Controls.
Yahoo! UI Librady::Animaton の訳
http://developer.yahoo.net/yui/animation/index.html
とりあえず訳せるだけ、訳していきます。自分でサンプル作るのはまた後で。
？マークが入っているところは、よく分からなかった部分です。間違っていたらごめんなさい
- 基本的なアニメーション
- イージング効果を適用するには
- 複数の属性を使ってアニメーションさせる
- イベントのリスニング
-Getting Started
To use the Animation component, download the component package and install the JavaScript file on your web site. Include the source file in your web page with the script tag:
<!-- Namespace source file -->
<script src = "ｈttp://yourwebsite.com/util/YAHOO.js" </script><!-- Animation source file -->
<script src = "ｈttp://yourwebsite.com/util/animation.js" ></script>The base Animation class is defined by the YAHOO.util.Anim class.
追記：下記のクラスもインポートしてください。これを入れないとサンプルスクリプトがうまく動かないみたいです。報告が遅くなってすいません。（英訳にはインポートしろって載ってないのに･･･泣）
-はじめに
アニメーション・クラスのベースは、YAHOO.util.Anim.classで定義されます。
Basic Animation
This example demonstrates how to create a simple animation that increases the height of a HTML element:
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} });
myAnim.animate();The first line of this code creates a new instance of the Anim base class. The constructor has two required parameters: the target element, and an object indicating the attributes of that object to animate.
The attributes object indicates the CSS attribute of the element that should be animated, and defines the range of values that make up that animation, for example, "from: 1, to: 100, by: 10, unit: 'px'". In this example, the height attribute of the element will be animated; there is no "from" variable so the animation starts from the current value; the value of "to" is 10 so the animation stops when the height is 10. The other options are by (the number to increment values by) and unit (the units to use, default pixels).The Anim object constructor also takes two optional parameters, not used here: duration and method. By default the duration of the animation is 1 second; the method is EaseNone (no acceleration or deceleration as the animation starts or completes).
The animate method actually starts the animation in motion.
基本的なアニメーション
サンプルは、HTML要素の高さ属性を増加させるシンプルなアニメーションのやり方です。
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} });
myAnim.animate();＊ターゲットとなる要素のスタイルシートが未定義の場合、エラーが出ます。widthやheightを明示的に定義しておく必要があるようです。
コード一行目について：
Animベースクラスの新しいインスタンスを生成します。コンストラクタは２つのパラメーターを必要とします。-ターゲットとなる要素
-アニメーションさせるオブジェクトの属性を示すオブジェクト?属性オブジェクト?が示すのは、アニメーションさせる要素のCSS属性でです。属性オブジェクトは、アニメーションの作り上げる値の範囲を定義します。
from: 1, to: 100, by: 10, unit: 'px'
このサンプルスクリプトでは、高さ属性がアニメーションするのでしたね。サンプルでは"from"変数がないので、アニメーションは現在の値（＝ デフォルト値orアニメーションをスタートする段階での属性値）から始まります。"to"変数が１０になっているので、アニメーションは高さが１０になったときにストップします。他のオプションは"by"オプションは徐々にインクリメントする数値で と、"unit"オプションはオプション値の単位です。デフォルトの単位はピクセルとなります。
Animオブジェクト・コンストラクタは、さらに２つのパラメーターを追加的に受け取れます。"duration"(アニメーション持続時間？) と "method" です。"duration"のデフォルトは１秒間です。メソッドのデフォルトは"EaseNone"です（加減速のないアニメーション･･･モーション変化の割合が一定のアニメーションということですか･･･)
Animaメソッドによってアニメーションを開始します。
Applying Easing
This example demonstrates how to apply easing equations to control animation behavior. The easeOut method decelerates the animation as it nears completion.
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }, 1,
YAHOO.util.Easing.easeOut);
myAnim.animate();
- element:: 'test'
- style-property:: {height: { to:10} }
- duration:: 1
- easing::YAHOO.util.Easing.easeOut
This code differs from the code in the Getting Started example only in new arguments to the constructor. The previous example did not use the two optional duration and easing arguments to the Anim construction; this one does.
The duration argument indicates how long the animation should take from start to finish in seconds or frames. In this case the duration is 1.
The final argument is the method of the animation, that is, the method to compute the values that should be applied to the attribute at each step of the animation. This method can be used to create animation effects such as easing (acceleration and deceleration based on the position of the object). The animation method is often a method from the YAHOO.util.Easing class -- in this case, easeOut.
イージング効果を適用するには
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }, 1,
YAHOO.util.Easing.easeOut);
myAnim.animate();
- element:: 'test'
- style-property:: {height: { to:10} }
- duration:: 1
- easing::YAHOO.util.Easing.easeOut
アニメーションをコントロールするために コードをどんなふうに用いるのかをデモンストレートします。"easeOut"メソッドは、アニメーション完了に近づくにつれてモーションを減速させるメソッドです。
最初のサンプルと違って、コンストラクタに新しい引数を渡しています。一つ前のサンプルでは"duration" と "easing" をAnimコンストラクタで使いませんでしたが、今回は使います。
"duration"の引数は、アニメーションが何秒間もしくは何フレーム 続くかを示します。このサンプルの場合は1秒です。
最後の引数はアニメーションのメソッドを指定します。メソッドが計算した値は、アニメーションの各段階で属性に適用されます？このメソッドは「イージング」といったアニメーション効果を作り出すことが出来ます。（オブジェクトの位置に基づいてアニメーションが加速したり、減速したり）たいていのアニメーションメソッドはYAHOO.util.Easingクラスからひっぱって来ます。この場合は"easeOut"ですね。
-Animating Multiple Attributes
In this example, both the width and height of an HTML element are animated simultaneously.
var attributes = {
width: { to: 100 },
height: { to: 100 }
};
var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();
- style-property width: { to:100} ,
- style-property height : { to:100}
In this code:
The attributes object is defined separately from the Anim constructor, for convenience's sake, and assigned to a variable called attributes. There are two attributes to be animated here: width and height. Both are animated from their current values to a value of 100.
The YAHOO.util.Anim object is instantiated. Here the HTML element to be animated is once again 'test'; the attributes object is contained in the variable attributes.
The optional duration argument to the constructor is omitted, so the animation duration defaults to 1 second.
The optional method argument to the constructor is omitted, so the animation method defaults to "easeNone"
-複数の属性を使ってアニメーションさせる
このサンプルでは、HTML要素の幅と高さを同時にアニメーションさせています。
var attributes = {
width: { to: 100 },
height: { to: 100 }
};
var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();
- style-property width: { to:100}
- style-property height : { to:100}
- 他は省略
attribute変数を作っておいて、要素名と一緒にコンストラクタに渡す
利便性を考え、この属性オブジェクトはコンストラクタから切り離して、"attribute"変数として定義されています。ここでは２つの属性がアニメーションされます。"width"と"height"です。二つの値は 現在の設定値から100に変化します。（"to"変数で指定しているから---「ＡからＢへ」の英訳は「from A to B」ですね。)
・YAHOO.util.Animオブジェクトがインスタンス化されます。ここでアニメーションするHTML要素は'test'です。属性オブジェクトは変数の属性になります。
・オプションの"duration"引数は省略されています。なのでアニメーション時間のデフォルト値は１秒になります。
・オプションのメソッド引数は省略されています。なので、アニメーションメソッドはデフォルトの"easeNone"になります。
Listening for Events
The Animation component defines three events: onStart, onTween, and onComplete. Each of these events expose a subscribe method, enabling you to bind a callback function to that event.
var removeElement = function() {
var el = this.getEl();
el.parentNode.removeChild(el);
}var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }
1, YAHOO.util.Easing.easeOut);
myAnim.onComplete.subscribe(removeElement);
myAnim.animate();In this example, you define a callback function called removeElement. The animation increments the HTML element the height of the element 'test' by 10 pixels. The subscribe method, called on the onComplete event, connects the removeElement callback to the onComplete event. And, finally, the animate method begin the animation.
イベントのリスニング
Animationコンポーネントは三つのイベントを定義します。
①onStart
②onTween
③onComplete
どのイベントも subscribe()メソッドを吐き出します。subscribe()メソッドはコールバック関数とイベントを結びつけることを可能にします。
//コールバック関数の定義 無名関数var removeElement = function() {
var el = this.getEl();
el.parentNode.removeChild(el);
}//コンストラクタ
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }
1, YAHOO.util.Easing.easeOut);//イベントとコールバック関数を結びつける
//ここではsubscribe()メソッドがonCompleteイベントとremoveElement()を結びつけているmyAnim.onComplete.subscribe(removeElement);
myAnim.animate();
サンプルでは、コールバック関数 removeElementを定義しています。アニメーションはHTML要素である'test'要素の高さを10ピクセルずつ増加させます。subscribe()メソッドが、removeElementコールバック関数とonCompleteイベントを結びつけます。最後にanimate()メソッドでアニメーションを開始させます。
- subscribe()の引数には関数の参照を渡すとよいようだ。（無名関数を変数に閉じ込めた奴とか）
- subscribe()はイベントオブジェクトから引っ張り出してくる
obj.onStart.subscribe(hoge)
obj.onTween.subscribe(hoge)
obj.onComplete.subscribe(hoge)
Animating with Motion
The YAHOO.util.Motion extends the Anim base class to move an element along a set of points. Points are defined by arrays of x,y coordinates.
var myAnim = new YAHOO.util.Motion('test', {points: { to:[10, 10] } });
myAnim.animate();In this code you create a Motion animation instance which animates the HTML element 'test'. The animation starts from the element's current position and ends at the x,y coordinates 10,10. Neither duration nor method is specified so the animation lasts 1 second with no easing.
モーション?付きアニメーション
var myAnim = new YAHOO.util.Motion('test', {points: { to:[10, 10] } });
myAnim.animate();YAHOO.util.MotionはAnimベースクラスを拡張して、あるポイントまで要素を動かす、なんてことが出来ます。ポイントは X Y座標の配列で定義されます
このコードでは、Motionアニメーション・インスタンス（＝HTMLエレメントの'test')を創り出しています。アニメーションは、現時点での位置からスタートして、(x,y)=(10,10)座標で終了します。'duration' も 'method' も指定していないので、アニメーションは一秒間で終わり、イージング効果はつきません。
- 要素のどのポイントが指定座標に移動するのかな？左隅かな（clientX clientY)
- 要素の位置取得にはDomクラスの getXY()メソッドを使うよさげです
Yahoo! UI Library::Connection Manager の訳
http://developer.yahoo.net/yui/connection/index.html
いわゆるAJAXを簡単に出来るようにするラッパ・クラスみたいです。prototype.jsにも似たようなクラスがありましたよね。こちらのライブラリでも非常に簡単な手続きで、Ajax通信を実現することが出来ます。
Yahoo! UI Library: Connection Manager
The Connection Manager is a utility that enables you to make in-page HTTP requests through a simplified interface to the XMLHttpRequest object. Connection Manager handles cross-browser instantiation of XMLHttpRequest, negotiates the server response and returns the results to a pre-defined callback function you create.
This page describes the Connection Manager component and provides examples of its use. It contains these sections:
Connection ManagerはXMLHttpRequestオブジェクトを通したシンプルなインターフェースで、ページ内（非遷移）HTTPリクエストを可能にしてくれるユーティリティです。Connection Manager はクロスブラウザなXMLHttpRequestインスタンスを扱い、サーバーとの通信をしてユーザーが定義したコールバック関数の結果を返します。
このページはConnection Managerコンポーネントについて書いています。また使い方のサンプルを載せています。…略
Getting Started
<!-- Namespace source file --> <script src = "http://yourwebsite.com/util/YAHOO.js" ></script> <!-- Connection Manager source file --> <script src = "http://yourwebsite.com/util/connection.js" ></script>Connection ManagerはYAHOO.util.Connectのオブジェクト で定義されます。
Basic Connections
To make an asynchronous network connection with the Connection Manager component, use this code:
In this example:
var cObj = YAHOO.util.Connect.asyncRequest('GET','ｈttp://www.yahoo.com',callback,null);
- Use the asyncRequest method to make an asynchronous request (XMLHttpRequest). This method returns a reference to the connection object, which is assigned to the variable cObj. This method takes four arguments: the HTTP method, the request, URL, the function callback, and data to post for an HTTP POST request.
- This connection uses GET as the HTTP, and makes the request to the URL http://www.yahoo.com.
- The callback argument is the callback function object, which you must have defined previously in your script.
- The null is the data to post, in the case of an HTTP POST. As this is an HTTP GET request, there is no data and this argument is null.
See the examples in Using Connection Manager or the API Documentation for more details.
接続の基本
Connection Managerコンポーネントを使って非同期ネットワークコネクションを張るには下記のようなコードを使います。
//cObjはconnectionオブジェクトへのリファレンス
var cObj = YAHOO.util.Connect.asyncRequest('GET','ｈｔｔｐ://www.yahoo.com',callback,null);・(XMLHttpRequest)非同期リクエストをするにはasyncRequest()メソッドを使を使います。
このメソッドの返り値は、connectionオブジェクトへのリファレンスです。サンプルではcObj変数に代入しています。このメソッドは４つの引数をとります。
①HTTPメソッド
②ＵＲＬ
③コールバック関数
④POSTリクエストのボディ
Using Connection Manager
This section describes several common uses of the Connection Manager, with examples.
- Asynchronous Connections
- The Callback Object
- Success Case
- Failure Case
- Forms
- Transaction Status
このセクションではConnection Managerの一般的な使い方についてサンプルを交えていくつか記しています
・非同期接続
・コールバック・オブジェクト
・成功した場合?
・失敗した場合?
・フォーム
・トランザクションのステータス
Asynchronous Connection
非同期接続
An asynchronous connection requires a user-defined, callback object with defined properties to handle the response once a transaction is complete. Calling the asyncRequest method without providing a callback results in silent success and failure cases.
This example shows how to construct a callback object with two members - success and failure - to handle the server response. The appropriate function will be called and receive a response object as an argument.
// oはサーバーからのレスポンスを格納したオブジェクトvar responseSuccess = function(o){ //transaction success case logic } //成功時
var responseFailure = function(o){ //transaction failure case logic } //失敗時//コールバック関数を格納するオブジェクト
var callback =
{
success:responseSuccess,
failure:responseFailure
}
非同期接続では、トランザクションが完了した時のレスポンスを扱うために、ユーザー定義のコールバック・オブジェクトと定義済みプロパティが必要です。asyncRequest()メソッドはコールバック関数を提供しません。ただ結果として成功か失敗かを返すだけです。
このサンプルで、成功時・失敗時のサーバーレスポンスを扱うコールバックオブジェクトのコンストラクト方法をお見せします。(トランザクション失敗時には失敗時の、成功時には成功時の）適切な関数が呼ばれ、レスポンスで返ってきたオブジェクトを引数として受け取ります。
The Callback Object
In the asynchronous example, we defined a callback object to handle the server response. The callback object should include the following members to correctly process the response:
var callback =
{
success: function ,
failure: function,
argument: string, number, object, array
}When negotiating a transaction, the connection manager will determine if the connection and response was successful and call the appropriate callback handler. Additionally, you can define the member argument to pass values to both the success and failure handler.
However, in a scenario where an object's method is used as a callback, any usage of "this" in the method lose scope. While this can be partially resolved by passing a reference to "this" as a user-defined argument, it still invalidates the use of 'this' within the member. To use an object's method as a callback handler and maintain scope, define the callback member scope with a value of 'this'.
//コールバックオブジェクト
var callback =
{
success: this.handleSuccess ,
failure: this.handleFailure,
argument: arguments ,
scope: this
}YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com',callback,null);
コールバック・オブジェクト
非同期のサンプルでは、サーバーレスポンスを扱う「コールバックオブジェクト」を定義しました。レスポンスを正しく処理するには、コールバックオブジェクトに次のようなメンバを含んでおく必要があります。
//コールバックオブジェクト
var callback =
{
success: function ,
failure: function,
argument: string, number, object, array
}トランザクション通信をしているとき、Connection Managerは、接続とレスポンスがうまく通ってるかどうかを判断し、適切なコールバックハンドラを呼び出します。また、成功時のハンドラと失敗時のハンドラへ渡す引数をメンバ(argument)として定義することが出来ます。
しかし、オブジェクトのメソッドがコールバックとして呼ばれるような場合だと、メソッド内で"this"をどんな風に使ってもスコープを失ってしまいます。この問題はユーザー定義の引数として"this"へリファレンスを渡すことで解決される一方、メンバの中での'this'の使用を無効化してしまいます。オブジェクトのメソッドをコールバックハンドラとして使い、スコープを保ち続けるには'this'を値に取るコールバック・メンバ・スコープを定義します。
＊書いてることはなんとなく分かるんですけど、うまく説明は出来ません･･･
//コールバックオブジェクト
var callback =
{
success: this.handleSuccess ,
failure: this.handleFailure,
argument: arguments ,
scope: this
}YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com',callback,null);
Success Case
In a success case, an object with the following properties is passed to the callback object's success handler:
成功時には、コールバック・オブジェクト・サクセス・ハンドラに次のプロパティを伴ったオブジェクトが渡されます。
プロパティ 説明 tld トランザクションID status トランザクションの結果のHTTPステータスコード statusText HTTPステータスに付随するメッセージ allResponseHeaders 返ってきたHTTPヘッダ全て。文字列。 responseText サーバーレスポンス。文字列である responseXML サーバーレスポンス。XML DOMオブジェクトである argument コールバックオブジェクト中で定義された、ユーザー定義のメンバ
Failure Case
If the server responds with an error, Connection Manager will try to capture as much information as possible and pass an object to the callback object's failure handler. The properties will be the same as in a success case, except the properties will be defined with values only when they are available.
If the server does not respond, either due to the connection being dropped or closed, there may not be a readable response. If a transaction is terminated in such a manner, the callback object's failure handler will receive an object with the following properties:
失敗した場合
サーバーがエラー応答した場合、Connection Manager はできる限りの情報をキャプチャーしようとします。そして、オブジェクトをコールバック・オブジェクトの失敗時のハンドラに渡します。値が取得可能なときにだけ定義されるという点を除いて、プロパティは成功時と全く同じになります。
もしサーバーが応答しない場合は、接続が切れてるか閉じてるかどっちかのせいで、読み取り可能なレスポンスがないかもしれません。トランザクションがこういうやり方で中断された場合、コールバック・オブジェクトの失敗時のハンドラは次のようなプロパティを伴ったオブジェクトを受け取ります。
プロパティ 説明 tld トランザクションID status 0 statusText "communication failure" argument コールバックオブジェクト中で定義された、ユーザー定義の引数??
Forms
The Connection Manager can automatically perform an HTML form POST by initializing a transaction through the setForm method. By calling this method before initiating the transaction, a POST body is constructed from the named form and submitted to the specified URL. To use this functionality, your HTML form and form elements must have a defined name attribute.
YAHOO.util.Connect.setForm(formName);
var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.yahoo.com', callbackObject);フォーム（から値を取得）
＊Name属性のついたフォームから値を抜き出す
Connection Managerは setForm()メソッドでトランザクションを初期化することによって、HTMLフォームの"POST"機能を自動的に執り行います。setForm()メソッドをトランザクションの初期化前に呼び出すと、POSTのボディをNAMEをつけたフォームの値で構成し、asyncRequest()メソッドで指定したURLに送信します。ちゃんと機能させるには、HTMLフォームとフォーム要素にNAME属性を定義しておかないといけません。
Transaction Status
The isCallInProgress method can be used to determine if an asynchronous transaction has not completed. The method returns true if the transaction is still in progress.
//Initiate an asynchronous transaction.
var cObj = YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com',callback);
//The variable callStatus will be true if the transaction has not been completed.
var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);To abort a transaction in progress, call the abort method and pass the connection object - returned by the original asyncRequest method - as the parameter.
//Initiate an asynchronous transaction.
var cObj = YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com', callback)
//Abort the transaction
YAHOO.util.Connect.abort(cObj);
トランザクション・ステータス
isCallInProgressメソッドは、非同期トランザクションが完了しなかった場合に使われうるものです。このメソッドは、トランザクションがなおも進行中であればtrueを返します。
//非同期トランザクションの開始
cObjはコネクションオブジェクト
var cObj = YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com',callback);
//トランザクションが終わってないなら、返り値はtrueである
var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);進行中のトランザクションを中断するには、abort()メソッドを呼び出し、コネクション・オブジェクトをパラメーターとして渡します。コネクション・オブジェクトとはasyncRequest()メソッドの返り値のことです。
//非同期トランザクションの開始
var cObj = YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com', callback)
//トランザクションの中断
YAHOO.util.Connect.abort(cObj);
Yahoo! UI Librady の訳 まとめ
- Yahoo! User Interface Library 概要
- Yahoo! User Interface Library::Core Utilities
- Yahoo! User Interface Library::UI Controls
