Ajax
2009/4/22; Javascriptがバグっていたので修正。 2009/4/22; Javascriptのコメント行を修正。 - 2009/4/21; Javascriptがバグっていたので修正。 - 前回のログで、Javascriptの簡易バリデータ（MyValidator.js）を作成してみた。 クライアントサイドでのバリ…
YUIのExample「Logger Control: Using LogWriter」へのリンク 先の「Logger Control: Using LogWriter（その１）」の、LogReaderは体裁はいいのだが、実用面ではちょっとうまくない。 開発のステージではいいが、稼動させたアプリケーションの画面に、LogRea…
YUIのExample「Logger Control: Using LogWriter」へのリンク YUIのExampleの順を逆に行くようだが、Log4j(Java)、PEAR::Log(PHP)のようなLoggerを使い慣れた人には、（YUI Loggerの概要が１つのサンプルで分かるので）このサンプルから入るのが手っ取り早い…
YUIのExample「Browser History Manager: TabView Control」へのリンク YUIには、Browser History Managerという変わった機能がある。このサンプルは以下のようにTabviewを使った例となっている。 ここで、上の画面には現れていないが、ブラウザーのURLが ht…
YUIのExample「AutoComplete Control: Custom Function to Search Different Fields at Runtime」へのリンク このExampleは、AutoCompleteを実装するにあたって、 サーチをする関数を自作する（カスタム・サーチ） AutoCompleteの候補を表示するフォーマット…
YUIのExampleページ「AutoComplete Control: Tagging Example with alwaysShowContainer」へのリンク タイトルでいうTaggingとは「タグ・クラウド(Tag Cloud)」でいう意味のタグである。 フォークソノミー（folksonomy）という面白い言葉が「発明」されて、W…
友人のmezawa氏から、dwr20.dtdの読み込み速度についてご指摘をいただいた。このログでは、DWRのホームページからダウンロードできるdwr.warを元にサンプリングを行ってきたが、dwr.xmlの先頭に記述している では、読み込みに時間がかかるので、
先のログ「DWR: Javaオブジェクトを画面の要素にマップする」で、「（DWRでマップする）Objectの型に合わない入力をすると例外（org.directwebremoting.extend.MarshallException）が発生する」と書いた。この場合、「Error」と書いたAlertボックスがポップ…
DWRでは、サーバーにあるjavaオブジェクト（POJO）と画面要素を透過的にMapすることができる。dwr.warの「Editable Table」がこのサンプルにあたるが、サンプルには完全なコード（java）が付属していない。 コードを補完しようとしたところ、動かずに手こず…
先の「DWR: サーバーからHTMLファイルを取得する」のサンプルで、「日本語のHTMLを差し込むと文字化けする」と書いた。この問題は、ServletContextDemo.java（コードの全文は「DWR: サーバーからHTMLファイルを取得する」を参照）の // WebContext(if)はServ…
前回のログ（「Direct Web Remoting」）に引き続き、dwr.warにあるサンプルをみていく。今回は、非同期に、ウェブ・アプリケーション・サーバー（以下、サーバー）からHTMLファイルを取得するサンプル（dwr.warにある「Resource Forwarding」Example）。少し…
DWRは、サーブレット環境で稼動するAjaxツール。そのサンプリングを始めるにあたり、ようやく辿りついた、との感慨深い。 Ajaxが流行り始めた頃、（残念ながら廃刊になってしまった）「Javaワールド」誌を休暇中の旅先に持っていった。 JavaでAjax（XHR;XMLH…
YUIのExample「AutoComplete Control: Combo Box」へのリンク このExampleの画面は下。 入力フィールド（inputタグ）には、AutoCompltetが機能がついている。 そして、入力フィールドの脇のボタンを押すと、下のように「AutoCompleteで使われるリスト」が、…
YUIの「AutoComplete Control: Searching Field A, Submitting Field B with itemSelectEvent」へのリンク このサンプルでは、AutoCompleteで選択した項目（item）とセットになっている情報を、「itemを選択したというイベントで取得する」方法が示されてい…
YUIのExample「AutoComplete Control: Custom Formatting, with a Proxyless Remote DataSource」へのリンク 2009/4/11追記；Yahoo Video Serch APIが廃止になってしまったため、Official ExampleはFlickrから画像を取得するものに変更になっている。 変更点…
YUIのExample「AutoComplete Control: Customizing Remote Requests」へのリンク このExampleでは、サーバーにあるPHPプログラムをProxyにして、YAHOO! WebSerach(V1)からAutoCompleteの候補を取得している。 タイトルにCustomizingとあるのは、WebSearchへ…
せっかくAPIキーを取得したので、Google Map APIを使ってみる（Google Map APIのトップページへのリンク）。Google Map APIを使ったページを書くには、「Google Map APIを使ってみる（その１）」で紹介した、※２の画面のサンプルをコピペして、改造するのが…
以下は手順。 1. Google CodeからAPIキーを取得する Google Map APIを使うためには、ドメイン名、もしくは、ドメイン＋ディレクトリ名（URLが"http://xxxx@yyy/zzz/www.html"だとすると、"http://xxxx@yyy"、もしくは、"http://xxxx@yyy/zzz/"）でAPIキーを…
YUIのExample「AutoComplete Control: Basic Remote Data」へのリンク このサンプルでは、HTTPサーバー配下にあるPHPプログラムからテキストデータを取得して、AutoCompleteを行う。 このPHPプログラム（ysearch_flat.php）は、内部にテキストデータを抱えて…
YUIのExample「AutoComplete Control: Basic Local Data」へのリンク AutoCompeteとは、画面への入力中に、その候補を（次々と）自動的に拾って表示する機能のこと。 このようなsuggestionをしてくれるアプリケーションが多くなった。YUIのAutoCompleteのTOP…
世間をサプライズさせることに関して、Googleのような役者は他にいないのだろうと思う。 時代の時々で、世間の注目を集める技術は違うのだと思うが、ことインターネットの領域に関しては、右に出る役者はいない。Google Mapを発表したときは、「なんで、一イ…
YUIのExample「DataTable Control: Complex Example of Multiple Features」へのリンク このExampleは、これまでのExampleでやってきた、いくつかの要素を組み合わせた例。 state列でのソーティングは、「DataTable Control: Client-side Sorting」でやった…
YUIのExample「Paginator: Configuring the Paginator」へのリンク YUI.widget.Paginatorについては、親切というかなんというか、「バラバラに解体しちゃう」ようなExampleがあってありがたい。このExampleの画面は下。 このExampleの説明にはこう書いてある…
YUIのExample「Paginator: Manually rendering Paginator UI Components」へのリンク タイトルのManually Renderingとは何を指すのか、と思ってしまうが、このExampleの説明は以下のように書かれている。 If you have a UI where it doesn't make sense to p…
YUIの「Paginator: Getting started with Paginator」へのリンク このExampleでは「Markupで記述した文章をYUI.widget.Paginatorを使ってページ変えする」機能が実装されている。 この「Markupで記述した文章を」という部分は大切なところで、YUI.widget.Pag…
YUIの「DataTable Control: Highlighting Cells, Rows, or Columns」へのリンク このExampleでは、セル、行、列をハイライトする方法が示されている。 画面は以下のように、3つのテーブルがならんでいて、それぞれ、 CellにMouseOverするとハイライトされる …
YUIのExample「DataTable Control: Showing, Hiding, and Reordering Columns」へのリンク 先の「DataTable Control: Showing, Hiding, and Reordering Columns（その１）」では、列のDrag and Dropだけに着目したが、ここでは、YUIのExampleそのものについ…
YUIのExample「DataTable Control: Showing, Hiding, and Reordering Columns」へのリンク このExampleは、いくつかの要素が絡み合っている。 YUIのExampleは、大きく 列をDrag and Dropで移動する。 ダイアログボックスを表示して、列の表示・非表示を選択…
YUIのExample「DataTable Control: Context Menu Integration」へのリンク これもAjaxらしい、触って楽しいExampleとなっている。 テーブルのある行にカーソルを合わせて、右クリックすると、OSライクなメニュー（コンテキスト・メニュー；Context Menu）が…
YUIの「DataTable Control: Inline Cell Editing」へのリンク このExampleは、触っていて面白い。 「テーブルのセルをブラウザー上で編集しましょう」という例なのだが、こういうのを触っていると、Ajaxだなぁ、という気になる。編集方法もいろいろ。 以下は…
