1

I have placed a few image views to the scene, all pointing to the same image with different viewports.

generated fxml:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
    <ImageView fitHeight="150.0" fitWidth="200.0" layoutX="80.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
        <image>
            <Image url="@../../../../../Pictures/sas.png" />
        </image>
        <viewport>
            <Rectangle2D height="50.0" minY="50.0" width="50.0" />
        </viewport>
    </ImageView>
    <ImageView fitHeight="150.0" fitWidth="200.0" layoutX="308.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
        <viewport>
            <Rectangle2D height="50.0" minX="50.0" minY="50.0" width="50.0" />
        </viewport>
        <image>
            <Image url="@../../../../../Pictures/sas.png" />
        </image>
    </ImageView>
    <ImageView layoutX="225.0" layoutY="250.0">
        <image>
            <Image url="@../../../../../Pictures/sas.png" />
        </image>
    </ImageView>
</children>

Question is, will this create 3 instances of the same image in memory? If yes, then what is the best ways to avoid it, url("") in style attribute, css class? I would like to avoid creating css class for each individual icon!

Is it even worth using single large croped image for multiple icons & UI elements instead of small image for each at this day & age?

Steel Talon
  • 81
  • 1
  • 3

1 Answers1

2

A quick test shows that the ImageViews do not reference the same Image in memory.

To do so, you can either used css as you described, or you can define the Image once in the FXML with an <fx:define> block and reference it via its fx:id attribute:

<fx:define>
    <Image url="@../../../../../Pictures/sas.png" fx:id="sasImage" />
</fx:define>
<ImageView image="$sasImage" fitHeight="150.0" fitWidth="200.0" layoutX="80.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
    <viewport>
        <Rectangle2D height="50.0" minY="50.0" width="50.0" />
    </viewport>
</ImageView>
<ImageView image="$sasImage" fitHeight="150.0" fitWidth="200.0" layoutX="308.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
    <viewport>
        <Rectangle2D height="50.0" minX="50.0" minY="50.0" width="50.0" />
    </viewport>
</ImageView>
<ImageView image="$sasImage" layoutX="225.0" layoutY="250.0">
</ImageView>
James_D
  • 201,275
  • 16
  • 291
  • 322
  • Ah, I answered in terms of FXML: I'm not sure if SceneBuilder supports ``. – James_D Oct 29 '14 at 16:32
  • Problem is it makes file unreadable by scenebuilder, which can be tedious in large projects. So sticking to CSS is probably the right way. – Steel Talon Nov 01 '14 at 13:14
  • The one disadvantage of the css approach is that it doesn't set the `image` property on the `ImageView`. So if you needed to retrieve the image later in the controller with `ImageView.getImage()` you wouldn't be able to; the `` approach allows this. It's probably worth filing a [feature request](https://javafx-jira.kenai.com/secure/Dashboard.jspa) for `` support in SceneBuilder. – James_D Nov 01 '14 at 14:23