Codename one Pointer Popup

Question

I would like to achieve the following popup right on the search text box. I tried everything possible and followed the code explained in codename one document

   Dialog d = new Dialog("Popup Title");
   TextArea popupBody = new TextArea("This is the body of the popup", 3, 10);
   popupBody.setUIID("PopupBody");
   popupBody.setEditable(false);
   d.setLayout(new BorderLayout());
   d.add(BorderLayout.CENTER, popupBody);
   d.showPopupDialog(showPopup);

This is the popup I want to achieve. Please advise. Thank you.

Answer 1

Assuming that showPopup is the TextField that you want to display the pointer popup for, then this looks correct.

However, in order to show the "pointer" you'll need to set up the styles in your theme to support this. You'll need to set the "PopupDialogArrowBool" to true in the theme constants, and provide images for Top, left, right, and bottom arrows, and add them to the theme constants as "PopupDialogArrowTopImage", "PopupDialogArrowLeftImage", "PopupDialogArrowRightImage", and "PopupDialogArrowBottomImage" constants respectively.

To ensure that your arrows match the popup dialog border/background, you should also customize/override the border of the PopupDialog style with a 9-piece image border that matches your arrow style.

We hope to make this sort of "pointer" popup easier to achieve in the future, but for now, this is the best way to achieve what you want.

Answer 2

It is possible to add the upwards (downward, sideward) pointing triangle with a simple trick.

I have created the triangle in a simple paint application and added it to a label. Then I added both the label and a textfield to a container, and the container to a dialog.

Here is the code:

Button buttonClose = new Button("  Close");
CheckBox checkBoxDialog = new CheckBox("Don't show anymore");
Container containerDialog = new Container(new BoxLayout(BoxLayout.Y_AXIS)); 
Dialog dialog = new Dialog();
Image imgageBackground = Image.createImage("/triangle.png");
Label label = new Label();
TextField textField = new TextField("Some text");

containerDialog.setUIID("ContainerDialog");

dialog.setDisposeWhenPointerOutOfBounds(false);

label.getAllStyles().setAlignment(Component.CENTER);
label.getAllStyles().setPadding(0, 0, 0, 0);
label.getAllStyles().setMargin(0, 0, 0, 0);
label.setIcon(imgageBackground);

containerDialog.
    add(label).
    add(textField).
    add(buttonClose).
    add(checkBoxDialog);

dialog.add(containerDialog);