This repository was archived by the owner on Jan 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathpopup.html
More file actions
332 lines (321 loc) · 15.4 KB
/
Copy pathpopup.html
File metadata and controls
332 lines (321 loc) · 15.4 KB
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--
* Copyright © 2004 Sun Microsystems, Inc
* All rights reserved.
* Notice of copyright on this source code
* product does not indicate publication.
*
* RESTRICTED RIGHTS LEGEND: Use, duplication, or disclosure by
* the U.S. Government is subject to restrictions as set forth
* in subparagraph (c)(1)(ii) of the Rights in Technical Data
* and Computer Software Clause at DFARS 252.227-7013 (Oct. 1988)
* and FAR 52.227-19 (c) (June 1987).
* Sun Microsystems, Inc., 4150 Network Circle,
* Santa Clara, California 95054, U.S.A.
*
-->
<html>
<head>
<title>Opening Popup and Secondary Windows From an HTML Topic</title>
<link rel="stylesheet" type="text/css" href="../jhug.css" title="Style">
</head>
<body bgcolor="#ffffff">
<h2>Opening Popup and Secondary Windows From an HTML Topic</h2>
<p> In an HTML topic, you can link to any help topic in your help system and display
it in a number of different windows.
<ul type="circle">
<li>You can link to the help topic by using the standard <code><a href=</code><i>URL</i><code>></code>
syntax. The help topic opens in the current help viewer as another topic.
<li>You can use the <code><object></code> tag to open a popup window. </li>
<li>You can use the <code><object></code> tag to open a secondary window.
</ul>
<p>Secondary windows and popups are implemented by a the lightweight component
class <code>JHSecondaryViewer</code>. You use this class in an HTML topic by
defining an <<code>object</code>> tag with the appropriate parameters.
This topic describes how these windows look and how to use this tag to display
popup and secondary windows. </p>
<p>
<table >
<tr valign="top">
<td nowrap width="3%"><img src="../../images/hg_note.gif" width="18" height="13">
<td > Popups and secondary windows are not used in
this <i>JavaHelp System User's Guide</i> because they cannot be included
in the PDF version. To see actual examples of how these windows can be used,
experiment with the <code>object</code> demo located in the following directory:
<p><code> demos\bin</code>
<p>You can also launch the object demo program by using shortcuts (program
groups, desktop icons, links) that you might have created during the installation
of the JavaHelp system.</p>
</table>
<h3><a name="diff">Differences Between Popups and Secondary Windows</a></h3>
<p> Popups and secondary windows are functionally similar. They are both fully
capable HTML windows that can include graphics, links, and lightweight components.
Most of the features described in this topic apply to both types of windows.
The following lists describe their differences:
<p> <b>Popups</b>:
<ul type="circle">
<li>Are always displayed directly adjacent to the object the user clicks to
activate the popup.
<li>Cannot be resized or moved by the user.
<li>Are dismissed whenever focus is changed to another part of the help viewer.
<li>Have only a content viewer.<br>
<br>
<p> <img src="../images/popwin-small.gif" > </p>
</ul>
<p> <b>Secondary windows</b>:
<ul type="circle">
<li>Can be displayed anywhere on the screen.
<li>Can be iconified, resized, and moved by the user.
<li>Persist until they are dismissed or the help viewer is dismissed.
<li>Can contain a navigation pane and a toolbar, but by default have a content
viewer only.<br>
<br>
<p align="left"><img src="../images/secwin-small.gif" > </p>
</ul>
<h3>Working with Popups and Secondary Windows</h3>
<p> You define the characteristics of a popup or secondary window
by using a set of parameters with the <code><object></code>
tag. For example, the following <code><object></code>
tag definition creates a secondary window that uses the presention
named "secondary window" defined in the <a href="helpset.html#helpsetexample">helpset
file</a>. The secondary window is activated by clicking the
text object "Click here".
<pre><object classid="java:com.sun.java.help.impl.JHSecondaryViewer">
<param name="content" value="../topicB/task_topic.html">
<param name="viewerActivator" value="javax.help.LinkLabel">
<param name="viewerStyle" value="javax.help.SecondaryWindow">
<param name="viewerSize" value="300,400">
<param name="viewerName" value="secondary window">
<param name="text" value="Click here">
<param name="textFontFamily" value="SansSerif">
<param name="textFontSize" value="x-large">
<param name="textFontWeight" value="plain">
<param name="textFontStyle" value="italic">
<param name="textColor" value="red">
</object></pre>
<p>This popup object has the following characteristics:
<ul type="circle">
<li>The content of the window is the file at the location <code>../topicB/glossary_def.html</code>.</li>
<li>The object that the user clicks (<code>viewerActivator</code>) is a link.</li>
<li>The type of window (<code>viewerStyle</code>) is a popup.</li>
<li>The size of the window (<code>viewerSize</code>) is 300 pixels wide by 400
pixels high.</li>
<li>The text that the user sees in the link is "Click here".</li>
<li>The remaining <code>param </code>values define the font, font size, weight,
style, and color of the text that the user sees.</li>
</ul>
<p>The <<code>param</code>> element specifies parameters to the JHSecondaryViewer
component. The <<code>param</code>> element takes two attributes: <code>name</code>,
and <code>value</code>. Parameters can be specified in any order. If parameters
conflict, the one specified last is used. Valid parameter names are: </p>
<ul type="circle">
<li><code>viewerStyle</code>
<li><code>content</code>
<li><code>viewerActivator</code>
<li><code>viewerSize</code>
<li><code>viewerLocation</code>
<li><code>viewerName</code>
<li><code>iconByName</code>
<li><code>iconByID</code>
<li><code>text</code>
<li><code>textFontFamily</code>
<li><code>textFontSize</code>
<li><code>textFontWeight</code>
<li><code>textFontStyle</code>
<li><code>textColor</code>
</ul>
<h3></h3>
<p>The following sections describe each element of the object tag definition and
provide examples of a parameter that performs a particular function.</p>
<h3>Window Type (<tt>viewerStyle</tt>)</h3>
<p> The type of window, popup or secondary, is defined by the following parameter:
<pre> <param name="viewerStyle"
value="javax.help.Popup"|"<code>javax.help.SecondaryWindow</code>"></pre>
<p>If you omit this parameter, the window defaults to a secondary window.
<p>For example, the following parameter specifies a popup:
<pre> <param name="viewerStyle" value="javax.help.Popup"></pre>
<h3>Content or ID</h3>
<p> The content of the object is defined by one of the following parameters:
<pre> <param name="content" value="<i>URL</i> ><br> <param name="id" value="<i>MapID</i> ></pre>
<p>
<p>The content of popups and secondary windows is rendered by the same HTML engine
used in the main help viewer. Anything that is rendered in the main help viewer
can be used in a popup or secondary window, including links, graphics, and lightweight
components (for example, popup/secondary windows). You can specify the topics
displayed in a window by using a URL or a JavaHelp system map ID.
<table >
<tr valign="top">
<td nowrap ><img src="../../images/hg_note.gif" width="18" height="13">
<td > If you use a link in a popup or secondary window, whatever
you link to will also be displayed in that same window. Therefore, links
are not often used in these kinds of windows because it is preferable to
keep users in the main viewer where they have access to the TOC, index,
and other navigational tools.
</table>
<p>
<h3><a name="activate">Activation</a> (<tt>viewerActivator</tt>)</h3>
<p>You indicate the object that the user clicks to activate the window with the
following parameter:
<pre> <param name="viewerActivator"
value="<code>javax.help.LinkButton</code>"|"javax.help.LinkLabel"></pre>
<p>Users activate popup/secondary windows by clicking one of the following objects:
<h4> Button (<img src="../images/sec_win_button.gif">)
</h4>
<p> This object is a standard button provided as part of the popup or secondary
window component. You can use the button as pictured to the left or you can
specify a string of text or an image to replace the ">" character on the button.
</p>
<p>The following sample code defines a button with the text "ClickMe":
</p>
<pre> <param name="viewerActivator" value="<code>javax.help.LinkButton</code>">
<param name="text" value="ClickMe"></pre>
<p>Here's what this button looks like: <img src="../images/clickmebtn.gif" width="51" height="22" align="absbottom"></p>
<p>The following sample code defines a button that has a GIF image on it: </p>
<pre> <param name="viewerActivator" value="<code>javax.help.LinkButton</code>">
<param name="text" value="../images/popup_icon.gif"></pre>
<p>Here's what this button looks like: <img src="../images/popupbtn.gif" width="30" height="30" align="absbottom"></p>
<h4>Text object </h4>
<p> This object is a specified string of text inserted inline with the text of
the topic. You can control font characteristics of the text to make it stand
out. </p>
<p>For example, following parameters define the text object "Click here" to be
SanSerif, medium in size, bold, italic, and blue: </p>
<pre> <param name="viewerActivator" value="javax.help.LinkLabel">
<param name="text" value="Click here">
<param name="textFontFamily" value="SansSerif">
<param name="textFontSize" value="medium">
<param name="textFontWeight" value="bold">
<param name="textFontStyle" value="italic">
<param name="textColor" value="blue"></pre>
<p>Here's what this text looks like: <font face="Arial, Helvetica, sans-serif" size="3" color="#0000FF"><i><b>Click
here</b></i></font></p>
<p></p>
<h4>Graphic object </h4>
<p> This object is a GIF or JPG image.</p>
<p>The following sample code defines a GIF image from the file <code>rel_topic_button.gif</code>:
</p>
<pre> <param name="viewerActivator" value="<code>javax.help.LinkLabel</code>">
<param name="iconByName"
value="../images/rel_topic_button.gif"></pre>
<p>Here's what this button looks like: <img src="../images/rel_topic_button.gif" width="12" height="12" align="baseline"></p>
<p> </p>
<h3>Window Size (<tt>viewerSize</tt>>, Location (<tt>viewerLocation</tt>) ,
and Name (<tt>viewerName</tt>)</h3>
<p> You can specify the height and width of a popup or secondary window. When
content exceeds the size of the window, scroll bars are automatically added
to the window. For example, to specify a width of 300 pixels and a height of
400 pixels, use the following parameter:
<pre> <param name="viewerSize" value="300,400"></pre>
<p>For secondary windows, you can also specify the window's position and name.
<p><b>Window Location</b>
<p> You can specify the position of secondary windows on the screen. The parameter
specifies the x,y position (in pixels) of the upper left corner of the secondary
window on the screen, with 0,0 being the upper left corner of the screen. Popups
ignore this parameter. For example, the following parameter specifies a window
whose top left corner is 300 pixels from the left side of the screen and 400
pixels from the top:
<pre> <param name="viewerLocation" value="300,400"></pre>
<p> <b>Named Windows</b> (secondary windows only)
<p> You can name secondary windows. Doing so enables you to reuse an already active
window. Popups ignore this parameter.
<p>For example, the following parameter defines a window with the name glossary_window:
<pre> <param name="viewerName" value="glossary_window"></pre>
<h3>Text</h3>
<p> When you add text to a button or use a text object as an activator, you can
control the following font characteristics:
<table width=99% border=0 cellpadding=10>
<tr valign="top">
<td nowrap> <p><b>Font family</b></p>
<p>
Parameter name:<br>
<code> textFontFamily</code></td>
<td > <p>You can set the font family to: </p>
<dd>Serif
<dd>SansSerif
<dd>Monospaced
<dd>Dialog
<dd>DialogInput
<dd>Symbol
</dd>
<p>For example,
<pre><param name="textFontFamily" value="SansSerif"></pre>
</td>
</tr>
<tr valign="top">
<td nowrap > <p><b>Font size</b></p>
<p>
Parameter name:<br>
<code>textFontSize</code></td>
<td > <p>You can set the size of the font to:</p>
<dd>xx-small
<dd>x-small
<dd>small
<dd>medium
<dd>large
<dd>x-large
<dd>xx-large
<dd>bigger (Increases the current base font size by 1)
<dd>smaller (Decreases the current base font size by 1)
<dd><i>nn</i>pt (Sets the font size to a specific point value of <i>nn</i>)
<dd>+<i>n</i> (Increases the current base font size by a value of <i>n</i>)
<dd>-<i>n</i> (Decreases the current base font size by a value of <i>n</i>)
<dd><i>n</i> (Sets the font size to the point size associated with the
index <i>n</i>)
</dd>
<p>For example, <pre><param name="textFontSize" value="x-large"></pre>
</td>
</tr>
<tr valign="top">
<td nowrap > <p><b>Font weight</b></p>
<p>
Parameter name:<br>
<code>textFontWeight</code></td>
<td > <p>You can set the weight of the font to:
</p>
<dd>plain
<dd>bold
</dd>
<p>For example, <pre><param name="textFontWeight" value="plain"></pre>
</td>
</tr>
<tr valign="top">
<td nowrap > <p><b>Font style</b></p>
<p>
Parameter name:<br>
<code>textFontStyle</code></td>
<td > <p>You can set the style of the font to:
</p>
<dd>plain
<dd>italic
</dd>
<p>For example, <pre><param name="textFontStyle" value="italic"></pre>
</td>
</tr>
<tr valign="top">
<td nowrap > <p><b>Font color</b> </p>
<p>Parameter name:<br>
<code>textColor</code></td>
<td > <p>You can set the color of the font to:</p>
<dd>black
<dd>blue
<dd>cyan
<dd>darkGray
<dd>gray
<dd>green
<dd>lightGray
<dd>magenta
<dd>orange
<dd>pink
<dd>red
<dd>white
<dd>yellow</dd>
<p>
For example, <pre><param name="textColor" value="red"></pre></td>
</tr>
</table>
<p> <img src="../../images/hg_see.gif" width="18" height="13"><b>See also:</b>
<dl>
<dd><a href="../dev/lwcomp.html">Creating Lightweight Java Components</a>
</dl>
</body>
</html>