I would like to add an image to my web app, but I have some problems.
private void newImage(){
Image image = new Image("src/main/resources/images/sponsor.png");
absoluteLayout.addComponent(image);
}
I did something like that and it doesn't work. I searched for something about FileResource, but I still don't know how to do this.
My image file is placed in the directory src/main/resources/images:
I have also read the documentation site and it's still not working: https://vaadin.com/components/vaadin-image.
The existence of an absolute layout component and a Image class with a constructor taking only one argument implies that you're using Vaadin 8 (or older) whereas the documentation you linked to is for Vaadin 10 and newer.
As can be seen from the screenshot, the constructor parameter that you're passing the image path to is named caption. This is thus a text that is shown next to the image rather than a reference to the image data itself.
You need to also assign a Resource to the image, either as a second constructor parameter or using the separate setSource method. With your file in src/main/resources, the easiest way is to use a ClassResource that loads the data from the classpath.
Taken together, a working example would thus be something like this:
Image image = new Image();
image.setSource(new ClassResource("/images/sponsor.png"));
Related
I am trying to find the right approach in setting the placeholder image/resource (VectorDrawable resource in my case) for an ImageView that gets set, with the target image bitmap when it is available.
There are two approaches I saw in guides. I can either set a background using the background property on XML or programmatically using setBackground(). Then, I would set the target image using setImageDrawable().
The second approach is to use setImageDrawable() for the placeholder and later use setImageDrawable() again for the target image.
Both approaches work but I have noticed some UI lag when using the first approach. I am not sure if it is caused by the approach or not.
So, I want to know. What is the correct approach in using placeholders and why?
Thank you.
The second approach is always the best for this task.
But still, if you want to go with the first approach then the correct way to use it is like this
int sdk = android.os.Build.VERSION.SDK_INT;
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
setBackgroundDrawable();
} else {
setBackground();
}
when load image in ImageView changed src value, it's mean not changing background.
change background is expensive for android, It gets worse when we want to load a lot of images (like ListView, RecyclerView, ...).
for having better performance should be changed image src, not changing image background.
for changing image src you can use
image.setImageResource()
or
image.setImageDrawable()
change background suitable for a single image
In addition, all image loader support placeholder if using that's the same doesn't need set manually.
I am using a Vaadin 10 (Flow) Grid to stream data to new rows, and I am trying to add a custom image icon to my TemplateRenderer.
I have a TemplateRenderer setup like this:
TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
of("<div class$=\"[[item.class]]\">[[item.size]]</div>")
.withProperty("class", cssClassProvider)
.withProperty("size", TradeUni::getSize);
Which displays my numbers correctly in the grid cell like this:
I would like to have my image rendered inside the same cell, to the left of the numbers.
This was my (very crude) attempt to import it using html:
TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
of("<div class$=\"[[item.class]]\"><img src=\"i.imgur.com/3LQBglR.png\">[[item.size]]</div>")
.withProperty("class", cssClassProvider)
.withProperty("size", TradeUni::getSize);
Which give's me this:
I think that I might have to wrap the image and numbers into a HorizontalLayout with the image being a separate component - I think I could handle that, but I am unsure of how to do the actual rendering of the image. I can probably accomplish it simply with the internal Vaadin Icons set, but I need to use my own little images.. all icons that I am going to use will be at or less than 25 x 25px.
Thank you so much in advance!
I think you're on the right track, but there's one small detail that causes you trouble. The URL i.imgur.com/3LQBglR.png doesn't define a protocol, which means that the entire string will be treated as a path relative to the location of the hosting page. It will thus try to find a file in a directory named i.imgur.com on your own server.
To fix this, you need to also include the protocol in the image URL, i.e. https://i.imgur.com/3LQBglR.png.
I can also offer a small suggestion for how to make the code easier to read. HTML also supports using ' for enclosing attribute values. This is more convenient to use from Java string since you don't need to use \ to escape ' characters. Your template string could thus be "<div class$='[[item.class]]'><img src='https://i.imgur.com/3LQBglR.png'>[[item.size]]</div>".
I want to edit the css of an embedded image dynamically and using push, the intention is to build a web browser game and I don't want a 'tool explosion', I'm using Hibernate+JPA, Vaadin, ivy and a tool for server-push.
I don't want to use GWT, partly because the only part of it that I want is the canvas drawing, which seems to be really overkill, GWT is massive and I don't want to learn it at this stage simply so I can draw 2D pictures and move them around smoothly.
Here's how I'm loading an image.
Embedded embedded_1;
....
embedded_1.setSource(new FileResource(
new File(VaadinService.getCurrent().getBaseDirectory().getAbsolutePath()
+"/WEB-INF/images/sun.gif")));
....
mainLayout = new AbsoluteLayout();
mainLayout.addComponent(embedded_1, "top:0.0px;left:0.0px:");
Inside Absolute layout there's a field I want to access.
LinkedHashMap<Component, ComponentPosition> componentToCoordinates ...
I looked at the other methods that get called when I do
mainLayout.addComponent(embedded_1, "top:0.0px;left:0.0px:");
and they don't do anything special, (ie access non-java files or use any dynamically generated code), there's a method that cleans up and validates the CSS, its wrapped into a ComponentPosition object and then it is put unceremoniously into the HashMap.
Why can't I access this HashMap and do edits on the values already mapped by a key without changing the key itself. I want to take an embedded object and change it's css position dynamically, to do that all I would need to do is execute code
componentToCoordinates.get(reference).setString("top:10.0px;left:0.0px;");
and I could generate the string dynamically etc.
Is there a 'proper' way of doing this or is it something I have to create my own solution for?
I found what I was looking for though it wasn't in the form I expected.
There's a method in the layout API called getPosition(Component c) that will return the css string.
You can then change the string and put it back into the Map using setPosition(Component c ComponentPosition cp)
I have an app that I want to have an ImageView element in the FXML file display either an image, or a blank section dependant on user input. I was thinking either to somehow surround the FXML imageview element in an if/else block, or to pass either the image filepath, but both of these feel "off" (the former adding back end loging to front end code, the latter having no image path if set to not display and having to handle that somehow).
Would anyone know of a better way to perform an operation like what I'm describing above?
control are initialized in fxml are static, so it not possible to be created imageview directly...
you can use another way i think its work...
1.take a anchor pane,vbox,hbox etc any container.
2.and set image on runtime in this container.
3.like example below.
AnchorPane pne = new AnchorPane();
if(flag==1)
pne.getChildren.add(new ImageView(new Image(getClass().getResourceAsStream("image.png"))));
To be a little more specific:
I've built a simple multithreaded TCPServer (Java) which communicates with clients (C# / mono). On request the Clients take a screenshot and send it to the Server.
The screenshots are then displayed in a JTable. I'd like to add a tooltip to these images in the table with the same image but in another size.
The code currently looks like this:
screenLabel.setToolTipText("<html><img src=\"" + (new ImageIcon(image)) + "\"></img> Tooltip</html>");
Of course, this won't work, as the src attribute requires a path.
The problem is, I don't know how to circumvent this behaviour.
My question would hence either be:
1) How to retrieve a valid path for a temporary resource (without saving the resource in the file-system)
OR
2) How to provide a custom JTooltip which easily allows Images/ImageIcons to be displayed
It is possible to add a new protocol besides the standard ftp/http/etc to the URL resolving which then maps into your own code instead of over the network.
There is three approaches listed at http://www.unicon.net/node/776, which may help you getting started. I was thinking of extending URLStreamHandler and registering it with the JVM.
Regarding changing JToolTip, from http://www.manning-sandbox.com/message.jspa?messageID=9915
"Remember JToolTip is a container, so ,
subclass JToolTip to have a JTextArea/Pane fill it . Set the JTA/JTP as
uneditable and voila you have a multiline tooltip! Similarly you can display
any custom component you want! "
For option 2 you need to:
a) create a custom tooltip
b) override the table to use the tooltip.
This posting provides a simple working example.