Zend_Dojo-View-Dojo.xml 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- Reviewed: no -->
  3. <!-- EN-Revision: 24249 -->
  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><acronym>CDN</acronym> あるいはローカルパスのどちらの Dojo
  13. を使用するかの指定</para></listitem>
  14. <listitem><para>カスタム Dojo モジュールへのパスの指定</para></listitem>
  15. <listitem><para><command>dojo.require</command> 文の指定</para></listitem>
  16. <listitem><para>使用する dijit スタイルシートテーマの指定</para></listitem>
  17. <listitem><para><command>dojo.addOnLoad()</command> イベントの指定</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. <note>
  99. <title>デフォルトで使用される UTF-8 エンコーディング</title>
  100. <!-- TODO : to be translated -->
  101. <para>
  102. By default, Zend Framework uses <acronym>UTF-8</acronym> as its default encoding, and,
  103. specific to this case, <classname>Zend_View</classname> does as well. Character encoding
  104. can be set differently on the view object itself using the
  105. <methodname>setEncoding()</methodname> method (or the the <property>encoding</property>
  106. instantiation parameter). However, since <classname>Zend_View_Interface</classname> does
  107. not define accessors for encoding, it's possible that if you are using a custom view
  108. implementation with the Dojo view helper, you will not have a
  109. <methodname>getEncoding()</methodname> method, which is what the view helper uses
  110. internally for determining the character set in which to encode.
  111. </para>
  112. <para>
  113. If you do not want to utilize <acronym>UTF-8</acronym> in such a situation, you will
  114. need to implement a <methodname>getEncoding()</methodname> method in your custom view
  115. implementation.
  116. </para>
  117. </note>
  118. <sect3 id="zend.dojo.view.dojo.declarative">
  119. <title>プログラム的および宣言的な Dojo 使用法</title>
  120. <para>
  121. Dojo の機能の多くは、<emphasis>宣言的 (declarative)</emphasis>
  122. な方法および <emphasis>プログラム的 (programmatic)</emphasis>
  123. な方法の両方で使用できます。
  124. <emphasis>宣言的</emphasis> な使用法とは、
  125. 標準の <acronym>HTML</acronym> 要素に対して非標準の属性を指定し、
  126. ページの読み込み時にそれをパースするというものです。
  127. これは強力でシンプルな構文のため使用しやすいのですが、
  128. ページの検証時に問題を起こす可能性があります。
  129. </para>
  130. <para>
  131. <emphasis>プログラム的</emphasis> な使用法とは、
  132. 既存の要素を ID もしくは <acronym>CSS</acronym> セレクタで取得し、
  133. それを Dojo の適切なオブジェクトのコンストラクタに渡すというものです。
  134. 非標準の <acronym>HTML</acronym> 属性を使うことはないので、ページの検証はうまくいきます。
  135. </para>
  136. <para>
  137. 実際のところ、どちらの手法を用いたとしても、
  138. javascript が無効になっていたり
  139. Dojo スクリプトリソースが使用できなかったりした場合に機能が低下してしまいます。
  140. 標準規格とドキュメントの検証を優先させるため、Zend Framework
  141. ではプログラム的な使用法をデフォルトとしています。
  142. さまざまなビューヘルパーが javascript を生成してそれを
  143. <methodname>dojo()</methodname> ビューヘルパーに渡し、レンダリング時に読み込むのです。
  144. </para>
  145. <para>
  146. この方法を使うと、さまざまなオプションを使用して
  147. プログラム上で独自のデコレーションを行うことができます。
  148. たとえば dijit イベントのハンドラを指定することなども可能です。
  149. </para>
  150. <para>
  151. そのために、宣言的な構文の機能以外にも多くの静的メソッドが用意されており、
  152. 全体の振る舞いを設定できます。
  153. </para>
  154. <example id="zend.dojo.view.dojo.declarative.usage">
  155. <title>宣言的、あるいはプログラム的な Dojo の使用法の指定</title>
  156. <para>
  157. 宣言的な使用法を指定するには、静的メソッド
  158. <methodname>setUseDeclarative()</methodname> をコールします。
  159. </para>
  160. <programlisting language="php"><![CDATA[
  161. Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
  162. ]]></programlisting>
  163. <para>
  164. プログラム的な使用法を指定するには、静的メソッド
  165. <methodname>setUseProgrammatic()</methodname> をコールします。
  166. </para>
  167. <programlisting language="php"><![CDATA[
  168. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic();
  169. ]]></programlisting>
  170. <para>
  171. 独自のプログラム的なルールを作成したい場合は、
  172. プログラム的な使用法を指定する際に値 '-1'
  173. を渡す必要があります。この場合、
  174. dijit を装飾するための javascript は生成されません。
  175. </para>
  176. <programlisting language="php"><![CDATA[
  177. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(-1);
  178. ]]></programlisting>
  179. </example>
  180. </sect3>
  181. <sect3 id="zend.dojo.view.dojo.themes">
  182. <title>テーマ</title>
  183. <para>
  184. Dojo では、dijits (widgets) 用のテーマを作成できます。
  185. テーマを選択するにはモジュールパスにそれを渡します。
  186. </para>
  187. <programlisting language="php"><![CDATA[
  188. $view->dojo()->addStylesheetModule('dijit.themes.tundra');
  189. ]]></programlisting>
  190. <para>
  191. モジュールパスの検索は、'.' をディレクトリ区切り文字として使用し、
  192. リストの最後の名前を <acronym>CSS</acronym> ファイルと見て行います。上の例では、Dojo は
  193. '<filename>dijit/themes/tundra/tundra.css</filename>' のテーマを探します。
  194. </para>
  195. <para>
  196. テーマを使う際に重要なのは、使用するすべての dijit
  197. について、それを囲むコンテナにテーマのクラスを指定することです。
  198. もっともよくある例は、body に指定するものです。
  199. </para>
  200. <programlisting language="html"><![CDATA[
  201. <body class="tundra">
  202. ]]></programlisting>
  203. </sect3>
  204. <sect3 id="zend.dojo.view.dojo.layers">
  205. <title>レイヤーの使用 (カスタムビルド)</title>
  206. <para>
  207. デフォルトでは、<command>dojo.require</command> ステートメントを使用すると
  208. dojo はサーバにリクエストを返し、適切な javascript ファイルを取得します。
  209. たくさんの dijit を使用する場合は、大量のリクエストがサーバに届くことになります。
  210. これはちょっと無駄ですね。
  211. </para>
  212. <para>
  213. これに対する Dojo からの回答はとして用意したのが
  214. <emphasis>カスタムビルド</emphasis>
  215. です。これは、次のようなことを行います。
  216. </para>
  217. <itemizedlist>
  218. <listitem><para>
  219. 必要なファイルを <emphasis>レイヤー</emphasis> にまとめます。
  220. レイヤーは、すべての必要なファイルをひとつの
  221. JS ファイルにまとめたものです
  222. (これが、このセクションの名前の由来です)。
  223. </para></listitem>
  224. <listitem><para>
  225. digit が使用する javascript 以外のファイル (テンプレートファイルなど)
  226. をまとめます。
  227. これらもまた、レイヤーとして同じ JS ファイルにまとめられます。
  228. </para></listitem>
  229. <listitem><para>
  230. そのファイルを ShrinkSafe に渡します。
  231. これは、空白文字やコメントを削除して変数名を短くします。
  232. </para></listitem>
  233. </itemizedlist>
  234. <para>
  235. 中にはレイヤー化できないファイルもありますが、
  236. ビルドの際にリリース用のディレクトリが作成され、
  237. レイヤーファイルとその他のすべてのファイルが格納されます。
  238. これにより、あなたの作成するサイトやアプリケーションが
  239. 必要とするだけの内容に最適化した内容を配布できます。
  240. </para>
  241. <para>
  242. レイヤーを使うために、<methodname>dojo()</methodname> ビューヘルパーには
  243. <methodname>addLayer()</methodname> メソッドが用意されており、
  244. これで必要なレイヤーへのパスを追加します。
  245. </para>
  246. <programlisting language="html"><![CDATA[
  247. $view->dojo()->addLayer('/js/foo/foo.js');
  248. ]]></programlisting>
  249. <para>
  250. 独自のビルドを作成するためのさらなる情報は、<ulink
  251. url="http://dojotoolkit.org/reference-guide/dojo/index.html#package-system">
  252. Dojo のビルドのドキュメントを参照ください</ulink>。
  253. </para>
  254. </sect3>
  255. <sect3 id="zend.dojo.view.dojo.methods">
  256. <title>使用できるメソッド</title>
  257. <para>
  258. <methodname>dojo()</methodname> ビューヘルパーは常に、
  259. dojo プレースホルダコンテナのインスタンスを返します。
  260. このコンテナオブジェクトで使用できるメソッドは次のとおりです。
  261. </para>
  262. <itemizedlist>
  263. <listitem><para><methodname>setView(Zend_View_Interface $view)</methodname>:
  264. コンテナ内のビューインスタンスを設定します。</para></listitem>
  265. <listitem><para><methodname>enable()</methodname>:
  266. Dojo 統合機能を明示的に有効化します。</para></listitem>
  267. <listitem><para><methodname>disable()</methodname>:
  268. Dojo 統合機能を無効化します。</para></listitem>
  269. <listitem><para><methodname>isEnabled()</methodname>:
  270. Dojo 統合機能が有効かどうかを調べます。</para></listitem>
  271. <listitem><para><methodname>requireModule($module)</methodname>:
  272. <command>dojo.require</command> 文を作成します。</para></listitem>
  273. <listitem><para><methodname>getModules()</methodname>:
  274. どのモジュールが必要なのかを調べます。</para></listitem>
  275. <listitem><para><methodname>registerModulePath($module, $path)</methodname>:
  276. 独自の Dojo モジュールのパスを登録します。</para></listitem>
  277. <listitem><para><methodname>getModulePaths()</methodname>:
  278. 登録済みのモジュールパスの一覧を取得します。</para></listitem>
  279. <listitem><para><methodname>addLayer($path)</methodname>:
  280. 使用するレイヤー (カスタムビルド) のパスを追加します。</para></listitem>
  281. <listitem><para><methodname>getLayers()</methodname>:
  282. 登録済みのすべてのレイヤー (カスタムビルド) のパスの一覧を取得します。</para></listitem>
  283. <listitem><para><methodname>removeLayer($path)</methodname>:
  284. <code>$path</code> にマッチするレイヤー (カスタムビルド) を、
  285. 登録済みレイヤーの一覧から削除します。</para></listitem>
  286. <listitem><para><methodname>setCdnBase($url)</methodname>:
  287. <acronym>CDN</acronym> 用のベース <acronym>URL</acronym> を設定します。一般的には
  288. <constant>Zend_Dojo::CDN_BASE_AOL</constant> あるいは
  289. <constant>Zend_Dojo::CDN_BASE_GOOGLE</constant>
  290. となりますが、これはバージョン番号より前に <acronym>URL</acronym> 文字列に必要となります。</para></listitem>
  291. <listitem><para><methodname>getCdnBase()</methodname>:
  292. 使用するベース <acronym>CDN</acronym> の <acronym>URL</acronym> を取得します。</para></listitem>
  293. <listitem><para><methodname>setCdnVersion($version = null)</methodname>:
  294. <acronym>CDN</acronym> から使用する Dojo のバージョンを設定します。</para></listitem>
  295. <listitem><para><methodname>getCdnVersion()</methodname>:
  296. <acronym>CDN</acronym> からどのバージョンの Dojo を使用しているかを取得します。</para></listitem>
  297. <listitem><para><methodname>setCdnDojoPath($path)</methodname>:
  298. <acronym>CDN</acronym> 上のファイル <filename>dojo.js</filename> あるいは <filename>dojo.xd.js</filename> への相対パスを設定します。一般的には
  299. <constant>Zend_Dojo::CDN_DOJO_PATH_AOL</constant> あるいは
  300. <constant>Zend_Dojo::CDN_DOJO_PATH_GOOGLE</constant>
  301. となりますが、これはバージョン番号の後の <acronym>URL</acronym> 文字列に必要となります。</para></listitem>
  302. <listitem><para><methodname>getCdnDojoPath()</methodname>:
  303. dojo.js ファイルを指す、<acronym>CDN</acronym> url のパスの最後の部分を取得します。</para></listitem>
  304. <listitem><para><methodname>useCdn()</methodname>:
  305. コンテナに、<acronym>CDN</acronym> を使用するよう指定します。暗黙的に統合機能を有効化します。</para></listitem>
  306. <listitem><para><methodname>setLocalPath($path)</methodname>:
  307. コンテナに、ローカルの Dojo インストールパスを指定します
  308. (サーバからの相対パスで、かつ <filename>dojo.js</filename> ファイル自体も含まなければなりません)。
  309. 暗黙的に統合機能を有効化します。</para></listitem>
  310. <listitem><para><methodname>getLocalPath()</methodname>:
  311. どのローカルパスの Dojo を使用しているかを取得します。</para></listitem>
  312. <listitem><para><methodname>useLocalPath()</methodname>:
  313. 統合機能がローカルパスの Dojo を使用しているかどうかを調べます。</para></listitem>
  314. <listitem><para><methodname>setDjConfig(array $config)</methodname>:
  315. dojo または dijit の設定項目を設定します
  316. (連想配列で指定します)。</para></listitem>
  317. <listitem><para><methodname>setDjConfigOption($option, $value)</methodname>:
  318. 単一の dojo または dijit 設定項目を設定します。</para></listitem>
  319. <listitem><para><methodname>getDjConfig()</methodname>:
  320. すべての dojo または dijit 設定値を取得します。</para></listitem>
  321. <listitem><para><methodname>getDjConfigOption($option, $default =
  322. null)</methodname>:
  323. 単一の dojo または dijit 設定値を取得します。</para></listitem>
  324. <listitem><para><methodname>addStylesheetModule($module)</methodname>:
  325. モジュールのテーマに基づいたスタイルシートを追加します。</para></listitem>
  326. <listitem><para><methodname>getStylesheetModules()</methodname>:
  327. モジュールのテーマとして登録されたスタイルシートを取得します。</para></listitem>
  328. <listitem><para><methodname>addStylesheet($path)</methodname>:
  329. Dojo で使用するローカルスタイルシートを追加します。</para></listitem>
  330. <listitem><para><methodname>getStylesheets()</methodname>:
  331. ローカル Dojo スタイルシートを取得します。</para></listitem>
  332. <listitem><para><methodname>addOnLoad($spec, $function = null)</methodname>:
  333. <command>dojo.onLoad</command> がコールするラムダ関数を追加します。
  334. 引数をひとつわたした場合は、
  335. 関数名あるいは javascript のクロージャと見なされます。
  336. 引数をふたつわたした場合は、
  337. 最初の引数がオブジェクトのインスタンスを表す変数名、
  338. 二番目の引数がそのオブジェクトのメソッド名あるいは
  339. そのオブジェクトで使用するクロージャと見なされます。</para></listitem>
  340. <listitem><para><methodname>prependOnLoad($spec, $function = null)</methodname>:
  341. <methodname>addOnLoad()</methodname> と同じですが、onLoad
  342. スタックの先頭に追加するという点だけが異なります。</para></listitem>
  343. <listitem><para><methodname>getOnLoadActions()</methodname>:
  344. コンテナに登録されているすべての <command>dojo.onLoad()</command>
  345. アクションを取得します。
  346. これは配列の配列となります。</para></listitem>
  347. <listitem><para><methodname>onLoadCaptureStart($obj = null)</methodname>:
  348. <command>dojo.onLoad()</command> のラムダ関数として使用するデータをキャプチャします。
  349. <varname>$obj</varname> が指定された場合は、キャプチャされた JS コードはその
  350. Javascript オブジェクトで使用するクロージャであると見なします。</para></listitem>
  351. <listitem><para><methodname>onLoadCaptureEnd($obj = null)</methodname>:
  352. <command>dojo.onLoad()</command> で使用するデータのキャプチャを終了します。</para></listitem>
  353. <listitem><para><methodname>javascriptCaptureStart()</methodname>:
  354. 任意の javascript をキャプチャし、Dojo JS
  355. (onLoad や require など) として取り込めるようにします。</para></listitem>
  356. <listitem><para><methodname>javascriptCaptureEnd()</methodname>:
  357. javascript のキャプチャを終了します。</para></listitem>
  358. <listitem><para><methodname>__toString()</methodname>:
  359. コンテナを文字列にキャストします。すべての <acronym>HTML</acronym> style 要素および
  360. script 要素をレンダリングします。</para></listitem>
  361. </itemizedlist>
  362. </sect3>
  363. </sect2>
  364. <!--
  365. vim:se ts=4 sw=4 et:
  366. -->