Can i insert an image inside the Dialog.show in codename One

Question

Can i insert an image inside the Dialog.show in codename One if yes can someone provide an example please this is what i came up with:

  img.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent evt) {
                    Dialog.show("Image:", images(value.toString()), new Command("Cancel"));
                }
            });

   public ImageViewer images(String id) {
    int id2 = Integer.parseInt(id);
    String img = ServiceTask.getInstance().ReturnImage(id2);
    Image placeholder = Image.createImage(getWidth() / 3 - 4, getWidth() / 3 - 4, 0xbfc9d2);
    EncodedImage encImage = EncodedImage.createFromImage(placeholder, false);
    ImageViewer img1 = new ImageViewer(URLImage.createToStorage(encImage, "file" + img,
            "http://localhost/projectname/web/images/" + img));

    return img1;
}

Answer 1

In your code, you used an ImageViewer : I'm not sure if it's suitable inside a Dialog . However be careful: ImageViewer and URLImage are not suitable to be used together if you want a photo at maximum resolution, because URLImage always resizes images.

Let's start with a simple example of Dialog showing an image:

Form hi = new Form("Hi World", BoxLayout.y());
        Button btn = new Button("Tap me to show Dialog");
        hi.add(btn);
        hi.show();

        btn.addActionListener(l -> {
            Dialog dialog = new Dialog("Example", BoxLayout.y());
            dialog.add(new SpanLabel("Example of Dialog including an image"));
            dialog.add(new Label(FontImage.createMaterial(FontImage.MATERIAL_RADIO, "Label", 7.0f)));
            dialog.setDisposeWhenPointerOutOfBounds(true);
            dialog.show();
        });

Result:

If you need URLImage , like in your code, you can use that:

Form hi = new Form("Hi World", BoxLayout.y());
        Button btn = new Button("Tap me to show Dialog");
        hi.add(btn);
        hi.show();

        btn.addActionListener(l -> {
            Dialog dialog = new Dialog("Example", BoxLayout.y());
            dialog.add(new SpanLabel("Example of Dialog including an image"));
            EncodedImage placeholder = EncodedImage.createFromImage(Image.createImage(CN.convertToPixels(30), CN.convertToPixels(30), 0x00ffffff), true);
            URLImage meditationIcon = URLImage.createToStorage(placeholder, "gnu_meditation_levitation_small.png",
                    "https://www.informatica-libera.net/immagini/gnu_meditation_levitation_small.png", URLImage.RESIZE_SCALE_TO_FILL);
            meditationIcon.fetch();
            dialog.add(FlowLayout.encloseCenter(new Label(meditationIcon)));
            dialog.setDisposeWhenPointerOutOfBounds(true);
            dialog.show();
        });

Result:

However, in my opinion, when the Dialog is shown the image should be immediately shown, so URLImage is not a good option in this case. In a similar case, I prefer to predownload the image, like in the following code. The result is the same but the image was already downloaded when the Dialog is shown (otherwise it's not shown):

Form hi = new Form("Hi World", BoxLayout.y());
        Button btn = new Button("Tap me to show Dialog");
        hi.add(btn);
        hi.show();

        AsyncResource<Image> myImage = Util.downloadImageToStorage("https://www.informatica-libera.net/immagini/gnu_meditation_levitation_small.png", "myImage.png");

        btn.addActionListener(l -> {
            Dialog dialog = new Dialog("Example", BoxLayout.y());
            dialog.add(new SpanLabel("Example of Dialog including an image"));
            try {
                // Very small timeout (10 ms), if the Image wasn't pre-downloaded it will not be shown
                dialog.add(FlowLayout.encloseCenter(new Label(myImage.get(10).scaledWidth(CN.convertToPixels(30)))));
            } catch (InterruptedException ex) {
                Log.e(ex);
            }
            dialog.setDisposeWhenPointerOutOfBounds(true);
            dialog.show();
        });

You can also add "Cancel" button, like in your code:

        Form hi = new Form("Hi World", BoxLayout.y());
        Button btn = new Button("Tap me to show Dialog");
        hi.add(btn);
        hi.show();

        AsyncResource<Image> myImage = Util.downloadImageToStorage("https://www.informatica-libera.net/immagini/gnu_meditation_levitation_small.png", "myImage.png");

        btn.addActionListener(l -> {
            Dialog dialog = new Dialog("Example", BoxLayout.y());
            dialog.add(new SpanLabel("Example of Dialog including an image"));
            try {
                // Very small timeout (10 ms), if the Image wasn't pre-downloaded it will not be shown
                dialog.add(FlowLayout.encloseCenter(new Label(myImage.get(10).scaledWidth(CN.convertToPixels(30)))));
            } catch (InterruptedException ex) {
                Log.e(ex);
            }
            Button cancel = new Button("Cancel");
            cancel.addActionListener(ll -> dialog.dispose());
            dialog.add(cancel);
            dialog.show();
        });

You can style your Dialog as you prefer, CSS are a good option.