2008-10-01から1ヶ月間の記事一覧
YUIのExampleのページには、あまり基本的で面白い例があがっていないのだが、Connection ManagerはAjaxの肝の部分なので、ここでもYUIのページから離れて、FormをGETメソッドとPOSTメソッドで送る例を作ってみた。まず、以下のようなform要素を含む画面を用…
Jajascriptを使って、クライアントサイド（つまり、ブラウザー上）でXMLをParseするというケースで、一番考えられるのは、マッシュアップだと思う。この場合には、 整形式のXML REST 各種文書からXMLの形式についての情報がえられる。得られない場合は、（正…
先の例では、超簡単な例で、YUIのレスポンスオブジェクトからresponseXMLを取り出してみた。 今回は以下のような、ちょっと複雑だが、マッシュアップするときなどにありがちなデータを取得してみる。 <testdata> <company> <name> ほげほげ（株） </name> <place> ほげほげ県ほげほげ市1-1 </place> <domain> 電気 </domain> <salesman> <sname></sname></salesman></company></testdata>…
先の例では、レスポンスオブジェクトから平文のテキストを取り出してみた。 サーバーからのレスポンスとして、なんらかの「実用的な情報」を取り出す方法として、平文のデータを受け取ることの他に、XMLでデータを受け取ることができる。 RESTデータをマッシ…
昨日は、YUIのConnection Managerについて、そのトップページを概観したが、飽きてきてしまったので、YUIのExampleから離れて、YUIのAjaxの機能を使った簡単なサンプルを作ってみる。 サンプリングするのは、Ajax機能そのもののYAHOO.util.Connect.asyncRequ…
朝の続きで、YUIのConnection Managerのトップページを概観する。 CAllbackオブジェクトとScope 「this」という予約語は、相当に厄介な代物に思われる。 thisやsuperといった予約語は、Javaでは当たり前に使われるが、JavaScritptはそもそも（ページスコープ…
Connection Manegerは、XMLHttpRequestを処理するためのモジュール類（YUIのConnection Managerのページはこちら）。 よく知られている通り、Ajaxは、Asynchuronous Javascript and XMLの略なので、狭義には、このConnection Mangerでハンドルする「in page…
YUIの方は、そろそろXMLHttpRequestをやろうかと思うが、ながいことJavaEEをやっているので、Javascriptのコードはやっぱり戸惑うことが多い、と実感。そもそも、Java2以降、サーバーサイドに多くの開発者が流れて、Javascriptは長いこと「やっかいもの」扱…
クリックする要素が矩形でない場合、ほんとうにその要素をつかんだかどうかを厳密に判別したい場合があると仮定する。このような場合に使用するのが、TAHOO.util.DDによういされたclickValidator()。 YUIのサンプルは、クリックする対象を円（gifで描画され…
2009/6/7 tetsuya_odaka js中のコメントの修正=================================================== このInteraction Groupを用いたExampleも、さきのReordering a Listと同じくタフなExample。 解析してソースに注釈をいれるのに１時間半もかかってしまっ…
この例（Staying in a Region）は、タイトルが示すとおり、以下の図がにある小さい矩形が、同色のキャンバス（canvas）の中だけしか動けない、というものである。 サンプルソースは、意外と地道にかかれていて、キャンバス内を動く要素は、YAHOO.util.DDを継…
さきほどの例（DD: Reordering a List）を見た際、冗長なプログラムと思ったが、以下の画面は、前の例で作成したDDList( YAHOO.util.DDProxyを継承して作成）をまったく変えずに、タグとStyleのみ変更して作成したもの。 List1の中にList2が入れ子になってい…
YUIのDrag and Dropリストを並べ替えるサンプル（サンプルページはこちら）。ソースコードを見ると、いきなり（前のサンプルに比べて）えげつないコードが書かれていることがわかる。 Drag and Dropは、YAHOO.util.DDProxyを継承して作成されたオブジェクト…
Proxy Elementとは、ドラッグされるときに元の要素の代わりとして生成されるオブジェクトのことである。 これを利用することで、元の要素（元のデザイン）を崩さずにDrag and Dropが可能になる。 Proxyは、 dd = new YAHOO.util.DDProxy("element_id"); とい…
以前のログに書いたが、ドラッグされる要素のZ軸は、DDのインスタンス化の順で決定する。この例は、YAHOO.util.DDを継承し、startDrag、endDragメソッドをoverrideして、DragされたエレメントのZ軸が一番上にくるように改造している。 YAHOO.util.DDのAPIド…
YUIに最初に掲示されているサンプルは、３つのDraggableなDivを作成するもの。超基本的ではあるが、サンプリングしておく。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> /* Drag and Dropする要素に共通のスタイル*/ .dd-demo {…</meta></meta></head></html>
Yahoo Developer Networkも機嫌を直したようなので、Drag and Drop(DD)のサンプリング。 DDのトップページを概観。まず、使用するjsファイルは、 <script type="text/javascript" src="scripts/yahoo-dom-event/yahoo-dom-event.js" > </script>
Smartyは、PHPのデファクトのテンプレートエンジン。 MVCでプログラムを書こうと思ったら利用しない手はない。 最新版を本家サイトからダウンロードしてみると、2.6.20が最新版。SmartyのUTF-8対応でちょっとてこずったので、覚書に書いておく。Smarty（2.6.…
PEAR（ペアー）は、PHPのパッケージマネージャー。 PHPをインストール（Windows）すると、PHPのホームディレクトリからgo-pear.batを叩けば、インストールできるようになっている（はず）。 PHP5.2.6では、go-pear.pharが壊れているのかどうか分からないが、…
YUIのサンプリングがしばらくできそうにないので、PHP5.2.6（Windows版）のセットアップについての覚書をのこしておく。YUIなどのAjaxライブラリをつかって、XMLHttpRequestのやり取りをする場合のサーバー側の言語として、PHPを選択した。 これは、単純に「…
dd = new YAHOO.util.DD("dd-demo-1"); でインスタンス化された要素は、その枠内のどこでMousedownしてもDragを開始できる。Handle（YUIのページはこちら）とは、特定の域でMousedownすることにDragの開始を制限する方法である。 Handleには、InnerhandleとO…
次のサンプルは、YAHOO.util.Scroll。 これも、YAHOO.util.Animの子孫。overflowしている要素中の子要素（たとえば、divで囲まれた「文章」など）があったときに、イベントで、子要素の位置を指定した場所まで移動する。これもサンプルがつまらないので、実…
この例は、div要素の矩形に「変わった動き」を与えるやり方を示している。このために、YAHOO.util.Motionオブジェクトに与える属性オブジェクト(attributes）にcontrol pointという座標を定義する。 そのためには、attributeオブジェクトを var attributes =…
YAHOO.util.Motionは、要素をスムーズに移動させるためのオブジェクト。Exampleのページにある例がつまらないので、調査もかねて、ちょっと変えてみた。 YAHOO.util.Motionオブジェクトを使うには、「移動目的地」をあらわすattributesオブジェクトを var at…
先の「Chaining Animations Using onComplete」でも出てきたYAHOO.util.ColorAnimのExample。 AnimationのTopページで書かれているが、Yahoo.util.Animの子孫らしい。サンプルとして挙げられているのは、簡単。 以下にソースを示す。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> </meta></meta></head></html>
このExampleは、AnimのonCompleteイベントのサンプル。 ソースを覗いてみると、YAHOO.util.ColorAnimとYAHOO.widget.Buttonのサンプルにもなっている。 これらについては、簡単に以下のソースコード中にメモを記入。また、JavaScriptの発動をbody中の最後の…
どうやら、今日はデベロッパーネットワーク（Yahoo Developer Network）の機嫌が悪いようだ。 4:00頃に1回アクセスできたきり、その後、403 Forbiddenが戻ってきてしまう。しばらく様子をみてみましょう。とインターネットをぶらぶらしていると、マイコミジ…
次のExample、 Using Custom Units for an Animation(これ)は、属性（attributes）で単位（unit）を指定するだけなので、とばして、Animating Multiple Attributeへ。この例は、複数の属性を指定するというだけなので、easingを変えて、動きを少し変更してみ…
次のサンプルは、タイトル通り、属性（attributes）にfrom属性をつけたもの。簡単なサンプルなので、動きを２つ足してみた。 これで、ボタンクリックでのスライドイン/アウトが可能になる。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> #demo { ba…</meta></meta></head></html>
class名より、要素をオブジェクトとして抽出するメソッド。 引数として、親要素、ルート要素を指定できる。getElementByIdの拡張といえるが、getElementsByClassName とあるように、戻り値はArrayになる。 （getElementByIdの場合、該当する先頭要素のみが戻…
