gecko-dev/cck/docs/prefstree/PrefsTree.htm
2002-05-21 02:22:23 +00:00

209 lines
6.2 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="author" content="Steve Meredith">
<title>How to Add a PrefsTree Pref Editor Widget to a CCK Wizard Page</title>
</head>
<body text="#000000" bgcolor="#ffffcc" link="#0000ff" alink="darkblue"
vlink="#cc0000">
<div align="right">Changed params to <tt>processPrefsTree</tt>&nbsp;&nbsp;&nbsp;
02 Jan 2002<br>
Original&nbsp;&nbsp;&nbsp; <strike>11 Dec 2001</strike><br>
Steve Meredith<br>
</div>
<h1>How to Add a PrefsTree Pref Editor Widget to a CCK Wizard Page</h1>
<h2>Introduction</h2>
The Pref Editor is a widget for CCK/Factory, named <i>PrefsTree </i>in
.ini files. It is a tree control which displays prefs in a hierarchy and
allows a user to edit their values. It reads an XML file to determine the
structure of the tree control. The details of the XML file format can be
found in the document&nbsp;<a href="PrefsTreeFileFormat.htm">PrefsTreeFileFormat.htm</a>.
That document, together with this one, describe how to add a pref editor
tree control to CCK.
<h2>Example</h2>
The easiest way to understand how to add a PrefsTree pref edit widget is
to look at an example.<br>
<br>
<img src="PrefsTreeEx2.jpg" alt="Screen shot example" width="638"
height="493">
<br>
<br>
<h3>The INI File</h3>
The .ini file used to insert this pref editor onto this widget page is
as follows:<br>
<code><br>
[Local Variables]<br>
Name=PrefsTree<br>
Title=Advanced Preferences<br>
Caption=1st level node<br>
Help=Online;%Root%Help\PrefsTree.html<br>
<br>
[Navigation Controls]<br>
onEnter=<br>
onNext=<br>
Help=<br>
<br>
[Image 4200]<br>
Type=Image<br>
Name=prefstree.bmp<br>
Value=<br>
Start_x=0<br>
Start_y=0<br>
Width=425<br>
Height=56<br>
<br>
[Widget 4201]<br>
Type=GlobalText<br>
Name=Text4201<br>
Value=Browse this tree to find other preferences that you want to customize.
Double-click to edit.<br>
Start_x=0<br>
Start_y=32<br>
Width=400<br>
Height=30<br>
<br>
[Widget 4202]<br>
Type=PrefsTree<br>
Name=AdvancedPrefs<br>
Attrib=MetaPrefs.xml<br>
Value=<br>
Start_x=0<br>
Start_y=45<br>
Width=405<br>
Height=181<br>
<br>
</code>
<table cellpadding="2" cellspacing="2" border="1" width="100%"
bgcolor="#ffffff">
<tbody>
<tr>
<td valign="top">Above is the section which defines the PrefsTree widget.
The <tt>Name</tt> is important if you want to hook up the control to some
buttons, as in our example. The <tt>Attrib</tt> specifies the name of the
prefs XML file. This file belongs in the root with the .exe files. Once edited,
a copy of the file gets saved in the working config directory. This is where
install builder picks up its values. The <tt>Value</tt> is not used.<br>
</td>
</tr>
</tbody>
</table>
<code><br>
[Widget 4203]<br>
Type=Button<br>
Name=Button4203<br>
Value=Open<br>
Start_x=0<br>
Start_y=232<br>
Width=40<br>
Height=14<br>
onCommand=OpenPrefTreeItem(AdvancedPrefs)<br>
<br>
</code>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" bgcolor="#ffffff">Above is the section defining the
"Open" button. When pressed, it calls <tt>OpenPrefTreeItem()</tt> for the
PrefsTree widget named in the parameter. If a pref is selected, a dialog
is open which allows the user to edit that text. If a group is selected, then
that group is expanded or collapsed, depending on its current state. You
can also use the right-button menu to open a pref for editing.<br>
</td>
</tr>
</tbody>
</table>
<code><br>
[Widget 4204]<br>
Type=Button<br>
Name=Button4204<br>
Value=Find Pref<br>
Start_x=50<br>
Start_y=232<br>
Width=40<br>
Height=14<br>
onCommand=FindPrefTreeItem(AdvancedPrefs)<br>
<br>
</code>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" bgcolor="#ffffff">Above is the section defining the
"Find Pref" button. When pressed, it calls <tt>FindPrefTreeItem()</tt> for
the PrefsTree widget named in the parameter. This function opens a <i>find
</i> dialog which is used to find any text associated with a pref.
It searches the pref name, its description, and its files for the text. You
can also use the right-button menu to open the <i>find </i>dialog.<br>
</td>
</tr>
</tbody>
</table>
<code><br>
[Widget 4205]<br>
Type=Button<br>
Name=Button4205<br>
Value=Find Next<br>
Start_x=100<br>
Start_y=232<br>
Width=40<br>
Height=14<br>
onCommand=FindNextPrefTreeItem(AdvancedPrefs)<br>
<br>
</code>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" bgcolor="#ffffff">Above is the section to define the
"Find Next" button. When pressed, if calls <tt>FindNextPefTreeItem()</tt>
for the PrefsTree widget named in the parameter. This function selects the
next pref which matches the last text search. It opens a <i>find </i>dialog
if "Find Pref" was never used.<br>
</td>
</tr>
</tbody>
</table>
<code><br>
[Widget 4206]<br>
Type=Button<br>
Name=Button4206<br>
Value=Add Pref<br>
Start_x=150<br>
Start_y=232<br>
Width=40<br>
Height=14<br>
onCommand=AddPrefTreeItem(AdvancedPrefs)</code><br>
<br>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" bgcolor="#ffffff">Above is the section to define the
"Add Pref" button. It calls <tt>AddPrefTreeItem()</tt> for the PrefsTree
widget named in the parameter. This function opens the <i>add </i>dialog
which prompts the user for the name and description of the new pref. It then
open the <i>edit </i>dialog which allows the user to set the value of the
new pref.<br>
</td>
</tr>
</tbody>
</table>
<h3>SCRIPT.IB</h3>
A SCRIPT.IB entry must be made in order for Install Builder process the
.XML file: <tt>processPrefsTree(PrefFile.xml</tt>,<tt>browser.xpi,bin/netscp6.cfg)</tt>.
Spaces are not allowed between the parameters. The first parameter must be
the name of the file as specified in the .ini file. The second param is the
.xpi file that the preference file is in. The first paramater is the preferences
file. If it ends with a .cfg, then it will be hashed.<br>
<br>
<br>
</body>
</html>