Javascript
先のログで、DataTableのセルエディタ（Cell Editor）についてバリデータを自作してみた。ここで一点気になるのが、表の同一行内の値との「相関チェック」をどうするか？ということ。先のログのバリデーションでは、「そのセルの値」のみがチェックの対象。…
今回は、DataTableの「セルエディタ（Cell Editor）に設定するバリデータ（validator）」を自作してみる。YAHOO.widget.DataTable.validateNumberのソースを見ると、以下のように書けばいいことがわかる。 引数として入力値をとる関数 引数を検証し、OKならo…
簡単な入力フォームのバリデーション（入力検証、入力制限）について書いてきたが、編集可能なテーブルについても同様な処理をしたい。YUIのDataTableはよく出来ているので、バリデーションからサブミットまでのプロセスの雛形を作っておいても損はなさそう…
2009/5/26 Javascriptを更新しました。（こちら）================================= ちょっとしたアプリを作るのも一通りの道具がいる。 数年前、Ajaxが流行ったときも、Mashupだのなんだのと作ってサイトを立ててみたりしたが、キチンと道具を用意しなかっ…
2009/5/27 ; 機能追加しました。（こちら）=========================== クライアントサイド（＝Javascriptのみ）での禁則処理を書いてみたので、同じ検証をAjax(XMLHttpRequest)を経由してサーバーサイドでの検証の書いてみた。 実際には、こっちを使うこと…
前回の戦略に沿って、コードを書いてみた。サンプルの初期画面は以下。 戦略通りに、テキスト入力フィールドには、グレーで入力ガイドを書いている。 以下のスクリーンショットは、入力途中でバリデーションがかかったところ。 入力して、次の入力フィールド…
地味ーに、バリデーションのコードを書いてきたが、超簡単にフォーム入力＆バリデーション（入力検証、入力制限）＆サブミットできるとうれしい。コンセプトは、 フォームに（簡単なルールで）inputタグを書くと、自動的にバリデーションがくっついて、サブ…
教科書を読むと、ブラウザーロケールを取得をするには以下のようなコードを書けばいいという。 if (window.navigator.language){ // for FF, Chrome, Safari _locale = window.navigator.language.toLowerCase(); } else if (window.navigator.userLanguage)…
前回のログのサンプルを改造して、MyValidator.class.phpを使った以下の仕様のサンプルを作った。 入力フィールドと（それに対応する）ボタンを複数個配置する。 ボタンのイベントハンドラを汎用化して、いちいち指定しなくてもいいようにする。 こうすると…
2009/4/22; Javascriptがバグっていたので修正 2009/4/22； Javascriptのコメントを修正 - MyValidator.class.phpを使って、ボタンを押すと特定の入力フィールドを検証するコードを書いてみる。画面の初期イメージは以下。 MyValidatorでは、日付の入力形式…
2009/4/22; Javascriptがバグっていたので修正。 2009/4/22; Javascriptのコメント行を修正。 - 2009/4/21; Javascriptがバグっていたので修正。 - 前回のログで、Javascriptの簡易バリデータ（MyValidator.js）を作成してみた。 クライアントサイドでのバリ…
2009/4/20: html（２つ目のソース）をちょっと修正 - 現在、簡単なアプリケーションを作ろうとしているのだが、クライアントサイドで簡単なバリデーション（入力検証、入力制限）を行う適当なツールが見当たらない。 こちらのサイト（Gigazineさんの記事）に…
以前から連載しているYUI2.6.0のサンプルだが、もたもたしているうちに2.7.0がダウンロードできるようになった。element.jsがbetaからstableになったようで、element-beta.jsはelement.jsに変更しなくてはならない。大体動くように見えるのだが、YAHOO.util.…
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そのものについ…
