How can we put text and image on other image?

hello all,

i want to add text and link (button or image) on a image.

how can i do this ?

please help me …

i am also attaching a template that will show what exactly i want. (184 KB)


Have a look at Vaadin’s CSSLayout and CustomLayout. With these you can organize ui controls the way you like - i.e. position text / link above image.


hi Tomas

Thanks for your suggestion .

But can you please give me some code for putting text and image on an image…

One way to do it (always looking for such small assignments to hone my Vaadin skills… :-)):

      AbsoluteLayout al = new AbsoluteLayout();
      al.setWidth( "64px" );
      al.setHeight( "64px" );
      Embedded em = new Embedded( "", new ThemeResource( "../runo/icons/64/globe.png" ) );
      al.addComponent( em );
      al.addComponent( new Label( "Globe" ), "top: 36px; left: 18px;" );
      Link lnk = new Link( "", new ExternalResource( "" ) );
      lnk.setIcon( new ThemeResource( "../runo/icons/16/user.png" ) );
      al.addComponent( lnk, "top: 16px; left: 24px;" );

It shows a 64x64 globe with a text and an image link on it.

Thank you so much Phillipe
for such a nice cooperation.

But what if we do not want to use absolute layout.

is there any other way to do the same thing?

How about: ?

What is wrong with absolute layout when used only on a local panel? Actually, the AbsoluteLayout was used as a panel, added with addComponent() inside a regular, flexible layout.
This layout is a fine answer to your question, allowing precise relative positioning of some items over a bigger one.

As an image editor ,I often add watermark ( text/ image) to other images with my work .An

image edtior

freeware can meet my needs.For your question ,you may need some tutorails regarding

image watermark generating

with Vaadin, Hope some experts will give some advice.

hi ,all

thx post is really helpful with my project .I succeed organising ui control with Vaadin’s CSSLayout and CustomLayout.
what’s more, it has improved my Vaadin skills.

I am working on a project where I should Drag text from Text Area and Drop that text onto an Image. I am getting the image coordinates but i am not able to paste the dragged text onto the image… any help is appreciated. The below is my code

{ // The panel will give it scrollbars. final Panel panel = new Panel(“Image”); panel.setWidth(70,Unit.PERCENTAGE); panel.setHeight(80, Unit.PERCENTAGE); panel.setContent(image); final DragAndDropWrapper dndWrapper = new DragAndDropWrapper(panel); dndWrapper.setDropHandler(new DropHandler() { public void drop(DragAndDropEvent event) { //Do whatever you want when something is dropped System.out.println(“Do whatever you want when something is dropped”); //final Transferable transferable = event.getTransferable(); //final Component sourceComponent = transferable.getSourceComponent(); final DragAndDropWrapper.WrapperTransferable tr = (DragAndDropWrapper.WrapperTransferable) event .getTransferable(); System.out.println(“data is—”+tr.getText()); final TargetDetails dropTargetData = event.getTargetDetails(); System.out.println("droptargetcenter data is "+dropTargetData.getData(“horizontalLocation”)); final DropTarget target = dropTargetData.getTarget(); System.out.println("dropTarget data is "+target); DragAndDropWrapper.WrapperTargetDetails details = (DragAndDropWrapper.WrapperTargetDetails) event.getTargetDetails(); // Calculate the drag coordinate difference int xChange = details.getMouseEvent().getClientX(); //- t.getMouseDownEvent().getClientX(); int yChange = details.getMouseEvent().getClientY(); //- t.getMouseDownEvent().getClientY(); System.out.println(“About to drop text”); System.out.println("details getVerticalDropLocation "+details.getVerticalDropLocation()); System.out.println("details getHorizontalDropLocation "+details.getHorizontalDropLocation()); //final Circle circle = new Circle(0, 0, 10); // canvas.add(circle); // canvas.addMouseMoveHandler(new MouseMoveHandler() { // public void onMouseMove(MouseMoveEvent event) { // circle.setX(event.getX()); // circle.setY(event.getY()); // } // }); Label label = new Label(tr.getText()); panel.setContent(label); System.out.println("Xchange is "+xChange); System.out.println("Ychange is "+yChange); } //Criterio de aceptacion public AcceptCriterion getAcceptCriterion() { System.out.println(“Inside criterion accept”); return AcceptAll.get(); } }); // Show exactly the currently contained rows (items) return dndWrapper; }