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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
<?xml version="1.0" encoding="UTF-8"?>
<!-- Reviewed: no -->
<sect3 id="zend.progressbar.adapter.jspush">
<title>Zend_ProgressBar_Adapter_JsPush</title>
<para>
<classname>Zend_ProgressBar_Adapter_JsPush</classname> is an adapter which let's
you update a progressbar in a browser via Javascript Push. This means
that no second connection is required to gather the status about a
running process, but that the process itself sends its status directly
to the browser.
</para>
<para>
You can set the adapter options either via the <code>set*</code> methods
or give an array or a <classname>Zend_Config</classname> instance with options as first
parameter to the constructor. The available options are:
</para>
<itemizedlist>
<listitem>
<para>
<code>updateMethodName</code>: The javascript method which
should be called on every update. Default value is
<classname>Zend_ProgressBar_Update</classname>.
</para>
</listitem>
<listitem>
<para>
<code>finishMethodName</code>: The javascript method which
should be called after finish status was set. Default value is
<constant>NULL</constant>, which means nothing is done.
</para>
</listitem>
</itemizedlist>
<para>
The usage of this adapter is quite simple. First you create a progressbar
in your browser, either with JavaScript or previously created with plain
<acronym>HTML</acronym>. Then you define the update method and optionally the finish method
in JavaScript, both taking a json object as single argument. Then you
call a webpage with the long-running process in a hidden
<code>iframe</code> or <code>object</code> tag. While the process is
running, the adapter will call the update method on every update with
a json object, containing the following parameters:
</para>
<itemizedlist>
<listitem>
<para>
<code>current</code>: The current absolute value
</para>
</listitem>
<listitem>
<para>
<code>max</code>: The max absolute value
</para>
</listitem>
<listitem>
<para>
<code>percent</code>: The calculated percentage
</para>
</listitem>
<listitem>
<para>
<code>timeTaken</code>: The time how long the process ran yet
</para>
</listitem>
<listitem>
<para>
<code>timeRemaining</code>: The expected time for the process to finish
</para>
</listitem>
<listitem>
<para>
<code>text</code>: The optional status message, if given
</para>
</listitem>
</itemizedlist>
<example id="zend.progressbar-adapter.jspush.example">
<title>Basic example for the client-side stuff</title>
<para>
This example illustrates a basic setup of <acronym>HTML</acronym>,
<acronym>CSS</acronym> and JavaScript for the 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>
This will create a simple container with a black border and a
block which indicates the current process. You should not hide
the <code>iframe</code> or <code>object</code> by <code>display: none;</code>,
as some browsers like Safari 2 will not load the actual content then.
</para>
<para>
Instead of creating your custom progressbar, you may want to use
one of the available JavaScript libraries like Dojo, jQuery etc.
For example, there are:
</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>Interval of updates</title>
<para>
You should take care of not sending too many updates, as every update
has a min-size of 1kb. This is a requirement for the Safari browser
to actually render and execute the function call. Internet Explorer
has a similar limitation of 256 bytes.
</para>
</note>
</sect3>
<!--
vim:se ts=4 sw=4 et:
-->
|
