The Image component provides a way to add an image, such as a
JPEG, GIF, or PNG file, to a Visual Web JSF page.
This component has support for client-side JavaScript functions that enable you to perform actions on the client without a trip back to the server. For more information on this advanced feature, choose Help > JavaScript References > Project Woodstock 4.1 Tag Library and navigate to webuijsf:image.
When you drop the image on your
page in the Visual Designer, you see a simple box with the word Image in it. If you right-click this box and choose Set Image, you see a dialog box that you can use
to specify the image in three ways:
Choose File.
You can navigate to a file in your filesystem and click OK. The image file is copied to the
project, and you can see it in the
under project-name > Web Pages > resources. Choosing this option sets the Image component's url property to /resources/image-file.
Enter URL. Enter a URL to a web location for the file. For example, enter the following URL:
.
Choosing this option sets the Image component's url property to the URL you entered.
Set Theme Icon. Displays a list of icons that are in the theme associated with your application. Select an icon name in the list to see it displayed in the dialog box. Choosing this option sets the Image component's icon property to the icon name you chose.
If the url property has already been set, choosing an icon does not change the appearance of the component, because the url property takes precedence over the icon property. For the icon to be visible, the url property must not be set.
Another way to add an image to your page is to drag its file node from a file explorer dialog to your page. For example, if you open the Microsoft Windows File Explorer and navigate to a GIF image, you can drag its node to your page and drop the image file where you want it to appear on the page. The IDE adds the file to your resources directory, which you can see under the project-name > Web Pages folder in the
After dropping the component on your page, you can select the component and edit its properties in the Image component's
Properties window. If necessary, right-click the component and choose
Properties to display the Properties window. In addition to the properties described above that specify the image to be displayed, some typical properties
you might set are:
id. The name of the Image component. In the
JSP file, this name is the value of the component's id
attribute. In the page bean, this property's value is
the name of the Image object.
alt. The alternate text for the image. The alt
text describes the graphic element in the HTML page, is
readable by screen readers, can display as a tool tip,
and displays when the user has display of images turned
off in the web browser. It is equivalent to the HTML attribute alt of the <img> tag.
align. The position of the image relative to its context on the page. Pick a position from the drop down list to align the image to other components.
border. Specifies the width of the border around the image in pixels. The default value for this property depends on the client browser.
You can also right-click the component and choose one of
the following options:
Bind to Data. Opens a dialog box that enables you to bind the component's url property to a data provider or to an object that supplies its value so you can update the image dynamically. For more information, see Bind to Data Dialog Box.
Set Image. Opens a dialog box that enables you to set the image to a file or an icon. Specifying the image in this dialog sets the appropriate properties for you. The url property specifies an image in a file or at a URL on the Web.The icon property specifies an icon in the default theme.
Property Bindings. Opens a dialog box that enables you to bind component properties in addition to url to other objects
or properties that update this component's properties
automatically.
Add Binding Attribute. This option adds a binding attribute to the component.
Note: If you plan to script the component in Java code, you must manually add a binding attribute, which is bound using a value binding expression to a property of the backing page bean.
Remove Binding Attribute. This option removes the binding attribute from the component.