InteractionDialog with BrowserComponent not working

[P5music]

I had to change the user experience of one form in my app because I couldn't have both a TextArea and a BrowserComponent to have the "fill parent" behaviour.

I decided to display the webview in an alert dialog.

The width of the webview has to be as large as the lesser dimension of  screen, that is passed as the width parameter, for example the skin I am testing onto has 1534 (it is the height in landscape mode).

Also the height of the dialog is calculated to be as large as to display a button and the webview.

But I get the tiny dialog that can be seen in the attached image.

How can this be fixed sticking with InteractionDialog?

Notice that the rectangle has right dimensions, as expected to be in the user interface:

x = 983 y = 729 size = width = 1534 height = 104 (debug values)

but the dialog does not spread.

In the code below there are some utility methods that work seamlessly with other dialogs, to set the correct appearance. Just this dialog is not working.

Thanks in advance

public static void testWebViewAlertDialog( String s1, String s2,int width)
{
InteractionDialog alertDialog=new InteractionDialog(s1);
Button okButton=new Button(R.okCommand);
alertDialog.setLayout(BoxLayout.y());
Container c1=new Container();
c1.setLayout(BoxLayout.y());

okButton.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent evt) {
alertDialog.dispose();
}
});
c1.setLayout(new BorderLayout());



BrowserComponent testWebView=new BrowserComponent();


testWebView.addWebEventListener("onLoad", new ActionListener() {
@Override
public void actionPerformed(ActionEvent evt) {
System.out.println("onload test");


c1.add(BorderLayout.SOUTH,okButton);
alertDialog.add(c1);
Rectangle rect = getRect(c1);
c1.add(BorderLayout.CENTER,testWebView);
if (width>rect.getWidth()) rect.setWidth(width);
rect.setHeight(rect.getHeight()+testWebView.getPreferredSize().getHeight());
alertDialog.showPopupDialog(rect);
}});
testWebView.setPage(s2,"");


}

[Shai Almog]

Are you placing a BrowserComponent in an interaction dialog?

That's no a great idea.

BrowserComponent doesn't know its size since it didn't load the HTML yet and does it asynchronously. You need to determine the size for it not the other way around.

[P5music]

As I said the measurement is OK, that is, I have the right dimensions. Also in the debugging I see the correct values, but it is the InteractionDialog that does not resize accordingly. Can you check my code as to the size change of the InteractionDialog? All is done after the page loading, so it is why the measurements are right but it does not resize.

Thanks

[Shai Almog]

Place a breakpoint in the method and look at the preferred size of the preferred size of the dialog before you show it. I'm guessing it will be small.

Showing a browser component in a dialog isn't a use case we ever intended so I doubt this will work.

[P5music]

Use cases won't work if components do strange things.

I had to use the showPopupDialog(rect) method because the InteractionDialog is not able to show itself with the right size. Ok.

Now it seems that it will stick to its preferred size whatever value I poke into it, and by the way that value is also wrong because it appears in a center-right-ish position.

[Shai Almog]

What's pocking a value into the preferred size?

[P5music]

No, I meant I set the rectangle, so it has to overwrite any preferred size.

That InteractionDialog seemed to be missing dimensions and coordinates until I set them with the showPopupDialog(rect) method.

But

when I set them, it refuses to adopt that dimensions 

because it turns up having a strong preferred size it wants to stick to.

Regards

[Shai Almog]

Which rectangle?

How?

[P5music]

I mean the rectangle that the showPopupDialog  method  wants as a parameter.

That method simply does not work with certain values, like for example:

x = 1024 y = 767 size = width = 1534 height = 27

?

Notice that this applies to both InteractionDialogs and Dialogs, with or without a BrowserComponent inside.

Even in this simple Dialog it does not work when I want to enlarge it horizontally.

//this method yields a centered rectangle

