1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
<?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>
|
