Changes for page How to add an image to a Component

Summary

• Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Parent

...	...	@@ -1,0 +1,1 @@
	1	+WOLips Tutorials

Content

...	...	@@ -1,13 +1,13 @@
1		-**Problem:** you want to add an image to the HTML page of a Component; being an highly skilled application developer with the good sense to apply your talents with WebObjects :D , you expect to do this by using the <img src=" "> tag in the HTML, and are confused as to how to achieve it in WebObjects.
	1	+**Problem:** you want to add an image to the HTML page of a Component; being an highly skilled application developer with the good sense to apply your talents with WebObjects , you expect to do this by using the <img src=" "> tag in the HTML, and are confused as to how to achieve it in WebObjects.
2	2
3		-**Discussion:** WebObjects provides the WOImage tag to manage images in component pages which obviates the 'img' tag, and which can be somewhat unintuitive for the beginning WO developer. The tag supports all the expected HTML img attributes WOL:as far as I can tell; needs checking and the 'filename' attribute which references the location of the image to WebObjects. The images themselves must
	3	+**Discussion:** WebObjects provides the WOImage tag to manage images in component pages which obviates the 'img' tag, and which can be somewhat unintuitive for the beginning WO developer. The tag supports all the expected HTML img attributes [WOL:as far as I can tell; needs checking] and the 'filename' attribute which references the location of the image to WebObjects. The images themselves must
4	4
5		-**Question:** Yeah, but why can't I just make a static reference in the usual way? Well actually, you can WOL:link required, but you don't really want to explanation required: load balancing, web server resources, etc. The WOImage solution is elegant, and it will provide
	5	+**Question:** Yeah, but why can't I just make a static reference in the usual way? Well actually, you can [WOL:link required], but you don't really want to [explanation required: load balancing, web server resources, etc]. The WOImage solution is elegant, and it will provide
6	6
7	7	**Solution:**
8	8
9	9	1. Create a suitable image directory structure in your project
10		-1. In&nbsp; the filesystem, add the image into your chosen directory
	10	+1. In  the filesystem, add the image into your chosen directory
11	11	1. Include the folders and image file as WebServerResources
12	12	1. Add a WOImage tag to your page and reference the image in the .wod mapping using the 'filename' attribute
13	13
...	...	@@ -14,26 +14,26 @@
14	14	\\
15	15
16	16	1. Create a suitable image directory structure in your project
17		-11. In Eclipse Package Explorer, right-click the project and select&nbsp; New > Folder (image pending) and name the folder something appropriate such as 'images'
	17	+11. In Eclipse Package Explorer, right-click the project and select  New > Folder (image pending) and name the folder something appropriate such as 'images'
18	18	11. Choose the parent folder, which is the project you're working in (image pending)
19	19	11. Proceed in this way, building the directory structure you want
20		-1. In&nbsp; the filesystem, add the image into your chosen directory
21		-11. WOL:this seems clunky and there may be a better way of doing it from Eclipse directly
	20	+1. In  the filesystem, add the image into your chosen directory
	21	+11. [WOL:this seems clunky and there may be a better way of doing it from Eclipse directly]
22	22	11. Eclipse updates the view showing your added image file
23	23	1. Include the folders and image file as WebServerResources
24		-11. In the Package Explorer, right-click the top folder, and select WOLips Tools > Include as WebServerResource WOL:image pending
	24	+11. In the Package Explorer, right-click the top folder, and select WOLips Tools > Include as WebServerResource [WOL:image pending]
25	25	11. Notice that your folder structure has been added to the build directory
26	26	1. Add a WOImage tag to your page and reference the image in the .wod mapping using the 'filename' attribute
27	27	11. In the WOLips perspective, open the component to which you wish to add your image, and double-click the .wod file eg. Main.wod; it should open the .HTML and .wod files in WOLips Builder view
28	28	11. Use the WOLips button at the top of the screen to insert a WOImage tag in the .html file and a binding in the .wod file (image pending)
29	29	11. Name the WebObject something appropriate (image pending)
30		-11. Use code completion (cntrl-space) in the .wod file to display the usual <IMG> attributes (image pending), select&nbsp; filename
31		-11. Complete&nbsp; the filename attribute to match the path to your image, leaving out the leading '/'; in our example, that is
	30	+11. Use code completion (cntrl-space) in the .wod file to display the usual <IMG> attributes (image pending), select  filename
	31	+11. Complete  the filename attribute to match the path to your image, leaving out the leading '/'; in our example, that is
32	32
33	33	LoginBackground : WOImage {
34		-filename = "images/backgrounds/loginBackground.gif";
35		-}
	34	+ filename = "images/backgrounds/loginBackground.gif";
	35	+ }
36	36
37	37	1.
38		-11. Run your application, with any luck, it should All Just Work™ (image pending) :-)
39		- \\
	38	+11. Run your application, with any luck, it should All Just Work™ (image pending)
	39	+\\