Last updated
Was this helpful?
Last updated
Was this helpful?
This guide will show how to use the image component in your applications. The image component can be used for a variety of purposes, such as displaying logos, icons, product images, and other graphics. It can also be used to display dynamically generated images, such as charts or graphs. Overall, the image component is a simple but essential component in Servoy for displaying visual content on forms.
To see a live sample of the component you can go .
Image, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the image in the to see a list of properties in the . Below are some common properties and how to set them at design-time.
Image, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what will happen on-click. In this case, just enter the value into the editor. For more options open the .
The image can be selected from the ones pre-loaded in the media folder of the application or related to a media field of a database Just select the desired field or image in the media field of the property editor of the image component.
Note: Make sure that the image file or the URL you specify is accessible and correctly formatted. Additionally, consider using relative paths or dynamically retrieving the image source from a database or other data source for more flexibility.
Like all components, a Image can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the styleClass property.
Like most components, Image have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Image is the onAction event, which is triggered when the Image is clicked or the user hits the Enter key while the Image has focus.
Image, like many components, can be modified at runtime through code. Below are a few examples of controlling a image from code.
You can easily change the enabled state of a image at runtime. Enabling the image component will allow to import or export an image during runtime. If the image component is enabled buttons for import and export images will be shown
You can easily change the visible state of the image component at runtime.
Like most components, a Image has API methods which can be called from code. Below is an example of common API calls.
You can easily give keyboard focus to a image using the requestFocus method.
You can easily add a style class to a image using the addStyleClass method.
The following articles are recommended for additional reading:
To Handle the event, double-click the value for the onAction property in the . You will see the . You'll have the option select an existing Method or create a new Method. The method will be called when the button's onAction event is fired and the object will be passed to it.
See the for comprehensive list of
Guide for using Image component in your applications