Help to view a gallery of images

Support
#1

Hello, I know this has little to do with Cuba, but as I view a gallery of images already stored in the system.
I followed the example to upload multiple images, but now I need to show those images already stored.
Any ideas?
In the documentation I can only see one at a time.
From already thank you very much for your contributions.

Nelson F

3 Likes
#2

Same Question Here :wink:

#3

Hi,

you can add simple gallery preview using ScrollBoxLayout and FlowBoxLayout:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="msg://caption"
        class="com.company.demo.web.screens.Gallery"
        messagesPack="com.company.demo.web.screens">
    <layout expand="scrollBox" spacing="true">
        <multiUpload id="multiUpload"/>

        <scrollBox id="scrollBox">
            <flowBox id="thumbnailsBox" spacing="true" width="100%">

            </flowBox>
        </scrollBox>
    </layout>
</window>

So, I can add programmatically created Embedded after file queue upload complete:


multiUpload.addQueueUploadCompleteListener(() -> {
    for (Map.Entry<UUID, String> entry : multiUpload.getUploadsMap().entrySet()) {
        UUID fileId = entry.getKey();
        String fileName = entry.getValue();
        FileDescriptor fd = fileUploadingAPI.getFileDescriptor(fileId, fileName);
        // save file to FileStorage
        try {
            fileUploadingAPI.putFileIntoStorage(fileId, fd);
        } catch (FileStorageException e) {
            new RuntimeException("Error saving file to FileStorage", e);
        }
        // save file descriptor to database
        FileDescriptor committedFd = dataSupplier.commit(fd);

        addThumbnail(committedFd);
    }
    multiUpload.clearUploads();
});

Code of addThumbnail method uses ComponentsFactory:


private void addThumbnail(FileDescriptor fd) {
    Embedded embedded = componentsFactory.createComponent(Embedded.class);
    embedded.setSource("thumbnail-" + fd.getId(), new FileDataProvider(fd));
    embedded.setType(Embedded.Type.IMAGE);
    embedded.setWidth("300px");
    embedded.setHeight("200px");

    thumbnailsBox.add(embedded);
}

In this example adjusting size of thumbnails is out of CUBA scope and you can use image processing libraries for Java to create thumbnails after file uploading.

I’ve attached sample project with this code, so you can try it in action.

gallery.zip (23.7K)

#4

Good sample, but you can’t select some one and delete that one like normal

ListComponent

or

TokenList

, e.g. we’d like to create a attachments gallery with filename/image thumbnails.

#5

Hello

Regarding this topic and sample I just repeat the last question witch was left unanswered.
Is there any way to select among the images in the gallery?

I know embedded component is not selectable. So, how to do it?
Really need a thing like that.

#6

Hi,

I suppose you can dynamically include the embedded component into a container dynamically, this way:

HBoxLayout hBoxLayout = componentsFactory.createComponent(HBoxLayout.class);
hBoxLayout.add(embedded);

. Within that component you can also include other components in the same way, like checkboxes for example, which the user can click to select the thumbnails.

#7

Hi Tudor

That’s a great idea. I have already some good examples of the componentsFactory works so I should have generalized.
Guess Cuba and you guys are making me lazy.

Thank you very much