|
1 <html> |
|
2 <head> |
|
3 <title>ExperienceUI Documentation Content Frame</title> |
|
4 <link rel=stylesheet href=style.css type=text/css> |
|
5 <script type=text/javascript src=cmd.js></script> |
|
6 </head> |
|
7 |
|
8 <body bgcolor="#FFFFFF" style="background-color:#FFFFFF;margin:0px;padding:0px"> |
|
9 |
|
10 <table border=0 width=100% height=100%> |
|
11 |
|
12 <tr> |
|
13 |
|
14 <td valign=top style=margin:10px;padding:10px> |
|
15 |
|
16 <a name=basic id=basic></a> |
|
17 |
|
18 <h1>How skins work</h1> |
|
19 |
|
20 <p style="margin-left: 0.2in"> |
|
21 In the ExperienceUI world, there are two ways of doing the actual skinning. The first - and most common - is the conventional |
|
22 NSIS-based method of skinning. The second is skinning using an external plugin, such as <a href=wansis.htm>WAnsis</a>. The |
|
23 define XPUI_SKIN applies only to conventional skins; XPUI_WANSIS_SKIN applies to installers using WAnsis. |
|
24 </p> |
|
25 <p style="margin-left: 0.2in"> |
|
26 Blah |
|
27 </p> |
|
28 |
|
29 <h1>Basic Settings</h1> |
|
30 |
|
31 <font face=Verdana style=font-size:8pt> |
|
32 |
|
33 <script type="text/javascript"> |
|
34 define("XPUI_SKIN", "skinfilename_nodir_noext", "Sets the skin used for your installer. The skins included with the ExperienceUI are Windows XP, Orange, and Modern-blue. Behind the scenes, the ExperienceUI includes a skin file with:<br><code>!include ${NSISDIR}\\Contrib\\ExperienceUI\\Skins\\${XPUI_SKIN}.xpuiskin</code><br><br><b>Note:</b> to use one of the new WAnsis skins (Bliss, LCD, or Forum) please see the <a href=wansis.htm>WAnsis Page</a>.<br>", "undefined<br>Example: <code>!define XPUI_SKIN \"Windows XP\"</code>"); |
|
35 define("XPUI_BRANDINGTEXT", "\"Text\"", "Sets the text at the bottom of the installer.","\" \" [blank string]"); |
|
36 document.write("<div style='margin-left:0.2in'>"); |
|
37 define("XPUI_BRANDINGTEXT_COLOR_FG", "hex_color", "The foreground color of the branding text.", "606060"); |
|
38 define("XPUI_BRANDINGTEXT_COLOR_BG", "hex_color", "The drop shadow color of the branding text.", "808080"); |
|
39 document.write("<\/div>"); |
|
40 define("XPUI_UI", "Path_to_uifile", "Sets the NSIS dialog file used for all of the installer dialogs except IDD_INST (not IDD_INSTFILES). To create custom UI files, use Resource Hacker or another resource editor.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\UIs\\UI.exe</code>"); |
|
41 define("XPUI_UI_IDDINST", "Path_to_uifile", "The UI file used for dialog 105 (the wrapper dialog for all of the other \"child\" windows.) It is recommended that you leave this at the default setting.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\UIs\\HeaderUI.exe</code>"); |
|
42 define("XPUI_DISABLEBG", "<i>No parameters</i> (true/false value)", "Define this to disable all of the background effects. Use this if you want to save a little space if you are distributing your program over the web. This define also disables any custom backgrounds that skins may have.", "true/<b>false</b>"); |
|
43 define("XPUI_LEFTLOGO", "Image_file", "The Left Logo is the image on the left of the installer, usually an XP-style \"computer\" graphic. Recommended size: <b>240</b>x<b>349</b> pixels.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\Skins\\Default\\LeftBranding.bmp</code>"); |
|
44 </script> |
|
45 <a name=reserve id=reserve></a> |
|
46 <script type="text/javascript"> |
|
47 define("XPUI_RESERVEFILES", "<i>No parameters</i> (true/false value)", "Define this before inserting language files to have all ExperienceUI files added to the beginning of the installer's data block. This can make the installer loading process a bit faster in large installers.", "true/<b>false</b>"); |
|
48 </script> |
|
49 |
|
50 <a name=abort id=abort></a> |
|
51 <h1>Abort Warning</h1> |
|
52 <p style=margin-left:0.2in> |
|
53 |
|
54 <font face=Verdana style=font-size:8pt> |
|
55 An abort warning is a message that shows when you click Cancel. If you don't use an abort warning, the installer will close |
|
56 as soon as you click Cancel. |
|
57 </font> |
|
58 |
|
59 <script type="text/javascript"> |
|
60 define("XPUI_ABORTWARNING", "No parameters (true/false value)", "Define this to make the installer show a confirmation screen when the user clicks Cancel.", "true/<b>false<\/b>"); |
|
61 define("XPUI_ABORTWARNING_TEXT", "String", "The text used on the confirmation message box.", "<div style=margin-left:0.6in;>You are about to quit <NAME> Setup.$\\n<br>$\\n<br>If you quit now, <NAME> will not be installed.$\\n<br>$\\n<br>Do you want to continue?</div>"); |
|
62 </script> |
|
63 |
|
64 <div style="border: 1px solid #709080; background-color: #C0F0D0; padding: 10px; margin-left: 0.2in"> |
|
65 <b>If you don't use an Abort Warning</b><br> |
|
66 <br> |
|
67 If you have an Abort Page in your installer, you may want to use an automatic abort warning in order to make the Abort page |
|
68 trigger properly. If you aren't using the ExperienceUI's built-in abort warning system, you can insert the following |
|
69 function to properly invoke the Abort page.<br> |
|
70 <br> |
|
71 <script type="text/javascript"> |
|
72 var noset; |
|
73 function expandFunction(name) { |
|
74 if(document.getElementById(name+"Function").style.display=="block") { |
|
75 document.getElementById(name+"Function").style.display="none"; |
|
76 document.getElementById(name+"Toggle").src="../Images/plus.gif"; |
|
77 if(!noset) { |
|
78 document.getElementById(name+"Trigger").innerText=unescape("Expand "+name+" function"); |
|
79 } |
|
80 } else { |
|
81 document.getElementById(name+"Function").style.display="block"; |
|
82 document.getElementById(name+"Toggle").src="../Images/minus.gif"; |
|
83 if(!noset) { |
|
84 document.getElementById(name+"Trigger").innerText=unescape("Collapse "+name+" function"); |
|
85 } |
|
86 } |
|
87 noset=false; |
|
88 } |
|
89 </script> |
|
90 <a href="javascript:expandFunction('abort');"><img id=abortToggle border="0" hspace=3 src="../Images/plus.gif"></a><a href="javascript:expandFunction('abort');" id=abortTrigger>Expand Abort function</a><br> |
|
91 <div style="margin-left:0.2in;display:none" id=abortFunction><br> |
|
92 <font face="Courier New" style="font-size: 8pt"> |
|
93 <font color=#0000FF><b>Function </b></font><font color=#000000>.onUserAbort</font><br> |
|
94 <font color=#0000FF><b>StrCmp</b> </font><font color=#800000><i>$NOABORTWARNING</i></font> <font color=#008080>1</font> <font color=#000000>CloseMe</font><br> |
|
95 <font color=#0000FF><b>MessageBox </b><font color=#FF8040>MB_YESNO</font><font color=#000000>|</font><font color=#FF8040>MB_ICONQUESTION</font> <font color=#008080>"Are you sure you want to cancel Setup?"</font> <font color=#FF8040>IDNO</font> <font color=#000000>NoAbort</font><br> |
|
96 <font color=#000080><b># any custom code you want before the Abort page is called here...</b></font><br> |
|
97 <font color=#008000>!insertmacro </font><font color=#000000>XPUI_USERABORT</font><br> |
|
98 <font color=#000000>NoAbort:<br> |
|
99 <font color=#0000FF><b>Abort</b></font><br> |
|
100 <font color=#000000>CloseMe:</font><br> |
|
101 <font color=#000080><b># any custom code you want before the installer exits here...</b></font><br> |
|
102 <font color=#0000FF><b>FunctionEnd</b></font> |
|
103 </font> |
|
104 </font> |
|
105 </font> |
|
106 </div> |
|
107 |
|
108 </div> |
|
109 <br /> |
|
110 <div style="border: 1px solid #709080; background-color: #C0F0D0; padding: 10px; margin-left: 0.2in"> |
|
111 <b>$NOABORTWARNING: The mystery revealed</b><br /> |
|
112 <br /> |
|
113 I just realized that though this "mystery" variable has been used with the ExperienceUI forever past, it never got a |
|
114 mention in the documentation. Here's why it's here:<br /> |
|
115 <br /> |
|
116 <b>Note:</b> In ExperienceUI versions <=1.1, the variable was $NOABORTWARNING. It was renamed to $NOABORTWARNING in versions 1.11.<br /> |
|
117 <br /> |
|
118 The Abort and InstSuccess pages, as you may have noticed, take advantage of an NSIS hack to make the Cancel button close |
|
119 the installer window without a prompt. The $XPUI_NOABORTWARNING variable is always declared, even if it isn't used, because |
|
120 of the way the ExperienceUI references variables. When the Abort page or the InstSuccess page is triggered, it uses |
|
121 <code>StrCpy $NOABORTWARNING 1</code> to make the .onUserAbort function quit the installer immediately after the Cancel |
|
122 button (which has become the close button) is clicked.<br /> |
|
123 <br /> |
|
124 The thing is, when I created the first tests of the ExperienceUI code, I was also working on a few installers for some |
|
125 people. The installers used the Modern UI, but with many custom pages (such as the Install Success page) that later |
|
126 found their way into the ExperienceUI. I used the $NOABORTWARNING variable to keep track of whether the Cancel button |
|
127 <i>cancelled</i> the installer or <i>closed the installer window</i>. The variable was renamed to $XPUI_NOABORTWARNING in ExperienceUI version 1.11.<br /> |
|
128 <br /> |
|
129 You can use this variable too - all the ExperienceUI pages and functions understand it. If you know basic window |
|
130 manipulation (very C++), you can do this quite easily: Disable the "Next" button, and set $XPUI_NOABORTWARNING to 1. When you |
|
131 click Cancel on the affected page, the installer will quit instantly. Optionally, you can set the text on the Cancel |
|
132 button to Close or whatever. |
|
133 </div> |
|
134 |
|
135 </p> |
|
136 |
|
137 <a name=colors id=colors></a> |
|
138 <h1>Dialog Colors</h1> |
|
139 <p style=margin-left:0.2in> |
|
140 |
|
141 <script type="text/javascript"> |
|
142 define("XPUI_TEXT_COLOR", "HEX_COLOR", "The color used for all of the text in the installer.", "0xB4D3EA"); |
|
143 define("XPUI_TEXT_BGCOLOR", "HEX_COLOR", "The color used for the background of the installer.", "0x566978"); |
|
144 define("XPUI_TEXT_LIGHTCOLOR", "HEX_COLOR", "The color used on accented text.", "0xFFFFFF"); |
|
145 </script> |
|
146 |
|
147 </p> |
|
148 |
|
149 <a name=buttons id=buttons></a> |
|
150 |
|
151 <h1>Navigation Buttons</h1> |
|
152 |
|
153 <script type="text/javascript"> |
|
154 define("XPUI_BUTTONTEXT_NEXT", "Text", "The text used on the Next button.", "Next"); |
|
155 define("XPUI_BUTTONTEXT_BACK", "Text", "The text used on the Back button.", "Back"); |
|
156 define("XPUI_BUTTONTEXT_CANCEL", "Text", "The text used on the Cancel button.", "Cancel"); |
|
157 define("XPUI_BUTTONTEXT_CLOSE", "Text", "The text used on the Finish button. Usually \"Done,\" \"Finish,\" or \"Close.\"", "Close"); |
|
158 </script> |
|
159 |
|
160 <p style=margin-left:0.2in> |
|
161 After defining custom text for buttons, that text will be used in the next language inserted. Defining any custom button |
|
162 text after inserting the last language will have no effect in the final installer. |
|
163 </p> |
|
164 |
|
165 <a name=pagebg id=pagebg></a> |
|
166 |
|
167 <h1>Page Background Image</h1> |
|
168 |
|
169 <p style="margin-left: 0.2in"> |
|
170 You can show a bitmap in the background of your installer's pages. Support for thie feature is still experimental, but it should work |
|
171 for most pages. Note that Stardock WindowBlinds 5.0 can cause problems with this, and 4.x versions are known to cause radio buttons and |
|
172 check boxes to not work at all. Also, avoid using icon controls that show an icon with a 32x32 image that contains an alpha channel, as this causes the background |
|
173 of the icon controls to show up as black. |
|
174 </p> |
|
175 |
|
176 <script type="text/javascript"> |
|
177 define("XPUI_BGIMAGE", "No parameters (true/false value)", "Define this to enable the use of a bitmap in the background of the main page area. Support for this feature is experimantal but works for most installers.", "true/<b>false</b>"); |
|
178 define("XPUI_BGIMAGE_BMP", "C:\\Path\\To\\Bitmap.bmp", "The bitmap file used for the background image. I recommend that you start with a blank canvas filled with the value used for XPUI_PAGE_BGCOLOR.", "<NSIS>\\Contrib\\ExperienceUI\\Skins\\Default\\Page.bmp<br />Recommended size: <b>693</b>x<b>512</b>"); |
|
179 </script> |
|
180 |
|
181 <p style="margin-left: 0.2in"> |
|
182 <b>A note on skins:</b><br /> |
|
183 <br /> |
|
184 When you use a page background image, you may need to change the Left Logo image. If you want to allow the user of your skin to turn the |
|
185 page background image on or off, you may want to use the following code to be sure that the Left Logo is changed properly.<br /> |
|
186 <br /> |
|
187 <a href="javascript:var noset=true;expandFunction('BGFunction');"><img id=BGFunctionToggle border="0" hspace=3 src="../Images/plus.gif"></a><a href="javascript:var noset=true;expandFunction('BGFunction');" id=BGFunctionTrigger>Expand code</a><br> |
|
188 </p> |
|
189 |
|
190 <div style="margin-left:0.3in;display:none" id=BGFunctionFunction><br> |
|
191 <pre> |
|
192 <code><span style="font: 10pt Courier New;"><span class="nsis1-directive">!ifdef</span><span class="nsis1-space"> XPUI_PAGE_BGIMAGE |
|
193 </span><span class="nsis1-directive">!insertmacro</span><span class="nsis1-space"> XPUI_DEFAULT XPUI_LEFTLOGO </span><span class="nsis1-string">"</span><span class="nsis1-variable">${NSISDIR}</span><span class="nsis1-string">\Contrib\ExperienceUI\Skins\MySkin\LeftLogo_PageBG.bmp" |
|
194 </span><span class="nsis1-directive">!else |
|
195 </span><span class="nsis1-space"> </span><span class="nsis1-directive">!insertmacro</span><span class="nsis1-space"> XPUI_DEFAULT XPUI_LEFTLOGO </span><span class="nsis1-string">"</span><span class="nsis1-variable">${NSISDIR}</span><span class="nsis1-string">\Contrib\ExperienceUI\Skins\MySkin\LeftLogo.bmp" |
|
196 </span><span class="nsis1-directive">!endif |
|
197 </span></span> |
|
198 </code></pre> |
|
199 </div> |
|
200 |
|
201 <a name=header id=header></a> |
|
202 |
|
203 <h1>Header Image</h1> |
|
204 |
|
205 <script type="text/javascript"> |
|
206 define("XPUI_HEADERIMAGE_BMP", "Bitmap_file", "The bitmap used for the header background at the top of the installer.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\Header.bmp</code><br>Recommended size: <b>693</b>x<b>57</b> pixels"); |
|
207 define("XPUI_HEADERIMAGE_NORESIZETOFIT", "No Parameters (true/false value)", "Don't resize the header image to fit the bitmap control. Avoid using this option if your bitmap fits exactly.", "true/<b>false</b>"); |
|
208 define("XPUI_UNHEADERIMAGE_BMP", "Bitmap_file", "The bitmap used for the header background at the top of the <b>uninstaller</b>.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\Header.bmp</code><br>Recommended size: <b>693</b>x<b>57</b> pixels"); |
|
209 </script> |
|
210 |
|
211 <a name=bottom id=bottom></a> |
|
212 |
|
213 <h1>Bottom Image</h1> |
|
214 |
|
215 <script type="text/javascript"> |
|
216 define("XPUI_NOBOTTOMIMAGE", "No parameters (true/false value)", "By default, the ExperienceUI uses a bitmap at the bottom of the installer window behind the Back, Next, and Cancel buttons. Define this to turn this off and save ~2kb.", "true/<b>false</b>"); |
|
217 define("XPUI_BOTTOMIMAGE_BMP", "Bitmap_file", "The bitmap used for the button background at the bottom of the installer.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\Bottom.bmp</code><br>Recommended size: <b>693</b>x<b>70</b> pixels"); |
|
218 define("XPUI_UI_BOTTOMIMAGE", "Path_to_uifile.exe", "The IDD_INST dialog file for installers that use bottom images.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\HeaderUI_BtmImg.exe</code>"); |
|
219 define("XPUI_BOTTOMIMAGE_NORESIZETOFIT", "No Parameters (true/false value)", "Don't resize the bottom image to fit the bitmap control. Avoid using this option if your bitmap fits exactly.", "true/<b>false</b>"); |
|
220 define("XPUI_NO<u>UN</u>BOTTOMIMAGE", "No parameters (true/false value)", "By default, the ExperienceUI uses a bitmap at the bottom of the <b>un</b>installer window behind the Back, Next, and Cancel buttons. Define this to turn this off and save ~2kb.", "true/<b>false</b>"); |
|
221 define("XPUI_UNBOTTOMIMAGE_BMP", "Bitmap_file", "The bitmap used for the button background at the bottom of the <b>uninstaller</b>.", "<code>${NSISDIR}\\Contrib\\ExperienceUI\\Bottom.bmp</code><br>Recommended size: <b>693</b>x<b>70</b> pixels"); |
|
222 </script> |
|
223 |
|
224 <a name=gradient id=gradient></a> |
|
225 |
|
226 <h1>Background Gradient</h1> |
|
227 |
|
228 <script type="text/javascript"> |
|
229 define("XPUI_BGGRADIENT", "No parameters (true/false value)", "Use an NSIS-Standard background gradient for the installer.", "true/<b>false</b>"); |
|
230 define("XPUI_BGGRADIENT_CUSTOMCOLORS", "No parameters (true/false value)", "Use customized colors for the background gradient. Usually, the ExperienceUI sets the text color as the top part, the background color as the bottom gradient, and the light text color as the background text.", ""); |
|
231 define("XPUI_BGGRADIENT_CUSTOMCOLORS_TOP", "HEX_COLOR", "Your own color for the top of the background gradient.", "<XPUI text color>"); |
|
232 define("XPUI_BGGRADIENT_CUSTOMCOLORS_BOTTOM", "HEX_COLOR", "Your own color for the bottom of the background gradient.", "<XPUI text BG color>"); |
|
233 define("XPUI_BGGRADIENT_CUSTOMCOLORS_TEXT", "HEX_COLOR", "Your own color for the text that is usually the product name at the top of the background gradient.", "<XPUI light text color>"); |
|
234 </script> |
|
235 |
|
236 </td> |
|
237 |
|
238 </tr> |
|
239 |
|
240 <tr> |
|
241 |
|
242 <td valign=bottom style=margin:0px;padding:0px> |
|
243 |
|
244 <p class=footer>Copyright © 2004-2006 Dan Fuhry. All rights except those explicitly given in the <a href=license_agreement.htm style=color:#A0A0D0 onmouseover="this.style.color='#A0A0A0'" onmouseout="this.style.color='#A0A0D0'">license agreement</a> reserved.</p> |
|
245 |
|
246 </td> |
|
247 |
|
248 </tr> |
|
249 |
|
250 </table> |
|
251 |
|
252 </body> |
|
253 |
|
254 </html> |
|
255 |