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

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 15743 -->
<!-- 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 HTML. 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 HTML, CSS 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/book/dojo-book-0-9/part-2-dijit/user-assistance-and-feedback/progress-bar" />
                </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>
<!--
vim:se ts=4 sw=4 et:
-->