The following steps describe how to build a
sample that puts a .gif file on a Button. The following steps require that you
use a .gif file. A typical installation of Microsoft Office has a folder of .gif
files that you can select from to help you to develop your example. By default,
the folder of .gif files is located at C:\Program Files\Microsoft
Office\ClipArt\PUB60Cor.
- Start InfoPath. Create a blank form.
- In the Design Tasks task pane, click the
Controls link. Click the Button control.
A Button control appears on the blank form.
- Right-click the Button on the form, and
then click Button Properties. In the Button Properties dialog box, click the
Size tab. Change the height to 100 pixels. Change the width to 100 pixels.
Click OK.
- In InfoPath 2007, click Resource Files on
the Tools menu. In the Resource Files dialog box, click Add. Move to the
folder that contains the .gif files, and then double-click the .gif file
that you want. Click OK to close the Resource Files dialog box.
In InfoPath 2003, click Resource Manager on the Tools menu. In the Resource
Manager dialog box, click Add. Move to the folder that contains the .gif
files, and then double-click the .gif file that you want. Click OK to close
the Resource Manager dialog box.
On the File menu, click Save.
- In the File Name box, type Button1 to
change the name of the form. Save the form to a folder of your choice. Click
Save to close the Save As dialog box.
Note Do not close the form that you are designing.
- In InfoPath 2007, click Save As Source
Files on the File menu.
In InfoPath 2003, click Extract Form Files on the File menu.
- In the Browse for Folder dialog box, move
to the folder in which you saved the Button1 form. Click the folder, and
then click OK to close the Browse for Folder dialog box. On the File menu,
click Close to close the form.
- In Microsoft Windows Explorer, move to the
folder that contains the form and the files that were extracted from the
Button1.xsn file.
Note The folder contains the original Button1.xsn file and the following
extracted files:
o Manifest.xsf
o Sampledata.xml
o Template.xml
o Myschema.xsd
o View1.xsl
- Open the View1.xsl file in Notepad. To do
this, follow these steps:
a. Right-click the View1.xsl file.
b. Click Open With.
c. Click Notepad from the available options.
- In the View1.xsl file that is now open in
Notepad, locate the following line of code:
- <input class="langFont" title=""
style="WIDTH: 86px; HEIGHT: 85px" type="button" value="Button" xd:xctname="Button"
xd:CtrlId="CTRL1_5" tabIndex="0"/>
From the following style attribute, copy the part that is in quotation
marks:
style="BORDER: none; BACKGROUND-IMAGE: url(yourImageHere.gif);
BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat;"
Note What you copy will look similar to the following code
BORDER: none; BACKGROUND-IMAGE: urlYourImageHere.gif; BACKGROUND-POSITION:
left top; BACKGROUND-REPEAT: no-repeat;
Insert what you just copied into the existing style attribute so that the
completed line will now look similar to the following code:
<input class="langFont" title="" style="BORDER: none; BACKGROUND-IMAGE:
url(yourImageHere.gif);
BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat; WIDTH: 86px;
HEIGHT: 85px" type="button"
value="Button" xd:xctname="Button" xd:CtrlId="CTRL1_5" tabIndex="0"/>
- Change the style URL value from
url(yourimageHere.gif) to url(AG00174_.gif).
Note You can also use the file name for the .gif file you previously chose.
The code that appears will look similar to the following code:
<input class="langFont" title="" style="BORDER: none; BACKGROUND-IMAGE:
url(AG00174_.gif);
BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat; WIDTH: 86px;
HEIGHT: 85px" type="button"
value="Button" xd:xctname="Button" xd:CtrlId="CTRL1_5" tabIndex="0"/>
- Save the modified View1.xsl file. Close
Notepad.
- Move to the folder that has the files that
you extracted from Button1.xsn.
Note This is the folder with the modified View1.xsl file.
- Double-click Manifest.xsf to open the form
in InfoPath.
Note The original Button shows the .gif image at the upper left with the
word Button in the center of the Button.
- Close InfoPath.
- In Notepad, reopen the View1.xsl file. To
modify the "<input . . ./>" section, follow these steps:
Change the Button size to 100 pixels by 100 pixels.
You can do this by changing the WIDTH attribute of the Button and by
changing the HEIGHT attribute of the Button.
a. Delete the word Button to remove the word Button from the face of the
Button.
You can do this by changing the VALUE attribute of the Button.
b. Center the .gif image on the Button.
You can do this by changing the BACKGROUND-POSITION attribute of the Button.
The changed <input.../> element will look similar to the following code:
<input class="langFont" title="" style="BORDER: none; BACKGROUND-IMAGE:
url(AG00174_.gif);
BACKGROUND-POSITION: center; BACKGROUND-REPEAT: no-repeat; WIDTH: 100px;
HEIGHT: 100px" type="button"
value="" xd:xctname="Button" xd:CtrlId="CTRL1_5" tabIndex="0"/>
c. Save the modified View1.xsl file. Close Notepad.
- Replace the earlier version of the
Manifest.xsf file with the newer version of the Manifest.xsf file.
Note If you double-click the Manifest.xsf file, you open the form in
InfoPath. The changes are not in the form. This behavior occurs because the
earlier version of the Manifest.xsf file is in the cache. You must replace
the earlier version of the Manifest.xsf file with the current version of the
Manifest.xsf file. To do this, use either of the following methods:
o Method 1:
On the Windows command line, type the following command, and then press
ENTER:
InfoPath.exe /cache clearall
o Method 2:
a. Open the Manifest.xsf file in Notepad.
b. On the File menu, click Save As.
The Save As dialog box prompts whether you want to replace the existing file
with the same file name.
c. Click Yes
The newer version of the Manifest.xsf file has a newer time stamp.
Therefore, when you double-click the newer version of the Manifest.xsf file,
the cached file is discarded. The cached file is replaced with the newer
version of the Manifest.xsf file. After you complete either Method 1 or
Method 2, double-click the newer version of the Manifest.xsf file. You can
see your new Button.