Zend_Dojo-View-Dojo.xml 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- Reviewed: no -->
  3. <!-- EN-Revision: 17987 -->
  4. <sect2 id="zend.dojo.view.dojo">
  5. <title>dojo() ビューヘルパー</title>
  6. <para>
  7. <methodname>dojo()</methodname> ビューヘルパーは
  8. Dojo 環境のセットアップを簡単に行うためのものです。
  9. 次のような機能があります。
  10. </para>
  11. <itemizedlist>
  12. <listitem><para>CDN あるいはローカルパスのどちらの Dojo
  13. を使用するかの指定</para></listitem>
  14. <listitem><para>カスタム Dojo モジュールへのパスの指定</para></listitem>
  15. <listitem><para>dojo.require 文の指定</para></listitem>
  16. <listitem><para>使用する dijit スタイルシートテーマの指定</para></listitem>
  17. <listitem><para>dojo.addOnLoad() イベントの指定</para></listitem>
  18. </itemizedlist>
  19. <para>
  20. <methodname>dojo()</methodname> ビューヘルパーの実装は、
  21. プレースホルダの実装の一例です。
  22. 中で扱うデータセットはビューオブジェクトを超えて永続化され、
  23. レイアウトスクリプトから直接 echo することができます。
  24. </para>
  25. <example id="zend.dojo.view.dojo.usage">
  26. <title>dojo() ビューヘルパーの使用例</title>
  27. <para>
  28. この例では、ローカルパスの Dojo を使うことを想定しています。
  29. またいくつかの dijit を使い、Tundra dijit テーマを使用するものとします。
  30. </para>
  31. <para>
  32. 多くのページでは、開発者は Dojo をまったく使用しません。
  33. そこで、Dojo が必要となるビュースクリプトやレイアウトスクリプトだけに注目し、
  34. そこで Dojo 環境を用意してレンダリングすることにします。
  35. </para>
  36. <para>
  37. まず、ビューオブジェクトに Dojo ビューヘルパーのパスを教えてやる必要があります。
  38. これは、起動ファイルあるいは初期に実行されるプラグインで行います。
  39. ビューオブジェクトを取得して次のコードを実行しましょう。
  40. </para>
  41. <programlisting language="php"><![CDATA[
  42. $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
  43. ]]></programlisting>
  44. <para>
  45. 次はビュースクリプトです。今回の例では、
  46. FilteringSelect を使うことにします。
  47. これは QueryReadStore を継承したカスタムストアを使用します。
  48. 今回の例ではこれは 'PairedStore' という名前で、
  49. 'custom' モジュールに格納します。
  50. </para>
  51. <programlisting language="php"><![CDATA[
  52. <?php // FilteringSelect 用のデータストアの設定 ?>
  53. <div dojoType="custom.PairedStore" jsId="stateStore"
  54. url="/data/autocomplete/type/state/format/ajax"
  55. requestMethod="get"></div>
  56. <?php // 入力要素 ?>
  57. State: <input id="state" dojoType="dijit.form.FilteringSelect"
  58. store="stateStore" pageSize="5" />
  59. <?php // 必須 dojo 要素の設定
  60. $this->dojo()->enable()
  61. ->setDjConfigOption('parseOnLoad', true)
  62. ->registerModulePath('custom', '../custom/')
  63. ->requireModule('dijit.form.FilteringSelect')
  64. ->requireModule('custom.PairedStore'); ?>
  65. ]]></programlisting>
  66. <para>
  67. レイアウトスクリプトでは、
  68. まず Dojo が有効になっているかどうかを調べ、
  69. 有効ならさらに設定を行ってそれを使用します。
  70. </para>
  71. <programlisting language="php"><![CDATA[
  72. <?php echo $this->doctype() ?>
  73. <html>
  74. <head>
  75. <?php echo $this->headTitle() ?>
  76. <?php echo $this->headMeta() ?>
  77. <?php echo $this->headLink() ?>
  78. <?php echo $this->headStyle() ?>
  79. <?php if ($this->dojo()->isEnabled()){
  80. $this->dojo()->setLocalPath('/js/dojo/dojo.js')
  81. ->addStyleSheetModule('dijit.themes.tundra');
  82. echo $this->dojo();
  83. }
  84. ?>
  85. <?php echo $this->headScript() ?>
  86. </head>
  87. <body class="tundra">
  88. <?php echo $this->layout()->content ?>
  89. <?php echo $this->inlineScript() ?>
  90. </body>
  91. </html>
  92. ]]></programlisting>
  93. <para>
  94. これで、各ファイルが正しい場所にありさえすれば
  95. FilteringSelect を使った処理ができるようになりました!
  96. </para>
  97. </example>
  98. <sect3 id="zend.dojo.view.dojo.declarative">
  99. <title>プログラム的 (Programmatic) および宣言的 (Declarative) な Dojo の使用法</title>
  100. <para>
  101. Dojo の機能の多くは、<emphasis>宣言的 (declarative)</emphasis>
  102. な方法および <emphasis>プログラム的 (programmatic)</emphasis>
  103. な方法の両方で使用することができます。
  104. <emphasis>宣言的</emphasis> な使用法とは、
  105. 標準の HTML 要素に対して非標準の属性を指定し、
  106. ページの読み込み時にそれをパースするというものです。
  107. これは強力でシンプルな構文のため使用しやすいのですが、
  108. ページの検証時に問題を起こす可能性があります。
  109. </para>
  110. <para>
  111. <emphasis>プログラム的</emphasis> な使用法とは、
  112. 既存の要素を ID もしくは <acronym>CSS</acronym> セレクタで取得し、
  113. それを Dojo の適切なオブジェクトのコンストラクタに渡すというものです。
  114. 非標準の HTML 属性を使うことはないので、ページの検証はうまくいきます。
  115. </para>
  116. <para>
  117. 実際のところ、どちらの手法を用いたとしても、
  118. javascript が無効になっていたり
  119. Dojo スクリプトリソースが使用できなかったりした場合に機能が低下してしまいます。
  120. 標準規格とドキュメントの検証を優先させるため、Zend Framework
  121. ではプログラム的な使用法をデフォルトとしています。
  122. さまざまなビューヘルパーが javascript を生成してそれを
  123. <methodname>dojo()</methodname> ビューヘルパーに渡し、レンダリング時に読み込むのです。
  124. </para>
  125. <para>
  126. この方法を使うと、さまざまなオプションを使用して
  127. プログラム上で独自のデコレーションを行うことができます。
  128. たとえば dijit イベントのハンドラを指定することなども可能です。
  129. </para>
  130. <para>
  131. そのために、宣言的な構文の機能以外にも多くの静的メソッドが用意されており、
  132. 全体の振る舞いを設定することができます。
  133. </para>
  134. <example id="zend.dojo.view.dojo.declarative.usage">
  135. <title>宣言的、あるいはプログラム的な Dojo の使用法の指定</title>
  136. <para>
  137. 宣言的な使用法を指定するには、静的メソッド
  138. <methodname>setUseDeclarative()</methodname> をコールします。
  139. </para>
  140. <programlisting language="php"><![CDATA[
  141. Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
  142. ]]></programlisting>
  143. <para>
  144. プログラム的な使用法を指定するには、静的メソッド
  145. <methodname>setUseProgrammatic()</methodname> をコールします。
  146. </para>
  147. <programlisting language="php"><![CDATA[
  148. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic();
  149. ]]></programlisting>
  150. <para>
  151. 独自のプログラム的なルールを作成したい場合は、
  152. プログラム的な使用法を指定する際に値 '-1'
  153. を渡す必要があります。この場合、
  154. dijit を装飾するための javascript は生成されません。
  155. </para>
  156. <programlisting language="php"><![CDATA[
  157. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(-1);
  158. ]]></programlisting>
  159. </example>
  160. </sect3>
  161. <sect3 id="zend.dojo.view.dojo.themes">
  162. <title>テーマ</title>
  163. <para>
  164. Dojo では、dijits (widgets) 用のテーマを作成することができます。
  165. テーマを選択するにはモジュールパスにそれを渡します。
  166. </para>
  167. <programlisting language="php"><![CDATA[
  168. $view->dojo()->addStylesheetModule('dijit.themes.tundra');
  169. ]]></programlisting>
  170. <para>
  171. モジュールパスの検索は、'.' をディレクトリ区切り文字として使用し、
  172. リストの最後の名前を <acronym>CSS</acronym> ファイルと見て行います。上の例では、Dojo は
  173. 'dijit/themes/tundra/tundra.css' のテーマを探します。
  174. </para>
  175. <para>
  176. テーマを使う際に重要なのは、使用するすべての dijit
  177. について、それを囲むコンテナにテーマのクラスを指定することです。
  178. もっともよくある例は、body に指定するものです。
  179. </para>
  180. <programlisting language="html"><![CDATA[
  181. <body class="tundra">
  182. ]]></programlisting>
  183. </sect3>
  184. <sect3 id="zend.dojo.view.dojo.layers">
  185. <title>レイヤーの使用 (カスタムビルド)</title>
  186. <para>
  187. デフォルトでは、dojo.require ステートメントを使用すると
  188. dojo はサーバにリクエストを返し、適切な javascript ファイルを取得します。
  189. たくさんの dijit を使用する場合は、大量のリクエストがサーバに届くことになります。
  190. これはちょっと無駄ですね。
  191. </para>
  192. <para>
  193. これに対する Dojo からの回答はとして用意したのが
  194. <emphasis>カスタムビルド</emphasis>
  195. です。これは、次のようなことを行います。
  196. </para>
  197. <itemizedlist>
  198. <listitem><para>
  199. 必要なファイルを <emphasis>レイヤー</emphasis> にまとめます。
  200. レイヤーは、すべての必要なファイルをひとつの
  201. JS ファイルにまとめたものです
  202. (これが、このセクションの名前の由来です)。
  203. </para></listitem>
  204. <listitem><para>
  205. digit が使用する javascript 以外のファイル (テンプレートファイルなど)
  206. をまとめます。
  207. これらもまた、レイヤーとして同じ JS ファイルにまとめられます。
  208. </para></listitem>
  209. <listitem><para>
  210. そのファイルを ShrinkSafe に渡します。
  211. これは、空白文字やコメントを削除して変数名を短くします。
  212. </para></listitem>
  213. </itemizedlist>
  214. <para>
  215. 中にはレイヤー化できないファイルもありますが、
  216. ビルドの際にリリース用のディレクトリが作成され、
  217. レイヤーファイルとその他のすべてのファイルが格納されます。
  218. これにより、あなたの作成するサイトやアプリケーションが
  219. 必要とするだけの内容に最適化した内容を配布することができます。
  220. </para>
  221. <para>
  222. レイヤーを使うために、<methodname>dojo()</methodname> ビューヘルパーには
  223. <methodname>addLayer()</methodname> メソッドが用意されており、
  224. これで必要なレイヤーへのパスを追加します。
  225. </para>
  226. <programlisting language="html"><![CDATA[
  227. $view->dojo()->addLayer('/js/foo/foo.js');
  228. ]]></programlisting>
  229. <para>
  230. 独自のビルドを作成するためのさらなる情報は、<ulink
  231. url="http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds">
  232. Dojo のビルドのドキュメントを参照ください</ulink>。
  233. </para>
  234. </sect3>
  235. <sect3 id="zend.dojo.view.dojo.methods">
  236. <title>使用できるメソッド</title>
  237. <para>
  238. <methodname>dojo()</methodname> ビューヘルパーは常に、
  239. dojo プレースホルダコンテナのインスタンスを返します。
  240. このコンテナオブジェクトで使用できるメソッドは次のとおりです。
  241. </para>
  242. <itemizedlist>
  243. <listitem><para><methodname>setView(Zend_View_Interface $view)</methodname>:
  244. コンテナ内のビューインスタンスを設定します。</para></listitem>
  245. <listitem><para><methodname>enable()</methodname>:
  246. Dojo 統合機能を明示的に有効化します。</para></listitem>
  247. <listitem><para><methodname>disable()</methodname>:
  248. Dojo 統合機能を無効化します。</para></listitem>
  249. <listitem><para><methodname>isEnabled()</methodname>:
  250. Dojo 統合機能が有効かどうかを調べます。</para></listitem>
  251. <listitem><para><methodname>requireModule($module)</methodname>:
  252. <property>dojo.require</property> 文を作成します。</para></listitem>
  253. <listitem><para><methodname>getModules()</methodname>:
  254. どのモジュールが必要なのかを調べます。</para></listitem>
  255. <listitem><para><methodname>registerModulePath($module, $path)</methodname>:
  256. 独自の Dojo モジュールのパスを登録します。</para></listitem>
  257. <listitem><para><methodname>getModulePaths()</methodname>:
  258. 登録済みのモジュールパスの一覧を取得します。</para></listitem>
  259. <listitem><para><methodname>addLayer($path)</methodname>:
  260. 使用するレイヤー (カスタムビルド) のパスを追加します。</para></listitem>
  261. <listitem><para><methodname>getLayers()</methodname>:
  262. 登録済みのすべてのレイヤー (カスタムビルド) のパスの一覧を取得します。</para></listitem>
  263. <listitem><para><methodname>removeLayer($path)</methodname>:
  264. <code>$path</code> にマッチするレイヤー (カスタムビルド) を、
  265. 登録済みレイヤーの一覧から削除します。</para></listitem>
  266. <listitem><para><methodname>setCdnBase($url)</methodname>:
  267. CDN 用のベース <acronym>URL</acronym> を設定します。一般的には
  268. <constant>Zend_Dojo::CDN_BASE_AOL</constant> あるいは
  269. <constant>Zend_Dojo::CDN_BASE_GOOGLE</constant>
  270. となりますが、これはバージョン番号より前に <acronym>URL</acronym> 文字列に必要となります。</para></listitem>
  271. <listitem><para><methodname>getCdnBase()</methodname>:
  272. 使用するベース CDN の <acronym>URL</acronym> を取得します。</para></listitem>
  273. <listitem><para><methodname>setCdnVersion($version = null)</methodname>:
  274. CDN から使用する Dojo のバージョンを設定します。</para></listitem>
  275. <listitem><para><methodname>getCdnVersion()</methodname>:
  276. CDN からどのバージョンの Dojo を使用しているかを取得します。</para></listitem>
  277. <listitem><para><methodname>setCdnDojoPath($path)</methodname>:
  278. CDN 上のファイル dojo.js あるいは dojo.xd.js への相対パスを設定します。一般的には
  279. <constant>Zend_Dojo::CDN_DOJO_PATH_AOL</constant> あるいは
  280. <constant>Zend_Dojo::CDN_DOJO_PATH_GOOGLE</constant>
  281. となりますが、これはバージョン番号の後の <acronym>URL</acronym> 文字列に必要となります。</para></listitem>
  282. <listitem><para><methodname>getCdnDojoPath()</methodname>:
  283. dojo.js ファイルを指す、CDN url のパスの最後の部分を取得します。</para></listitem>
  284. <listitem><para><methodname>useCdn()</methodname>:
  285. コンテナに、CDN を使用するよう指定します。暗黙的に統合機能を有効化します。</para></listitem>
  286. <listitem><para><methodname>setLocalPath($path)</methodname>:
  287. コンテナに、ローカルの Dojo インストールパスを指定します
  288. (サーバからの相対パスで、かつ dojo.js ファイル自体も含まなければなりません)。
  289. 暗黙的に統合機能を有効化します。</para></listitem>
  290. <listitem><para><methodname>getLocalPath()</methodname>:
  291. どのローカルパスの Dojo を使用しているかを取得します。</para></listitem>
  292. <listitem><para><methodname>useLocalPath()</methodname>:
  293. 統合機能がローカルパスの Dojo を使用しているかどうかを調べます。</para></listitem>
  294. <listitem><para><methodname>setDjConfig(array $config)</methodname>:
  295. dojo/dijit の設定項目を設定します
  296. (連想配列で指定します)。</para></listitem>
  297. <listitem><para><methodname>setDjConfigOption($option, $value)</methodname>:
  298. 単一の dojo/dijit 設定項目を設定します。</para></listitem>
  299. <listitem><para><methodname>getDjConfig()</methodname>:
  300. すべての dojo/dijit 設定値を取得します。</para></listitem>
  301. <listitem><para><methodname>getDjConfigOption($option, $default =
  302. null)</methodname>:
  303. 単一の dojo/dijit 設定値を取得します。</para></listitem>
  304. <listitem><para><methodname>addStylesheetModule($module)</methodname>:
  305. モジュールのテーマに基づいたスタイルシートを追加します。</para></listitem>
  306. <listitem><para><methodname>getStylesheetModules()</methodname>:
  307. モジュールのテーマとして登録されたスタイルシートを取得します。</para></listitem>
  308. <listitem><para><methodname>addStylesheet($path)</methodname>:
  309. Dojo で使用するローカルスタイルシートを追加します。</para></listitem>
  310. <listitem><para><methodname>getStylesheets()</methodname>:
  311. ローカル Dojo スタイルシートを取得します。</para></listitem>
  312. <listitem><para><methodname>addOnLoad($spec, $function = null)</methodname>:
  313. dojo.onLoad がコールするラムダ関数を追加します。
  314. 引数をひとつわたした場合は、
  315. 関数名あるいは javascript のクロージャと見なされます。
  316. 引数をふたつわたした場合は、
  317. 最初の引数がオブジェクトのインスタンスを表す変数名、
  318. 二番目の引数がそのオブジェクトのメソッド名あるいは
  319. そのオブジェクトで使用するクロージャと見なされます。</para></listitem>
  320. <listitem><para><methodname>prependOnLoad($spec, $function = null)</methodname>:
  321. <methodname>addOnLoad()</methodname> と同じですが、onLoad
  322. スタックの先頭に追加するという点だけが異なります。</para></listitem>
  323. <listitem><para><methodname>getOnLoadActions()</methodname>:
  324. コンテナに登録されているすべての dojo.onLoad
  325. アクションを取得します。
  326. これは配列の配列となります。</para></listitem>
  327. <listitem><para><methodname>onLoadCaptureStart($obj = null)</methodname>:
  328. dojo.onLoad() のラムダ関数として使用するデータをキャプチャします。
  329. $obj が指定された場合は、キャプチャされた JS コードはその
  330. Javascript オブジェクトで使用するクロージャであると見なします。</para></listitem>
  331. <listitem><para><methodname>onLoadCaptureEnd($obj = null)</methodname>:
  332. dojo.onLoad() で使用するデータのキャプチャを終了します。</para></listitem>
  333. <listitem><para><methodname>javascriptCaptureStart()</methodname>:
  334. 任意の javascript をキャプチャし、Dojo JS
  335. (onLoad や require など) として取り込めるようにします。</para></listitem>
  336. <listitem><para><methodname>javascriptCaptureEnd()</methodname>:
  337. javascript のキャプチャを終了します。</para></listitem>
  338. <listitem><para><methodname>__toString()</methodname>:
  339. コンテナを文字列にキャストします。すべての HTML style 要素および
  340. script 要素をレンダリングします。</para></listitem>
  341. </itemizedlist>
  342. </sect3>
  343. </sect2>
  344. <!--
  345. vim:se ts=4 sw=4 et:
  346. -->