jQuickForm = PHPのフォームジェネレーター(大きな更新)

動機付けの例

jQuickFormの誕生の発表から数日が経ちました (一言で言えば、jQuickFormはjQuery + HTML_QuickForm2アセンブリです)。

を含む多くの肯定的なレビューを受け取りました PMでは、プロジェクトのWebサイトへの多くの訪問者が「LikeIt」と言いました。これは、作業が必要でタイムリーであることを示唆しています。

したがって、今日、jQuickFormのほとんどすべての明示的および秘密の機能が説明されていることを伝えたいと思います。



アイテム



InputTextInputPasswordDate (日付選択、タイプselectのいくつかの要素で構成される)、 DatePicker (jQueryUI)、 Slider (jQueryUI-“ slider”)、 SliderRange (jQueryUI-値の範囲)、 SelectButtonsTextareaPage (構築用の要素)マルチページウィザード)、 Static (任意のHTMLを挿入するためのフォーム要素)、 jWysiwyg (最も単純なエディター)、 Autocomplete One Array (単一値と配列転送を使用した初期化によるオートコンプリート )、 Autocomplete One Remote (同じですが、ソースはajaxスクリプトです) )、カンマで区切られた複数の値を持つオートコンプリート複数のアレイ (avtokomplitが使用され、例えば、形成されています ニアWeb 2.0のラベル、元のリスト- )リモートソースを持つ配列)、 オートコンプリート複数のリモート (同じ、 ファイルのアップロード (通常のファイルアップロード要素)、および、視聴者の要請で- MultiUploadファイル





アイテムのグループ化



これは一般的に歌です! すべてのフォーム要素はノードとコンテナです。 実際、コンテナもノードですが、他のノードを含めることができます。

HTML_QuickForm2で最も重要なことは、無制限のネストでグループを相互に追加できることです。

さらに、InputTextタイプの2つの要素(first_name、last_name)をグループに追加し、グループの名前「group_name」を指定すると、これらの要素はそれぞれ「group_name [first_name]」および「group_name [last_name]」という名前を自動的に取得します。

名前がグループに追加されない場合、視覚的に要素をグループ化して同じ行に配置できますが、元の名前は「first_name」、「last_name」です



検証ルール



検証ルールはサーバーとクライアントに明確に分かれており、ルールを設定するときに、チェックを実行する場所と、HTML_QuickFormの最初のバージョンにデフォルトでサーバーチェックがあり、常に実行されていて、クライアントがオプションである場合、2番目のバージョンで明示的に指定できますクライアント検証のみを行う機能。

すぐに使えるルール:

「必須フィールド」、「最小」、「最大」、「一致」、「一致しない」、「厳密に少なく」、「これ以上」、「厳密に多く」、「少なく」、「グループ内の全員」。 「空」

「空ではない。」

原則として、ルールを検証する原理は名前から明らかです。「グループの全員」というルールに言及したいと思います。これは、要素のグループ(グループはコンテナの亜種)に対して、各要素で実行するチェックを示すために行われます。



フォームフィールドフィルター



HTML_QuickForm2のフィルター-これは、次のように、目的のビューに要素を自動的にキャストする機能です。

<?

$element->addFilter( 'trim' );

?>




* This source code was highlighted with Source Code Highlighter .






関数名またはフィルタークラスメソッドの名前がパラメーターとして渡されます。

ユーザーがそこに書いたものに関係なく、POSTの後に来るフィールドの値が整数であることを保証するには、フィルターを適用する必要があると正しく推測しました。

<?

$element->addFilter( 'intval' );

?>




* This source code was highlighted with Source Code Highlighter .








フィルタリングはあなたの想像力によってのみ制限されます。



データソース



フォームジェネレータのアナウンスで見逃し、コメントで答えたもう1つの重要な質問は、フォームを最初に表示する前に記入することです。

たとえば、編集用のニュースを受信すると、連想配列のエントリがあります。

<?

$form = new jQuickForm( 'simple' );

$fieldset = $form->insertFieldset( ' ' );

$fieldset->insertInputText( 'news_title' )

->setLabel( ' ' )

->setExample( ' ' );



$fieldset->insertTextarea( 'news_text' )

->setLabel( ' ' )

->setCols(50)->setRows(5);



$form->insertInputSubmit( ' ' );



// -

$form->addDataSource(

new HTML_QuickForm2_DataSource_Array(array(

'news_title' => ' №1' ,

'news_text' => " №1" ,

)

));



?>




* This source code was highlighted with Source Code Highlighter .






原則としてほとんど必要ないデータのソースは他にもありますが、サイトでその使用例を見つけることもできます。



フォームの外観のカスタマイズ



HTML_QuickForm2のもう1つの主な機能は、フォームをレンダリングするルーチン作業が削減されることです。各要素または要素のコンテナーの標準テンプレートは、デフォルトでレンダラーに既にあります。

しかし、最も興味深いのは、フォーム要素やフォーム自体のレンダリングを簡単にオーバーラップできることです!



2つの方法があります。

1)CSSを使用する(スタイルシートに数行追加するだけで、inline-cssを変更できます)

2)特定の要素テンプレートを変更する



実施例



それがどのように機能するかを理解するためにフォームで何か現実的なことをするように頼まれました、私は簡単な動機付けの例を作成しまし



