repo_zf1Php7/documentation/manual/de/module_specs/Zend_ProgressBar_Adapter_JsPush.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 24249 -->
<!-- Reviewed: no -->
<sect3 id="zend.progressbar.adapter.jspush">
    <title>Zend_ProgressBar_Adapter_JsPush</title>

    <para>
        <classname>Zend_ProgressBar_Adapter_JsPush</classname> ist ein Adapter der es erlaubt den
        Fortschrittsbalken in einem Browser über Javascript Push zu aktualisieren. Das bedeutet das
        keine zweite Verbindung benötigt wird um den Status über den aktuell laufenden Prozess zu
        erhalten, sondern das der Prozess selbst seinen Status direkt an den Browser schickt.
    </para>

    <para>
        Man kann auch die Optionen des Adapters entweder über die <code>set*</code> Methoden oder
        durch die Übergabe eines Arrays, oder einer Instanz von <classname>Zend_Config</classname>,
        an den Constructor mit dem Optionen als ersten Parameter. Die möglichen Optionen sind:
    </para>

    <itemizedlist>
        <listitem>
            <para>
                <code>updateMethodName</code>: Die Javascript Methode die bei jeder Aktualisierung
                aufgerufen werden soll. Standardwert ist
                <classname>Zend_ProgressBar_Update</classname>.
            </para>
        </listitem>

        <listitem>
            <para>
                <code>finishMethodName</code>: Die Javascript Methode die aufgerufen werden soll
                wenn der Beendet-Status gesetzt wurde. Der Standardwert ist
                <constant>NULL</constant>, was bedeutet das nichts passiert.
            </para>
        </listitem>
    </itemizedlist>

    <para>
        Die Verwendung dieses Adapters ist recht einfach. Zuerst wird ein Fortschrittsbalken im
        Browser erstellt, entweder mit JavaScript oder mit vorher erstelltem reinen
        <acronym>HTML</acronym>. Dann definiert man die Update Methode und optional die Finish
        Methode in JavaScript, die beide ein Json Objekt als einziges Argument nehmen. Das wird die
        Webseite mit einem lange laufenden Prozess, in einem versteckten <code>iframe</code> oder
        <code>object</code> Tag, aufgerufen. Wärend der Prozess läuft wird der Adapter die Update
        Methode bei jedem Update mit einem Json Objekt aufgerufen, das die folgenden Parameter
        enthält:
    </para>

    <itemizedlist>
        <listitem><para><code>current</code>: Der aktuelle absolute Wert</para></listitem>
        <listitem><para><code>max</code>: Der maximale absolute Wert</para></listitem>
        <listitem><para><code>percent</code>: Der berechnete Prozentwert</para></listitem>

        <listitem>
            <para><code>timeTaken</code>: Die Zeit die der Prozess bis jetzt gelaufen ist</para>
        </listitem>

        <listitem>
            <para><code>timeRemaining</code>: Die erwartete Zeit bis der Prozess beendet ist</para>
        </listitem>

        <listitem>
            <para><code>text</code>: Die optionale Statusmeldung, wenn angegeben</para>
        </listitem>
    </itemizedlist>

    <example id="zend.progressbar-adapter.jspush.example">
        <title>Grundsätzliches Beispiel für den Client-seitigen Teil</title>

        <para>
            Dieses Beispiel zeigt ein grundsätzliches Setup von <acronym>HTML</acronym>,
            <acronym>CSS</acronym> und JavaScript für den JsPush Adapter
        </para>

        <programlisting language="html"><![CDATA[
<div id="zend-progressbar-container">
    <div id="zend-progressbar-done"></div>
</div>

<iframe src="long-running-process.php" id="long-running-process"></iframe>
]]></programlisting>

        <programlisting language="css"><![CDATA[
#long-running-process {
    position: absolute;
    left: -100px;
    top: -100px;

    width: 1px;
    height: 1px;
}

#zend-progressbar-container {
    width: 100px;
    height: 30px;

    border: 1px solid #000000;
    background-color: #ffffff;
}

#zend-progressbar-done {
    width: 0;
    height: 30px;

    background-color: #000000;
}
]]></programlisting>

        <programlisting language="javascript"><![CDATA[
function Zend_ProgressBar_Update(data)
{
    document.getElementById('zend-progressbar-done').style.width =
        data.percent + '%';
}
]]></programlisting>

        <para>
            Das erstellt einen einfachen Container mit einem schwarzen Rand und einem Block der den
            aktuellen Prozess anzeigt. Man sollte den <code>iframe</code> oder <code>object</code>
            nicht mit <code>display: none;</code> verstecken, da einige Browser wie Safari 2 den
            aktuellen Inhalt dann nicht laden.
        </para>

        <para>
            Statt einen eigenen Fortschrittsbalken zu erstellen, kann es gewünscht sein einen von
            einer vorhandenen Bibliothek wir Dojo, jQuery usw zu verwenden. Es gibt zum Beispiel:
        </para>

        <itemizedlist>
            <listitem>
                <para>
                    Dojo: <ulink
                        url="http://dojotoolkit.org/reference-guide/dijit/ProgressBar.html"/>
                </para>
            </listitem>

            <listitem>
                <para>
                    jQuery: <ulink url="http://t.wits.sg/2008/06/20/jquery-progress-bar-11/" />
                </para>
            </listitem>

            <listitem>
                <para>
                    MooTools: <ulink url="http://davidwalsh.name/dw-content/progress-bar.php" />
                </para>
            </listitem>

            <listitem>
                <para>Prototype: <ulink url="http://livepipe.net/control/progressbar" /></para>
            </listitem>
        </itemizedlist>
    </example>

    <note>
        <title>Intervall der Updates</title>

        <para>
            Man sollte davon Abstand nehmen zuviele Updates zu senden, da jedes Update eine
            Mindestgröße von 1kb hat. Das ist eine Notwendigkeit für den Safari Browser um den
            Funktionsaufruf darzustellen und auszuführen. Der Internet Explorer hat eine ähnliche
            Einschränkung von 256 Bytes.
        </para>
    </note>
</sect3>