private static Rectangle getRect(Container c)
{
Rectangle r=new Rectangle();
Dimension d=new Dimension();
int w=Display.getInstance().getDisplayWidth();
int h=Display.getInstance().getDisplayHeight();

d.setWidth(c.getWidth());
d.setHeight(c.getHeight());
r.setWidth(c.getWidth());
r.setHeight(c.getHeight());
r.setX(w/2-d.getWidth()/2);
r.setY(h/2-d.getHeight()/2);
return r;
}

//this method opens the dialog
public static void testAlertDialog(String s1, String s2,int width)
{
Dialog alertDialog=new Dialog(s1);
alertDialog.setDisposeWhenPointerOutOfBounds(true);
Button okButton=new Button(okCommand);

alertDialog.setLayout(BoxLayout.y());
Container c1=new Container();
c1.setLayout(BoxLayout.y());

Command backCommand=new Command("Back") {

@Override
public void actionPerformed(ActionEvent evt) {

alertDialog.dispose();

}

};
alertDialog.setBackCommand(backCommand);

c1.add(okButton);

Rectangle rect = new Rectangle(getRect(c1));

if (width>rect.getWidth()) rect.setWidth(width);

alertDialog.setSize(new Dimension(rect.getWidth(),rect.getHeight()));

c1.setSize(new Dimension(rect.getWidth(),rect.getHeight()));

alertDialog.add(c1);
Rectangle dialogRect=getRect(c1);
alertDialog.showPopupDialog(dialogRect);
}

[Shai Almog]

You can't invoke setX/Y/Width/Height etc. in Codename One. It just won't work for you.

The layout manager and positioning logic overrides those values to position the windows in resolution neutral locations. This makes the code work seamlessly even if a device is rotated.

What matters for the size is the preferred size which is (sometimes) used to calculate the actual size.

[P5music]

Ok, forget the setSize instructions.

Now you can see that the code below calculate a reasonable rectangle. Debug values are x = 1024 y = 767 size = width = 1534 height = 27

Forget also the BrowserComponent. This applies also to when it is not in the layout, and also with BoxLayout instead of BorderLayout.

No matter if an InteractionDialog is used instead of a Dialog. 

I ensure you that the result is that tiny dialog you can see in the original attached image.

So why the dialog has not the right bounds?

public static void testWebViewAlertDialog(String s1, String s2,int width)

{
Dialog alertDialog=new Dialog(s1);
alertDialog.setDisposeWhenPointerOutOfBounds(true);
Button okButton=new Button(okCommand);

alertDialog.setLayout(BoxLayout.y());
Container c1=new Container();

Command backCommand=new Command("Back") {
@Override
public void actionPerformed(ActionEvent evt) {

alertDialog.dispose();

}
};
alertDialog.setBackCommand(backCommand);

c1.setLayout(new BorderLayout());
//c1.setLayout(BoxLayout.y());

BrowserComponent testWebView=new BrowserComponent();


testWebView.addWebEventListener("onLoad", new ActionListener() {
@Override
public void actionPerformed(ActionEvent evt) {

c1.add(BorderLayout.SOUTH,okButton);
//c1.add(okButton);


c1.add(BorderLayout.CENTER,testWebView);
//c1.add(testWebView);

Rectangle rect = new Rectangle(getRect(c1));
if (width>rect.getWidth()) rect.setWidth(width);

rect.setHeight(rect.getHeight()+testWebView.getPreferredSize().getHeight());

alertDialog.add(c1);

alertDialog.showPopupDialog(rect);  //x = 1024 y = 767 size = width = 1534 height = 27
}});
testWebView.setPage(s2,"");

}

[Shai Almog]

Again, the values you have there don't mean anything. The only value that matters is the preferred size of the container given to the dialog. At this stage the web browser has 0 size. You can use setPreferredSize instead of "setHeight" and see that works around the problem (badly).

[P5music]

I just can create another user experience. 

Now, you have all information about this malfunctioning, be it blamed to getPreferredSize(), setPreferredSize(), showDialog() or whatever. They do not work as expected.

Regards