ところで、SWFアップロード要素をフォーム要素の数に追加すると、1つの不快な機能が明らかになりました。

アップロードが公開されておらず、ほとんどの場合、誰も許可されていないユーザーにアップロードを許可しない場合、フラッシュドライブでダウンロードにファイルを順番に送信すると、フラッシュの新しいセッションが開始されます。セッション識別子をアップロードスクリプトに転送するメカニズム。これにより、現在誰が実際にファイルをアップロードしているかを把握できます。

さて、セッション識別子の値のなりすましに対する保護の実装は、コンテンツ管理システムの良心に任せます。



JQuickFormと一部のPHPフレームワークとの統合



初期化:


これは、たとえば/index.phpなどのアプリケーションの開始時に、または構成などのより適切な場所で行うことができます。

<?

//

require( 'vendors/__autoload.php' );



header( 'Content-Type: text/html; charset=utf-8' );

date_default_timezone_set( 'Europe/Moscow' );



//

Jaguar::css()->addCss( '//quickform.css' );



// js- ,

//

Jaguar::js()->addJs( '/js/quickform.js' );

?>




* This source code was highlighted with Source Code Highlighter .








テンプレートを作成する


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head profile ="http://gmpg.org/xfn/11" >

< title > jQuickForm </ title >

< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />

<? php echo $ jquickform- > css; ? >

<? php echo $ jquickform- > css_inline; ? >

</ head >

< body >

<? php echo $ jquickform- > form; ? >

<? php echo $ jquickform- > js; ? >

<? php echo $ jquickform- > js_inline; ? >

<? php echo $ jquickform- > js_onload; ? >

</ body >

</ html >




* This source code was highlighted with Source Code Highlighter .








適切な場所に任意の形状を作成します。


<?

$form = new jQuickForm( 'simple' );

$fieldset = $form->insertFieldset( ' compare' );

$pass = $fieldset->insertInputText( 'pass' )

->setLabel( '' )

->setComment( ' ' );

$pass->addRuleRequired( " " );



$repass = $fieldset->insertInputText( 'pass' )

->setLabel( ' ' )

->setComment( ' ' );

$repass->addRuleCompareEq( " " , $pass);

$fieldset->insertStatic( '

" " '
);



$captcha= $fieldset->insertInputText( 'captcha' )

->setLabel( 'Captcha' )

->setComment( ' 2+2=?' );

$captcha->addRuleCompareEq( " " , "4" );



$fieldset->insertInputSubmit( 'Post!' , 'save' );

?>




* This source code was highlighted with Source Code Highlighter .








フォームを表示します(Zend_Frameworkの例)


<?

$jquickform = array(

'css' => Jaguar::css()->getCss(),

'css_inline' => Jaguar::css()->getCssInline(),

'js' => Jaguar::js()->getJs(),

'js_onload' => Jaguar::js()->getJsOnload(),

'js_inline' => Jaguar::js()->getJsInline(),

'form' => $form,

);



Zend_Loader::loadClass( 'Zend_View' );

$view = new Zend_View();

$view->jquickform = $jquickform;



echo $view->render( 'page.php' );

?>




* This source code was highlighted with Source Code Highlighter .








フォームを表示する(Kohanaの例)


<?

$ this ->template = new View( 'module/page' );

$ this ->template->jquickform->css = Jaguar::css()->getCss();

$ this ->template->jquickform->css_inline = Jaguar::css()->getCssInline();

$ this ->template->jquickform->js = Jaguar::js()->getJs();

$ this ->template->jquickform->js_onload = Jaguar::js()->getJsOnload();

$ this ->template->jquickform->js_inline = Jaguar::js()->getJsInline();

$ this ->template->jquickform->form = $form;

?>




* This source code was highlighted with Source Code Highlighter .








最後に、統合のアドバイス!



私はすでに質問をされています-なぜ私はすべてを別々のライブラリに入れず、すべてをサイトの形でヒープに入れましたか。

私は答えます-そのため、SVNから配布キットをダウンロードまたは「引き出す」ことにより、ここで調整することなく作業中にそれを見ることができます。

結局のところ、作成者がクイックスタートの面倒を見てくれなかったので、新しいものを起動するのに非常に時間がかかることがあります。

言い換えれば、これはプローブです。



作業中のアプリケーションに「プローブ」をドラッグしないために、次の操作を行うことを提案します(初心者でもアドバイスを活用できるように、手順を詳しく説明します。知識のある人はスキップできます)。



1)SVNからディスク上の任意の一時ディレクトリ(c:/ jquickformなど)に最新バージョンを取得します。



2)「vendors」および「js」ディレクトリをSubversionユーティリティファイルとともにサイトのルートにコピーします! たとえば、/ home / site.ru / www / vendors /では、/ home / site.ru / www /はプロジェクトのDOCUMENT_ROOTです



3)上記の指示に従って、jQuickFormをフレームワークに統合します。



4)時々、「vendors」および「js」ディレクトリのsvn updateを実行して、常に最新バージョンを保持します。



ダウンロードjQuickForm



SVNからテスト用のjQuickFormを選択できます

svn co jquickform.googlecode.com/svn/trunk jquickform

ここからアーカイブをダウンロードしてくださいcode.google.com/p/jquickform/downloads/list



ご清聴ありがとうございました!



All Articles