YUI
YUIも2.8.1。以前に書いたログと同じことを日本語で実装したくて、XHRDataSourceを使って書いたのだがうまくいかない。前にログを書いていたときのYUIのバージョンは2.6だった。仕様は簡単で、以下の初期画面で「カタカナ」で書かれた商品名を入力する。 す…
以前、「これまで書いてきたログをまとめている」と書いた。ようやく、ある程度の格好になったので、SourceForge.jpでリリースにこぎつけた。このログにしばしば登場するmezawa氏とは、昨年より「EzoGP（えぞ・じー・ぴー）」というOSSプロジェクトを立ち上…
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…
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へ…
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…
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だなぁ、という気になる。編集方法もいろいろ。 以下は…
YUIのExample「DataTable Control: Cell Selection」へのリンク このExampleでは、3種類のセルの選び方について、その作成方法が説明されている。（下図） Cell−Blockでの選択；先頭となるセルと、終端となるセルを指定して、それらが生成するブロック内のセ…
YUIの「DataTable Control: Row Selection」へのリンク このExampleでは、テーブルの行を選択するサンプルが２つ示されている。 上から 標準形式(Standard-type)といわれるもの。クリックして選択後に、Ctrl+クリックでマルチな選択ができる。 シングル形式(…
YUIのExample「DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling」へのリンク このExampleでは、下の図のような縦、横、もしくはその両方の幅が固定された、スクロールするテーブルの作成方法が説明されている。 YUIのExampleでは、XY軸の両…
YUIの「DataTable Control: Server-side Pagination and Sorting for Dynamic Data」へのリンク この例の画面は以下。 見た目は先の「DataTable Control: Client-side Pagination」と変わらないのだが、タイトルがServer-side Paginationと、Client-side Pag…
YUIのExample「DataTable Control: Client-side Sorting」へのリンク このExampleには、Client-side Sorting（クライアント=scriptでのソート）という紛らわしい名前がついているが、「ソーティングをカスタマイズする」方法を説明するものである。サンプル…
YUIのExample「DataTable Control: Client-side Pagination」へのリンク Paginationという聞きなれない言葉は、下図のような表現によって（テーブルの）ページへの遷移を効率化することをさす。 タイトルにClient-sideとあるのは、クライアント（＝Script）…
YUIのExample「DataTable Control: Adding and Deleting Rows」へのリンク このExampleでは、ボタンのクリックでテーブルの行を増減させる方法が示されている。 初期画面は以下。 YUIのExampleでは、テーブルの行が０の時（テーブルが空の時）、「No records…
YUIのExample「DataTable Control: Local XML Data」へのリンク このExampleでも、また、以下のようなテーブルを作成する。 以前のExample「DataTable Control: XML Data Over XHR With POST」では、DataSourceで定義するソースとして、YAHOO! Local Search…
