CakePHP 1.2 で Dojo Toolkit を使ってみた。
全てのページで必要ではないので、layout の scripts_for_cake 変数を使います。
CakePHP Users in Japan フォーラム scripts_for_layoutとは？
試しに Dijit のポップアップカレンダー付き日付入力テキストボックス(dijit.form.DateTextBox)を使ってみます。
Dojo 配置
Dojo を app/webroot/js 以下に配置します。今回は、dojo というディレクトリを掘りました。
app
└─webroot
└─js
└─dojo
├─dijit
├─dojo
├─dojox
└─util
dojo.js と CSS 読み込み
テンプレートに以下を追加します。全てのページで Dojo を必要とはしていないので、 layout ではなくテンプレートに記述して、scripts_for_cake メカニズムを使います。
<?php
$html->css('../js/dojo/dijit/themes/tundra/tundra', 'import', array(), false);
$html->css('../js/dojo/dojo/resources/dojo', 'import', array(), false);
$this->addScript('<script type="text/javascript" src="/絶対URL/js/dojo/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>');
$javascript->codeBlock(' dojo.require("dijit.form.DateTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them', array('inline' => false));
?>
Javascript ヘルパの link では、大事な大事な djConfig が設定できなかったので addScript を使いました。弊害として、src 属性に絶対 URL を書かなければいけなくて、なんともかっこ悪い。
フォームにインプット要素を記述
他の form ヘルパの要素と混在可能です。
<?php echo $form->label('created.min', '登録日'); ?>
<input name="data[Moderu][created][min]" type="text" value="<?php echo $this->data['Moderu']['created']['min'] ?>" id="UsrpramCreatedMin"
dojoType="dijit.form.DateTextBox"
constraints="{min:'2003-01-01',max:'2013-12-31',datePattern:'yyyy/MM/dd'}"
promptMessage="登録日の検索範囲"
trim="true" />注意点
これで、そこそこ表示されますが、落し穴が2点ほど
- layout の body タグに dijit テーマの class 属性が必要。
今回は、tundra を使っているので<body class="tundra">としないとかっこよくならない。 - CSS の基本セレクタが衝突。 cake.generic.css を一部変更して使っていると妙な表示(今回の場合、input ボックスの高さが異常にでかかった)になりました。
form divセレクタを削除して対処しました。
ｄｊConfig や constraints などをうまく扱うためには、やはりヘルパが欲しいところです。
0 件のコメント:
コメントを投稿