| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593 |
- <?xml version="1.0" encoding="UTF-8"?>
- <!-- Reviewed: no -->
- <sect2 id="zend.dojo.view.dojo">
- <title>dojo() View Helper</title>
- <para>
- The <methodname>dojo()</methodname> view helper is intended to simplify setting up
- the Dojo environment, including the following responsibilities:
- </para>
- <itemizedlist>
- <listitem>
- <para>
- Specifying either a <acronym>CDN</acronym> or a local path to a Dojo install.
- </para>
- </listitem>
- <listitem><para>Specifying paths to custom Dojo modules.</para></listitem>
- <listitem><para>Specifying <command>dojo.require</command> statements.</para></listitem>
- <listitem><para>Specifying dijit stylesheet themes to use.</para></listitem>
- <listitem>
- <para>Specifying <command>dojo.addOnLoad()</command> events.</para>
- </listitem>
- </itemizedlist>
- <para>
- The <methodname>dojo()</methodname> view helper implementation is an example of a
- placeholder implementation. The data set in it persists between view
- objects and may be directly echoed from your layout script.
- </para>
- <example id="zend.dojo.view.dojo.usage">
- <title>dojo() View Helper Usage Example</title>
- <para>
- For this example, let's assume the developer will be using Dojo from
- a local path, will require several dijits, and will be
- utilizing the Tundra dijit theme.
- </para>
- <para>
- On many pages, the developer may not utilize Dojo at all. So, we
- will first focus on a view script where Dojo is needed and then on the
- layout script, where we will setup some of the Dojo environment and
- then render it.
- </para>
- <para>
- First, we need to tell our view object to use the Dojo view helper
- paths. This can be done in your bootstrap or an early-running
- plugin; simply grab your view object and execute the following:
- </para>
- <programlisting language="php"><![CDATA[
- $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
- ]]></programlisting>
- <para>
- Next, the view script. In this case, we're going to specify
- that we will be using a FilteringSelect -- which will consume a
- custom store based on QueryReadStore, which we'll call
- 'PairedStore' and store in our 'custom' module.
- </para>
- <programlisting language="php"><![CDATA[
- <?php // setup data store for FilteringSelect ?>
- <div dojoType="custom.PairedStore" jsId="stateStore"
- url="/data/autocomplete/type/state/format/ajax"
- requestMethod="get"></div>
- <?php // Input element: ?>
- State: <input id="state" dojoType="dijit.form.FilteringSelect"
- store="stateStore" pageSize="5" />
- <?php // setup required dojo elements:
- $this->dojo()->enable()
- ->setDjConfigOption('parseOnLoad', true)
- ->registerModulePath('custom', '../custom/')
- ->requireModule('dijit.form.FilteringSelect')
- ->requireModule('custom.PairedStore'); ?>
- ]]></programlisting>
- <para>
- In our layout script, we'll then check to see if Dojo is enabled,
- and, if so, we'll do some more general configuration and assemble
- it:
- </para>
- <programlisting language="php"><![CDATA[
- <?php echo $this->doctype() ?>
- <html>
- <head>
- <?php echo $this->headTitle() ?>
- <?php echo $this->headMeta() ?>
- <?php echo $this->headLink() ?>
- <?php echo $this->headStyle() ?>
- <?php if ($this->dojo()->isEnabled()){
- $this->dojo()->setLocalPath('/js/dojo/dojo.js')
- ->addStyleSheetModule('dijit.themes.tundra');
- echo $this->dojo();
- }
- ?>
- <?php echo $this->headScript() ?>
- </head>
- <body class="tundra">
- <?php echo $this->layout()->content ?>
- <?php echo $this->inlineScript() ?>
- </body>
- </html>
- ]]></programlisting>
- <para>
- At this point, you only need to ensure that your files are in the
- correct locations and that you've created the end point action for
- your FilteringSelect!
- </para>
- </example>
- <note>
- <title>UTF-8 encoding used by default</title>
- <para>
- By default, Zend Framework uses <acronym>UTF-8</acronym> as its default encoding, and,
- specific to this case, <classname>Zend_View</classname> does as well. Character encoding
- can be set differently on the view object itself using the
- <methodname>setEncoding()</methodname> method (or the <property>encoding</property>
- instantiation parameter). However, since <classname>Zend_View_Interface</classname> does
- not define accessors for encoding, it's possible that if you are using a custom view
- implementation with the Dojo view helper, you will not have a
- <methodname>getEncoding()</methodname> method, which is what the view helper uses
- internally for determining the character set in which to encode.
- </para>
- <para>
- If you do not want to utilize <acronym>UTF-8</acronym> in such a situation, you will
- need to implement a <methodname>getEncoding()</methodname> method in your custom view
- implementation.
- </para>
- </note>
- <sect3 id="zend.dojo.view.dojo.declarative">
- <title>Programmatic and Declarative Usage of Dojo</title>
- <para>
- Dojo allows both <emphasis>declarative</emphasis> and
- <emphasis>programmatic</emphasis> usage of many of its features.
- <emphasis>Declarative</emphasis> usage uses standard <acronym>HTML</acronym> elements
- with non-standard attributes that are parsed when the page is
- loaded. While this is a powerful and simple syntax to utilize, for
- many developers this can cause issues with page validation.
- </para>
- <para>
- <emphasis>Programmatic</emphasis> usage allows the developer to
- decorate existing elements by pulling them by ID or <acronym>CSS</acronym> selectors
- and passing them to the appropriate object constructors in Dojo.
- Because no non-standard <acronym>HTML</acronym> attributes are used, pages continue to
- validate.
- </para>
- <para>
- In practice, both use cases allow for graceful degradation when
- javascript is disabled or the various Dojo script resources are
- unreachable. To promote standards and document validation,
- Zend Framework uses programmatic usage by default; the various view
- helpers will generate javascript and push it to the
- <methodname>dojo()</methodname> view helper for inclusion when rendered.
- </para>
- <para>
- Developers using this technique may also wish to explore the option
- of writing their own programmatic decoration of the page. One
- benefit would be the ability to specify handlers for dijit events.
- </para>
- <para>
- To allow this, as well as the ability to use declarative syntax,
- there are a number of static methods available to set this behavior
- globally.
- </para>
- <example id="zend.dojo.view.dojo.declarative.usage">
- <title>Specifying Declarative and Programmatic Dojo Usage</title>
- <para>
- To specify declarative usage, simply call the static
- <methodname>setUseDeclarative()</methodname> method:
- </para>
- <programlisting language="php"><![CDATA[
- Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
- ]]></programlisting>
- <para>
- If you decide instead to use programmatic usage, call the static
- <methodname>setUseProgrammatic()</methodname> method:
- </para>
- <programlisting language="php"><![CDATA[
- Zend_Dojo_View_Helper_Dojo::setUseProgrammatic();
- ]]></programlisting>
- <para>
- Finally, if you want to create your own programmatic rules, you
- should specify programmatic usage, but pass in the value '-1';
- in this situation, no javascript for decorating any dijits used
- will be created.
- </para>
- <programlisting language="php"><![CDATA[
- Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(-1);
- ]]></programlisting>
- </example>
- </sect3>
- <sect3 id="zend.dojo.view.dojo.themes">
- <title>Themes</title>
- <para>
- Dojo allows the creation of themes for its dijits (widgets). You may
- select one by passing in a module path:
- </para>
- <programlisting language="php"><![CDATA[
- $view->dojo()->addStylesheetModule('dijit.themes.tundra');
- ]]></programlisting>
- <para>
- The module path is discovered by using the character '.' as a
- directory separator and using the last value in the list as the name
- of the <acronym>CSS</acronym> file in that theme directory to use; in the example
- above, Dojo will look for the theme in
- '<filename>dijit/themes/tundra/tundra.css</filename>'.
- </para>
- <para>
- When using a theme, it is important to remember to pass the theme
- class to, at the least, a container surrounding any dijits you are
- using; the most common use case is to pass it in the body:
- </para>
- <programlisting language="html"><![CDATA[
- <body class="tundra">
- ]]></programlisting>
- </sect3>
- <sect3 id="zend.dojo.view.dojo.layers">
- <title>Using Layers (Custom Builds)</title>
- <para>
- By default, when you use a <command>dojo.require</command> statement, dojo will make a
- request back to the server to grab the appropriate javascript file.
- If you have many dijits in place, this results in many requests to
- the server -- which is not optimal.
- </para>
- <para>
- Dojo's answer to this is to provide the ability to create
- <emphasis>custom builds</emphasis>. Builds do several things:
- </para>
- <itemizedlist>
- <listitem>
- <para>
- Groups required files into <emphasis>layers</emphasis>; a layer
- lumps all required files into a single JS file. (Hence the name
- of this section.)
- </para>
- </listitem>
- <listitem>
- <para>
- "Interns" non-javascript files used by dijits (typically,
- template files). These are also grouped in the same JS file as
- the layer.
- </para>
- </listitem>
- <listitem>
- <para>
- Passes the file through ShrinkSafe, which strips whitespace and
- comments, as well as shortens variable names.
- </para>
- </listitem>
- </itemizedlist>
- <para>
- Some files can not be layered, but the build process will create a
- special release directory with the layer file and all other files.
- This allows you to have a slimmed-down distribution customized for
- your site or application needs.
- </para>
- <para>
- To use a layer, the <methodname>dojo()</methodname> view helper has a
- <methodname>addLayer()</methodname> method for adding paths to required layers:
- </para>
- <programlisting language="html"><![CDATA[
- $view->dojo()->addLayer('/js/foo/foo.js');
- ]]></programlisting>
- <para>
- For more information on creating custom builds, please <ulink
- url="http://dojotoolkit.org/reference-guide/dojo/index.html#package-system">refer
- to the Dojo build documentation</ulink>.
- </para>
- </sect3>
- <sect3 id="zend.dojo.view.dojo.methods">
- <title>Methods Available</title>
- <para>
- The <methodname>dojo()</methodname> view helper always returns an instance of
- the dojo placeholder container. That container object has the
- following methods available:
- </para>
- <itemizedlist>
- <listitem>
- <para>
- <methodname>setView(Zend_View_Interface $view)</methodname>: set a view instance
- in the container.
- </para>
- </listitem>
- <listitem>
- <para><methodname>enable()</methodname>: explicitly enable Dojo integration.</para>
- </listitem>
- <listitem>
- <para><methodname>disable()</methodname>: disable Dojo integration.</para>
- </listitem>
- <listitem>
- <para>
- <methodname>isEnabled()</methodname>: determine whether or not Dojo integration
- is enabled.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>requireModule($module)</methodname>: setup a
- <command>dojo.require</command> statement.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getModules()</methodname>: determine what modules have been
- required.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>registerModulePath($module, $path)</methodname>:
- register a custom Dojo module path.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getModulePaths()</methodname>: get list of registered module paths.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>addLayer($path)</methodname>: add a layer (custom build) path to
- use.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getLayers()</methodname>: get a list of all registered layer paths
- (custom builds).
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>removeLayer($path)</methodname>: remove the layer
- that matches <varname>$path</varname> from the list of registered
- layers (custom builds).
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>setCdnBase($url)</methodname>: set the base <acronym>URL</acronym>
- for a <acronym>CDN</acronym>; typically, one of the
- <constant>Zend_Dojo::CDN_BASE_AOL</constant> or
- <constant>Zend_Dojo::CDN_BASE_GOOGLE</constant>, but it only needs
- to be the <acronym>URL</acronym> string prior to the version number.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getCdnBase()</methodname>: retrieve the base <acronym>CDN</acronym>
- url to utilize.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>setCdnVersion($version = null)</methodname>: set
- which version of Dojo to utilize from the <acronym>CDN</acronym>.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getCdnVersion()</methodname>: retrieve what
- version of Dojo from the <acronym>CDN</acronym> will be used.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>setCdnDojoPath($path)</methodname>: set the relative
- path to the <filename>dojo.js</filename> or <filename>dojo.xd.js</filename>
- file on a <acronym>CDN</acronym>; typically, one of the
- <constant>Zend_Dojo::CDN_DOJO_PATH_AOL</constant> or
- <constant>Zend_Dojo::CDN_DOJO_PATH_GOOGLE</constant>, but it only
- needs to be the path string following the version number.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getCdnDojoPath()</methodname>: retrieve the last path segment of the
- <acronym>CDN</acronym> url pointing to the <filename>dojo.js</filename> file.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>useCdn()</methodname>: tell the container to
- utilize the <acronym>CDN</acronym>; implicitly enables integration.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>setLocalPath($path)</methodname>: tell the container
- the path to a local Dojo install (should be a path relative
- to the server, and contain the <filename>dojo.js</filename> file itself);
- implicitly enables integration.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getLocalPath()</methodname>: determine what local
- path to Dojo is being used.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>useLocalPath()</methodname>: is the integration
- utilizing a Dojo local path?
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>setDjConfig(array $config)</methodname>: set
- dojo or dijit configuration values (expects assoc array).
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>setDjConfigOption($option, $value)</methodname>: set
- a single dojo or dijit configuration value.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getDjConfig()</methodname>: get all dojo or dijit configuration
- values.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getDjConfigOption($option, $default = null)</methodname>: get a
- single dojo or dijit configuration value.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>addStylesheetModule($module)</methodname>: add a
- stylesheet based on a module theme.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getStylesheetModules()</methodname>: get stylesheets
- registered as module themes.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>addStylesheet($path)</methodname>: add a local
- stylesheet for use with Dojo.
- </para>
- </listitem>
- <listitem>
- <para><methodname>getStylesheets()</methodname>: get local Dojo stylesheets.</para>
- </listitem>
- <listitem>
- <para>
- <methodname>addOnLoad($spec, $function = null)</methodname>: add
- a lambda for <command>dojo.onLoad</command> to call. If one argument is passed,
- it is assumed to be either a function name or a javascript
- closure. If two arguments are passed, the first is assumed
- to be the name of an object instance variable and the second
- either a method name in that object or a closure to utilize
- with that object.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>prependOnLoad($spec, $function = null)</methodname>:
- exactly like <methodname>addOnLoad()</methodname>, excepts prepends to
- beginning of onLoad stack.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>getOnLoadActions()</methodname>: retrieve all
- <command>dojo.onLoad</command> actions registered with the container. This will
- be an array of arrays.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>onLoadCaptureStart($obj = null)</methodname>:
- capture data to be used as a lambda for <command>dojo.onLoad()</command>.
- If <varname>$obj</varname> is provided, the captured JS code will be considered
- a closure to use with that Javascript object.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>onLoadCaptureEnd($obj = null)</methodname>: finish
- capturing data for use with <command>dojo.onLoad()</command>.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>javascriptCaptureStart()</methodname>:
- capture arbitrary javascript to be included with Dojo JS
- (onLoad, require, etc. statements).
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>javascriptCaptureEnd()</methodname>: finish capturing javascript.
- </para>
- </listitem>
- <listitem>
- <para>
- <methodname>__toString()</methodname>: cast the container to a
- string; renders all <acronym>HTML</acronym> style and script elements.
- </para>
- </listitem>
- </itemizedlist>
- </sect3>
- </sect2>
- <!--
- vim:se ts=4 sw=4 et:
- -->
|