Index: src/org/vaadin/peter/imagestrip/ImageStrip.java =================================================================== --- src/org/vaadin/peter/imagestrip/ImageStrip.java (revision 18823) +++ src/org/vaadin/peter/imagestrip/ImageStrip.java (working copy) @@ -11,6 +11,7 @@ import org.vaadin.peter.imagestrip.client.ui.VImageStrip; +import com.vaadin.terminal.ApplicationResource; import com.vaadin.terminal.ExternalResource; import com.vaadin.terminal.FileResource; import com.vaadin.terminal.PaintException; @@ -69,6 +70,7 @@ private final int width; private final int height; + private String label; private Image(int imageIndex, Resource resource, int width, int height) { this.imageIndex = imageIndex; @@ -92,6 +94,14 @@ public int getHeight() { return height; } + + public String getLabel() { + return label; + } + + public void setLabel(String label) { + this.label = label; + } } /** @@ -193,6 +203,16 @@ private boolean clear; /** + * Show labels below the images + */ + private boolean showImageLabel; + + /** + * Show image index (1-based) overlayed on the top left of the image + */ + private boolean showImageIndex; + + /** * Is strip selectable */ @@ -280,6 +300,7 @@ target.addAttribute("selectable", selectable); target.addAttribute("removeAll", clear); target.addAttribute("direction", direction); + target.addAttribute("showImageIndex", showImageIndex); // Images to transfer if (imagesToTransfer.size() > 0) { @@ -288,9 +309,13 @@ for (Image image : imagesToTransfer) { target.startTag("image"); target.addAttribute("resource", image.getResource()); - target.addAttribute("index", image.getImageIndex()); + target.addAttribute("index", image.getImageIndex() + 1); target.addAttribute("width", image.getWidth()); target.addAttribute("height", image.getHeight()); + String label = image.getLabel(); + if (showImageLabel && label != null) { + target.addAttribute("label", label); + } target.endTag("image"); } target.endTag("images"); @@ -324,7 +349,7 @@ } @Override - public void changeVariables(Object source, Map variables) { + public void changeVariables(Object source, Map variables) { super.changeVariables(source, variables); // On client resize @@ -332,7 +357,7 @@ maxFitting = Integer.parseInt(variables.get("numOfImages") .toString()); - System.out.println(maxFitting); + //System.out.println(maxFitting); direction = 0; sendImages(cursor); } @@ -451,12 +476,32 @@ public boolean isAnimated() { return animated; } + + public boolean isShowImageLabel() { + return showImageLabel; + } + public void setShowImageLabel(boolean showImageLabel) { + this.showImageLabel = showImageLabel; + ImageTools.clearCache(); // Showing label means less height in the image box for the image, so need to resize again + requestRepaint(); + } + + public boolean isShowImageIndex() { + return showImageIndex; + } + + public void setShowImageIndex(boolean showImageIndex) { + this.showImageIndex = showImageIndex; + requestRepaint(); + } + @Override - public Class getType() { + public Class getType() { return Image.class; } + /** * Scroll imagestrip to left by one image */ @@ -505,7 +550,7 @@ /** * - * @param maxHeight + * @param maxHeight * @throws IllegalArgumentException * if given maxHeight is greater than the height of imageBox */ @@ -582,12 +627,18 @@ File imageFile = null; - if (resource instanceof FileResource) { + int maxWidth = imageMaxWidth; + int maxHeight = imageMaxHeight; + if (showImageLabel) { + maxHeight -= 15; + } + + if (resource instanceof ApplicationResource) { FileResource fResource = (FileResource) resource; try { imageFile = ImageTools.resizeImage(fResource.getSourceFile(), - imageMaxWidth, imageMaxHeight); + maxWidth, maxHeight); FileResource scaledImage = new FileResource(imageFile, getApplication()); @@ -606,7 +657,7 @@ try { imageFile = ImageTools.resizeImage(eResource.getURL(), - imageMaxWidth, imageMaxHeight); + maxWidth, maxHeight); FileResource scaledImage = new FileResource(imageFile, getApplication()); Index: src/org/vaadin/peter/imagestrip/ImagestripTester.java =================================================================== --- src/org/vaadin/peter/imagestrip/ImagestripTester.java (revision 18823) +++ src/org/vaadin/peter/imagestrip/ImagestripTester.java (working copy) @@ -31,9 +31,7 @@ setMainWindow(mainWindow); - mainWindow - .addComponent(new Label( - "Photos by Teemu Pöntelin, http://www.flickr.com/photos/tehapo/")); + mainWindow.addComponent(new Label("Photos by Teemu Pöntelin, http://www.flickr.com/photos/tehapo/")); // Create new horizontally aligned strip of images strip = new ImageStrip(); @@ -48,6 +46,12 @@ // Make strip to behave like select strip.setSelectable(true); + // Show order number + strip.setShowImageIndex(true); + + // Show labels + strip.setShowImageLabel(true); + // Set size of the box surrounding the images strip.setImageBoxWidth(140); strip.setImageBoxHeight(140); @@ -63,12 +67,15 @@ // strip.setMaxAllowed(4); // Add few images to the strip using different methods - strip + ImageStrip.Image image1 = strip .addImage("http://farm3.static.flickr.com/2568/3803593137_c16255b885.jpg"); - strip + image1.setLabel("Label 1"); + ImageStrip.Image image2 = strip .addImage("http://farm3.static.flickr.com/2429/3937575891_11755d5f38.jpg"); - strip + image2.setLabel("Very very very very long label"); + ImageStrip.Image image3 = strip .addImage("http://farm3.static.flickr.com/2601/3758117565_ed8a4098b2.jpg"); + image3.setLabel("Label for portrait image"); strip .addImage("http://farm4.static.flickr.com/3371/3473570436_11a8b8f324.jpg"); strip Index: src/org/vaadin/peter/imagestrip/client/ui/VStripItem.java =================================================================== --- src/org/vaadin/peter/imagestrip/client/ui/VStripItem.java (revision 18823) +++ src/org/vaadin/peter/imagestrip/client/ui/VStripItem.java (working copy) @@ -3,7 +3,9 @@ import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.HasHorizontalAlignment; import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.Label; /** * VStripItem is an image inside the VStrip @@ -32,11 +34,12 @@ private final VImage image; private final Image imageElement; + private Label labelElement; + private Label indexElement; private final VStrip strip; - private VStripItem(String alignment, int width, int height, - final VImage image, final VStrip strip) { + private VStripItem(String alignment, int width, int height, final VImage image, final VStrip strip) { sinkEvents(Event.ONCLICK); @@ -50,8 +53,21 @@ imageElement = new Image(); imageElement.setStyleName("image"); imageElement.setUrl(image.getURL()); + add(imageElement); + + if (image.getLabel() != null) { + labelElement = new Label(image.getLabel()); + labelElement.setStyleName("label"); + labelElement.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); + add(labelElement); + } - add(imageElement); + if (image.isShowImageIndex()) { + indexElement = new Label(String.valueOf(image.getImageIndex())); + indexElement.setStyleName("index"); + add(indexElement); + } + centerImage(); DOM.setStyleAttribute(getElement(), "width", width + "px"); @@ -184,10 +200,21 @@ public void centerImage() { int imageX = (width - image.getWidth()) / 2; - int imageY = (height - image.getHeight()) / 2; + int imageY = (height - image.getHeight()) / 4; // 1/4 of the margin on the top and 3/4 on the bottom, to have more room for an optional label DOM.setStyleAttribute(imageElement.getElement(), "left", imageX + "px"); DOM.setStyleAttribute(imageElement.getElement(), "top", imageY + "px"); + + if (labelElement != null) { + DOM.setStyleAttribute(labelElement.getElement(), "top", (imageY + image.getHeight() + 8) + "px"); + DOM.setStyleAttribute(labelElement.getElement(), "left", "0px"); + DOM.setStyleAttribute(labelElement.getElement(), "width", width + "px"); + } + + if (indexElement != null) { + DOM.setStyleAttribute(indexElement.getElement(), "left", imageX + "px"); + DOM.setStyleAttribute(indexElement.getElement(), "top", imageY + "px"); + } } public int getImageIndex() { Index: src/org/vaadin/peter/imagestrip/client/ui/VStrip.java =================================================================== --- src/org/vaadin/peter/imagestrip/client/ui/VStrip.java (revision 18823) +++ src/org/vaadin/peter/imagestrip/client/ui/VStrip.java (working copy) @@ -21,6 +21,8 @@ public final static int IMAGE_MARGIN = 10; + public final static int IMAGE_CAPTION_MARGIN = 20; + private final VImageStrip parent; private final List visibleItems; @@ -305,7 +307,7 @@ } else { return (visibleItems.size() - 2) * (parent.getImageBoxHeight() + IMAGE_MARGIN) - + IMAGE_MARGIN; + + IMAGE_MARGIN + IMAGE_CAPTION_MARGIN; } } else { return parent.getOffsetHeight(); Index: src/org/vaadin/peter/imagestrip/client/ui/VImage.java =================================================================== --- src/org/vaadin/peter/imagestrip/client/ui/VImage.java (revision 18823) +++ src/org/vaadin/peter/imagestrip/client/ui/VImage.java (working copy) @@ -8,14 +8,22 @@ private final int width; private final int height; - public VImage(int imageIndex, String url, int width, int height) { + private final String label; + + private boolean showImageIndex; + + + public VImage(int imageIndex, String url, int width, int height, String label, boolean showImageIndex) { this.imageIndex = imageIndex; this.url = url; this.width = width; this.height = height; + this.label = label; + this.showImageIndex = showImageIndex; } - public int getImageIndex() { + +public int getImageIndex() { return imageIndex; } @@ -30,4 +38,14 @@ public int getHeight() { return height; } + + public String getLabel() { + return label; + } + + public boolean isShowImageIndex() { + return showImageIndex; + } + + } Index: src/org/vaadin/peter/imagestrip/client/ui/VImageStrip.java =================================================================== --- src/org/vaadin/peter/imagestrip/client/ui/VImageStrip.java (revision 18823) +++ src/org/vaadin/peter/imagestrip/client/ui/VImageStrip.java (working copy) @@ -48,6 +48,8 @@ private int selectedImage; private int lastNumberOfImages; + private boolean showImageIndex; + public VImageStrip() { setStyleName(CLASS_NAME); @@ -81,6 +83,7 @@ selectable = uidl.getBooleanAttribute("selectable"); strip.setSelectable(selectable); selectedImage = uidl.getIntAttribute("selectedImage"); + showImageIndex = uidl.getBooleanAttribute("showImageIndex"); List imagesToShow = new LinkedList(); @@ -103,12 +106,11 @@ UIDL imageUIDL = (UIDL) imageIterator.next(); int index = imageUIDL.getIntAttribute("index"); - String url = connection.translateVaadinUri(imageUIDL - .getStringAttribute("resource")); + String url = connection.translateVaadinUri(imageUIDL.getStringAttribute("resource")); int width = imageUIDL.getIntAttribute("width"); int height = imageUIDL.getIntAttribute("height"); - - VImage image = new VImage(index, url, width, height); + String label = imageUIDL.getStringAttribute("label"); + VImage image = new VImage(index, url, width, height, label, showImageIndex); imagesToShow.add(image); } Index: src/org/vaadin/peter/imagestrip/public/imagestrip-widget/styles.css =================================================================== --- src/org/vaadin/peter/imagestrip/public/imagestrip-widget/styles.css (revision 18823) +++ src/org/vaadin/peter/imagestrip/public/imagestrip-widget/styles.css (working copy) @@ -69,6 +69,24 @@ left: 0px; } +.v-imagestrip .image-border .label { + position: absolute; +} + +.v-imagestrip .image-border .index { + position: absolute; + margin: 4px; + padding-left: 4px; + padding-right: 4px; + background-color: #000000; + color: #ffffff; + height: 15px; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + font-weight: bold; +} + .v-imagestrip .horizontal { margin-left: 10px; } @@ -100,4 +118,5 @@ .v-imagestrip .down { bottom: 0px; background: url('img/arrow_down.png') no-repeat transparent; -} \ No newline at end of file +} +